Scrollmagic: leuk webdesign

In webdesign is een trend vergelijkbaar met de stijl die is aangenomen voor de realisatie van de sites die door gebruikers, meestal in tijdelijke periodes, sterk wordt geaccepteerd. Een deel van de trends tot nu toe in 2016 en die blijkbaar ook in 2017 de toon zullen blijven zetten, zijn de animaties en lange secties met veel scroll.

Het is geen geheim dat deze stijl best aantrekkelijk en leuk is voor de gebruiker, met de animaties die we kunnen maken om de site intuïtief en vermakelijk te maken, zolang ze maar goed worden gebruikt. Om deze reden hebben we een tutorial gemaakt met geanimeerde scrolls op uw website, met behulp van de jQuery ScrollMagic- plug-in.

ScrollMagic: Fun Web Design

ScrollMagic is een bibliotheek gemaakt in javascript om interacties te bereiken bij het verplaatsen van websites. Het is een volledige herschrijving van zijn voorganger Superscrollorama en de architectuur is gebaseerd op plug-ins die eenvoudige aanpassing en uitbreidbaarheid bieden.

Het is ideaal als we een aantal van de volgende dingen willen implementeren:

• Animatie op basis van de positie of verplaatsing van de site. Activeer de animatie of synchroniseer deze met de beweging van de scroll. Voeg zonder veel moeite een parallax-effect toe. Maak een pagina met oneindig scrollen, waarbij inhoud wordt geladen met ajax.

ScrollMagic-functies

• Geoptimaliseerde prestaties, het is licht, flexibel en maakt uitbreidbaarheid mogelijk Evenementbeheer en objectgeoriënteerde programmering Het ondersteunt adaptief webdesign Het ondersteunt bewegingen in beide richtingen (horizontaal en verticaal) Het ondersteunt bewegingen in containers (div), zelfs meerdere op één pagina. Het werkt perfect voor browsers: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. In zijn GitHub- repository heeft het gedetailleerde documentatie en veel toepassingsvoorbeelden.

Koop ScrollMagic

Het is op verschillende manieren verkrijgbaar.

1: GitHub

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

2: Bower

bower scrollmagic installeren

3: knooppuntpakketbeheer

npm installeer scrollmagic

4: CDN

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

U kunt ook lezen hoe u het ontwerp van een e-mail in Outlook kunt aanpassen

Installatie en gebruik

De installatie is vrij eenvoudig, we nemen alleen het kernelbestand op in de html-bestanden waar we het willen gebruiken.

;

Voor gebruik biedt de plug-in een controller-georiënteerd ontwerppatroon, waaraan een of meer scènes worden toegevoegd. Deze scènes worden gebruikt om te definiëren wat er in de containers gebeurt wanneer ze naar een bepaald punt gaan.

Dit zou een eenvoudig voorbeeld zijn:

// init controller var controller = nieuwe ScrollMagic.Controller (); // maak een nieuwe ScrolMagic.Scene-scène ({duur: 100, // de scène moet een scrolafstand van 100px offset hebben: 50 // start deze scène na scrollen voor 50px}).setPin ("# my-sticky- element ") // zet het element vast voor de duur van de scène.addTo (controller); // wijs de scène toe aan de controller

Een geavanceerder voorbeeld zou zijn: meerdere offsets bereiken, de broncode zou zijn:

$ (function () {// wacht op document gereed // init controller var controller = nieuw ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {scale: 3, gemak: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", duration: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // indicatoren toevoegen (plug-in vereist).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal var tween_h = TweenMax.to ("# animate", 0, 5, {rotatie: 360, gemak: Linear.easeNone}); // build scene var scene_h = nieuwe ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({naam: "rotate"}) // indicatoren toevoegen (plug-in vereist).addTo (controller_h);});

Je kunt nog veel meer voorbeelden met hun broncode vinden in de plug-in documentatie.

WIJ RADEN U AAN Hoe u een schone installatie van Windows 10 kunt uitvoeren met een USB-stick