Scrollmagic: zábavný webdesign

Ve webdesignu je trend jako styl, který byl přijat pro realizaci stránek, který uživatelé silně přijímají, obvykle v dočasných obdobích. Součástí trendů doposud v roce 2016 a zřejmě i v roce 2017 bude nadále nastavovat tón, jsou animace a dlouhé sekce se spoustou svitků.

Není tajemstvím, že tento styl je pro uživatele docela přitažlivý a zábavný. Díky animacím můžeme navigaci po webu učinit intuitivní a zábavnou, pokud jsou dobře použity. Z tohoto důvodu jsme vytvořili výukový program, který obsahuje animované svitky na vašem webu pomocí pluginu jQuery ScrollMagic.

ScrollMagic: Zábavný webový design

ScrollMagic je knihovna vytvořená v javascriptu pro dosažení interakcí při přesunu webových stránek. Jedná se o úplné přepsání jeho předchůdce Superscrollorama a jeho architektura je založena na pluginech, které nabízejí snadné přizpůsobení a rozšiřitelnost.

Je ideální, pokud chceme implementovat některé z následujících věcí:

• Animace založená na poloze nebo přemístění stránky. Spusťte animaci nebo ji synchronizujte s pohybem posouvání. Přidejte efekt paralaxy bez velkého úsilí. Vytvořte stránku s nekonečným posouváním, manipulace s načítáním obsahu pomocí Ajaxu.

Funkce ScrollMagic

• Optimalizovaný výkon, je lehký, flexibilní a umožňuje rozšiřitelnost. Správa událostí a objektově orientované programování. Podporuje adaptivní návrh webových stránek. Podporuje pohyby v obou směrech (horizontální i vertikální). Podporuje pohyby v kontejnerech (div)., dokonce i více na jedné stránce. Funguje perfektně pro prohlížeče: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Ve svém úložišti GitHub obsahuje podrobnou dokumentaci a mnoho příkladů aplikací.

Získejte ScrollMagic

Je možné jej získat různými způsoby.

1: GitHub

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

2: Bower

Bower instalace scrollmagic

3: správce balíčků uzlů

npm install scrollmagic

4: CDN

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

V aplikaci Outlook si také můžete přečíst Jak přizpůsobit design e-mailu

Instalace a použití

Instalace je poměrně jednoduchá, do souborů html zahrneme pouze soubor jádra, kde jej chceme použít.

;

Pro použití poskytuje zásuvný modul návrhový vzor orientovaný na řadič, do kterého je přidána jedna nebo více scén. Tyto scény se používají k definování toho, co se v kontejnerech stane, když se přesunou do určitého bodu.

To by byl základní příklad:

// init controller var controller = new ScrollMagic.Controller (); // vytvořte scénu nový ScrollMagic.Scene ({trvání: 100, // scéna by měla trvat do vzdálenosti posunu 100px offset: 50 // zahájit tuto scénu po posunutí o 50px)).setPin ("# my-sticky- element ") // pinuje prvek po dobu trvání scény.addTo (řadič); // přiřaďte scénu ovladači

Pokročilějším příkladem by bylo dosažení více kompenzací, jeho zdrojový kód by byl:

$ (function () {// počkejte, až bude dokument připraven // kontroler init var controller = 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", duration: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // přidat indikátory (vyžaduje plugin).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal var tween_h = TweenMax.to ("# animate", 0.5, {rotace: 360, easy: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // přidat indikátory (vyžaduje plugin).addTo (controller_h);});

Mnoho dalších příkladů s jejich zdrojovým kódem najdete v dokumentaci k zásuvnému modulu.

DOPORUČUJEME, abyste provedli čistou instalaci systému Windows 10 pomocí USB flash disku