Yurich Koshurich
0 
4850
87
Lang scrollende sites zijn een heel gebruikelijke trend in webdesign geworden. Een van de coolste subtypen hiervan zijn de parallax-scrolsites, waar afbeeldingen worden verplaatst om een parallax-effect af te geven. Terwijl de gebruiker naar beneden scrolt, worden de animaties geactiveerd en over het algemeen geeft het een frisse uitstraling aan elke website als het correct is geïmplementeerd.
Het maken van een parallax-scrolsite is vaak vervelend omdat het een grondige kennis van CSS, Javascript en een goed webdesign vereist. Hier is een lijst van de Beste Parallax-scrollplug-ins die het u niet alleen gemakkelijker maken om parallax-scrolsites 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: Voordat u begint, moet u er rekening mee houden dat om deze plug-ins te gebruiken enige kennis van webtechnologieën (HTML / CSS / Javascript) vereist is. De meeste van de vermelde plug-ins gebruiken jquery, dus kennis van Jquery kan ook nodig zijn.
Parallax Scrollende plug-ins
1. ScrollMagic
ScrollMagic is een van de meest populaire en veelzijdige jQuery-plug-ins die er zijn. Het is een javascript-bibliotheek waarmee je schijnbaar magische scroll-effecten kunt creëren. Met ScrollMagic kunt u animeren op basis van uw scrollpositie. Dit betekent dat u tijdens het scrollen HTML-elementen kunt repareren, verplaatsen of animeren, voor elke gewenste duur, en ook eenvoudig parallax-effecten aan uw website kunt toevoegen. Het is zeer aanpasbaar en is ook lichtgewicht (6 kb bij gzip). Naast andere parallax scroll-plug-ins heeft Scroll Magic de beste documentatie en externe bronnen. Het is ook perfect compatibel met mobiel.
ScrollMagic heeft veel voorbeelden vermeld. Bekijk ze voor inspiratie en begeleiding bij het gebruik van deze bibliotheek.
Over:
Startpagina: http://janpaepke.github.io/ScrollMagic/
Aangemaakt door: Jan Paepke
Installatie:
1. CDN:
2. Download 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, hoeft u Javascript of enige jQuery niet te kennen. Alleen HTML en CSS is voldoende. skrollr gebruikt gegevenskenmerken om elk gewenst HTML-element te animeren. Een van de belangrijkste nadelen van skrollr is dat animaties alleen werken terwijl de pagina wordt gescrold. Anders worden alle effecten in de wacht gezet. Met skrollr kunt u alle CSS-eigenschappen van uw HTML-elementen animeren.
Over:
Startpagina: http://prinzhorn.github.io/skrollr/
Aangemaakt door: Prinzhorn
Installatie: downloaden van Github
3. pagePiling.js
Page Piling is een jQuery-plug-in waarmee u uw website kunt maken in verschillende secties die op elkaar worden gestapeld. Bij het scrollen of door de URL te openen, wordt elke sectie onthuld in een nette glijdende animatie. pagePiling.js is compatibel met alle platforms - desktop, tablet en mobiel - en werkt met de meeste browsers. Het verslechtert gracieus 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 ();
);
Voor meer geavanceerde initialisaties gaat u door README.md.
Over:
Startpagina: http://alvarotrigo.com/pagePiling/
Aangemaakt 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, dat u bij het starten (met uw muiswiel of touchpad) naar het volgende verticale punt op het scherm brengt, of naar de bovenkant van de volgende container.
Alton biedt drie verschillende soorten functionaliteit, genaamd 'Hero', 'Bookend' en 'Standard'. Met Standaard kunt u door de volledige pagina bladeren, waarbij elke sectie 100% hoog is. Een rol brengt de volgende sectie of de vorige sectie naar voren. Met Bookend kun je een bookend-achtige ervaring creëren, terwijl met Hero je alleen door het gedeelte 'Hero' kunt scrollen, terwijl de rest van de pagina (opnieuw ingeschakeld) native scrollen heeft.
Over:
Startpagina: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Aangemaakt door: paper-leaf
Installatie: downloaden van Github
5. Stellar.js
Stellar is een jQuery-plug-in waarmee u eenvoudig parallax-scrolleffecten kunt toevoegen. Om te draaien, moet je eerst de $ .stellar () functie uitvoeren. Animatie-instellingen voor individuele elementen kunnen worden geconfigureerd met gegevensattributen voor dat element.
Stellar laat je zelfs parallax-achtergronden hebben, dit zijn achtergronden die bij het scrollen worden verplaatst. Een van de handigste functies van Stellar.js zijn offsets.
Alle elementen keren terug naar hun oorspronkelijke positie wanneer hun offset-ouder de rand van het scherm ontmoet - plus of minus uw eigen optionele offset. Hierdoor kunt u heel eenvoudig ingewikkelde parallaxpatronen maken. (Stellaire documentatie)
Over:
Startpagina: http://markdalgleish.com/projects/stellar.js/
Aangemaakt 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 creëren waarbij elke pagina-sectie in twee delen wordt geladen, die op hun plaats schuiven terwijl de pagina wordt geladen. Bekijk de homepage om te zien hoe dit eruit ziet in uw browser. Met multiScroll.js kunt u de scrolsnelheid, versoepeling, toetsenbordscroloptie en nog veel meer eigenschappen instellen, zodat u het effect precies kunt aanpassen aan uw wensen.
Over:
Startpagina: http://alvarotrigo.com/multiScroll/
Aangemaakt 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 vloeiend, zolang je ze maar met mate gebruikt.
Over:
Startpagina: http://scrollme.nckprsn.com/
Aangemaakt door: Nick Pearson
Installatie: downloaden van Github
8. Parallax Scroll
Parallax Scroll is een eenvoudig te gebruiken jQuery-plug-in waarmee u het parallax-afbeeldingsroleffect kunt maken dat u op sites als Spotify vindt. Het is vrij eenvoudig te gebruiken - specificeer gewoon de vereiste CSS-klassen voor de beeldhouders. In plaats van te gebruiken 
Jarallax is een CSS- en Javascript-bibliotheek die gespecialiseerd is in parallax-scrolleffecten. Jarallax is geconfigureerd met Javascript (geen jQuery, alleen pure vanille JS). Het ondersteunt vloeiende scrolfuncties, versnelling en parallax-animatie. Jarallax wordt ondersteund door de meeste browsers, op verschillende platforms. De Jarallax-website bevat uitstekende documentatie over hoe u Jarallax kunt aanpassen aan uw behoeften. Jarallax heeft ook video-tutorials die laten zien hoe u Jarallax instelt voor uw website en hoe u aan de slag kunt.
Over:
Startpagina: http://www.jarallax.com/
Aangemaakt door: Jarallax
Installatie: downloaden van de Jarallax-website
10. Superscrollorama
Superscrollorama is een op jQuery gebaseerde plug-in die scroll-animaties ondersteunt. Het wordt aangedreven door TweenMax en de Greensock Tweening Engine, die de animatieprestaties en soepelheid verbetert. Superscrollorama-animaties worden aangeroepen via jQuery en u 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 scrollen). Met behulp van de methode setScrollContainerOffset zijn Superscrollorama-effecten echter 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)
Over:
Startpagina: http://johnpolacek.github.io/superscrollorama/
Aangemaakt door: johnpolacek
Installatie: downloaden van Github
ZIE OOK: 10 beste statische sitegeneratoren