标签: parallax
使用"-webkit-overflow-scrolling:touch"的实时滚动事件
在使用CSS"-webkit-overflow-scrolling:touch"时,我无法在iOS上获得实时scrollLeft位置.
这是一个小提琴演示:http: //jsfiddle.net/WaMUq/
在桌面上滚动时,我在滚动时获得实时scrollLeft数据,而在iOS上我需要等到动量滚动停止后才向我发送scrollLeft数据.
我怎么能绕过这个？我正在尝试实时获取这些数据,以创造一种微妙的视差效果.我已经尝试过Stellar.js和Scrollability.js,两者都遇到了同样的问题,等待滚动停止.
推荐指数
解决办法
查看次数
平滑背景图像的视差滚动
我做了一些研究并编写了一个简单的jQuery,它以稍微不同的速度滚动背景到前景,当你向下滚动网站时创建一个平行的效果.
不幸的是它有点生涩.
这是HMTL的基本布局:
<body>
<section>
Site content goes here.
</section>
</body>
这是CSS:
body {
background-image: url('../images/bg.png');
background-repeat: repeat-y;
background-position: 50% 0;
}
这是JS:
$(window).scroll(function () {
$("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
});
https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/
非常简单,但我的问题是,当你滚动时,即使在强大的计算机上,它也会有点生涩.
有没有办法使背景视差平滑动画？
推荐指数
解决办法
查看次数
禁用移动设备的Skrollr(<767px)
首先要感谢@prinzhorn这样一个令人惊叹且功能强大的图书馆.我的问题:我已经在我网站的标题中实现了Skrollr视差背景,但我想在移动设备上查看时禁用此功能,尤其是iphone等.(最大宽度:767px).我想知道最好的方法是什么？如果destroy()函数能够做到这一点,或者我应该使用另一种技术？另外,如果destroy()是答案,我该怎样才能正确实现？非常感谢和示例或演示非常感谢.
推荐指数
解决办法
查看次数
CoordinatorLayout和ImageView在滚动时调整宽度的问题
我试图把一个ImageView在CollapsingToolbarLayout其中占据了整个屏幕上的负载,当你滚动内容时,16:9高分辨率图像的宽度大小调整,直到图像占据屏幕的整个宽度.那时,我希望图像的视差app:layout_collapseParallaxMultiplier为0.5
使用此XML布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/img_hero"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="@drawable/lake"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="none"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="@android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
完成以下任务:
以下显示图像的实际边界:
当我滚动时,我希望更多的图像宽度显示为图像的高度缩小并导致以下结果:
一旦我到达这一点,这就是我希望0.5的崩溃视差乘数生效的地方.
我已经搞砸了许多不同的滚动行为,尝试了所有的ImageViewscrollTypes,但没有用.有没有人知道这是否可能,如果可以的话,可以提供任何关于我做错或不做的指示.
我是否需要创建自己的自定义CoordinatorLayout.Behavior才能完成此操作？
android android-imageview parallax android-coordinatorlayout android-collapsingtoolbarlayout
推荐指数
解决办法
查看次数
为全局视差添加透视HTML - 纯CSS
我一直在关注Keith Clark的 CSS Parallax指南.他的概念是这样的:
HTML:
<div class="container”>
<div class="parallax-child”></div>
</div>
CSS:
.container {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
perspective: 1px;
perspective-origin: 0 0;
}
.parallax-child {
transform-origin: 0 0;
transform: translateZ(-2px) scale(3);
}
这在大多数情况下都是完美的,例如在我的开发网站上.但是我需要将这个效果添加到另一个我根本无法控制HTML结构的网站,下面是基本结构树,添加注释到我可以编辑的地方.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer">
<p>Content in here scrolls slower than everything else</p>
</div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This …推荐指数
解决办法
查看次数
CSS背景附件固定修复铬67
嘿伙计们,我只是想发布一个关于任何视差背景图像的快速问题,该图像已经消失在新版本67 chrome更新上.
目前,我在网上找到了两个有效的修复程序.
有没有其他可能更好的工作,谁能让我知道为什么新版本的chrome 67正在使背景固定图像消失？
您可以将以下转换属性添加到包含具有固定附件的背景图像的元素中.参考(1)
yourdiv {
position:relative;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
或者您可以使用背景固定图像将元素的位置更改为静态.参考(2)
yourdiv {
position:static;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
}
希望现在有所帮助,并提前感谢您发布的任何答案.
推荐指数
解决办法
查看次数
是否可以在div中对img标签而不是背景图像进行视差？
我遇到过一些很棒的教程(特别是我现在正在看这篇教程:http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/); 然而,它们似乎都涉及一个<div>固定的背景图像.如果我的图像在<img>标签中,是否可以实现类似的视差效果？
推荐指数
解决办法
查看次数
IE11的非跳跃视差 - 但如何？
在我的网站上,我在创建视差时体验 - 还有很多其他人 - 在Internet Explorer 11(在Windows 8.1计算机上)上有一种跳跃/滞后效果.以Firefox为例,它工作得非常好.
根据我的研究,这是IE11的一个常见问题,没有解决方案,但我找到了一个网站以某种方式解决了这个问题(或者做了一个解决方法？!？):http: //focuslabllc.com/journal
但是我的网站和这个问题有同样的问题:http: //negativespacealphabet.com/ 他们为了让它工作有什么不同的做法？我感谢您的帮助!
推荐指数
解决办法
查看次数
React-Spring - 由于高度限制而合并导航和页脚的视差问题
我正在使用react-spring 中的视差来创建视差效果。我知道可以使用其父级的高度来设置其面积。然而，此解决方案在滚动时通过保持 和 在屏幕上可见而导致奇怪的行为。我在这里有几个问题：
- 我怎样才能以正常的方式设置这个布局？
- 我是否需要将 和 放置在具有固定高度的 ParallaxComp 内部（我希望有更好的解决方案）？
- 有没有办法根据里面的内容来假设其高度，而不是使用道具因子？
先感谢您。
应用程序.js
import React from "react";
import ParallaxComp from "./ParallaxComp";
import "./styles.css";
export default function App() {
return (
<div className="App">
<nav style={{ height: "5rem", background: "purple", color: "white" }}>
Nav
</nav>
{/* <main style={{ height: "100%" }}> */}
<main style={{ height: "100vh" }}>
<ParallaxComp />
</main>
<footer style={{ height: "5rem", background: "blue", color: "white" }}>
Footer
</footer>
</div>
);
}
视差Comp.js
import React from "react";
import { …推荐指数
解决办法
查看次数
CSS：“溢出：隐藏”替代方案不会破坏 3D 转换
我正在尝试制作具有视差效果的水平剖面。背景中应该有一个图像，其滚动速度与页面不同。
问题是：我希望视差元素包含在父元素中，因此父元素的工作方式有点像子元素的掩码：子元素仅在父元素的边界内可见。
我知道这可以通过在两个背景元素之间设置视差元素来实现，这些元素的背景位于视差元素“上方”并遮挡它，但此方法不适用于我的情况。
我想到的一个明显的想法是在父级上使用溢出：隐藏。然而，这会破坏 3D 变换，因此不存在视差。
如何达到所描述的效果？
这是一个代码笔： https: //codepen.io/rradarr/full/mdwgard。我希望红色矩形在带有黑色边框的“视差容器”之外不可见。
* {
margin: 0;
}
html, body {
height: 100%
}
main {
position: relative;
width: 100%;
perspective: 1px;
transform-style: preserve-3d;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
background-color: blue;
}
.static {
min-height: 800px;
}
.parallax-container {
border: solid black 3px;
height: 600px;
width: 100%;
transform-style: preserve-3d;
position: relative;
}
.parallax-child {
position: relative;
width: 100%;
height: 100%;
transform: translateZ(-2px) scale(2.01);
z-index: -1;
}
#img-or-whatever {
height: 900px;
width: …推荐指数
解决办法
查看次数
标签 统计
parallax ×10
css ×7
html ×4
jquery ×3
html5 ×2
javascript ×2
3d ×1
android ×1
android-collapsingtoolbarlayout ×1
mobile ×1
momentum ×1
overflow ×1
react-spring ×1
reactjs ×1
skrollr ×1