我正在使用视差滚动,目前有一个设置,使我的背景图像以正常内容滚动速度的50%滚动.见这里:www.jurbs.com.(内容在Chrome和Opera中进行了优化)
理想情况下,我想要的是在图像中根本没有滚动,但随着内容的滚动,图像可见性会相应地滑动和前进.这方面的例子可以在这里看到:www.tooyoungtowed.org.
这是相关的CSS:
#content {
z-index: 4;
position: relative;
max-width: 940px;
padding: 0 10px;
margin: 0 auto;
line-height: 1.7;
}
#content article {
width: 300px;
}
#firstbox ,
#secondbox,
#thirdbox,
#fourthbox {
padding-top: 105px;
}
#firstbox {
position: absolute;
top: 0px;
left: 730px;
}
#secondbox {
position: absolute;
top: 2120px;
left: 730px;
}
#thirdbox {
position: absolute;
top: 4240px;
left: 730px;
}
#content h1 {
margin: 0 0 25px 0;
font-size: 60px;
font-family: Helvetica, sans-serif;
font-weight: …我希望在Nexus 5网站(http://www.google.com/nexus/5/)上产生相同的效果- 这与我在滚动时保持Nexus和可更改的屏幕(这是第4部分).
我的情况是我在我的网站上有相同的部分,但是中间有一个iPad,两边都有文字内容,我想在我滚动时改变iPad内部的图像.
请问有什么想法吗？
非常感谢!
我正在使用Skrollr destroy方法在768px以下的任何东西上杀死skrollr.
在这里找到了它,它主要是很好的:
$(function () {
// initialize skrollr if the window width is large enough
if ($(window).width() > 767) {
skrollr.init(yourOptions);
}
// disable skrollr if the window is resized below 768px wide
$(window).on('resize', function () {
if ($(window).width() <= 767) {
skrollr.init().destroy(); // skrollr.init() returns the singleton created above
}
});
});但我的移动设备只是部分关闭了skrollr.特别是iPad.
我在这里也见过这种破坏方法:
//function
$(function skrollrInit() {
//initialize skrollr
skrollr.init({
smoothScrolling: false
});
// disable skrollr if using handheld device
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
skrollr.init().destroy();
} …我在我的网站上实现了以下jQuery视差效果(取自http://www.brandaiddesignco.com/insights/parallax-scrolling-made-easy/):
var top_header = '';
$(document).ready(function(){
top_header = $('.header-container');
});
$(window).scroll(function () {
var st = $(window).scrollTop();
top_header.css({'background-position':"center "+(st*.5)+"px"});
});
它工作得很好,我需要做的就是将它应用到包含背景的类中.但是,背景图像的起始位置是顶部中心,我想将其更改为居中中心.我已经尝试将代码更改为以下内容,这使插件停止工作:
top_header.css({'background-position':"center center"+(st*.5)+"px"});
有什么建议？
谢谢!
在以下HTML中，我将中间div的高度手动设置为200px。如何自动调整此高度，以使div的高度等于浏览器中可见区域的高度？可以使用纯CSS完成此操作，还是需要JavaScript？
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div class="red">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
和CSS：
.parallax {
/* The image used */
background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");
/* Set a specific height */
height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: …将以下代码行与在线源一起使用可以正常工作：
<v-parallax dark height="470" src="https://images.unsplash.com/photo-1466916932233-c1b9c82e71c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</v-parallax>
使用同一行src="@/assets/img/my-picture.png"不起作用。
使它起作用的方法是什么？
同样适用于<v-img src="my/local/source>，因此<img>效果很好。
我有一些图像,我想垂直放在一个页面上作为一个信息图形.但是,我想将背景与前景元素分开,并且有一点视差效果,当你向下滚动时,前景(背景)元素移动......
不知道用jQuery甚至CSS3如何最好地完成这个...任何链接或示例都将是最受欢迎的.
我体内有三个div:
<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
我想要意识到的是,"#b"比其他两个滚动得更快.而已.
所以我写代码(然后根据Mark的建议修改它):
<script>
$(document).ready(function(){
$(window).stellar();
});
</script>
<style>
#wrap{overflow:hidden;}
</style>
...
<body>
<div id="wrap">
<div id="a" data-stellar-ratio="1"></div>
<div id="b" data-stellar-ratio="2"></div>
<div id="c" data-stellar-ratio="1"></div>
</div>
</body>
但结果很可怕.我永远无法滚动到整个页面的底部.
每次#b到达窗口顶部时,整个页面都会运行到顶部(就像我第一次运行此页面时所看到的那样)
我想我仍然不明白stellar.js网站上的介绍意味着什么.
请帮帮我.
我想创建一个主页,当用户滚动时,内容会发生变化.假设用户滚动到y位置并且应该弹出一个图像,当他离开位置y时它应该消失.这是纯粹基于滚动位置完成还是在我开始做一些愚蠢的事情之前还有其他"技巧"吗？我很确定这是通过jQuery实现的,但我只想要底层技术.
我想知道如何实现类似于TodoMovies 3中所见的滚动视差效果？
在TodoMovies 3中,(我认为)a的背景UITableViewCell比页面的滚动更快,产生了非常棒的效果.
您将如何检测TableView滚动视图的滚动并以高效的方式调整单元格的背景图像？
或者效果无法实现UITableView？
我View现在正在处理的应用程序中存在层次结构问题.
其中一个屏幕看起来像这样:
<CoordinatorLayout>
<AppBarLayout>
<Toolbar/>
</AppBarLayout>
<RecyclerView>
... items, some of which are horizontal Recyclers...
</RecyclerView>
</CoordinatorLayout>
整个想法是Toolbar在向下滚动RecyclerView内容时很好地拥有视差.
整个过程工作得很好,但是提到的视差行为存在问题(这是通过自定义AppBarLayout.ScrollingViewBehavior实现完成的).
有两种情况,具体取决于用户在滚动时关注的项目:
Toolbar进出视差.RecyclerView将按预期滚动,但视差行为不会触发,使布局处于奇怪的中间状态.知道为什么会这样,以及如何获得正确的行为,也就是事件一直传递到CoordinatorLayout？
android parallax material-design android-recyclerview android-coordinatorlayout
我在本教程后面实现了水平视差背景.
我希望垂直具有相同的效果.请帮忙.
到目前为止这是我的代码,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var currentX = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
if(currentX == '') currentX = e.pageX;
var xdiff = e.pageX - currentX;
currentX = e.pageX;
$('.parallax div').each(function(i, el) {
var movement = (i + 1) * (xdiff * movementConstant);
var newX = $(el).position().left + movement;
$(el).css('left', newX + 'px');
});
});
</script>
<style>
.parallax {
position: …parallax ×12
jquery ×7
css ×6
javascript ×4
html ×2
scroll ×2
android ×1
animation ×1
background ×1
css3 ×1
image ×1
ios ×1
ipad ×1
parallax.js ×1
skrollr ×1
slider ×1
src ×1
uitableview ×1
vue.js ×1
vuetify.js ×1
web ×1