jquery的背景视差效果
本人知识浅薄,所以对着一个WordPress的主题研究了一天,没错,是一整天,终于弄明白了,效果很满意,目前没用发现什么毛病,既然有jQuery了,弄起来也特别简单。以幻灯片的代码为例:
HTML代码:
<div class="carousel-item active">
<div class="parallax" style="background-image:url(aaa.jpg)"></div>
<div class="position-relative container-fluid">
<div class="carousel-caption text-light pb-5">
<h1 class="mb-3">title</h1>
<p class="category-description mb-4">description</p>
</div>
</div>
</div>
CSS代码:
.parallax {
background-size: cover !important;
position: absolute;
width: 100%;
height: 130%;
top: 0;
opacity: 1;
background-position: bottom;
background-repeat: no-repeat;
background-blend-mode: overlay;
background: #0030b8;
}
jquery代码:
<script>
$(document).ready(function() {
function draw() {
requestAnimationFrame(draw);
scrollEvent();
}
draw();
});
function scrollEvent() {
viewportTop = jQuery(window).scrollTop();
if (jQuery(window).width())
jQuery('.parallax').each(function() {
elementOffset = jQuery(this).offset().top;
distance = -(elementOffset - viewportTop) * 0.35;
jQuery(this).css('transform', 'translate3d(0, ' + distance + 'px,0)');
});
}
</script>
关键的地方就是requestAnimationFrame(draw)
函数。
其实在弄出来那一刻,还是很有成就感的,我感觉到自己的智商很高!
最后修订于 2020-10-29 23:19:45
- 上一篇 给typecho的分类列表增加class
- 下一篇 css动画视口执行,忍不住插件了