The parallax scrolling effect is a design technique that’s relatively new in development and web design. Over the past few years since it’s hit the scene though, it’s grown pretty popular in its own right, and with good reason, too.
视差滚动的定义
Parallax scrolling is a technique wherein your web page’s background image scrolls at a slower rate compared to the foreground image. It gives the user a unique sense of depth and action while scrolling through a page when used on a website.
Without Parallax Scrolling
The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.
With Parallax Scrolling
The background image scrolls at a different rate as the rest of the elements in the page.
视差滚动对用户的影响
不过,这项技术其实并不完全算新鲜事物,早在20世纪20年代的传统动画中就已被使用。它也被广泛应用于许多经典电子游戏中,比如《超级马里奥兄弟》。
不过在网页设计领域,耐克(Nike)通常被认为是2011年首批采用视差滚动的品牌之一。从那时起,“视差滚动”(有时也称为“视差背景”)已成为设计师和开发者之间的常用术语,其受欢迎程度与日俱增。
Parallax scrolling as used in a version of Super Mario Brothers. Notice how the hills in the background move
in slightly varying speeds, as compared to Mario and the other characters in the foreground.
对用户而言有何收益
这种效果的绝妙之处在于它能吸引用户与您的网站互动,提升用户交互性和吸引力。而且,如果运用得当,视差滚动可以让最简陋的网站焕发生机。它甚至可以用来打造令人惊叹的叙事体验 ,立即吸引所有网站访问者沉浸其中。
与我们分享您的作品!
那么大家觉得怎么样呢?您是否已经尝试了 PBS v4 的最新视差背景功能?它是否为您的网站增色不少?欢迎在下方评论区分享您的作品链接或提出建议。
祝建站愉快!