activate javascript animation when on view
Question
I use an animantion to animate bar with percent, but it's in javascript, i have already seen the answer to do it for CSS animation, but i don't find anything to activate the animation when the user get to the section with the bar.
With my code the animation loads at the same moment when the page is loading, i need to make it loads when the content is on view because it will not be the first section and there is no point to animate it if the user can't see it.
Thanks for helping i let you a Fiddle
this is my javascript :
jQuery(document).ready(function() {
jQuery('.skillbar').each(function() {
jQuery(this).find('.skillbar-bar').animate({
width: jQuery(this).attr('data-percent')
}, 2500);
});
});
2 answers
solution1
0 2016-01-08 12:29:57
It works well for me. To achieve that you want use Lasy Load
jQuery(document).ready(function() { jQuery('.skillbar').each(function() { jQuery(this).find('.skillbar-bar').animate({ width: jQuery(this).attr('data-percent') }, 2500); }); });
#home { height: 100%; background-color: wheat; } #skills { background-color: lightslategrey; height: 100%; } h1 { margin: 0 0; padding-top: 5%; font-size: 2rem; font-family: 'roboto'; color: white; text-align: center; } .container-skillbar { width: 70%; padding-top: 5%; padding-left: 10%; height: auto; overflow: none; } .skillbar { position: relative; display: block; margin-bottom: 4%; width: 100%; background: lightgrey; height: 30px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -ms-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; } .skillbar-title { position: absolute; top: 0; left: 0; width: 18%; font-weight: bold; font-size: 1.1em; color: #fff; background: #6adcfa; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .skillbar-title span { display: block; text-align: center; background: rgba(0, 0, 0, 0.15); padding: 0 20px; height: 30px; line-height: 30px; font-family: 'roboto'; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .skillbar-bar { height: 30px; width: 0px; padding-left: 25px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .skill-bar-percent { position: absolute; right: 10px; top: 0px; font-family: 'roboto'; font-weight: 900; height: 30px; line-height: 30px; color: #black; opacity: 0.5; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <section id="home"> </section> <section id="skills"> <h1>Mes compétences</h1> <div class="container-skillbar"> <div class="skillbar clearfix " data-percent="75%"> <div class="skillbar-title" style="background: #186998;"><span>Photoshop</span> </div> <div class="skillbar-bar" style="background: #2697d8;"></div> <div class="skill-bar-percent">75%</div> </div> <!-- Ende Skill Bar --> <div class="skillbar clearfix " data-percent="70%"> <div class="skillbar-title" style="background: #aa631d;"><span>Illustrator</span> </div> <div class="skillbar-bar" style="background: #e17d1a;"></div> <div class="skill-bar-percent">70%</div> </div> <!-- Ende Skill Bar --> <div class="skillbar clearfix " data-percent="50%"> <div class="skillbar-title" style="background: #a52b7b;"><span>Indesign</span> </div> <div class="skillbar-bar" style="background: #df3fa8;"></div> <div class="skill-bar-percent">50%</div> </div> <!-- Ende Skill Bar --> <div class="skillbar clearfix " data-percent="65%"> <div class="skillbar-title" style="background: #821c83;"><span>Premiere</span> </div> <div class="skillbar-bar" style="background: #b91ebb;"></div> <div class="skill-bar-percent">65%</div> </div> <!-- Ende Skill Bar --> <div class="skillbar clearfix " data-percent="45%"> <div class="skillbar-title" style="background: #611983;"><span>After Effect</span> </div> <div class="skillbar-bar" style="background: #a726e3;"></div> <div class="skill-bar-percent">45%</div> </div> <!-- Ende Skill Bar --> <div class="skillbar clearfix " data-percent="75%"> <div class="skillbar-title" style="background: #e34e26;"><span>HTML5</span> </div> <div class="skillbar-bar" style="background: #f16528;"></div> <div class="skill-bar-percent">75%</div> </div> <div class="skillbar clearfix " data-percent="50%"> <div class="skillbar-title" style="background: #016fba;"><span>CSS3</span> </div> <div class="skillbar-bar" style="background: #2aa9e0;"></div> <div class="skill-bar-percent">50%</div> </div> <div class="skillbar clearfix " data-percent="35%"> <div class="skillbar-title" style="background: #16337e;"><span>Jquery</span> </div> <div class="skillbar-bar" style="background: #1d45aa;"></div> <div class="skill-bar-percent">35%</div> </div> <!-- Ende Skill Bar --> </div> <!-- Ende container Skill Bar --> </section> </body>
solution2
0 2016-01-08 12:31:17
A simple example:
var check_is_in_view = function(elm){
var bounds = elm.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
var your_element = document.getElementById("foo");
var result = check_is_in_view(your_element);
console.log(result);
Hope, thats help.
Update: https://jsfiddle.net/0pj91p2z/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to activate animation when the content scrolls into view
activate animation when content scroll into view
How do you activate a JS text animation when in view on a Carousel?
Activate animation when in viewport
Activate css animation/translation with javascript
Activate CSS Animation when visible
How to activate an animation when a certain button is clicked?
How to activate a CSS3 (webkit) animation using javascript?
Activate Javascript when click link PHP
Activate :focus when the page loads with Javascript
Related Tags