Scrollmagic: zabavno spletno oblikovanje

V spletnem oblikovanju je trend podoben slogu, ki je bil sprejet za realizacijo spletnih mest, ki ga uporabniki močno sprejemajo, običajno v začasnih obdobjih. Del dosedanjih trendov v letu 2016 in menda bo tudi v letu 2017 nastavil ton, so animacije in dolgi odseki z veliko drsenja.

Ni skrivnost, da je ta slog za uporabnika dokaj privlačen in zabaven, z animacijami, s katerimi lahko krmarjenje po spletnem mestu naredimo intuitivno in zabavno, dokler jih dobro uporabimo. Zaradi tega smo ustvarili vadnico za vključitev animiranih drsnikov na vaše spletno mesto s pomočjo vtičnika jQuery ScrollMagic.

ScrollMagic: Zabavno spletno oblikovanje

ScrollMagic je knjižnica, izdelana v JavaScript, za doseganje interakcij med premikanjem spletnih mest. Je popoln spis njegove predhodnice Superscrollorama, njegova arhitektura pa temelji na vtičnikih, ki ponujajo enostavno prilagajanje in razširitev.

Idealno je, če želimo izvesti nekaj naslednjih stvari:

• Animacija, ki temelji na položaju ali premiku spletnega mesta. Sprožite animacijo ali jo sinhronizirajte z gibanjem drsenja. Dodajte učinek paralakse brez večjega napora. Ustvarite stran z neskončnim drsenjem, ravnanje z nalaganjem vsebine z ajaxom.

Funkcije ScrollMagic

• Optimizirana zmogljivost je lahka, fleksibilna in omogoča razširljivost.Upravljanje dogodkov in objektno usmerjeno programiranje Podpira prilagodljivo spletno oblikovanje.Ima podporo premikom v obe smeri (vodoravno in navpično) Ima podporo za premike znotraj vsebnikov (div), celo več na eni strani. Odlično deluje za brskalnike: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. V svojem skladišču GitHub vsebuje podrobno dokumentacijo in veliko primerov aplikacij.

Pridobite ScrollMagic

Na voljo ga je mogoče na različne načine.

1: GitHub

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

2: Bower

bower namestite scrollmagic

3: upravitelj paketov vozlišč

npm namestite scrollmagic

4: CDN

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

Preberite si lahko tudi, kako prilagoditi zasnovo e-pošte v Outlooku

Namestitev in uporaba

Namestitev je precej preprosta, datoteko jedra vključimo samo v datoteke html, kjer jo želimo uporabiti.

;

Vtičnik za uporabo ponuja vzorec zasnove usmerjenega usmerjevalnika, ki mu je dodan en ali več prizorov. Ti prizori se uporabljajo za določitev, kaj se dogaja v posodah, ko se premaknejo na določeno točko.

To bi bil osnovni primer:

// init regulator var regulator = nov ScrollMagic.Controller (); // ustvarite prizorišče novega ScrollMagic.Scene ({trajanje: 100, // prizor naj traja odmik oddaljenosti 100 px: 50 // začnite ta prizor po pomikanju za 50px}).setPin ("# my-sticky- element ") // pripne element za čas trajanja scene.addTo (regulator); // dodelite prizor upravljavcu

Naprednejši primer bi bil doseganje več nadomestitev, njegova izvorna koda bi bila:

$ (funkcija () {// počakajte, da je dokument pripravljen // init regulator var regulator = nov ScrollMagic.Controller (); // zgraditi t između var tween = TweenMax.to ("# animate", 0, 5, {lestvica: 3, enostavnost: Linear.easeNone}); // sestaviti sceno var scene = nov ScrollMagic.Scene ({sprožitveElement: "#multiDirect", trajanje: 400, odmik: 250}).setTween (tween).setPin ("# animate"). addIndicators ({ime: "resize"}) // dodaj indikatorje (zahteva vtičnik).addTo (regulator); // init regulator horizontalni var controller_h = nov ScrollMagic.Controller ({vertikalno: napačno}); // zgraditi med vodoravnim var tween_h = TweenMax.to ("# animate", 0, 5, {vrtenje: 360, enostavnost: Linear.easeNone}); // sestaviti sceno var scene_h = nov ScrollMagic.Scene ({trajanje: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({ime: "zavrtite"}) // dodajte indikatorje (zahteva vtičnik).addTo (kontroler_h);});

V dokumentaciji vtičnikov najdete še veliko primerov z njihovo izvorno kodo.

PRIPOROČAMO VAS Kako narediti čisto namestitev sistema Windows 10 s pomočjo USB ključka