Gadgetshowto
Lang scrollende sites zijn een veel voorkomende webontwerptrend geworden. Een van de coolste subtypes hiervan zijn de parallax-scrolling-sites, waar afbeeldingen bewegen 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 look en feel aan elke website als deze correct is geïmplementeerd.
Het maken van een parallax-scrolling-site is vaak vervelend omdat het een grondige kennis van CSS, Javascript en goed webontwerp vereist om te slagen. Hier is een lijst van de Beste Parallax-scrolplug-ins die het niet alleen gemakkelijker voor u maken om parallax-scrolpagina's te maken, maar ook een goed bedeelde bibliotheek met parallax-effecten 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 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 kan ook nodig zijn.
Parallax Scrolling-plug-ins
1. ScrollMagic
ScrollMagic is een van de meest populaire en feature-rijke jQuery-plug-ins die er zijn. Het is een javascript-bibliotheek waarmee u schijnbaar magische scrolleffecten kunt creëren. Met ScrollMagic kun je animeren op basis van je scrollpositie. Dit betekent dat u HTML-elementen kunt corrigeren, verplaatsen of animeren terwijl u scrolt, voor elke gewenste duur, en ook gemakkelijk parallax-effecten aan uw website kunt toevoegen. Het is in hoge mate aanpasbaar en is ook licht van gewicht (6kb wanneer gzipped). 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 opgesomd. Bekijk ze voor inspiratie en begeleiding bij het gebruik van deze bibliotheek.
Over:
Homepage: http://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, hoeft u geen Javascript of enige jQuery te kennen. Alleen HTML en CSS is voldoende. skrollr gebruikt gegevensattributen om elk gewenst HTML-element te animeren. Een van de belangrijkste nadelen van skrollr is dat animaties alleen werken terwijl de pagina wordt gescrolld. Anders worden alle effecten in de wacht gezet. Met skrollr kunt u alle CSS-eigenschappen van uw HTML-elementen animeren.
Over:
Homepage: http://prinzhorn.github.io/skrollr/
Gemaakt door: Prinzhorn
Installatie: downloaden van Github
3. pagePiling.js
Page Piling is een jQuery-plug-in waarmee u uw website in verschillende secties kunt maken die op elkaar worden gestapeld. Bij het scrollen of door toegang te krijgen tot de URL, 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 degradeert gracieus op oudere browsers die zijn 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 (functie ()
$ ('# pagepiling'). pagepiling ();
Voor meer geavanceerde initialisaties, ga door de README.md.
Over:
Homepage: http://alvarotrigo.com/pagePiling/
Gemaakt door: alvarotrigo
Installatie: downloaden van Github
4. Alton
Alton is een jQuery 'scroll-jacking to us' plug-in. Scroll-jacking betekent dat de native scroll van uw browser is uitgeschakeld ten gunste van gericht scrollen, dat u bij het starten (door uw muiswiel of touchpad) naar het volgende verticale punt op het scherm of de bovenkant van de volgende container brengt..
Alton biedt drie verschillende soorten functionaliteit, genaamd 'Hero', 'Bookend' en 'Standard'. Met Standaard kunt u de volledige pagina scrollen, waarbij elke sectie 100% hoog is. Een scroll brengt de volgende sectie of de vorige sectie naar voren. Met Bookend kun je een boekensteun-achtige ervaring creëren, terwijl Hero je toestaat om alleen het gedeelte 'Hero' te scrollen, terwijl de rest van de pagina native scrollen heeft (opnieuw ingeschakeld).
Over:
Homepage: http://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 u eenvoudig parallax-scrolleffecten kunt toevoegen. Om te starten, moet u eerst de functie $ .stellar () uitvoeren. Animatie-instellingen voor individuele elementen kunnen worden geconfigureerd met behulp van gegevensattributen voor dat element.
Met Stellar kun je zelfs parallax-achtergronden hebben, dit zijn achtergronden die tijdens 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 plus of minus uw eigen optionele offset raakt. Hierdoor kunt u heel gemakkelijk ingewikkelde parallaxpatronen maken. (Stellaire documentatie)
Over:
Homepage: http://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 in feite doet, is dat u een effect kunt creëren waarbij elke paginasectie in twee verdeelde 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 scrollsnelheid, versnelling, toetsenbord-scroloptie en nog veel meer eigenschappen instellen, zodat je het effect precies kunt aanpassen aan hoe je het nodig hebt.
Over:
Homepage: http://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 schalen, roteren, vertalen en de dekking van elementen op de pagina wijzigen terwijl u naar beneden scrolt. ScrollMe vereist geen Javascript, en alleen kennis van CSS is voldoende. Door de klasse "animateme" en de vereiste gegevensattributen toe te voegen, kunt u elk HTML-element animeren. ScrollMe kan het beste worden gebruikt voor het toevoegen van CSS-effecten. Het is licht van gewicht en alle animaties zijn vloeiend, zolang je ze met mate gebruikt.
Over:
Homepage: http://scrollme.nckprsn.com/
Gemaakt door: Nick Pearson
Installatie: downloaden van Github
8. Parallax-scrollen
Parallax Scroll is een eenvoudig te gebruiken jQuery-plug-in waarmee je het parallax-scrolleffect voor afbeeldingen kunt maken dat te vinden is op sites zoals Spotify. Het is vrij eenvoudig te gebruiken - specificeer gewoon de vereiste CSS-klassen voor de afbeeldinghouders. In plaats van te gebruiken tags, om deze plug-in te gebruiken, moet u elementen gebruiken waarvoor een achtergrondafbeelding is gespecificeerd (door de CSS-eigenschap 'background-image' te gebruiken. U kunt de elementen responsief maken met behulp van CSS @media-queries.
Over:
Homepage: http://parallax-scroll.aenism.com/
Gemaakt door: Aen
Installatie: downloaden van Github
9. Jarallax
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 functies voor vloeiend scrollen, versoepeling en parallax-animatie. Jarallax wordt ondersteund door de meeste browsers, op verschillende platforms. De Jarallax-website heeft uitstekende documentatie over hoe u Jarallax aan uw behoeften kunt aanpassen. Jarallax heeft ook videozelfstudies die laten zien hoe u Jarallax voor uw website instelt en hoe u aan de slag kunt.
Over:
Homepage: http://www.jarallax.com/
Gemaakt door: Jarallax
Installatie: downloaden vanaf de Jarallax-website
10. Superscrollorama
Superscrollorama is een op jQuery gebaseerde plug-in die scroll-animaties ondersteunt. Het wordt mogelijk gemaakt door TweenMax en de Greensock Tweening Engine, die de animatieprestaties en vloeiendheid 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 touchscreen-apparaten scrollen op een andere manier verwerken). Met behulp van de setScrollContainerOffset-methode 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:
Homepage: http://johnpolacek.github.io/superscrollorama/
Aangemaakt door: johnpolacek
Installatie: downloaden van Github
ZIE OOK: 10 beste generatoren voor statische sites
