Scrollmagic: sjovt webdesign

I webdesign er en tendens som den stil, der er blevet vedtaget til realisering af de websteder, som er stærkt accepteret af brugere, normalt i midlertidige perioder. En del af tendenserne hidtil i 2016 og tilsyneladende vil fortsætte med at sætte tonen i 2017, er animationer og lange sektioner med en masse rulle.

Det er ikke en hemmelighed, at denne stil er ret attraktiv og sjov for brugeren med de animationer, vi kan gøre at navigere på stedet intuitivt og underholdende, så længe de er godt brugt. Af denne grund har vi oprettet en tutorial til at inkludere animerede ruller på dit websted ved hjælp af jQuery ScrollMagic- plugin.

ScrollMagic: Sjov webdesign

ScrollMagic er et bibliotek lavet i javascript for at opnå interaktioner, når du flytter websteder. Det er en komplet omskrivning af sin forgænger Superscrollorama, og dens arkitektur er baseret på plugins, der tilbyder let tilpasning og udvidbarhed.

Det er ideelt, hvis vi vil implementere nogle af følgende ting:

• Animation baseret på placering eller fortrængning af webstedet Udløs animationen eller synkroniser den med bevægelsen af ​​rullen Tilføj tilføjelse af parallax uden stor indsats Opret en side med uendelig rulle, der håndterer indholdsindlæsning med ajax.

ScrollMagic-funktioner

• Optimeret ydelse, det er let, fleksibelt og tillader udvidelse. Begivenhedsstyring og objektorienteret programmering. Det understøtter adaptiv webdesign. Det har støtte til bevægelser i begge retninger (vandret og lodret). Det har støtte til bevægelser inden i containere (div), endda flere på én side. Det fungerer perfekt til browsere: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. I sit GitHub- arkiv har den detaljeret dokumentation og mange applikationseksempler.

Få ScrollMagic

Det er tilgængeligt at få det på forskellige måder.

1: GitHub

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

2: Bower

bower install scrollmagic

3: node pakkehåndtering

npm installer scrollmagic

4: CDN

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

Du kan også læse Sådan tilpasser du designet til en e-mail i Outlook

Installation og brug

Installationen er ganske enkel, vi inkluderer kun kernefilen i html-filerne, hvor vi vil bruge den.

;

Til brug giver plugin et controllerorienteret designmønster, hvortil der tilføjes en eller flere scener. Disse scener bruges til at definere, hvad der sker i containerne, når de flytter til et specifikt punkt.

Dette ville være et grundlæggende eksempel:

// init controller var controller = ny ScrollMagic.Controller (); // oprette en ny scene ScrollMagic.Scene ({varighed: 100, // scenen skal vare i en rulleafstand på 100px forskydning: 50 // start denne scene efter rulning i 50px}).setPin ("# my-sticky- element ") // fastgør elementet til scenens varighed. addTo (controller); // tildele scenen til controlleren

Et mere avanceret eksempel ville være at opnå flere forskydninger, dens kildekode ville være:

$ (funktion () {// vent på dokument klar // init controller var controller = ny ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animat", 0.5, {skala: 3, let: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", varighed: 400, offset: 250}).setTween (tween).setPin ("# animat"). addIndicators ({name: "resize"}) // tilføje indikatorer (kræver plugin).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal var tween_h = TweenMax.to ("# animeret", 0, 5, {rotation: 360, let: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({varighed: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({navn: "roter"}) // tilføj indikatorer (kræver plugin).addTo (controller_h);});

Du kan finde mange flere eksempler med deres kildekode i plugin-dokumentationen.

VI ANBEFALER dig, hvordan du udfører en ren installation af Windows 10 ved hjælp af en USB-stick