Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active August 29, 2015 13:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save srikat/8818436 to your computer and use it in GitHub Desktop.
Save srikat/8818436 to your computer and use it in GitHub Desktop.
Adding scroll animations in Parallax Pro. http://sridharkatakam.com/adding-scroll-animations-parallax-pro/
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );
// load Waypoints
// Source: http://imakewebthings.com/jquery-waypoints/
wp_enqueue_script( 'waypoints', get_stylesheet_directory_uri() . '/js/waypoints.min.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'waypoints-init', get_stylesheet_directory_uri() .'/js/waypoints-init.js' , array( 'jquery', 'waypoints' ), '1.0.0' );
/* Scroll animations
--------------------------------------------- */
@media only screen and (min-width: 1025px) {
.home-section-2, .home-section-3 .widget, .home-section-4, .home-section-5 .widget,
.home-even a.button, .home-odd a.button,
.parallax-home .simple-social-icons ul li {
opacity: 0;
}
}
jQuery(function($) {
$('.home-section-1').waypoint(function() {
$(this).toggleClass( 'animated fadeInDown' );
},
{
offset: '100%',
});
$('.home-section-2, .home-section-4').waypoint(function(direction) {
if (direction == 'up') {
$(this).removeClass( 'fadeIn' ).addClass( 'fadeOut' );
}
else {
$(this).removeClass('fadeOut').addClass( 'animated fadeIn' );
}
},
{
offset: '50%',
});
$('.home-section-3 .widget').waypoint(function(direction) {
if (direction == 'up') {
$(this).removeClass( 'fadeIn' ).addClass( 'fadeOut' );
}
else {
$(this).removeClass('fadeOut').addClass( 'animated fadeIn' );
}
},
{
offset: '50%',
});
$('.home-section-5 .widget').waypoint(function(direction) {
if (direction == 'up') {
$(this).removeClass( 'fadeInUp' ).addClass( 'fadeOut' );
}
else {
$(this).removeClass('fadeOut').addClass( 'animated fadeInUp' );
}
},
{
offset: '80%',
});
$('.home-odd a.button, .home-even a.button').waypoint(function() {
$(this).toggleClass( 'animated bounceIn' );
$(this).css('opacity','1');
},
{
offset: '50%',
triggerOnce: true
});
$('.parallax-home .simple-social-icons ul li').waypoint(function() {
$(this).toggleClass( 'animated fadeIn' );
},
{
offset: '90%',
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment