那些一眼难忘的视差效果（Cool parallax effect）

 2644 /  0 / Posted on 3 years ago / Updated on 2020-06-13

视差是远处的物体似乎比靠近眼睛的物体移动更慢的效果。本文旨在发掘那些一眼难忘的视差效果。「The parallax is the effect that the object in the distance appears to move more slowly than the object close to the eye. This article aims to discover those unforgettable cool parallax effects.」

1）Svelte Parallax demo（含源码和效果）

demo：https://svelte.dev/examples#svelte-window-bindings

2）Parallax City

This project demonstrates a dynamic background that changes based on scroll positon, creating a parallax effect on a city background.

该项目演示了动态背景，该动态背景会根据滚动位置而变化，从而在城市背景上产生视差效果。

demo：https://parallax-city.now.sh/
repo：https://github.com/mate-h/parallax-city

3）Parallax

Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.

视差是一种效果，在这种情况下，滚动时背景内容或图像的移动速度与前景内容不同。

demo：https://materializecss.com/parallax-demo.html
repo：https://github.com/dogfalo/materialize

4）Jarallax

Smooth parallax scrolling effect for background images using CSS transforms with graceful degradation for old browsers. Parallax plugin with NO dependencies. jQuery supported. Youtube and Vimeo parallax supported.

使用CSS转换对背景图像进行平滑的视差滚动效果，支持旧浏览器的降级效果。没有依赖项的视差插件。 jQuery支持。支持YouTube和Vimeo视差。

demo：https://free.nkdev.info/jarallax/
repo：https://github.com/nk-o/jarallax

5）Parallax Engine

Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

对智能设备的方向做出反应的视差引擎。在没有陀螺仪或运动检测硬件的情况下，将使用光标的位置。

demo：http://matthew.wagerfield.com/parallax/
repo：https://github.com/wagerfield/parallax

6）React Plx

Plx - React parallax component, lightweight and powerful. Supports animating CSS properties that accept numerical values (opacity, transform, height...) and colors. It has built-in easing functions, or you can pass your own function or custom cubic bezier.

Plx -- 轻巧而强大的React视差组件。支持可接收数值（不透明度，变换，高度...）和颜色的动画CSS属性。它具有内置的缓动功能，或者您可以传递自己的功能或自定义立方贝塞尔曲线。

demo：https://muffinman.io/react-plx/
repo：https://github.com/Stanko/react-plx

7）mediator

A medium inspired Jekyll blog theme. The demo is a post page. As the page scrolls down, the city, rails, and lights gradually go away and disappear into the night...

受 medium 启发的 Jekyll 博客主题。演示为 post 页面。随着页面的向下滚动，城市，路轨，灯光，逐渐远去，消失在夜幕中...

demo（blog post）：https://blog.base68.com/mediator/feature/2014/11/3...
repo：https://github.com/dirkfabisch/mediator

8）GoogleChromeLabs UI Elements

A collection of prototyped UI elements.

一组原型化 UI 元素。

demo（blog post）：https://googlechromelabs.github.io/ui-element-samp...
repo：https://github.com/GoogleChromeLabs/ui-element-sam...

Like:

Tag:

svelte

parallax

svelte3