Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
More detail on how to use scroll reveal with data attributes in a WordPress theme.
/*!
* Script for initializing globally-used functions and libs.
*
* @since 1.0.0
*/
(function($) {
var theme = {
// Init functions
init: function() {
this.bindEvents();
},
// Bind Elements
bindEvents: function() {
this.animationsInit();
},
// Initialize Animations
// https://github.com/jlmakes/scrollreveal
animationsInit: function() {
window.scrollreveal = ScrollReveal();
$('[data-animation]').each( function() {
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');
}
if ( $(this).data('reveal-class') ) {
var revealClass = $(this).data('reveal-class')
settings.afterReveal = function(element) {
$(element).addClass(revealClass);
}
}
scrollreveal.reveal( $(this), settings );
});
},
};
theme.init();
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment