Scrollmagic: design web distractiv

În proiectarea web, o tendință este ca stilul care a fost adoptat pentru realizarea site-urilor, care este puternic acceptat de utilizatori, de obicei în perioade temporare. O parte din tendințele de până acum în 2016 și, se pare, va continua să stabilească tonul în 2017, sunt animațiile și secțiunile lungi cu multă defilare.

Nu este un secret faptul că acest stil este destul de atractiv și distractiv pentru utilizator, cu animațiile pe care le putem face navigarea pe site intuitivă și distractivă, atât timp cât sunt bine utilizate. Din acest motiv, am creat un tutorial care să includă suluri animate pe site - ul dvs. web, folosind pluginul jQuery ScrollMagic.

ScrollMagic: Fun Web Design

ScrollMagic este o bibliotecă creată în javascript pentru a realiza interacțiuni la mutarea site-urilor web. Este o rescriere completă a predecesorului său Superscrollorama și arhitectura sa se bazează pe pluginuri care oferă personalizare ușoară și extensibilitate.

Este ideal dacă dorim să implementăm câteva dintre următoarele lucruri:

• Animație bazată pe poziția sau deplasarea site-ului. Declanșați animația sau sincronizați-o cu mișcarea defilării.Adăugați efect de paralax fără prea mult efort.

Caracteristici ScrollMagic

• Performanță optimizată, este ușoară, flexibilă și permite extensibilitate.Gestionarea evenimentelor și programarea orientată spre obiecte.supune designul web adaptiv.supune suport pentru mișcări în ambele direcții (orizontală și verticală) Are suport pentru mișcări în containere (div), chiar mai multe pe o singură pagină. Funcționează perfect pentru browsere: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. În depozitul său GitHub, are documentație detaliată și numeroase exemple de aplicații.

Obțineți ScrollMagic

Este disponibil pentru a obține în diverse moduri.

1: GitHub

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

2: Bower

bower instalează scrollmagic

3: manager pachet nod

npm instalați scrollmagic

4: CDN

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

De asemenea, puteți citi Cum să personalizați designul unui e-mail în Outlook

Instalare și utilizare

Instalarea este destul de simplă, includem doar fișierul kernel în fișierele html unde vrem să îl utilizăm.

;

Pentru utilizare, pluginul oferă un model de design orientat către controler, la care se adaugă una sau mai multe scene. Aceste scene sunt utilizate pentru a defini ce se întâmplă în containere atunci când se mută într-un anumit punct.

Acesta ar fi un exemplu de bază:

// init controller var controller = new ScrollMagic.Controller (); // creați o nouă scenă ScrollMagic.Scene ({durata: 100, // scena ar trebui să dureze o distanță de defilare de 100px offset: 50 // începeți această scenă după derularea pentru 50px}).setPin ("# my-sticky- element ") // pinii elementului pentru durata scenei.addTo (controller); // alocați scena controlerului

Un exemplu mai avansat ar fi, pentru a realiza mai multe compensări, codul sursă ar fi:

$ (function () {// așteptați documentul gata // init controller var controller = nou ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0, 5, {scale: 3, ușurință: Linear.easeNone}); // build scen var var scen = new ScrollMagic.Scene ({triggerElement: "#multiDirect", durata: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({nume: "redimensionați"}) // adăugați indicatori (necesită plugin).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal or tween_h = TweenMax.to ("# animate", 0, 5, {rotation: 360, ușurință: Linear.easeNone}); // build scen var var scene_h = new ScrollMagic.Scene ({durata: 700}).setTween (tween_h). setPin ("# animate").addIndicatori ({nume: "rotiți"}) // adăugați indicatori (necesită plugin).addTo (controller_h);});

Puteți găsi multe alte exemple cu codul sursă în documentația pluginului.

VĂ RECOMANDăm CUM să faceți o instalare curată a Windows 10 folosind un stick USB