标签: parallax
使用jQuery为一个div进行视差滚动
我想要实现的是使背景中的一些div比其余的更慢,以产生视差滚动效果.我发现并修改了这段jQuery代码:
$(window).scroll(function () {
$('.anim').css({
'top': -($(this).scrollTop() / 3) + "px"
});
});
除了一个例外,它的工作正常,我的div有"top:200px",据我所知,第一次滚动它会将top重置为0并且正确地执行它.这是演示,所以你可以看到为什么它看起来不错,不介意"黑色世界"切割,它现在只是一个占位符.当您第一次滚动时,您会注意到"跳转"到顶部:0.反正有没有让它发生？
推荐指数
解决办法
查看次数
在SpriteKit中使用UIInterpolatingMotionEffect？
UIInterpolatingMotionEffect 旨在与 UIView 一起使用，但是是否有可能在节点上的 SpriteKit 中使用它？
如果没有，是否有人有想法以另一种方式实现该效果。
提前致谢
推荐指数
解决办法
查看次数
视差贴图仅适用于一个方向
我已经实现了陡峭视差、浮雕和视差遮挡贴图的多种变体，它们都有一个只能在一个方向上正常工作的错误。这让我相信问题是在视差映射之外计算的值之一。我不知道出了什么问题。
这是一个从不同角度进行视差贴图的立方体，您可以看到视差效果仅在立方体的一侧是正确的：
这是使用的 GLSL 代码：
顶点着色器：
layout(location = 0) in vec3 vertexPosition;
layout(location = 1) in vec3 vertexNormal;
layout(location = 2) in vec2 textureCoord;
layout(location = 3) in vec3 vertexTangent;
layout(location = 4) in vec3 vertexBitangent;
out vec3 eyeVec;
out vec2 texCoord;
uniform vec3 cameraPosVec; // Camera's position
uniform mat4 modelMat; // Model matrix
void main(void)
{
texCoord = textureCoord;
fragPos = vec3(modelMat * vec4(vertexPosition, 1.0));
// Compute TBN matrix
mat3 normalMatrix = transpose(inverse(mat3(modelMat)));
TBN = mat3(normalMatrix * vertexTangent,
normalMatrix …推荐指数
解决办法
查看次数
iScroll视差效果
我试图了解paclax如何与iscroll5一起使用.据我所知,我可以定义一个容器作为改变滚动速度的指标.但是,我需要做的是同时对几个元素应用速度比.
我们来看下面的例子,我将如何一次性更改speedratioX所有h2元素？
这是jsfiddle(可能更容易)并且在SO中的相同示例下面:
var container = document.getElementsByClassName('iscroll__wrapper')[0],
myScroll = new IScroll(container, {
scrollX: true,
scrollY: false,
mouseWheel: true
});.iscroll__wrapper {
overflow-x: scroll;
overflow-y: hidden;
}
ul {
margin: 0;
padding: 0;
display: flex;
width: 1200px;
height: 300px;
}
li {
box-sizing: border-box;
flex: 0 0 auto;
width: calc(100% / 3);
padding-left: 2em;
padding-right: 2em;
list-style: none;
}
figure {
margin: 0;
}
img {
display: block;
width: …推荐指数
解决办法
查看次数
如何让网页背景图片的滚动速度变慢
我想做一个视差效果但是我尝试了很多方法还是做不到。现在我有一半的视差效果，即背景图像是固定的，没有移动，下一个图像将覆盖上一个图像，但现在我希望它成为当我向下滚动时背景图像也会向下移动，但速度比原来的速度。
<!DOCTYPE html>
<html>
<style>
html, body
{
height: 100%;
width: 100%
}
html
{
overflow:hidden;
}
body
{
color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
overflow-x:hidden;
overflow-y:scroll;
}
*
{
margin:0;
padding:0;
font-family: Century Gothic;
}
.top
{
background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)), url('../image/Kinkis-Bottomless-Brunch-Lead-Image.jpg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.bottom
{
background-image:url('../image/AdobeStock_80592193.jpeg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.main{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.main2{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.nav
{
float:left;
list-style-type: …推荐指数
解决办法
查看次数
如何使用纯 CSS 或 CSS/JS（不使用 JQuery）使一个 div 的滚动速度比页面上的其他项目慢或快？
我想做的就是使页面上的一个元素（div 最简单）比页面上的其他项目滚动得更慢或更快。例如，滚动时，该特定 div 将以其他项目速度的 50% 或 200% 移动，等等。
这似乎是一个简单、直接的事情，但我找不到任何这样的例子。另外，我不想使用 JQuery、其他人的粗略/过于复杂的第三方插件等。只是简单、干净、CSS 和 JS。
推荐指数
解决办法
查看次数
jQuery在移动设备上使用skrollr自动滚动？
我使用skrollr为iOS制作了一个视差网站.我想以编程方式向下滚动到页面上的某个点.我使用过jquery滚动插件,它们可以在桌面上运行,但不能在移动设备上运行.如何使用jQuery模拟swipeup或以某种方式模拟滚动到另一个点？谢谢!
编辑:这不起作用的原因是在移动设备上,由于iOS在滚动期间停止动画,因此skrollr实际上不会滚动.相反,它会侦听触摸事件并移动元素.这就是为什么scrollTo插件不起作用的原因.(来源:https://github.com/Prinzhorn/skrollr#mobile-support)
推荐指数
解决办法
查看次数
Android视差头效应
我想重新创建UI功能,例如新的G +应用程序,或者在标题图片上庄严地调用视差效果的airbnb界面.我的应用程序在不同的约束条件下使用(两个)ListView和Gridview,我正在浏览@CFlex 教程以重新创建它但无法实现效果.
Main.axml:
namespace ParallaxTest
{
[Activity(Label = "ParallaxTest", MainLauncher = true, Icon = "@drawable/icon")]
public class ParallaxTest : Activity, AbsListView.IOnScrollListener
{
int count = 1;
public GridView _gridView;
public CustomImageView _imageView;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
// Get our button from the layout resource,
// and attach an event to it
_gridView = new GridView(this)
{
VerticalFadingEdgeEnabled = false,
LayoutParameters =
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent,
LinearLayout.LayoutParams.MatchParent),
CacheColorHint …推荐指数
解决办法
查看次数
如何在滚动时实现水平条后面的视差
我现在已经看过几次这种效果了,但是我找不到它的"名字" - 它叫什么？这种效应背后的基本理论是什么？它是使用纯CSS,还是主要由JS驱动？
描述:
当用户垂直向下滚动页面时,纯色背景让位于窗帘 " 窗帘显示 "的背景图像.然而,不是仅仅到达页面的底部,另一个水平条,以与前一个"纯背景"相同的速率移动,从底部覆盖背景图像.当用户继续滚动时,纯色背景再次让位于背景图像,但这次背景已更改为其他图像.效果类似于魔术师在物体前面挥动他或她的手,并且物体以某种方式显着变化.
另一种说法是在实心背景中有"间隙",虽然可以看到不同的背景图像.
这是我找到的一个例子(经过一段时间的搜索):http://www.astoriacassis.com/
(忽略顶部的"画廊"式旋转图像.向下滚动并注意游泳池的图片,然后再看一盏带有大象的灯.)
最初我认为它可能类似于视差效果,但它实际上看起来大不相同.
我以前见过这种效果,我想知道如何复制它.
推荐指数
解决办法
查看次数
如何添加Pure CSS Parallax Scrolling
我想在我的网站上添加一些纯CSS视差滚动功能,但我尝试的一切似乎都不起作用.我也在这里寻找答案,但没有回答我的问题.有谁知道我怎么能拿这个代码:http: //wolfleader116.github.io/(对不起,Doctype声明不像实际文件那样缩进.)并添加一个纯CSS视差滚动功能,以便背景以半速滚动？谢谢!
推荐指数
解决办法
查看次数