观看时激活javascript动画
[英]activate javascript animation when on view
问题描述
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. 
我使用了一个动画来为进度条设置动画，但是它在javascript中，我已经看到了为CSS动画完成动画的答案，但是当用户进入带有该节的部分时，我找不到任何激活动画的方法。
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 : 这是我的javascript：
jQuery(document).ready(function() {
jQuery('.skillbar').each(function() {
jQuery(this).find('.skillbar-bar').animate({
width: jQuery(this).attr('data-percent')
}, 2500);
});
});
2 个解决方案
解决方案1
0 2016-01-08 12:29:57
It works well for me. 这对我来说很有用。 To achieve that you want use Lasy Load 要实现您想要的使用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>
解决方案2
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/ 更新： https ： //jsfiddle.net/0pj91p2z/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当内容滚动到视图中时如何激活动画 - How to activate animation when the content scrolls into view
当内容滚动到视图中时激活 animation - activate animation when content scroll into view
在轮播中查看时，如何激活JS文本动画？ - How do you activate a JS text animation when in view on a Carousel?
在视口中激活 animation - Activate animation when in viewport
使用javascript激活css动画/翻译 - Activate css animation/translation with javascript
可见时激活 CSS 动画 - Activate CSS Animation when visible
单击某个按钮时如何激活 animation？ - How to activate an animation when a certain button is clicked?
如何使用javascript激活CSS3（webkit）动画？ - How to activate a CSS3 (webkit) animation using javascript?
单击链接PHP时激活Javascript - Activate Javascript when click link PHP
当页面使用Javascript加载时激活：focus - Activate :focus when the page loads with Javascript
相关标签