Share
Een van de grootste trends in recent modern webdesign is het gebruik van parallax-scrolleffecten. In deze tutorial laat ik je zien hoe je het effect op je eigen website kunt creëren, met een beetje verbeeldingskracht en een beetje hulp van Stellar.js.
Wilt u tijd besparen en ervoor zorgen dat u moderne best practices gebruikt? Er is een geweldige responsieve plug-in voor jQuery-sliders op Envato Market die het werk perfect zou kunnen doen! Het wordt al gebruikt op meer dan 150.000 websites.
Het parallax-scrolleffect is populair geweest sinds sites zoals Nike's Better World het enkele jaren geleden op hun websites introduceerden. Het parallax-effect met betrekking tot interfaces bestaat al sinds de jaren 1980 toen het voor het eerst werd gebruikt in videogametitels en later in games zelf. Meer recentelijk begon het verschijnsel te verschijnen in webinterfaces - je kent de silverbackapp die het effect gebruikte als onderdeel van de header.
In combinatie met de scrollfunctionaliteit van een website kunnen parallax-scrolling-effecten een sterke visuele impact hebben, vooral in combinatie met een of andere vorm van verhaal die u meeneemt op reis.
Parallax is een verplaatsing of verschil in de schijnbare positie van een object gezien langs twee verschillende gezichtslijnen. - Wikipedia
Dus wat is precies het parallax-effect? Nou, het is waarschijnlijk een van de dingen waar je klanten naar verwijzen als ze blindelings zeggen "Ik wil mijn site HTML5". Wanneer klanten mij om een "HTML5" -site vragen, moet ik hen specifiek vragen hoe zij de betekenis HTML5 interpreteren - op dit moment lijkt het gewoon het buzzword dat klanten blijven zeggen zonder echt te begrijpen wat het betekent.
Dus is het HTML5? Natuurlijk heeft HTML5 een rol te spelen in het parallax-scrolleffect, maar het is meer dan HTML5, het maakt ook gebruik van enige vorm van javascript, zoals jQuery, en zou niet mogelijk zijn zonder een beetje CSS3.
Het woord parallax is afgeleid van de Griekse παραλλαξη (parallaxis), wat verandering betekent. Objecten die dichter bij het oog liggen hebben een grotere parallax dan objecten die zich in de verte bevinden. Dit betekent dat objecten die dichter bij ons staan sneller kunnen lijken dan objecten op de achtergrond.
Meerdere achtergronden en objecten (zoals afbeeldingen) samenvoegen en vervolgens met verschillende snelheden verplaatsen, creëert een gevoel van diepte en dimensie.
Bekijk enkele voorbeelden die parallax-effecten laten zien.
De voorbeelden nemen je vooral mee op een of andere vorm van reis of verhaal, en dat doen ze op verschillende manieren. Dit maakt naar mijn mening een parallax-scrollsite tot een succes. De sleutel om het interessant en uniek te maken, is door je te concentreren op een goed verhaal en concept, en het effect vervolgens op creatieve en fantasierijke manieren te gebruiken.
Wieden + Kennedy (W & K), de jongens achter de Nike Better World Website ondersteunen dit:
Naar onze mening zijn technologieën onafhankelijk van het concept. Onze primaire focus lag op het creëren van een geweldige interactieve storytelling-ervaring. - Wieden + Kennedy (W & K)
Om een manier te demonstreren voor het implementeren van parallax scrollen in uw website, heb ik ervoor gekozen om u een eenvoudige vierdia-website te tonen die het effect op verschillende achtergronden en afbeeldingen gebruikt. Ik heb ook een navigatie toegevoegd in de linkerhoek, die naar een specifieke dia op de site gaat en ook van grootte verandert om het actieve dianummer weer te geven. Ik gebruik ook het weblettertype Bebas, hoewel je vrij bent om iets anders te gebruiken als je dat wilt.
Dit is hoe onze mappenstructuur zal verschijnen:
Om dit te bereiken gebruik ik de Stellar.js, een jQuery-plugin van Mark Dalgleish waarmee je gemakkelijk parallax-scrollsites kunt maken. Er zijn andere plug-ins beschikbaar om u te helpen dit te doen. Ik heb dit onder aan dit artikel vermeld. Ik heb ervoor gekozen om Stellar.js te gebruiken omdat het vrij eenvoudig is om te implementeren en, hoewel niet aangetoond tijdens deze tutorial, kan het worden geoptimaliseerd om te werken op smart device-platforms zoals iOS.
Ik ga ook jQuery-waypoints gebruiken door Caleb Troughton. Waypoints is een andere jQuery-plug-in die een functie uitvoert wanneer u naar een element bladert. Hierdoor kan de navigatie op de site aangeven op welke dia we staan volgens de positie van de schuifbalk.
jQuery easing is een plug-in van GSGD die geavanceerde versnellingsopties biedt. We zullen dit gebruiken om een mooie versnellingsbeweging toe te voegen bij de overgang van dia naar dia.
We schoppen onze index.html af. We voegen het HTML5-doctype toe en maken vervolgens het hoofdgedeelte. Deze bestaat uit een CSS-reset gevolgd door onze stylesheet 'styles.css'. Vervolgens voegen we de jQuery-bibliotheek toe, gevolgd door ons aangepaste jQuery-bestand 'js.js'. Dit wordt dan gevolgd door de drie plug-ins 'jquery.stellar.min.js', 'waypoints.min.js' en 'jquery.easing.1.3.js'.
Maak een parallax-website met Stellar.js
Het volgende element in onze html is het beeld van het Envato-logo dat door de hele site constant constant blijft. Hieraan voegen we een klasse 'envatologo' toe, zodat we de positionering ervan later kunnen instellen wanneer we de CSS coderen.
De vier dia's gebruiken dezelfde opmaak:
We gebruiken een klasse van 'dia' die zal worden gebruikt als een algemene stijl voor alle dia's. Elke dia krijgt dan een id van 'dia' gevolgd door het dianummer oftewel 'Slide1'. We gebruiken het HTML5-gegevensattribuut en noemen het 'gegevensdia'. Dit zal ons toelaten om het te targeten met behulp van jQuery. Een ander data-attribuut van 'data-stellar-background-ratio' is toegevoegd. Dit is specifiek voor de plug-in stellar.js jQuery en vertelt de plug-in in welke verhouding de snelheid van het element moet schuiven.
De verhouding is relatief ten opzichte van de natuurlijke scrollsnelheid, dus een verhouding van 0,5 zou ervoor zorgen dat het element met halve snelheid zou scrollen, een verhouding van 1 zou geen effect hebben en een verhouding van 2 zou ervoor zorgen dat het element tweemaal met de snelheid zou scrollen.
Alle dia's behalve dia vier hebben een knop waarmee we naar de volgende dia kunnen scrollen. Hieraan voegen we het kenmerk 'gegevensdia' toe met de waarde van het volgende dianummer. Dit is zodat de knop weet welke dia de volgende is, zodat we deze waarde kunnen doorgeven aan jQuery. De meerderheid van de dia's heeft ook een reeks met een klasse van 'slideno'; gewoon een grote tekstversie van het dianummer dat in de linkerbenedenhoek van de meeste dia's wordt weergegeven. Dit kan ook worden gebruikt voor titels.
Accentsconagua
Dia 1 Op dia's drie en vier voegen we ook enkele afbeeldingselementen toe aan de div -dia. Deze afbeeldingen zullen een echt inzicht geven in het parallaxeffect dat we creëren. We verpakken deze in een 'wrapper'-div die gecentraliseerd is en' 960px 'breed is, dit is alleen maar om ervoor te zorgen dat deze op alle desktopmonitors groot genoeg is.
Aan elke afbeelding is een attribuut 'data-stellar-ratio' gekoppeld. Dit is weer stellar.js specifiek en vertelt de plug-in in welke ratio van snelheid we het element naar zouden moeten scrollen.
Gelukkig is er voor ons niet teveel betrokkenheid bij de CSS. Het is in wezen een paar eenvoudige elementen in model te brengen, maar het grootste deel hiervan is om enkele van de beeldelementen te positioneren.
Het eerste dat we met onze CSS moeten doen is het BEBAS-lettertype invoeren met @ font-face. Vervolgens voegen we dat toe aan de html om het lettertype voor de site in te stellen. We stellen ook de breedte en hoogte van de html en body in op 100%. Hierdoor kunnen onze dia's de volledige breedte en hoogte van het scherm van de gebruiker aannemen.
@ font-face font-family: 'BebasRegular'; src: url ('font / BEBAS ___- webfont.eot'); src: url ('font / BEBAS ___- webfont.eot? #iefix') formaat ('embedded-opentype'), url ('font / BEBAS ___- webfont.woff') formaat ('woff'), url ('font / BEBAS ___- webfont.ttf ') formaat (' truetype '), url (' font / BEBAS ___- webfont.svg # BebasRegular ') formaat (' svg '); font-gewicht: normaal; lettertype: normaal; html, body font-family: 'BebasRegular'; Breedte: 100%; height: 100%; De hoofdnavigatie krijgt een 'vaste' positie om hem op dezelfde plaats op de hele site te houden. We compenseren deze 20px vanaf de bovenkant om een beetje ruimte erboven te geven en de z-index op 1 te zetten om ervoor te zorgen dat dit op de bovenste laag van de site staat.
De eigenlijke lijst is alleen de stijl van de tekst met een rand aan de onderkant om als een onderstreping te fungeren. Dit heeft een breedte van 53 px. Er wordt ook een overgang toegevoegd zodat deze van de standaardstatus naar de hover-status animeert. Ik heb de -webkit- voorvoegsel hier alleen gebruikt om de code kort te houden, maar de volledige broncode die hierboven kan worden gedownload bevat alle voorvoegsels van de leverancier.
De hover-status gebruikt ook dezelfde eigenschappen als de klasse 'actief'; eigenlijk alleen maar een toename van de tekengrootte en -breedte. De klasse 'active' wordt gebruikt door jQuery om de relevante dia te stijlen die in het licht van het browservenster is.
.navigatie positie: vast; z-index: 1; top: 20px; .navigatie li color: # 333333; display: block; opvulling: 0 10px; line-height: 30px; margin-bottom: 2px; font-weight: bold; -webkit-overgang: alle .2s gemak in-uit; border-bottom: 1px effen zwart; text-align: left; width: 53px; .navigation li: hover, .active font-size: 25px; cursor: wijzer; ! Width: 100px belangrijk;
Het envato-logo krijgt enkele positioneringsstijlen om er zeker van te zijn dat het in het midden van het scherm blijft. Net als de navigatie krijgt deze ook een z-index van '1' om ervoor te zorgen dat deze bovenaan blijft.
.envatologo positie: vast; boven: 50%; Links: 50%; width: 446px; margin-top: -41px; margin-left: -223px; z-index: 1;
Nu gaan we verder met het stylen van de eigenlijke dia's. We geven ze een achtergrondvast 'vast' eigendom. Met de eigenschap background-attachment wordt ingesteld of een achtergrondafbeelding is vastgelegd of schuift met de rest van de pagina, zodat deze handig is voor achtergrondafbeeldingen (zoals gebruikt op dia vier). Voor dit voorbeeld hebben we een wallpaper van Philipp Seiffert gebruikt die hier kan worden gedownload. We plaatsen de positie van de dia in 'relatief'. Dit is de reden dat we de klassen 'slideno' en 'button' absoluut tegenover de dia kunnen plaatsen in tegenstelling tot het daadwerkelijke document.
De doosschaduw is puur voor decoratiedoeleinden en voegt een mooie slagschaduw toe aan de bovenste inzet van elke dia.
.slide background-attachment: fixed; Breedte: 100%; height: 100%; positie: relatief; box-shadow: inzet 0px 10px 10px rgba (0,0,0,0.3); .wrapper width: 960px; Hoogte: 200px; marge: 0 auto; position: relative; .slideno positie: absoluut; bodem: 0px; left: 0px; font-size: 100px; font-weight: bold; kleur: RGBA (255,255,255,0.3);
De knop is voor de knop onderaan de pagina waarmee we naar de volgende dia kunnen gaan. We hebben het onderaan in het midden van elke dia geplaatst en hebben een afbeelding van een pijl als indicator gebruikt.
.knop weergave: blok; width: 50px; hoogte: 50px; positie: absoluut; bodem: 0px; Links: 50%; background-color: # 333333; background-image: url (... /images/arrow.png); background-repeat: no-repeat; .knop: zweeft background-colour: # 494949; cursor: wijzer;
De vormgeving van elke afzonderlijke dia is relatief eenvoudig en volgt telkens hetzelfde patroon. Dia één heeft een achtergrondkleur van '# 5c9900'. In dia twee is ook een achtergrondkleur ingesteld. Dia twee bevat ook afbeeldingen en we kunnen ze allemaal targeten met behulp van de CSS-kiezer n-kind (n). Deze selector kan worden beschreven als
Deze pseudo-klasse koppelt elementen aan op basis van hun posities binnen de lijst met onderliggende elementen van een bovenliggend element.
Dus we zijn in feite elke afbeelding aan het stylen in de volgorde waarin ze in onze opmaak verschijnen. We plaatsen ze eenvoudig ten opzichte van de wikkel van de dia.
/ ****************************** SLIDE 1 ***************** ************** / # slide1 background-color: # 5c9900; / ****************************** SLIDE 2 **************** *************** / # slide2 background-colour: # 005c99; # slide2 img: first-child position: absolute; top: 700 px; links: -150 px; # slide2 img: nth-child (2) position: absolute; top: 300px; left: 100px; # slide2 img: nth-child (3) positie: absoluut; top: 600px; left: 300px; # slide2 img: nth-child (4) position: absolute; top: 400px; left: 300px; # slide2 img: nth-child (5) positie: absoluut; top: 600px; rechts: 300px; # slide2 img: nth-child (6) positie: absoluut; top: 600px; rechts: 300px; # slide2 img: nth-child (7) position: absolute; top: 400px; rechts: 100px; # slide2 img: nth-child (8) position: absolute; top: 100px; rechts: 300px;
Dia drie volgt dezelfde reeks als dia twee.
/ ****************************** SLIDE 3 ***************** ************** / # slide3 background-color: # b6c10b; # slide3 img: first-child position: absolute; top: 700 px; links: 300 px; # slide3 img: nth-child (2) position: absolute; top: 100px; left: 100px; # slide3 img: nth-child (3) positie: absoluut; top: 150px; left: 300px; # slide3 img: nth-child (4) position: absolute; top: 450px; left: 300px; # slide3 img: nth-child (5) position: absolute; top: 200px; rechts: 300px; # slide3 img: nth-child (6) positie: absoluut; top: 100px; rechts: 300px;
Dia vier is iets anders dan de vorige twee dia's omdat het geen afbeeldingselementen of een achtergrondkleur bevat, maar in plaats daarvan een achtergrondafbeelding gebruikt. We hebben het ook de CSS3-eigenschap 'background-size: cover' gegeven. Dit stelt in feite het achtergrondbeeld in om het gehele browservenster te beslaan en zal het formaat wijzigen naarmate het browservenster groter of kleiner wordt. We hebben ook een tekstregel toegevoegd op de laatste dia die we hebben gestileerd en een klasse 'parallaxbg' hebben gegeven
/ ****************************** SLIDE 4 ***************** ************** / # slide4 background-image: url (... /images/Slide4/desktop4.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; achtergrondformaat: omslag; # slide4 .parallaxbg position: absolute; rechts: 40px; top: 40px; font-size: 28px; kleur: RGBA (51,51,51,0.3);
De jQuery is echt waar dit ding begint te komen tot leven. Ik heb de code becommentarieerd, zodat je precies kunt zien wat er gebeurt.
jQuery (document) .ready (function ($) // initialise Stellar.js $ (window) .stellar (); // Cache sommige variabelen var links = $ ('. navigatie'). find ('li'); slide = $ ('. slide'); button = $ ('. button'); mywindow = $ (window); htmlbody = $ ('html, body'); // Setup waypoints plugin slide.waypoint (function (event , richting) // cache de variabele van het gegevensdiakenmerk dat aan elke dia wordt gekoppeld dataslide = $ (this) .attr ('gegevensdia'); // Als de gebruiker omhoog scrolt, wijzigt u de navigatielink met dezelfde gegevensdiakenmerk als de dia naar actief en // verwijder de actieve klasse uit de vorige navigatielink als (richting === 'omlaag') $ ('. navigation li [data-slide = "' + dataslide + '" ] '). addClass (' actief '). vorige (). removeClass (' active '); // else Als de gebruiker naar beneden scrolt, wijzigt u de navigatielink met hetzelfde gegevensdiakenmerk als de dia naar actief en / / verwijder de actieve klasse van de volgende navigatielink anders $ ('. navigation li [data-slide = "' + dataslide + '"]'). addClass ('active'). next ( ) .RemoveClass ( 'actief'); ); // waypoints detecteert de eerste dia niet wanneer de gebruiker naar boven scrolt, dus voegen we dit kleine stukje code toe, dat de klasse // uit navigatiekoppeldia 2 verwijdert en aan navigatiekoppelingsdia 1 toevoegt. mywindow.scroll (functie () if (mywindow.scrollTop () == 0) $ ('. navigation li [data-slide = "1"]'). addClass ('active'); $ ('. navigation li [data-slide = "2"] '). RemoveClass (' active ');); // Maak een functie waaraan een dianummer wordt doorgegeven en ga vervolgens naar die dia met behulp van jquerys animeren. De plug-in Jquery // easing wordt ook gebruikt, dus we hebben de easing-methode van 'easeInOutQuint' doorgegeven die beschikbaar is via de plug-in. functie goToByScroll (dataslide) htmlbody.animate (scrollTop: $ ('. slide [data-slide = "' + dataslide + '"]'). offset (). top, 2000, 'easeInOutQuint'); // Wanneer de gebruiker op de navigatielinks klikt, verkrijgt u de gegevensdiakenmerkwaarde van de koppeling en geeft u die variabele door aan de goToByScroll-functie links.click (functie (e) e.preventDefault (); dataslide = $ (this ) .attr ('gegevensdia'); goToByScroll (dataslide);); // Wanneer de gebruiker op de knop klikt, krijgt u de kenmerkwaarde voor de gegevensdia van de knop en geeft u die variabele door aan de functieknop goToByScroll.click (functie (e) e.preventDefault (); dataslide = $ (this ) .attr ('gegevensdia'); goToByScroll (dataslide);); ); 
Als u dia twee van ons voorbeeld bekijkt, ziet u de 3D-bubbels. Ik heb een beetje gaussiaanse vervaging aan sommige van deze toegevoegd, voornamelijk aan degenen op de voorgrond en op de achtergrond. Het combineren van deze met scherp gefocuste bubbels draagt bij aan het gevoel van diepte dat parallax creëert. Dit is iets dat u misschien moet overwegen bij het proberen om een goede diepgang naar uw site te krijgen.
Veel sites die dit effect gebruiken, zijn vaak behoorlijk zwaar, zorg ervoor dat je je afbeeldingen zo veel mogelijk comprimeert (zonder kwaliteit in te leveren). Als het na het comprimeren nog een tijdje duurt om te laden, overweeg dan om een lader aan uw site toe te voegen.
Parallax scrollen is een van de meest geliefde effecten van de laatste tijd en mensen zijn constant bezig met het verleggen van de grenzen. Hier heb ik je vandaag laten zien hoe je een basiswebsite opzet die gebruikmaakt van parallax scrollen. De demo die ik vandaag heb laten zien is een relatief eenvoudige site voor leerdoeleinden. Voor degenen onder u die op het punt staan een site met dit effect te maken, raad ik u aan tijd te besteden aan het concept en het verhaal, want dit maakt hen uniek, deelbaar en zelfs een genot om door te bladeren. Het gaat erom hoe je dit effect verstandig kunt gebruiken en niet alleen gebruikt voor het gebruik ervan.
Ik hoop dat je het leuk vond om te lezen over parallax scrollen en ik zou graag zien hoe jullie het hebben gebruikt op jullie eigen sites, voel je vrij om links naar hen hieronder te plaatsen. Tot de volgende keer!
