Scrollmagic: zábavný web design

Vo webdizajne je trend ako štýl, ktorý bol prijatý na realizáciu stránok, ktorý používatelia dôrazne akceptujú, zvyčajne v dočasných obdobiach. Súčasťou doterajších trendov v roku 2016 a pravdepodobne aj v roku 2017 bude pokračovať tón, sú animácie a dlhé sekcie s veľkým posunom.

Nie je žiadnym tajomstvom, že tento štýl je pre používateľa dosť atraktívny a zábavný. Vďaka animáciám dokážeme navigáciu na webe intuitívne a zábavné, pokiaľ sú dobre využívané. Z tohto dôvodu sme vytvorili tutoriál na zahrnutie animovaných zvitkov na vašom webe pomocou doplnku jQuery ScrollMagic.

ScrollMagic: Zábavný webový dizajn

ScrollMagic je knižnica vytvorená v JavaScripte na dosiahnutie interakcií pri presúvaní webových stránok. Jedná sa o úplné prepísanie svojho predchodcu Superscrollorama a jeho architektúra je založená na doplnkoch, ktoré ponúkajú ľahké prispôsobenie a rozšíriteľnosť.

Je ideálne, ak chceme implementovať niektoré z nasledujúcich vecí:

• Animácia založená na pozícii alebo premiestnení stránky. Spustite animáciu alebo ju zosynchronizujte s pohybom posúvača. Pridajte efekt paralaxy bez veľkého úsilia. Vytvorte stránku s nekonečným posúvaním a manipulujte s načítaním obsahu ajaxom.

Funkcie ScrollMagic

• Optimalizovaný výkon, je ľahký, flexibilný a umožňuje rozšíriteľnosť. Správa udalostí a objektovo orientované programovanie. Podporuje adaptívny webový dizajn. Podporuje pohyb v oboch smeroch (horizontálny aj vertikálny). Podporuje pohyb v kontajneroch (div)., dokonca viacnásobne na jednej stránke. Funguje to perfektne pre prehliadače: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Vo svojom úložisku GitHub obsahuje podrobnú dokumentáciu a mnoho príkladov aplikácií.

Získajte ScrollMagic

Je k dispozícii na jeho získanie rôznymi spôsobmi.

1: GitHub

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

2: Bower

inštalácia Scrollagagic

3: správca balíkov uzlov

npm nainštalujte scrollmagic

4: CDN

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

Prečítajte si tiež časť Prispôsobenie návrhu e-mailu v programe Outlook

Inštalácia a použitie

Inštalácia je pomerne jednoduchá. Do súborov html sme zahrnuli iba súbor jadra, v ktorom ho chceme používať.

;

Doplnok na použitie poskytuje riadiaci návrhový vzorec, do ktorého sa pridá jedna alebo viac scén. Tieto scény sa používajú na definovanie toho, čo sa stane v kontajneroch, keď sa presunú do konkrétneho bodu.

Toto by bol základný príklad:

// init controller var controller = new ScrollMagic.Controller (); // vytvorte scénu nový ScrollMagic.Scene ({trvanie: 100, // scéna by mala trvať pri posunovacej vzdialenosti 100px posun: 50 // spustiť túto scénu po posunutí o 50px)).setPin ("# my-sticky- element ") // pripája prvok počas trvania scény.addTo (radič); // priradiť scénu ovládaču

Pokročilejším príkladom by bolo dosiahnutie viacerých kompenzácií, jeho zdrojový kód by bol:

$ (function () {// počkajte, kým bude dokument pripravený // kontrolór init var kontrolér = nový ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {scale: 3, easy: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", trvanie: 400, offset: 250}).setTween (doplnenie).setPin ("# animate"). addIndicators ({name: "resize"}) // pridať indikátory (vyžaduje doplnok).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal var tween_h = TweenMax.to ("# animate", 0.5, {rotation: 360, easy: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndikátory ({name: "rotate"}) // pridať indikátory (vyžaduje doplnok).addTo (controller_h);});

Mnoho ďalších príkladov s ich zdrojovým kódom nájdete v dokumentácii doplnku.

ODPORÚČAME VÁM urobiť čistú inštaláciu systému Windows 10 pomocou USB kľúča