On scroll animaties

Het laten animeren van bepaalde elementen bij het scrollen van een website is een populaire techniek. Deze zogenaamde on scroll animaties worden in de praktijk te pas en te onpas gebruikt. Veel gratis en premium WordPress thema’s maken gebruik van deze techniek. In veel gevallen heeft deze techniek geen toegevoegde waarde maar voor bepaalde onderdelen kan het echter de gebruikerservaring verbeteren. Deze techniek is vrij eenvoudig toepasbaar.

Sinds CSS 3 is het mogelijk om met CSS animaties te maken. Dankzij deze techniek is het daardoor erg eenvoudig om on scroll animaties te maken. Voor de CSS animaties gebruiken we het populaire animate.css bestand van Daniel Eden. Hiermee is het een fluitje van een cent om CSS animaties te maken. Daarnaast gebruiken we de jQuery Waypoints plugin voor het triggeren van een functie als er een bepaalde scroll positie bereikt is.

Laten we deze bestanden eerst aan de WordPress website toevoegen.

function prefix_load_scripts() {

	// Waypoints
	wp_enqueue_script(
		'waypoints',
		get_template_directory_uri() . '/assets/waypoints/waypoints.min.js',
		array( 'jquery' ),
		'2.0.5',
		true
	);

	// Animate
	wp_enqueue_style(
		'animate',
		get_template_directory_uri() . '/assets/animate/animate.min.css,
		'1.0.0'
	);

	// Theme
	wp_enqueue_script(
		'site',
		get_template_directory_uri() . '/assets/theme/site.js',
		array( 'jquery', 'waypoints' ),
		'1.0.0',
		true
	);

}

add_action( 'wp_enqueue_scripts', 'prefix_load_scripts' );

De on scroll animatie techniek is toepasbaar op bijna alle HTML elementen. De HTML in mijn voorbeeld ziet er als volgt uit:

<section class="section animate" data-animation-type="fadeInRight" data-animation-delay="0.3s">
	<p>
		Eerste content blok
	</p>
</section>

<section class="section alt animate" data-animation-type="fadeInLeft" data-animation-delay="0.6s">
	<p>
		Tweede content blok
	</p>
</section>

<section class="section animate" data-animation-type="fadeInRight" data-animation-delay="0.9s">
	<p>
		Derde content blok
	</p>
</section>

De sections hebben de classes ‘section’ en ‘alt’ voor het stijlen van deze elementen. De ‘animate’ class zorgt ervoor dat dit element geanimeerd wordt. Met behulp van de extra data attributen kan het type animatie en een animatie vertraging ingesteld worden. Met een stukje javascript die we toevoegen aan site.js kunnen we de on scroll animatie functioneel maken.

( function( $ ) {
	$( document ).ready( function() {

		/**
		* Scrolling
		*/
		function onScroll( items ) {
			items.each( function() {
				animationClass = this.attr( 'data-animation' );
				animationDelay = this.attr( 'data-animation-delay' );

				this.css( {
					'-webkit-animation-delay':  animationDelay,
					'-moz-animation-delay':     animationDelay,
					'animation-delay':          animationDelay
				} );

				this.waypoint( function() {
					this.addClass( 'animated' ).addClass( animationClass );
				}, {
					offset: '80%'
				} );
			} );
		}

		onScroll( $( '.animate' ) );

	} );
} )( jQuery );