gpt4 book ai didi

javascript - 滚动时只播放 CSS 动画

转载 作者:行者123 更新时间:2023-11-28 03:30:03 26 4
gpt4 key购买 nike

我在页面上有内容,在中途我有使用 CSS 设置动画的技能栏。我只想在看到技能栏时播放动画。

我尝试使用 js,当我使用一个技能栏时它起作用了。此处显示:jsfiddle.net/pCgYe/6/

但是当我添加更多条形图时,它就完全停止工作了。喜欢这里:jsfiddle.net/pCgYe/7/

我知道我必须向 js 代码中添加一些内容,但我不确定到底要添加什么。

function isElementInViewport(){
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
$('.skiller #skill:not(.html5)').each(function(){
var top = $(this).offset().top;
console.log(top);
console.log(scrollTop + viewportHeight);
if(scrollTop + viewportHeight >= top ){
$(this).find('.expand').addClass('html5');
console.log(true);
}else{
console.log(false);
}
});
}

$(window).scroll(isElementInViewport);

如果有人能指导我正确的方向。

先谢谢你们了!

最佳答案

这是因为在您的 5 栏版本中,您已经直接添加了 css 类,而不是通过 javascript 以编程方式添加。这意味着动画会立即发生。

<div class="skiller col">
<ul id="skill">
<li><span class="expand html5"><small>%70</small></span><em>HTML
5</em></li>

<li><span class="expand css3"><small>%90</small></span><em>CSS
3</em></li>

<li><span class=
"expand jquery"><small>%50</small></span><em>jQuery</em></li>

<li><span class=
"expand photoshop"><small>%10</small></span><em>Photoshop</em></li>

<li><span class=
"expand dreamweaver"><small>%100</small></span><em>Dreamweaver</em></li>
</ul>
</div>

在每一行展开后删除类,并将它们添加到您的 javascript 中,就像您在单栏版本中所做的那样。我在工作,所以不能做这个的正确版本,但请尝试以下 javascript:

function isElementInViewport(){
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
$('.skiller #skill:not(.html5)').each(function(){
var top = $(this).offset().top;
console.log(top);
console.log(scrollTop + viewportHeight);
if(scrollTop + viewportHeight >= top ){
$(this).find('.expand').addClass('html5');
$(this).find('.expand1').addClass('css3');
$(this).find('.expand2').addClass('jquery');
$(this).find('.expand3').addClass('photoshop');
$(this).find('.expand4').addClass('dreamweaver');
console.log(true);
}else{
console.log(false);
}
});
}

$(窗口).scroll(isElementInViewport);

在删除您在 HTML 中添加的类后,您还需要更改 HTML 扩展类,如下所示:(注意:这是一个糟糕的实现,但请以此为基础进行大幅改进)。

<div class="skiller col">
<ul id="skill">
<li><span class="expand"><small>%70</small></span><em>HTML
5</em></li>

<li><span class="expand expand1"><small>%90</small></span><em>CSS
3</em></li>

<li><span class=
"expand expand2"><small>%50</small></span><em>jQuery</em></li>

<li><span class=
"expand expand3"><small>%10</small></span><em>Photoshop</em></li>

<li><span class=
"expand expand4"><small>%100</small></span><em>Dreamweaver</em></li>
</ul>
</div>

检查这个 fiddle 的实际工作情况:http://jsfiddle.net/pCgYe/9/

重要提示:理想情况下,您希望使您的代码可重用和可扩展。我的“修复”是一种非常老套的方法,没有采用最佳实践。如果您永远不会再次使用它并且只需要尽快完成它,这没关系,但我建议您考虑以更加 DRY 的方式重建它。

关于javascript - 滚动时只播放 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18462336/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com