function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).on('scroll', function(){
if(isScrolledIntoView('.animated')){
$('.animated').addClass('bounceIn');
}
else{
$('.animated').removeClass('bounceIn');
}
});
.dummy{
padding: 1em;
border: 1px solid black;
width: 50%;
margin: 0 auto;
}
.animated{
margin: 1em auto;
text-align: center;
border: 1px solid red;
padding: 1em;
width: 30%;
}
.animated.bounceIn{
animation-duration: .75s;
}
.bounceIn {
animation-name: bounceIn;
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1,
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus similique excepturi, incidunt doloribus cum! Atque pariatur nostrum autem quaerat quis libero velit eligendi eaque culpa deserunt neque molestias dolorum nobis ab possimus aperiam quam vero corporis, qui unde debitis ut facilis, consequatur, laboriosam! Accusamus neque debitis nemo, harum mollitia magnam ratione aliquid optio, quia tempore earum! Culpa, rem. Perferendis animi doloribus maiores maxime quos repellendus iste, ex architecto a vel placeat cum nesciunt aliquam similique! Sunt est obcaecati illo rerum qui, inventore at. Doloremque nam animi eveniet consequuntur soluta architecto! Quae deserunt quisquam, libero ex labore mollitia quibusdam maiores commodi quaerat odio quam magnam minima praesentium corporis molestiae sint esse laudantium fuga impedit autem id. Dolore iure ex iste ad praesentium quidem omnis minus saepe facere nesciunt dignissimos soluta hic suscipit molestias rerum ut veritatis itaque eum voluptatibus non, modi corporis, laudantium earum perspiciatis. Fuga sint mollitia sit deserunt ab porro maiores, laudantium quae obcaecati optio corporis aut quidem nisi blanditiis eius veritatis animi, hic fugiat exercitationem! Tempore aut, corporis facilis iure voluptatem eaque libero amet odit culpa, esse. Alias, harum, maiores! Error laborum nostrum earum aliquam architecto repudiandae magni voluptatibus iusto deserunt. Blanditiis saepe tempore totam repellendus voluptates veniam molestias quia beatae adipisci optio eligendi, quae quos inventore tempora ad harum vel, aspernatur minima eos iste recusandae. Iusto ipsum tenetur, fugit autem nesciunt unde doloribus eligendi voluptatem quam odit in quae reprehenderit cum deserunt provident. Quia tempore enim, maxime minus quisquam repellat hic ea fugit nostrum iusto adipisci temporibus vero natus, illo. Tempora itaque est praesentium eaque vel et quasi iste recusandae non aspernatur fugit soluta laboriosam nulla voluptas quidem esse error, hic numquam odio repudiandae nihil ipsa, atque dolorum quisquam? Minus perferendis consectetur accusantium veniam amet, in, nulla iste voluptatem, mollitia ipsum facere dolores. Provident repudiandae non assumenda nostrum nam velit qui, ex impedit illo expedita animi adipisci enim eius natus voluptatibus porro consectetur quis. Dignissimos, excepturi dolorum aut libero laudantium obcaecati nobis perspiciatis iure. Nobis dicta amet consequatur necessitatibus deserunt exercitationem ipsum vero error nulla, aliquid inventore voluptatum possimus omnis voluptatibus suscipit velit nam, perferendis quos asperiores quisquam voluptates ducimus consequuntur sed. Eveniet deleniti, reprehenderit aliquid animi! Mollitia debitis quidem, amet consequatur nemo laudantium voluptatum recusandae, necessitatibus dicta nam alias, itaque eum rerum. Iure illum, natus dolor explicabo quae nam consequatur cupiditate, soluta</div>
<div class="animated">See me bounce!</div>