第一次在这里寻求帮助,希望有一个简单的答案。我在我的网站中使用 AOS - Animate on Scroll 库,我希望能够根据屏幕宽度更改 aos 延迟值,因为根据屏幕尺寸我需要不同的延迟时间。
是否可以将下面的“1300”值称为“number”之类的值,然后通过 CSS 或 JavaScript 中的媒体查询更改该值?
<div class="skill" data-aos="fade-in" data-aos-delay="1300">
<div class="icon-container">
<img src="images/pencilruler.gif" alt="">
</div>
<h1>Graphic Design</h1>
<p>
Custom designs for screen and print. From logo designs and corporate branding, to adverts and packaging.
</p>
</div>
我一直没有找到解决这个问题的方法。我尝试在 javascript 中使用 getElementById() 但只能更改 div 的内容,而不能更改其中的值。
目前我的解决方法(如下)是为每个延迟长度设置重复的 div,然后使用“display:none;”我可以根据屏幕尺寸删除不需要的 div。这真的很痛苦,而且有点困惑,因为我想要很多延迟变化。
@media screen and (max-width : 419px){
.skill-desktop{
display:none;
}
}
感谢任何帮助或想法。
最佳答案
喜欢Hugo Elhaj-Lanhsen回答说您可以更改数据属性。我想添加如何根据视口(viewport)大小执行此操作,使用 Window.matchMedia和 MediaQuery.addListener()在 JavaScript 中。
const mqList = window.matchMedia("(max-width: 419px)")
// If media query matches on load
if (mqList.matches) {
setDelay(400) // using Hugo's function
}
// If media query matches after resize
mqList.addListener(function(mql) {
if (mql.matches) {
setDelay(400) // using Hugo's function
}
})
并确保添加 HTML viewport meta tag所以视口(viewport)就是设备的大小。
<meta name="viewport" content="width=device-width, initial-scale=1">
关于javascript - 如何使用 javascript 或 CSS 更改 HTML AOS 延迟值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64692877/