在背景图像以不同的速率滚动到页面内容时创建效果 [英] Creating an effect where a background image scrolls at a different rate to the page content

问题描述

任何人都可以解释我如何创建一个效果，如 https://www.spotify.com/us / 请点击此页了解更多信息。

它看起来像3D效果。例如：图像不像滚动一样移动。如果我们在页面上有两段和第一段下面的第二段，则第二段在第一段之前会很快移动。

任何指导原则我如何创建这些效果或if任何Jquery插件，然后它也会这样做。

谢谢！

解决方案

您连接的效果被称为视差滚动。有许多网站和插件描述了如何实现这个功能：

• http://jonraasch.com/blog/scrolling-parallax-jquery-plugin


• http://abduzeedo.com/super-easy-parallax-effect-jquery


• http://www.impressivewebs.com/parallax-scrolling -scripts-plugins /

Could anybody pleae explain me how could I create an effect like https://www.spotify.com/us/ Please click on Find out more on this page.

It looks like a 3D effect. Eg: The image doesn't move as much as the scroll does. If we have two paragraphs on page and 2nd paragraph below 1st paragraph, the 2nd paragraph moves quickly before the 1st paragraph does.

Any guidelines how can I create these effect or if any Jquery plugin, then also it would do.

Thanks!

解决方案

The effect you have linked to is know as a 'parallax scroll'. There are numerous websites and plugins that describe how to implement this:

• http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
• http://abduzeedo.com/super-easy-parallax-effect-jquery
• http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

这篇关于在背景图像以不同的速率滚动到页面内容时创建效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！