Lange scrollenites zijn een veel voorkomende webontwerptrend geworden. Een van de coolste subtypen hiervan zijn de parallax-scrollsites, waar afbeeldingen worden verplaatst om een parallax-effect uit te stralen. Naarmate de gebruiker de pagina naar beneden scrolt, worden de animaties geactiveerd en geeft deze globaal een frisse uitstraling aan elke website indien correct geïmplementeerd.
Het maken van een parallax-scrollsite is vaak vervelend omdat het diepgaande kennis van CSS, Javascript en goed webdesign vereist om te laten slagen. Hier is een lijst van de beste Parallax Scrolling-plugins die het niet alleen gemakkelijker maken om parallax-scrollsites te maken, maar ook een goed uitgeruste parallax-effectenbibliotheek hebben zodat het voor u gemakkelijker en sneller wordt om een goed uitziende webpagina te ontwikkelen .
DISCLAIMER : Houd er voor het vertrek rekening mee dat voor het gebruik van deze plug-ins enige kennis van webtechnologieën (HTML / CSS / Javascript) vereist is. De meeste van de vermelde plug-ins gebruiken jQuery, dus kennis van JQuery is mogelijk ook nodig.
Schuifplugins voor Parallax
1. ScrollMagic
ScrollMagic is een van de meest populaire en feature-rijke JQuery-plug-ins die er zijn. Het is een javascript-bibliotheek waarmee je schijnbaar magische scrolleffecten kunt maken. Met behulp van ScrollMagic kunt u animeren op basis van uw schuifpositie. Dit betekent dat je HTML-elementen tijdens het scrollen kunt vastzetten, verplaatsen of animeren, ongeacht de duur die je wilt, en ook gemakkelijk parallax-effecten aan je website kunt toevoegen. Het is in hoge mate aanpasbaar en is ook licht van gewicht (6 kb wanneer gzipped). Naast andere parallax-schuifplugins beschikt Scroll Magic over de beste documentatie en externe bronnen. Het is ook perfect compatibel met mobiel.
ScrollMagic bevat veel voorbeelden. Bekijk ze voor inspiratie en begeleiding bij het gebruik van deze bibliotheek.
Wat betreft:
Homepage: //janpaepke.github.io/ScrollMagic/
Gemaakt door: Jan Paepke
Installatie:
1. CDN:
2. Downloaden van Github
2. skrollr
skrollr is een lichtgewicht pure Javascript- en CSS-bibliotheek, zonder jQuery. Het is eigenlijk de 'Scroll Magic vereenvoudigd voor CSS'. Om skrollr te gebruiken, moet u Javascript of een jQuery niet kennen. Alleen HTML en CSS is voldoende. skrollr gebruikt gegevensattributen om elk gewenst HTML-element te animeren. Een van de grootste nadelen van skrollr is dat animaties alleen werken als de pagina wordt gescrold. Anders worden alle effecten in de wacht gezet. skrollr laat je alle CSS-eigenschappen van je HTML-elementen animeren.
Wat betreft:
Homepage: //prinzhorn.github.io/skrollr/
Gemaakt door: Prinzhorn
Installatie: downloaden van Github
3. pagePiling.js 
Page Piling is een jQuery-invoegtoepassing waarmee u uw website kunt maken in verschillende secties die boven op elkaar liggen. Tijdens het scrollen of door het openen van de URL, wordt elk gedeelte onthuld in een nette, schuifbare animatie. pagePiling.js is compatibel met alle platforms - desktop, tablet en mobiel - en werkt met de meeste browsers. Het degradeert elegant in oudere browsers die de animaties niet ondersteunen (zoals IE 7). Om de plug-in te gebruiken, moet u een CSS en een Javascript-bestand in uw HTML opnemen. pagePiling.js wordt geïnitialiseerd door (document) .ready-functie:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Ga voor meer geavanceerde initialisaties door README.md.
Wat betreft:
Homepage: //alvarotrigo.com/pagePiling/
Gemaakt door: alvarotrigo
Installatie: downloaden van Github
4. Alton
Alton is een jQuery 'scroll-jacking naar ons' plug-in. Scroll-jacking betekent dat de native scroll van uw browser is uitgeschakeld ten gunste van gericht scrollen. Wanneer u deze activeert (met uw muiswiel of touchpad) gaat u naar het volgende verticale punt op het scherm of naar de bovenkant van de volgende container.
Alton biedt drie verschillende soorten functionaliteit, genaamd 'Hero', 'Bookend' en 'Standard'. Met Standaard kunt u scrollen op volledige pagina gebruiken, met elk gedeelte van 100% hoogte. Een scroll brengt de volgende sectie of de vorige sectie voort. Met Bookend kun je een bookend-soort ervaring creëren, terwijl Hero je toestaat om alleen door de 'Hero'-sectie te bladeren, terwijl de rest van de pagina (native) scrollen heeft.
Wat betreft:
Homepage: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Gemaakt door: paper-leaf
Installatie: downloaden van Github
5. Stellar.js
Stellar is een jQuery-plug-in waarmee je eenvoudig parallax-scrolling-effecten kunt toevoegen. Als u wilt uitvoeren, moet u eerst de functie $ .stellar () uitvoeren. Animatie-instellingen voor individuele elementen kunnen worden geconfigureerd met behulp van gegevensattributen op dat element.
Stellar laat je zelfs parallax-achtergronden hebben, dit zijn achtergronden die zich verplaatsen tijdens het scrollen. Een van de meest bruikbare functies van Stellar.js zijn offsets.
Alle elementen keren terug naar hun oorspronkelijke positie wanneer hun offset-ouder de rand van het scherm bereikt, plus of minus uw eigen optionele offset. Hiermee kun je ingewikkelde parallaxpatronen heel gemakkelijk maken. (Stellaire documentatie)
Wat betreft:
Homepage: //markdalgleish.com/projects/stellar.js/
Gemaakt door: Mark Dalgeish
Installatie: downloaden van Github
6. multiScroll.js
Deze plug-in is gemaakt door dezelfde ontwikkelaar (alvarotrigo) die de plug-in pagePiling.js heeft gemaakt. Wat multi-scroll eigenlijk doet, is dat je een effect kunt maken waarbij elk pagina-gedeelte in twee delen wordt geladen die op hun plaats schuiven terwijl de pagina wordt geladen. Bekijk de startpagina om te zien hoe dit eruitziet in uw browser. Met multiScroll.js kun je de schuifsnelheid, versnelling, toetsenbordschuifoptie en nog veel meer eigenschappen instellen, zodat je het effect precies kunt aanpassen aan hoe het moet.
Wat betreft:
Homepage: //alvarotrigo.com/multiScroll/
Gemaakt door: alvarotrigo
Installatie: downloaden van Github
7. ScrollMe
ScrollMe is een plug-in voor het toevoegen van eenvoudige parallax-scrolleffecten aan uw pagina. Het kan de dekking van elementen op de pagina schalen, roteren, vertalen en wijzigen terwijl u naar beneden scrolt. ScrollMe vereist geen Javascript en alleen CSS-kennis is voldoende. Door de klasse "animateme" en de vereiste gegevensattributen toe te voegen, kunt u elk HTML-element animeren. ScrollMe wordt het best gebruikt voor het toevoegen van CSS-effecten. Het is lichtgewicht en alle animaties zijn soepel, zolang je ze maar met mate gebruikt.
Wat betreft:
Homepage: //scrollme.nckprsn.com/
Gemaakt door: Nick Pearson
Installatie: downloaden van Github
8. Parallax Scroll
Parallax Scroll is een eenvoudig te gebruiken jQuery-invoegtoepassing waarmee u het scrolleffect van parallaxbeelden op sites als Spotify kunt maken. Het is vrij eenvoudig te gebruiken - specificeer gewoon de vereiste CSS-klassen voor de beeldhouders. In plaats van te gebruiken tags, om deze plugin te gebruiken, moet u elementen gebruiken met een opgegeven achtergrondafbeelding (door de CSS-eigenschap `background-image` te gebruiken.) U kunt de elementen responsief maken met behulp van CSS @media-query's.
Wat betreft:
Homepage: //parallax-scroll.aenism.com/
Gemaakt door: Aen
Installatie: downloaden van Github
9. Jarallax
Jarallax is een CSS- en Javascript-bibliotheek die is gespecialiseerd in parallax-scrolleffecten. Jarallax is geconfigureerd met Javascript (geen jQuery, alleen pure vanilla JS). Het ondersteunt vloeiende scrollfuncties, easing en parallax-animatie. Jarallax wordt ondersteund door de meeste browsers, op verschillende platforms. De Jarallax-website bevat uitstekende documentatie over het aanpassen van Jarallax aan uw behoeften. Jarallax heeft ook videozelfstudies die laten zien hoe je Jarallax kunt instellen voor je website en hoe je aan de slag kunt.
Wat betreft:
Homepage: //www.jarallax.com/
Gemaakt door: Jarallax
Installatie: downloaden van de Jarallax-website
10. Superscrollorama
Superscrollorama is een jQuery-gebaseerde plug-in die scroll-animaties ondersteunt. Het wordt aangedreven door TweenMax en de Greensock Tweening Engine, die de prestaties van de animatie en de vloeiendheid verhoogt. Superscrollorama-animaties worden gebeld via jQuery en je kunt ook de meeste TweenMax.js-functies gebruiken. Helaas worden deze animaties niet volledig ondersteund door mobiele apparaten (omdat apparaten met touchscreen op een andere manier met scrollen omgaan). Als u echter de methode setScrollContainerOffset gebruikt, zijn Superscrollorama-effecten toegankelijk op mobiele apparaten.
Hier is de code om dit te doen:
.setScrollContainerOffset(x, y)
(x: de x-offset van de scrollcontainer, y: de x-offset van de scrollcontainer)
Wat betreft:
Homepage: //johnpolacek.github.io/superscrollorama/
Gemaakt door: johnpolacek
Installatie: downloaden van Github
ZIE OOK: 10 beste statische sitegenerators
