我使用Skrollr库为背景创建视差效果.但是,当调用skillor.init()时,体高太高并在页面下方创建额外的空间.
这个问题可以在这里看到:http: //codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo"><a href="#">21GUNS</a></h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul> …我需要为客户端构建一个多方向的JQuery视差页面 - 他们基本上希望它以类似的方式工作 - https://victoriabeckham.landrover.com/INT
我准备好了艺术品,并找到了许多jquery库,可以让我滚动水平/垂直 - 但我不知道如何在特定的坐标上将两者结合在一起.有谁能指出我正确的方向？
编辑:我最初在看过Superscrolarama并认为所有问题都已解决之后签了这个帖子 - 但是我一直在努力实现它 - 我不认为它是我认为的救星,我需要水平和垂直视差以及滚动到实现以上,它似乎不支持 - 所以任何其他提示,我将非常感激!
我一直在做一个项目,我已经完成了内容.然而,对于设计,我正在考虑使用视差滚动技术.
但是,我所能找到的只有JavaScript或Jquery,而我只熟练使用CSS3.
可以使用CSS3实现视差滚动(如果需要,可以使用HTML5),而不是使用jquery插件吗？如果我可以指向一些相同的教程,那将是很好的.
注意:这接近我想要产生的效果(http://jessandruss.us/)
我想不使用创建的视差效果background-image有background-attachment: fixed,因为background-attachment: fixed没有在iOS上工作这么好.这是我想出的:
<article class="twentyseventeen-panel">
<div class="panel-image">
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" >
<img src="<?php echo esc_url( $thumbnail[0] ); ?>" style="width: 100%;" />
</div>
</div>
</article>
.twentyseventeen-panel {
overflow: hidden;
position: relative;
}
.panel-image {
position: relative;
height: 100vh;
max-height: 200px;
}
现在我不得不去图像滚动来做视差效果.我尝试将图像设置到某个fixed位置,但是当我这样做时,我的图像不再显示.如何让此图像具有视差效果？
在你说这是不可能的之前,我知道它是.这是一个例子:http://victoriabeckham.landrover.com/INT
主要问题是iOS在滚动时冻结DOM操作,因此您必须使用某种技术来克服该问题.我希望使用的parallax插件是stellar.js,但我遇到的问题是该插件的"iOS演示"在桌面上并不真正可用.今天早上我摆弄了3个小时,无法在iOS和桌面上都能正常使用.
我需要一些想法,要么是一种技术来配置stellar.js以同样的方式在两者上工作(我不确定这是否可行),或者是另一个可以同时工作的库,或者可能对我如何编程解决方法有所了解我.
任何帮助表示赞赏.
我有一个页面,我正在应用视差效果.这是使用translate3d完成的.现在,虽然这很好用,但我想知道如何在使用鼠标滚轮滚动时覆盖默认的"步骤"？
如果我滚动滚动条,一切都很好.但是使用鼠标滚轮,它都是跳跃的.
我是以一种非常直接的方式做到这一点的:
var prefix = Modernizr.prefixed('transform');
$window.on('scroll', function(){
var scroll_top = $window.scrollTop();
if(scroll_top < forside_infographics_offset){
$_('#slider').css(prefix , "translate3d(0,"+(scroll_top/3)+"px,0)");
}
});
现在,我已经看到这个滚动超级平滑的网站,还有一个带有台阶的鼠标滚轮.我试着看看代码,他正在使用requestAnimationFrame的似乎是,但他如何实现这种精确的滚动效果,我不确定.
有任何想法吗？
我正在使用Swift在iOS 8.4中构建一个应用程序.
我有一个包含a 和UITableView的自定义.这一切都相当直接,一切都很好.UITableViewCellUILabelUIImageView
我正在尝试创建一个类似于此演示中演示的视差效果.
我目前在我的代码中有这个代码 tableView.cellForRowAtIndexPath
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell = self.tableView.dequeueReusableCellWithIdentifier("myitem", forIndexPath: indexPath) as! MixTableViewCell
cell.img.backgroundColor = UIColor.blackColor()
cell.title.text = self.items[indexPath.row]["title"]
cell.img.image = UIImage(named: "Example.png")
// ideally it would be cool to have an extension allowing the following
// cell.img.addParallax(50) // or some other configurable offset
return cell
}
该块存在于类似的类中 class HomeController: UIViewController, UITableViewDelegate, UITableViewDataSource { ... }
我也知道我可以通过我的班级听滚动事件func scrollViewDidScroll.
除此之外,感谢帮助!
我想知道如何实现类似于Yahoo News Digest应用程序的视差滚动.其中当用户水平滚动背景图像时,以不同的速度滚动,启用分页.
可能是他们使用带有背景视图的ScrollView来完成它.不完全确定.提示实现这样的滚动会很棒.我检查了类似的问题,但找不到我想要的答案.
请考虑以下情形:
我认为我有一些功能,但它有一些问题:
当我成功解决#2(或#3)时,这可能是一个问题.现在,我正在使用一个使用runnable的处理程序并在其中调用此命令:
mViewPager.setCurrentItem((mViewPager.getCurrentItem() + 1) % mViewPager.getAdapter().getCount(), true);
我已经尝试过这篇文章了,但是效果不好,因为当用户拖动到完成切换到另一个页面之前停止时它会出现同样的问题.
只有类似的解决方案可以使用单个ViewPager(此处),但我需要使用2个ViewPagers,每个都会影响另一个.
所以我自己尝试过:假设一个viewPager是"viewPager",另一个(应该跟随"viewPager")是"viewPager2",这就是我所做的:
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
int lastPositionOffsetPixels=Integer.MIN_VALUE;
@Override
public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {
if (!viewPager2.isFakeDragging())
viewPager2.beginFakeDrag();
if(lastPositionOffsetPixels==Integer.MIN_VALUE) {
lastPositionOffsetPixels=positionOffsetPixels;
return;
}
viewPager2.fakeDragBy((lastPositionOffsetPixels - positionOffsetPixels) * viewPager2.getWidth() / viewPager.getWidth());
lastPositionOffsetPixels = positionOffsetPixels;
}
@Override
public void onPageSelected(final int position) {
if (viewPager2.isFakeDragging())
viewPager2.endFakeDrag();
viewPager2.setCurrentItem(position,true);
}
@Override
public void onPageScrollStateChanged(final …我试图找出添加简单视差行为的正确逻辑.
我想在页面上有许多元素,它们的顶部偏移量开始一定距离(例如300px).然后当您向下滚动页面时,一旦元素的顶部被显示,它将缓慢向上移动(绑定到滚动),直到元素的顶部到达视口的中间,此时它的顶部偏移为0并且它保持在原位.
我尝试使用第三方脚本(Scroll Magic,Stellar等),但是当我现在无法得到它时,我正在尝试自定义代码:
https://jsfiddle.net/louiswalch/5bxz8fku/1/
var $Window = $(window);
var offset_amount = 400;
var window_height = $Window.height();
var window_half = (window_height/2);
var sections = $('SECTION.reveal');
sections.each(function() {
var element = $(this);
// Make sure we always start with the right offset
element.css({top: offset_amount});
$Window.bind('scroll', function() {
var viewport_top = $Window.scrollTop();
var viewport_middle = viewport_top + (window_height/2)
var viewport_bottom = viewport_top + window_height;
var element_top = element.offset().top;
if (element_top > viewport_top && element_top <= viewport_bottom) {
var distance_to_middle = (element_top - …