标签: parallax

我对使用纯 CSS 的视差网站有疑问。
问题是它使用 css 变换比例来创建视差效果，这会导致缩放容器 div 内的图像和文本产生模糊效果。
我尝试过filter:blur(0)，以及我在网上找到的其他修复解决方案，但在 Firefox 中没有任何方法可以修复它。
此外还有另一个问题，图像的滑块在浏览器页面的左侧留下了一些像素。
有人能帮我吗？

http://www.jeanclaudechiementin.com/etoile/index.html

您可以在页面顶部的徽标和菜单上看到问题

我必须在 owl carousel 中使用 parallax.js 作为背景图像。例如，我想将http://pixelcog.github.io/parallax.js/与https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html一起使用， 我该怎么做？笔：https : //codepen.io/naaatasha/pen/gRdoej

<div class="owl-carousel slider">
  <div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://trawnik.nazwa.pl/TrawnikProducent2016/wp-content/uploads/slide-strong-1.jpg">
            <div class="container">
                <div class="box">
                    <h2 class="h2 wow fadeIn text-right">co tam</h2>
                    <span class="subtitle wow fadeIn">ihsisdijbvjd</span>
                </div>
            </div>
        </div>
  <div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://www.focus.pl/upload/galleries/19/trawa-19061_l.jpg">
            <div class="container">
                <div class="box">
                    <h2 class="h2">lorem ipsum</h2>
                    <span class="subtitle">asdsk jbsjfd</span>
                </div>
            </div>
        </div>
    </div>


.slider {
    position: relative;
    display: table;
}
.box {
    display: table-cell;
    vertical-align: middle;
    width: 1%;
}
.slide-wrapper {
    height: 800px; …

标题说明了一切。这是我尝试基于背景实现导航颜色更改图像的示例

问题是它需要与使用滚动提升视差类型效果的网站一起使用，这是我试图通过演示网站实现这种效果的网站

我正在尝试在 iOS 中创建带有标签的视差滚动标题。

1. 我发现很少有提供视差标题的库TableView。

2. 我正在尝试根据TablView 使用委托但现在正在工作的 pageViewController 中的内容偏移来降低页眉视图的高度。

我的问题是我找不到任何方法来添加带有 PageViewController 的视差标题，我如何创建这个 Desired View 。

有没有人做过这个是ios，？

这是一个关于如何在 React 中最好地产生视差效果的一般问题！

我想根据滚动位置直接更新元素的位置。目标是让元素看起来是固定的。我尝试了一些不同的方法，但总是在 Mac 上的 Safari 中出现断断续续/闪烁行为的问题，有时是 Chrome，在某些设备上。

我试过让身体固定并让根 div 滚动（以摆脱某些浏览器的弹性效果）但同样的问题。我也试过将 translateZ(0) 添加到活动 3d 渲染中，但也有同样的问题。

这是由 React 更新组件的频率的某些机制引起的还是浏览器问题？

有没有更好的方法来创建这种效果？

import React, { useState, useEffect } from "react";

const useScroll = () => {
  const [scroll, setScroll] = useState(0);
  useEffect(() => {
    window.addEventListener("scroll", scrollHandler);
    return () => {
      window.removeEventListener("scroll", scrollHandler);
    };
  }, []);
  const scrollHandler = () => {
    setScroll(window.scrollY);
  };
  return scroll;
};

export default function App() {
  const scrollPos = useScroll();

  return (
    <main style={{ height: "300vh" }}> …

我想使用 Three.js 对鼠标移动制作视差效果。基本上我想在画布上生成一堆云，并希望它们在移动鼠标时在 x 轴上移动。

所以我已经尝试将云作为图像添加到场景中。我怎样才能将鼠标移动与这些云联系起来？或者我应该以不同的方式向场景添加云？

我如何添加云：

    var imgCloud = new THREE.MeshBasicMaterial({ 
        map:THREE.ImageUtils.loadTexture('img/cloud.jpg')
    });
    imgCloud.map.needsUpdate = true;

    // Cloud
    var cloud = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), imgCloud);
    cloud.overdraw = true;
    scene.add(cloud);

我试图对 Blazor 中的 onscroll 事件做出反应，以便在用户向下滚动网页时为图像设置动画（类似于此网站上的品牌徽标： https: //lebenswelten-stgabriel.at/）。我尝试过本机 onscroll 事件，也尝试使用 js 互操作，但它没有执行任何操作。这是目前 Blazor 中不可用的东西，还是我可能只是在错误的组件上监听滚动事件？

描述

我正在尝试使用 实现一些视差动画react-spring，但我无法找到一种以响应/统一方式分隔容器的方法。

可重现的片段

在这里，我制作了一个片段，其中包含在滚动时为一些 div 设置动画的基本视差效果：

<Parallax pages={5}>
  <ParallaxLayer offset={0} speed={0.4} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={0.9} speed={0.6} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.1} speed={0.8} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.9} speed={1} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={2} speed={1.2} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>
</Parallax>

问题

具有基于其内容的高度的图层会使它们没有响应，因为每个图层都是从指定offset位置开始的。

结论

如果图层设置为指定的视口高度，我猜这会起作用，但这真的是唯一的方法吗？或者我可能误解了这个组件的用法？

目前，我正在尝试在 React 中实现以下视差效果，其中我的图像垂直处于固定位置但随文本从左向右移动。

我已经使用 useEffect 来实现这一点，我采用总高度像素并相应地移动我的组件。这样做的问题是它在我的屏幕上看起来很完美，但是一旦我将它调整到更大或更小的屏幕，布局就会变得混乱。是否有同样的效果但响应友好。随意编辑 CodeSandBox

CodeSandBox（全屏查看以获得更好的参考）：https ://codesandbox.io/s/stoic-rumple-s8cr6?file=/src/App.js

代码：

export default function App() {
  const [index, setIndex] = useState(false);
  const [display, setDisplay] = useState(false);
  const [number, setNumber] = useState(false);
  const [screen, setScreen] = useState(false);

  useEffect(function onFirstMount() {
    const changeBackground = () => {
      let value = window.scrollY;
      console.log(value);
      let img = document.getElementById("moveLeft");
      let text = document.getElementById("moveUp");
      let text2 = document.getElementById("text2");
      let text3 = document.getElementById("text3");
      let text4 = document.getElementById("text4");

      let imgWidth = 280;

      text.style.marginTop = "-" + value * …

我正在玩skrollr插件,但无法实现我想要的东西,所以寻求帮助.我已经能够实现简单的效果,例如<div id="intro-left" data-0="opacity: 0" data-180="opacity: 1">(意味着当用户向下滚动180时,我的DIV称为intro-left变为可见)

问题是我不喜欢使用滚动距离,因为如果有人拥有相同的屏幕分辨率,这只会有意义吗？

我想做的是告诉skrollr:"一旦DIV位置在屏幕上可见,将DIV从不透明度0改为不透明度1"(换句话说"一旦用户到达某一点,将DIV从不透明度0改为不透明度1"在页面上向下滚动)

这可以通过skrollr实现,以及如何实现？

非常感谢