Share
Parallax scrollen is een interessante techniek, waarbij tijdens het scrollen de achtergrondafbeeldingen langzamer transleren dan de inhoud op de voorgrond, waardoor de illusie van 3D-diepte wordt gecreëerd. Omdat ik van plan was mijn persoonlijke website opnieuw te ontwerpen, was mijn eerste doel om de kortste en eenvoudigste code te schrijven om maximale awesomeness te bereiken! Ik zal je laten zien hoe ik het gedaan heb.
Als u op zoek bent naar een snelle manier om aan de slag te gaan met een standaardsjabloon voor uw thema, is het vinden van een eenvoudig Parallax-thema een goede optie. Of blader door onze One Page-sjablonen. U kunt ook serviceproviders vinden op Envato Studio die parallax-scrollsites voor u maken.
In deze tutorial leer ik je de eenvoudigste parallax-scrolltechniek die je ooit tegengekomen bent, dus laten we ingaan!
Deze techniek draait om het regelen van de snelheid van het achtergrondbeeld. Laten we dus beginnen met de HTML-markering, twee secties samen met de vereiste kenmerken maken: "data type" en "Data-speed". Maak je geen zorgen; Ik zal dit later uitleggen.
Ik gebruik de tag met de attributen data type & data snelheden, die zijn geïntroduceerd in HTML5. Dit maakt de HTML-markup schoner en gemakkelijker leesbaar.
Volgens de specificatie voor aangepaste gegevenskenmerken, elk attribuut dat begint met gegevens- wordt behandeld als een opslagruimte voor privégegevens. Bovendien heeft dit geen invloed op de lay-out of presentatie.
We hoeven alleen maar de snelheid van de achtergrondafbeeldingen te regelen data-type = "background" en data-speed = "10" als sleutelattributen om de benodigde parameters te specificeren.
Ik weet wat je denkt: je maakt je zorgen over IE. Nooit bang zijn; Ik heb ook een oplossing daarvoor! We zullen het even bespreken.
Laten we vervolgens de inhoud toevoegen binnen de tag in elk
Ik ben absoluut gepositioneerd Eenvoudige Parallax-scroll
Wat we hier proberen te doen, is het maken van de
#home background: url (home-bg.jpg) 50% 0 herhaal gefixeerd; minimale hoogte: 1000 px; #about background: url (about-bg.jpg) 50% 0 no-repeat min-height: 1000px;
Bij het toevoegen van achtergronden voor beide secties, zou het er als volgt uit moeten zien:
Laten we wat meer CSS toevoegen om de stijl te verfraaien en de pagina wat op te fleuren!
#home background: url (home-bg.jpg) 50% 0 herhaal gefixeerd; minimale hoogte: 1000 px; hoogte: 1000 px; marge: 0 auto; breedte: 100%; maximale breedte: 1920 px; positie: relatief; #home-artikel height: 458px; positie: absoluut; text-align: center; top: 150 px; breedte: 100%; #about background: url (about-bg.jpg) 50% 0 herhaal opgelost; minimale hoogte: 1000 px; hoogte: 1000 px; marge: 0 auto; breedte: 100%; maximale breedte: 1920 px; positie: relatief; -webkit-box-shadow: 0 0 50px rgba (0,0,0,0.8); vakschaduw: 0 0 50px rgba (0,0,0,0.8); #over artikel height: 458px; positie: absoluut; text-align: center; top: 150 px; breedte: 100%;
Nu zou het er zo uit moeten zien ...
Ja, dat klopt; dit is waar de magie begint! Met behulp van jQuery beginnen we met de standaard document.ready () methode om ervoor te zorgen dat de pagina is geladen en klaar is om te worden gemanipuleerd.
$ (document) .ready (function () );
Deze techniek draait om het regelen van de snelheid van de achtergrondafbeelding die in beide secties bestaat.
Nu heb ik je aandacht hier nodig. Het eerste dat hieronder gebeurt, is dat we over elkaar heen zitten op de pagina, die de eer heeft data-type = "background".
Accentsconagua
$ (document) .ready (function () $ ('section [data-type = "background"]'). each (function () var $ bgobj = $ (this); // het object toewijzen); ); Voeg een andere functie toe, .rol(), binnen .elk(), die wordt aangeroepen als de gebruiker begint te scrollen.
$ (venster) .scroll (function () );
We moeten bepalen hoeveel de gebruiker heeft gescrold en de waarde vervolgens delen door de data snelheden waarde, vermeld in de opmaak.
var yPos = - ($ window.scrollTop () / $ bgobj.data ('speed')); $ Window.scrollTop (): we krijgen de huidige schuifwaarde vanaf de bovenkant. Dit bepaalt in feite hoeveel de gebruiker heeft opgerold. $ Bgobj.data ( 'speed') verwijst naar de data snelheden toegewezen in de markup, en YPOS is de laatste waarde die we moeten toepassen voor scrollen. Het zal echter een negatieve waarde zijn, omdat we de achtergrond in de tegenovergestelde richting van de schuif van de gebruiker moeten verplaatsen.
Laten we een beetje meer onderzoeken met een voorbeeld:
In de bovenstaande afbeelding, data snelheden is 10 en laten we aannemen dat het browservenster is geschoven 57px. Dit betekent 57px gedeeld door 10 = 5.7px.
// Stel onze laatste achtergrondpositie samen var varices = '50% '+ yPos +' px '; // Verplaats de achtergrond $ bgobj.css (backgroundPosition: coords);
Het laatste dat we moeten doen is onze laatste achtergrondpositie samenstellen in een variabele. Om de horizontale positie van de achtergrond statisch te houden, hebben we deze toegewezen 50% zoals het xposition. Vervolgens hebben we toegevoegd YPOS als de yposition, en, ten slotte, de achtergrondcoördinaten toegewezen aan onze achtergrond: $ bgobj.css (backgroundPosition: coords);.
Uw definitieve code kan er als volgt uitzien:
$ (document) .ready (function () $ ('section [data-type = "background"]'). each (function () var $ bgobj = $ (this); // toewijzing van het object $ (venster ) .scroll (function () var yPos = - ($ window.scrollTop () / $ bgobj.data ('speed')); // Onze laatste achtergrondpositie samenstellen var coords = '50% '+ yPos +' px '; // Verplaats de achtergrond $ bgobj.css (backgroundPosition: coords);););); Yay, we hebben het gedaan! Probeer het zelf uit.
Er is nog een laatste oplossing: oudere IE kan de en -tags. Dat is echter gemakkelijk te repareren; we gebruiken de standaardoplossing voor het maken van de elementen, waardoor de browser op magische wijze de HTML5-tags herkent.
// HTML5-elementen maken voor IE document.createElement ("artikel"); document.createElement ( "sectie"); Bovendien moeten we een standaard CSS-resetbestand gebruiken om alle browsers goed te laten spelen. Gelukkig zorgen tools, zoals HTML5 Boilerplate, voor het grootste deel van het werk voor ons, als het gaat om het normaliseren van browsers..
Dat doet het voor deze les! Heeft u vragen of opmerkingen die u wilt toevoegen? Laat het me hieronder weten!
En als u op zoek bent naar een snelle oplossing met professionele resultaten, blader dan door onze Parallax-thema en One Page Template-opties, beschikbaar voor aankoop op ThemeForest.
