Skip to content

Instantly share code, notes, and snippets.

@HenryCarless
Forked from noahub/onscroll_animations.css
Last active October 19, 2021 15:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save HenryCarless/25e1d4643267e179a36edeb2c1f73bc0 to your computer and use it in GitHub Desktop.
Save HenryCarless/25e1d4643267e179a36edeb2c1f73bc0 to your computer and use it in GitHub Desktop.
On-scroll Animations
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<style>
.revealOnScroll{opacity:0;}
</style>
<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<script>
//Update this function call with your own element ID, animate.css animation, and timeout in milliseconds. Each animated element requires its on function call.
//Supported animations are 'fadeInUp' 'flipInX' 'lightSpeedIn' 'bounceIn' 'slideInLeft' 'slideInRight' 'fadeInLeft' 'fadeInRight'. Other animations must be added on line 41 if used.
addAnimationData('#lp-pom-image-126','bounceIn','1000');
//addAnimationData('#your-next-element','bounceIn','2000');
function addAnimationData(elem, elemData, elemTimeout) {
$(elem).addClass("revealOnScroll").attr("data-animation",elemData).attr("data-timeout",elemTimeout);
}
$(function() {
var $window = $(window),
win_height_padded = $window.height() * 1.1,
isTouch = Modernizr.touch;
if (isTouch) { $('.revealOnScroll').addClass('animated'); }
$window.on('scroll', revealOnScroll);
function revealOnScroll() {
var scrolled = $window.scrollTop(),
win_height_padded = $window.height() * 1.1;
// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
//add additional animate.css animations to the removeClass function
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn bounceIn slideInLeft slideInRight fadeInLeft fadeInRight')
}
});
}
revealOnScroll();
});
//Original script created by Benoît Boucart: http://blog.webbb.be/
/**
* Do not remove this section; it allows our team to troubleshoot and track feature adoption.
* TS:0002-03-037
*/
</script>
@HenryCarless
Copy link
Author

Added type="text/css" to css script.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment