Skip to content

Instantly share code, notes, and snippets.

@ABooooo
Created February 12, 2019 13:44
Show Gist options
  • Save ABooooo/8ce17e446965bfc0ccb4d861b63f183c to your computer and use it in GitHub Desktop.
Save ABooooo/8ce17e446965bfc0ccb4d861b63f183c to your computer and use it in GitHub Desktop.
//http://jsfiddle.net/RokoCB/tw6g2oeu/7/
(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el){
function visPx(){
var H = $(this).height(),
r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));
} visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
$(".c-arrow-down-anim").inViewport(function(px){
if(px) $(this).find('i').addClass("fadeInLeft").delay( 5000 ) ;
});
// CSS
// CSS animations https://www.theappguruz.com/tag-tools/web/CSSAnimations/
.c-arrow-down-anim {
@include font-size(2);
text-align: center;
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-300%, 0, 0);
transform: translate3d(-300%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-300%, 0, 0);
transform: translate3d(-300%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment