gpt4 book ai didi

javascript - div 框的视差效果

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

我目前正在使用 jquery 库:http://pixelcog.github.io/parallax.js/ ,不要与其更受欢迎的对应物混淆:https://github.com/wagerfield/parallax

我不在乎我是否使用 jQuery 插件,但是当我向下滚动白色 div 顶部的红色 div 时,我很难获得视差效果。 我希望对这两个底部 div 产生与对白色 div 和图片 div 相同的效果。

fiddle :https://jsfiddle.net/jzhang172/rcx2zpau/1/

澄清一下:我不需要 jQuery 插件,我只是在寻找指定的行为。

更新: 我看到唯一有效的是来自 jQuery 的 Scrollmagic 插件,链接在这里:http://scrollmagic.io/examples/ ,所以我会尝试并在此处发布结果。

.one{
height:500px;
overflow:hidden;
}
.someshit{
height:300px;
}
.someothershit{
height:700px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window one" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/0/0d/025Pikachu.png"></div>
<div class="someshit">
Heyheyheyh, some text<br>
Heyheyheyh, some text<br>
Heyheyheyh, some text<br>
Heyheyheyh, some text<br>
</div>
<div class="someothershit" data-parallax="scroll">
HELP ME PARALLAX ONTO THE WHITE DIV PLEASE
</div>

最佳答案

<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
/* image can be used */
background-color: grey;

/* Set a specific height */
min-height: 500px;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>

<div class="parallax"></div>

<div style="height:1000px;background-color:red;font-size:36px">
This is inside Parallax Div
</div>

</body>
</html>

关于javascript - div 框的视差效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38517407/

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