Scrollmagic: jautrs tīmekļa dizains

Tīmekļa dizaina jomā tendence ir tāda pati kā vietņu realizēšanai pieņemtais stils, ko lietotāji ļoti īsā laika posmā parasti pieņem. Daļa no līdzšinējām tendencēm 2016. gadā un, acīmredzot, turpinās toni iestatīt arī 2017. gadā, ir animācijas un garas sadaļas ar lielu ritināšanu.

Nav noslēpums, ka šis stils ir diezgan pievilcīgs un jautrs lietotājam, jo ​​ar animācijām mēs varam padarīt navigāciju vietnē intuitīvu un izklaidējošu, ja vien tie tiek labi izmantoti. Šī iemesla dēļ mēs esam izveidojuši apmācību, lai jūsu vietnē iekļautu animētus ritinājumus, izmantojot jQuery ScrollMagic spraudni.

ScrollMagic: jautrs tīmekļa dizains

ScrollMagic ir bibliotēka, kas izveidota ar javascript, lai panāktu mijiedarbību, pārvietojot vietnes. Tā ir pilnīga tā priekšgājēja Superscrollorama pārrakstīšana, un tās arhitektūra ir balstīta uz spraudņiem, kas piedāvā vieglu pielāgošanu un paplašināšanu.

Ir ideāli, ja mēs vēlamies īstenot dažas no šīm lietām:

• Animācija, kas balstīta uz vietnes pozīciju vai pārvietojumu.Iesāciet animāciju vai sinhronizējiet to ar ritināšanas kustību.Pievienojiet parallaksa efektu bez lielām pūlēm. Izveidojiet lapu ar bezgalīgu ritināšanu, apstrādājot saturu ar ajax.

ScrollMagic funkcijas

• Optimizēta veiktspēja, tā ir viegla, elastīga un ļauj paplašināt. Notikumu vadība un uz objektu orientēta programmēšana. Tā atbalsta adaptīvu tīmekļa dizainu. Tam ir atbalsts kustībām abos virzienos (horizontāli un vertikāli). Tas atbalsta kustības konteineros (div), pat vairākus vienā lappusē. Tas lieliski darbojas pārlūkprogrammās: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Savā GitHub krātuvē tam ir detalizēta dokumentācija un daudzi lietojumprogrammu piemēri.

Iegūstiet ScrollMagic

To var iegūt dažādos veidos.

1: GitHub

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

2: Bower

bower instalēt

3: mezgla pakotnes pārvaldnieks

npm instalēt

4: CDN

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

Varat arī izlasīt Kā pielāgot e-pasta dizainu programmā Outlook

Uzstādīšana un lietošana

Instalēšana ir diezgan vienkārša, kodola failu html failos iekļaujam tikai tur, kur mēs to vēlamies izmantot.

;

Lietošanai spraudnis nodrošina uz kontrolieri orientētu dizaina modeli, kuram tiek pievienota viena vai vairākas ainas. Šīs ainas tiek izmantotas, lai definētu, kas notiek konteineros, kad tie pārvietojas uz noteiktu punktu.

Šis būtu pamata piemērs:

// init kontrolieris var kontrolieris = jauns ScrollMagic.Controller (); // izveidojiet jaunu ScrollMagic.Scene skatu ({ilgums: 100; // skatam vajadzētu ilgt ritināšanas attālumu ar 100 pikseļu nobīdi: 50 // sāciet šo ainu pēc ritināšanas 50 pikseļiem}).setPin ("# my-sticky- elements ") // piesprauž sižeta ilguma elementu.addTo (kontrolieris); // piešķir ainu kontrolierim

Izvērstāks piemērs būtu vairāku kompensāciju sasniegšana, tās avota kods būtu:

$ (function () {// jāgaida, kamēr dokuments būs gatavs // init kontrolieris var kontrolieris = jauns ScrollMagic.Controller (); // būvējiet tween var tween = TweenMax.to ("# animēt", 0, 5, {mērogs: 3, ērti: Linear.easeNone}); // veidot ainu var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", ilgums: 400, nobīde: 250}).setTween (tween).setPin ("# animēt"). addIndicators ({nosaukums: "mainīt izmēru"}) // pievienot indikatorus (nepieciešams spraudnis).addTo (kontrolieris); // init kontrolieris horizontāls var kontrolieris_h = jauns ScrollMagic.Controller ({vertikāls: viltus}); // būvēt starp horizontālo var tween_h = TweenMax.to ("# animēt", 0, 5, {pagriešana: 360, vieglums: Linear.easeNone}); // veidot ainu var scene_h = jauns ScrollMagic.Scene ({ilgums: 700}).setTween (tween_h). setPin ("# animēt").addIndicators ({nosaukums: "pagriezt"}) // pievienot indikatorus (nepieciešams spraudnis).addTo (controller_h);});

Spraudņa dokumentācijā varat atrast vēl daudzus citus piemērus ar to avota kodu.

Mēs iesakām jums, kā veikt tīru Windows 10 instalēšanu, izmantojot USB zibatmiņu