Hoe een kleverige zijbalk op pagina te bouwen Scroll met ScrollMagic.js

In deze tutorial gebruiken we ScrollMagic.js, een enorm populaire JavaScript-bibliotheek, om een ​​zijbalk te maken die plakkerig wordt op de pagina-scroll. In drie stappen (HTML, CSS en JavaScript) schetsen we het hele proces.

Dit is wat we gaan creëren (bekijk de versie op het volledige scherm om zijn volledige magie te ervaren en geef het een beetje ♥):

De zijbalk wordt alleen vastgezet wanneer het browservenster minimaal 768 px breed is en de bovenrand van de viewport bereikt. Kleinere schermen hadden in plaats daarvan een gestapelde lay-out.

Wat is ScrollMagic.js?

Voor de beste beschrijving van ScrollMagic gaan we naar de Github-pagina:

"De javascript-bibliotheek voor magische scroll-interacties."

Gemaakt door Jan Paepke, kan het effectief worden gecombineerd met het Greensock Animation Platform (GSAP) voor het bouwen van complexe en aantrekkelijke JavaScript-animaties. Voor een beter begrip van de mogelijkheden van ScrollMagic, bekijk deze lijst met voorbeelden en bekijk deze tutorials en cursussen over Tuts+.

Aan de slag met ScrollMagic.js

Om met ScrollMagic aan de slag te gaan, moet u het eerst opnemen in uw projecten. Je kunt het downloaden door de GitHub-repo te bezoeken, door een pakketbeheerder (bijvoorbeeld npm) te gebruiken of door de benodigde items te laden via een CDN (bijvoorbeeld cdnjs). 

Voor onze demo kiezen we de laatste optie. Met dat in gedachten, als je kijkt onder de instellingen tabblad van onze demopen kunt u zien dat ik een extern JavaScript-bestand heb toegevoegd:

Ik heb Babel ook opgenomen voor het compileren van de ES6-code tot ES5.

1. De HTML

Onze HTML bestaat uit twee helpersecties en een bericht. De post bevat twee subsecties: de details van de post en de zijbalk van de post. In een echt scenario kan de inhoud van de post overeenkomen met een blogpost, een hotelkamer of een schoolprogramma.

Dit is de opmaak:

2. De CSS

We zullen geen speciale stijlen definiëren voor ons voorbeeld. Interessant is echter dat we CSS-raster gebruiken om de postcontent op middelgrote schermen en hoger in te stellen (≤768px) .

Hier is een deel van de CSS:

.sectie weergave: flex; align-items: center; justify-content: center; hoogte: 100vh; achtergrond: # ee3f3f; kleur wit; text-align: center;  .container max-width: 1000px; marge: 0 auto;  @media-scherm en (min-breedte: 768px) .post-content display: grid; grid-gap: 20px; rooster-sjabloon-kolommen: 70% 30%; 

• 

  CSS-rasterlay-out: een snelstartgids

  Hoe we de lay-out op het web benaderen, is aan het veranderen, en in de voorhoede van die verandering is CSS Grid Layout. Deze bijgewerkte snelstartgids slaat de details over ...

3. Het JavaScript

Met de HTML en CSS op zijn plaats, zijn we klaar om de JavaScript-code te onderzoeken die verantwoordelijk is voor het afvuren van ScrollMagic.  

Houd er rekening mee dat de beste manier om te begrijpen hoe deze plug-in werkt, de documentatie is. Een andere nuttige bron van informatie is het spiekbriefje van ScrollMagic, gecreëerd door Petr Tichy. 

Hier is onze JavaScript-code:

const postDetails = document.querySelector (".naast details"); const postSidebar = document.querySelector (". post-sidebar"); const postSidebarContent = document.querySelector (". post-sidebar> div"); // 1 const-controller = nieuwe ScrollMagic.Controller (); // 2 const scene = nieuw ScrollMagic.Scene (triggerElement: postSidebar, triggerHook: 0, duration: getDuration). AddTo (controller); // 3 if (window.matchMedia ("(min-width: 768px)"). Matches) scene.setPin (postSidebar, pushFollowers: false);  // 4 window.addEventListener ("resize", () => if (window.matchMedia ("(min-width: 768px)"). Matches) scene.setPin (postSidebar, pushFollowers: false);  else scene.removePin (postSidebar, true);); functie getDuration () return postDetails.offsetHeight - postSidebarContent.offsetHeight; 

Laten we de noodzakelijke acties kort beschrijven:

1. We beginnen met het maken van een controller.
2. Vervolgens maken we een scène met aangepaste opties en voegen deze toe aan de controller.
3. Als de breedte van het venster ten minste 768 px is en de zijbalk de bovenste rand van het kijkvenster bereikt, wordt het vastgezet voor een duur die in de scène is gedefinieerd. In ons geval wordt de gewenste duur berekend door de detailshoogte van de post af te trekken van de hoogte van de inhoud van de zijbalk. 
4. Naarmate het formaat van het venster verandert, controleren we de breedte ervan. Als de zijbalk smaller is dan 768 px, blijft deze deel uitmaken van de normale documentstroom, anders wordt deze plakkerig.

4. Browserondersteuning

De plug-in zelf heeft geweldige ondersteuning voor browsers. Naast de ondersteuning van de plug-in, maakt onze demo gebruik van CSS Grid, dus het werkt alleen in browsers die deze lay-outmethode ondersteunen.

Conclusie

In deze zelfstudie zijn we erin geslaagd een zijbalk te maken die plakkerig wordt terwijl we de pagina af scrollen. Onze basisimplementatie is niet het krachtigste dat u kunt bouwen met deze geweldige bibliotheek, maar hopelijk nuttig genoeg om er in een aankomend project van te profiteren..

Als u ten slotte bekend bent met andere effectievere ScrollMagic-methoden voor het maken van onze demo, kunt u ons dit laten weten in de onderstaande opmerkingen.