Verander content tijdens scrollen met JavaScript

Home/News/Verander content tijdens scrollen met JavaScript

[ad_1]

 

De ontwerper van Lo-Flo Records is Julie Flogeac die met illustraties, foto’s, animaties en gemengde media werkt. Deze invloed zie je meteen als je de site bezoekt. De site heeft een mooi handgemaakt gevoel, want de ontwerpster gebruikt niet alleen digitale tools, maar tekent ook veel illustraties met de hand, die ze daarna inscant. Het is een verfrissende afwisseling en de illustraties brengen een levendig element aan de site. Dat begint al bij de animatie waarmee de site start, die als een vrije vorm begint, zich naar linksboven verplaatst en dan het merklogo van de site wordt.

Het effect werkt door bij het laden van de content, die eveneens van geijkte paden afwijkt. Want er zijn al placeholders op het scherm, die bestaan uit gekleurde driehoeken met geweven texturen. Wanneer de bezoeker op de site scrolt en de inhoud in de viewport verschijnt, verandert de driehoek en verschijnt de werkelijke inhoud ervan.
Doordat de geschilderde texturen en de visueel aantrekkelijke beelden consistent worden toegepast, heeft de site een prettig ritme en compositie. Omdat Lo-Flo Records het gearchiveerde werk van muzikant en performer Jane McNealy is, gaat de site meer over haar dan over de andere muzikanten van het label.

TECHNIEK

1. Verander met scrollen

Om de afbeeldingen te veranderen wanneer je scrolt, zoals je ziet op de site van Lo-Flo Records waar driehoeken veranderen in content, gebruiken we de bibliotheek van waypoints. Deze kun je downloaden van imakewebthings.com/waypoints en op zichzelf gebruiken of met jQuery.

<script src=”js/noframework.waypoints.min.
js”></script>

2. CSS stylen

Voeg wat stijlen aan de sectie <head> toe en stel een hoogte in zodat er iets op de pagina staat waarnaar je kunt scrollen. De volgende CSS maakt een container voor de inhoud die we willen tonen.

<style>
body {
height: 1500px;
}
#container {
width: 1200px;
margin: 0 auto;
}

3. Voeg een afbeelding toe

Voeg de code voor het block toe. Ook dit krijgt een grote margin-top, zodat die ergens onderaan de pagina maar buiten zicht verschijnt. De afmetingen hiervan passen bij de achtergrondafbeeldingen. In de klasse ‘original’ wordt de eerste afbeelding eraan toegevoegd.

#block {
margin-top: 2000px;
width: 323px;
height: 323px;
}
.original {
background-image: url(“img/corner.
png”);
}

4. Verander de afbeelding

De laatste CSS is een klasse voor een andere afbeelding. Die wordt toegevoegd wanneer de <div> op 50% van het browserscherm komt. Hierdoor ziet de gebruiker de verandering ook in beeld.

.change {
background-image: url(“img/pic.jpg”);
}
</style>

5. Voeg HTML-inhoud toe

Voeg nu in de sectie <body> de inhoud toe waarop de CSS-stijlen worden toegepast. Dat zijn twee <div>-tags waaraan je de geschikte id en klasse toekent. In de volgende stap voeg je het JavaScript toe, dat je ook in de <body> zet.

<div id=”container”>
<div id=”block” class=”original”></div>
</div>

6. Voeg het waypoint toe

De volgende JavaScript-code voegt het waypoint toe aan de <div>-tag ‘block’. Wanneer die 50% in het browserscherm is, verwijdert het JS de CSS-klasse ‘original’ en voegt het de CSS-klasse ‘change’ toe. Sla de code op en scrol omlaag om de afbeelding te zien veranderen.

<script>
var waypoint = new Waypoint({
element: document.getElementById(‘block’),
handler: function (direction) {
this.element.classList.remove(‘original’);
this.element.classList.add(‘change’);
},
offset: ‘50%’
}) </script>

[ad_2]

Source link

2017-03-20T22:39:19+00:00 17 maart, 2017|Tags: , , , , , |0 Reacties

Geef een reactie