觀看時激活javascript動畫
[英]activate javascript animation when on view
問題描述
我使用了一個動畫來為進度條設置動畫，但是它在javascript中，我已經看到了為CSS動畫完成動畫的答案，但是當用戶進入帶有該節的部分時，我找不到任何激活動畫的方法。
使用我的代碼，動畫是在頁面加載的同時加載的，我需要在內容顯示時加載它，因為它不是第一部分，並且如果用戶不能動畫也沒有動畫的意義。看見。
謝謝你的幫助，我讓你小提琴
這是我的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
這對我來說很有用。 要實現您想要的使用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
一個簡單的例子：
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);
希望，這就是幫助。
當內容滾動到視圖中時如何激活動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.