个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我刚开始学习视差，这就是我得到的
<!DOCTYPE HTML>
<html>
<head>
<title> test parallax </title>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<style type="text/css">
body,ul,li,div,h1{
margin: 0;
padding: 0;
}
body{
background: url(2.jpg);
}
#kotakgede{
width: 960px;
height: 2000px;
margin: auto;
position: relative;
}
.kotak1,.kotak2{
width: 500px;
height: 300px
}
.kotak1{
background: red;
position: absolute;
top: 200px;
display: inline-block;
}
.kotak2{
background: blue;
top: 800px;
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div id="kotakgede" >
<div data-speed='10' class='kotak1 parallax'><h1>Kotak Satu</h1></div>
<div class='parallax kotak2' data-speed='100'><h1>Kotak Dua</h1></div>
</div>
<script type="text/javascript">
$('.parallax').each(function(){
var $bgobj = $(this);
$(window).scroll(function() {
var posisi = -( ( $(window).scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));
var koordinat = '50% '+ posisi + 'px';
$bgobj.css({ 'top': koordinat });
});
});
</script>
</body>
</html>
当我在 div 上定义背景图像并更改 bgobj.css backgroundPosition 时它的工作原理，但我想要的是一个使用视差的小盒子所以我使用“顶部”定位但现在它不起作用
请帮忙
最佳答案
你把背景图片放在<body>中不是 <div>并创建看起来很奇怪的字符串变量: '50% '+ posisi + 'px' .
关于javascript - 如何视差边距最高值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21040555/
26
4
0
好的，所以我已经创建了自己的视差 jQuery/JS 脚本，但我只是不知道如何定位支持以下内容(需要以下内容)的浏览器: 支持背景位置的转换 我正在尝试的站点(预览)是: My Test Site 我
我正在制作带有固定背景和封面的整页。 当我添加视差时 - 动画看起来不错，但它滞后太多，我不知道为什么。我有一台很好的 PC，所以这不是这个问题，我之前让其他人产生了视差，这并不滞后。 有什么解决办法
我有一个奇怪的组合 - 视差和汉堡菜单。问题是米 导航会在您悬停的任何地方下降，不仅 当您将鼠标悬停在汉堡菜单图标上时。我认为这是一个厚厚的错误 代码，但我找不到它。我没有 jquery 的。还有，我
因此，我一直在努力围绕这种名为“视差”的整洁效果。基本上，背景滚动比前景元素慢。 我发现这个新的“技巧”正在起作用。随着滚动的进行，更改top属性以创建视差效果。 问题... 因此，为了提高性能并减轻
我的导航栏在 CSS 中加入视差效果后无法保持固定。 我在我的网站上放置了一个带有过渡 JS“Math.round($(window).scrollTop()) > 490)”的固定导航栏。 之后，我
这是一个非常模糊的问题，但我不确定从哪里开始，所以如果有人能给我一些想法，那你就太好了。 我想在我的网站主页上使用视差效果，但我不确定如何创建这种效果。我想要的效果在这里装箱http://davega
我使用了本教程中的视差脚本 http://tympanus.net/codrops/2011/01/03/parallax-slider/ 我在这里发布了一个 fiddle http://jsfidd
我想知道如何创建视差滚动效果之类的东西。向下滚动得越远，div 变得越不透明，在某个点之后，它又开始变得更加透明。我知道需要 JS/JQuery 才能做到这一点。谁能给我一个简单的方法来实现这个目标？
我的页面上有一个元素是绝对定位的。 我正在尝试编写一段 jQuery 代码，使该元素的滚动速度比页面上其他元素的滚动速度慢。 到目前为止，我已经写了这篇文章，但似乎根本无法让它发挥作用。有没有人有这方
我是 cocos2d 世界的新手，我正在开发我的第一个教程并面临一个问题我的问题是我有一个图像(1024 X 320)并且我的方向是横向我需要从右到左连续移动该图像为此目的我使用了 Ray 的太空射击
我需要调试此 jQuery 的帮助，其中我操纵容器中元素的上边距，该容器具有固定大小并将溢出设置为隐藏，以便我可以创建视差效果。视差有效，但如果您向下滚动一个像素，然后重新加载页面，它就会中断。谁能帮
我有一个 div，我想留在原地，这样导航栏和其他部分就可以通过它。 这是我目前的工作:
我建了一个网站，页面很长。我们决定使用纯 CSS3 为它添加视差并且它起作用了。 我从这里得到的 CSS3 视差代码: codepen.io/keithclark/pen/JycFw 后来，我们决定应
由于我对 Javascript/Jquery/HTML5/CSS3 还是个新手，我想我应该问一个问题给你们这些更有经验的程序员。 我有点卡在我的程序逻辑的开头。我想做一个具有视差“滚动”效果的网站，但
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，
-- 更新 2 -- 如果您使用单个相机计算距离，下面的文章非常有用(尽管它使用的是 Python 而不是 C++):Find distance from camera to object/marke
我有一个使用 skrollr 构建的视差网站在我到达页面末尾之前效果很好。我想要一个 成为您可以在页面上滚动的最后/最远点。 目前，如果我在大屏幕上查看时会留下巨大的空白，或者我无法进一步向下滚动以在
我不明白为什么会这样:我有: https://jsfiddle.net/d5jehq02/1 background forefront 我正在
我看到很多例子说明视差背景当你滚动或 ListView 视差但是我找不到一个清楚的例子如何在你滚动 Activity 时对图像实现视差效果。 可以在 Airbnb 应用程序中找到示例实现。向下滚动时，
我的背景图片来自background-url，我的视差适用于我放置的图片:background-attachment: fixed; 我怎样才能让背景图片在我滚动时稍微移动一点？ 这是我正在谈论的例子
我是一名优秀的程序员,十分优秀！