Skip to content

Instantly share code, notes, and snippets.

@devinsays

devinsays/functions.php

Last active Sep 25, 2017
Embed
What would you like to do?
Shows how to set up Scroll Reveal to use data attributes to override settings for individual elements.
<?php
wp_enqueue_script(
'prefix-scrollreveal',
get_template_directory_uri() . '/js/scrollreveal.min.js',
array(),
'1.0.0',
true
);
<div class="product" data-animation="true" data-duration="1000" data-scale="0.9" data-opacity=".8" data-distance="40px">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/product.png">
</div>
// Initialize Animations
// https://github.com/jlmakes/scrollreveal
animationsInit: function() {
window.scrollreveal = ScrollReveal();
$('[data-animation]').each( function() {
console.log( $(this) );
var settings = {
'origin' : 'bottom',
'distance' : '0',
'duration': 500,
'delay': 0,
'opacity': 0,
'scale': 1,
'reset': false
}
if ( $(this).data('distance') ) {
settings.distance = $(this).data('distance');
}
if ( $(this).data('duration') ) {
settings.duration = $(this).data('duration');
}
if ( $(this).data('delay') ) {
settings.delay = $(this).data('delay');
}
if ( $(this).data('opacity') ) {
settings.scale = $(this).data('opacity');
}
if ( $(this).data('scale') ) {
settings.scale = $(this).data('scale');
}
scrollreveal.reveal( $(this), settings );
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment