Scrollmagic: zabavni web dizajn

U web dizajnu trend je poput stila koji je usvojen za realizaciju web lokacija koji su korisnici žestoko prihvaćeni, obično u privremenim razdobljima. Dio dosadašnjih trendova u 2016. i, čini se, nastavit će postavljati ton i u 2017. godini, animacije su i dugi odjeljci s puno pomicanja.

Nije tajna da je ovaj stil za korisnika prilično atraktivan i zabavan, a pomoću animacija pomoću kojih možemo kretati po web mjestu je intuitivno i zabavno pod uvjetom da se dobro koriste. Iz tog razloga smo napravili tutorial za uključivanje animiranih svitaka na vašu web stranicu pomoću jQuery ScrollMagic dodatka.

ScrollMagic: Zabavni web dizajn

ScrollMagic je knjižnica napravljena u JavaScriptu za postizanje interakcija pri premještanju web stranica. Potpuno je prepisivanje prethodnika Superscrollorama i njegova se arhitektura temelji na dodacima koji nude jednostavnu prilagodbu i proširivost.

Idealno je ako želimo implementirati neke od sljedećih stvari:

• Animacija na temelju položaja ili pomicanja web mjesta. Pokrenite animaciju ili je sinkronizirajte s kretanjem pomicanja. Dodajte efekt paralakse bez većeg napora. Stvorite stranicu s beskonačnim pomicanjem, obrađujući učitavanje sadržaja ajaxom.

ScrollMagic značajke

• Optimizirane performanse, lagan je, fleksibilan te omogućuje proširivost. Upravljanje događajima i objektno orijentirano programiranje. Podržava adaptivni web dizajn. Ima podršku za kretanja u oba smjera (vodoravno i okomito). Ima podršku za kretanja unutar spremnika (div), čak i više na jednoj stranici. Odlično radi za preglednike: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. U svom spremištu GitHub sadrži detaljnu dokumentaciju i mnogo primjera aplikacija.

Nabavite ScrollMagic

Možete ga dobiti na različite načine.

1: GitHub

git clone git: //github.com/janpaepke/ScrollMagic.git

2: Kuglač

bower instalirati scrollmagic

3: čvor upravitelj paketa

npm instaliraj scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Pročitajte i Kako prilagoditi dizajn e-pošte u programu Outlook

Instalacija i uporaba

Instalacija je prilično jednostavna, datoteku kernel uključujemo samo u html datoteke tamo gdje je želimo koristiti.

;

Za upotrebu dodatak nudi obrazac dizajna orijentiran na kontroler, kojem se dodaje jedna ili više scena. Ovi prizori koriste se za definiranje onoga što se događa u spremnicima kada se premjeste na određenu točku.

Ovo bi bio osnovni primjer:

// init kontroler var controller = novi ScrollMagic.Controller (); // stvorite novu scenu ScrollMagic.Scene ({trajanje: 100, // scena bi trebala trajati na pomicanju udaljenosti od 100 px: 50 // pokrenuti ovu scenu nakon pomicanja za 50px}).setPin ("# my-sticky- element ") // prikvači element za vrijeme trajanja scene.addTo (kontroler); // dodijeliti scenu kontroleru

Napredniji primjer bi bio, postići više odstupanja, njegov bi izvorni kod bio:

$ (function () {// pričekajte dokumenata spreman // init kontroler var controller = new ScrollMagic.Controller (); // izraditi tween var tween = TweenMax.to ("# animate", 0, 5, {ljestvica: 3, jednostavnost: Linear.easeNone}); // izgraditi scenu var scene = novi ScrollMagic.Scene ({okidačElement: "#multiDirect", trajanje: 400, pomak: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // dodavanje pokazatelja (zahtijeva dodatak).addTo (kontroler); // init regulator horizontalni var controller_h = novi ScrollMagic.Controller ({okomito: false}); // izgradnja između horizontalne var tween_h = TweenMax.to ("# animate", 0, 5, {rotacija: 360, jednostavnost: Linear.easeNone}); // izgraditi scenu var scene_h = novi ScrollMagic.Scene ({trajanje: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({ime: "rotiraj"}) // dodaj pokazatelje (zahtijeva dodatak).addTo (kontroler_h);});

Mnogo više primjera s njihovim izvornim kodom možete pronaći u dokumentaciji dodataka.

PREPORUČUJEMO VAM kako napraviti čistu instalaciju sustava Windows 10 pomoću USB stick-a