Animace po skrolu do viditelné části

by Petr Haluza

HTML

<input type="text" id="myField" value="" />

<div class="space"></div>

<div style="position:relative; margin:0 0 0 200px;">
          <div style="background:red; width:500px; height:200px; position:absolute;">obrazek</div>
					<div class='prvek MujPrvek1 slower'>bloček1</div>
					<div class='prvek MujPrvek2 slower'>bloček2</div>
          <div class='prvek MujPrvek3 slower'>bloček3</div>
</div>

<div class="space"></div>

CSS

#myField {position:fixed; top:0; right:0;}
.space { margin-top:500px; width:50px; height:50px; background-color:orange;}

@-webkit-keyframes MujPrvek1 {
    0%   { opacity: 0;  -webkit-transform: translate(0px, -200px);  }
    33%  { opacity: 1;  -webkit-transform: translate(0px, 0px);}
    66%  { opacity: 1;  -webkit-transform: translate(0px, 0px);}
    100% { opacity: 1;  -webkit-transform: translate(0px, 0px);}
}
@keyframes MujPrvek1 {
    0%   { opacity: 0;  transform: translate(0px, -200px);  }
    33%  { opacity: 1;  transform: translate(0px, 0px);}
    66%  { opacity: 1;  transform: translate(0px, 0px);}
    100% { opacity: 1;  transform: translate(0px, 0px);}
}
@-webkit-keyframes MujPrvek2 {
    0%   { opacity: 0;  -webkit-transform: translate(0px, -200px);  }
    33%  { opacity: 1;  -webkit-transform: translate(0px, 0px);}
    66%  { opacity: 1;  -webkit-transform: translate(-50px, -100px);}
    100% { opacity: 1;  -webkit-transform: translate(-50px, -100px);}
}
@keyframes MujPrvek2 {
    0%   { opacity: 0;  transform: translate(0px, -200px);  }
    33%  { opacity: 1;  transform: translate(0px, 0px);}
    66%  { opacity: 1;  transform: translate(-50px, -100px);}
    100% { opacity: 1;  transform: translate(-50px, -100px);}
}
@-webkit-keyframes MujPrvek3 {
    0%   { opacity: 0;  -webkit-transform: translate(0px, -200px);  }
    33%  { opacity: 1;  -webkit-transform: translate(0px, 0px);}
    66%  { opacity: 1;  -webkit-transform: translate(0px, 0px);}
    100% { opacity: 1;  -webkit-transform: translate(50px, 10px);}
}
@keyframes MujPrvek3 {
    0%   { opacity: 0;  transform: translate(0px, -200px);  }
    33%  { opacity: 1;  transform: translate(0px, 0px);}
    66%  { opacity: 1;  transform: translate(0px, 0px);}
    100% { opacity: 1;  transform: translate(50px, 10px);}
}

.MujPrvek1,
.MujPrvek2,
.MujPrvek3 { opacity: 0;
    -webkit-transform: translate(0px, -200px);  transform: translate(0px, -200px);
    -webkit-animation-duration: 1s; ...

JavaScript

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top + 250;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function () {
    $('.prvek').each(function () {
        if (isScrolledIntoView(this) === true) {
            $(this).addClass('jeVidet');
            document.getElementById('myField').value = "ninja";
        }
    });
});