跳到主要内容

18个惊人的视差滚动网站

+$Parallax scrolling is one web design trend that refuses to go away. Parallax scrolling is when the website layout sees the background of the web page moving at a slower rate to the foreground, creating a 3D effect as you scroll. Used sparingly it can provide a nice, subtle element of depth that results in a distinctive and memorable website.

+$To show how it should be done, here are some sites that employ the technique to good effect. In some cases the parallax scrolling is the star of the show; in others it simply adds a touch of depth that makes the foreground seem to pop out a little (if it's a pared-back look you're after, explore our celebration of+$minimalist Website Design)。

+$If you fancy really pushing the boat out, these impressiveCSS动画+$examples showcase another great way to make your website stand out from the crowd. Now, let's take a look at some sites using parallax scrolling in very much the right way.

+$01. Davide Perozzi

Parallax scrolling: Davide Perozzi

+$Perozzi's mainly text-based site is full of life [Image: Davide Perozzi]

+$Parallax scrolling is only the start of the web delights to be found at the online home of+$Davide Perozzi+$, a creative developer from Germany. His single-page, largely text-based site is full of surprises such as smooth scrolling, glitchy copy that changes as it moves, and project images that warp into view as you move the animated cursor over each project title. The look's decidedly brutalist, and an excellent demonstration of Perozzi's web skills.

+$02. Dogstudio

Parallax scrolling: DogStudio

+$The animated 3D doggo is the star of the show here [Image: Dogstudio]

+$The immediate focal attraction ofDogstudio+$'s site is a beautiful animated 3D dog – or is it a wolf? – in the centre of the page, that scales and rotates as you scroll your way down the parallax page. Its lighting changes colour as you hover over the titles of Dogstudio's recent projects, and perhaps our favourite bit is when it revolves in front of some of the page copy, obscuring some of the text.

+$03. Bear Grylls

Parallax scrolling: Bear Grylls

+$This is a great way to draw the viewer into the scene [Image: Bear Grylls]

数字代理前哨+$was tasked with creating a new digital strategy for explorer and TV personality熊格里尔斯+$. “To live up to the new brand vision and values and embody the ‘adventure brand’ we needed to take people on a journey online,” says the studio in its case study. A rich, dynamic user experience was key.

整个过程都使用微妙的视差,但真正的场景窃取者是主页。 Grylls出现在戏剧性的山景中,观众在滚动时被吸引到场景中。这是对接下来冒险的一个很好的介绍。

+$04. ToyFight

Parallax scrolling: ToyFight

+$Both Jonny and Leigh are anatomically correct [Image: ToyFight]

ToyFight+$is an award-winning creative agency, and its website is a whole lot of fun. Founders Jonny Lander and Leigh Whipday have turned themselves into 3D figures, which appear in a range of scenes throughout the site (including this cheeky Sagmeister & Walsh reference). Clever use of parallax amplifies the 3D effect, and paired with bold, bright, plain backgrounds, never becomes overwhelming or irritating.

+$05. Hello Monday

Parallax scrolling: Hello Monday

+$Hello Monday uses subtle parallax to inject a little excitement to its homepage [Image: Hello Monday]

你好星期一+$is a design agency based in Denmark. It aims to create immersive digital experiences that tell a story and bring joy to their users, and it has gone one step beyond with its portfolio site. When creating a studio site, the difficulty is that adopting cool or cutting-edge design ideas often means sacrificing clarity and usability, which is paramount for a design portfolio.

Hello Monday通过在精简的页面布局中引入微妙的视差效果来实现两者。每个项目的英雄形象都会略微移动,使其焕然一新,为设计增添活力,同时不会影响节目中的信息。效果仅在工作室的主页上使用,单个项目页面保持静态以允许工作闪耀。

+$06. A-dam

Screenshot of the A-dam website shows men in underwear

+$A-dam uses parallax to showcase its stylish underwear [Image: A-dam]

亚当+$designs original boxer briefs and shorts for men with character, using GOTS-certified organic cotton. The boxers are handmade by people with fair wages and normal working hours. They're an ethical and stylish alternative to your usual supermarket pants, and their site, created by建在阿姆斯特丹,展示它们很好,在滚动时从各个方向弹出各种各样的视差元素。

+$07. Diesel: BAD Guide

parallax scrolling: Diesel's BAD Guide

+$Diesel's BAD Guide works like a virtual pinboard [Image: Diesel]

84.Paris+$created this impressive parallax website (and associated social media campaign) to accompany the launch of Diesel's BAD fragrance. The one-page site presents the series of rules that make up the '+$BAD Guide”。

+$The user can explore by dragging the mouse around the parallax page, which is laid out like a pinboard of images to click through. There's advice on everything from Tinder ('Swipe right, right, right, right – you'll sort them out later') to Instagram ('Don't forget to get in touch with an ex on Thursdays #TBT'), accompanied by monochrome illustrations.

+$08. Firewatch

Screenshot of Firewatch website shows an illustration of a hiker looking over a golden canyon at dawn

+$Each layer of trees moves independently [Image: Campo Santo]

+$One of the most beautiful examples of parallax scrolling we’ve seen is this website for the gameFirewatch+$, which uses six moving layers to create a sense of depth. It’s great because there’s no scroll hijacking (something that often accompanies the parallax effect), and it’s only used at the top of the page – the rest of the site is still so you can read the information without getting seasick. If you want to see how it’s done, here’s a nice demo onCodePen

+$09. Garden Studio

Parallax scrolling: Screenshot of Garden site shows an illustration of a bench under red-leafed trees overlooking a lake

+$Layering of the landscape makes it seem three dimensional [Image: Garden Studio]

与此相类似,花园一室公寓+$has also opted to use the parallax technique in a sensible and delightful way at the top of its site, before moving into a mostly static page. The shifting landscape is subtle and unobtrusive yet also the star of the show – we found ourselves scrolling up and down again and again.

+$10. GitHub 404

Parallax scrolling: screenshot of GitHub's 404 page shows a cartoon Jedi-type character saying 'This is not the web page you were looking for'

+$GitHub's 404 breaks the rules of parallax for a disorienting effect [Image: GitHub]

+$GitHub's 404 Page+$isn’t strictly parallax scrolling as the effect happens on mouse wiggle as opposed to scroll, but it’s a really fun page that uses layering to add depth. Unlike 'proper' parallax, the background moves faster than the foreground, creating a disorienting, otherworldly feel.

+$11. Jess & Russ

Parallax scrolling: screenshot shows an illustration of a woman in a white dress being carried by a swift over a city skyline at night

+$Every illustration has a sense of depth [Image: Jess & Russ]

+$It's no surprise that design power couple Russ Maschmeyer and Jessica Hische's+$wedding Website+$is a beauty to behold. The site charts their romantic story, with parallax scrolling used throughout to add depth to the illustrations. They got married in 2012, but the website is still well worth a look.

+$12. Make Your Money Matter

Example of parallax scrolling websites: Make Your Money Matter

+$Manage your finances with information and advice from Make Your Money Matter [Image: Public Service Credit Union]

金融和金钱不是最有趣的主题。但总部位于纽约的数字代理商长女+$is quids in with this dynamic parallax scrolling website让你的钱变得重要+$for the Public Service Credit Union.

为了向公众传授加入信用合作社的好处,而不是使用银行,这个精彩的网站包括从信用合作社如何运作,到哪里找到以及如何申请的一切,以及一个只显示计算器的计算器银行从客户的存款中获利多少。

+$13. Madwell

parallax scrolling: Madwell

+$New York agency Madwell uses parallax scrolling to add a sense of depth [Image: Madwell]

+$Design and development agencyMadwell+$, based in New York, shows off its portfolio with a range of parallax scrolling effects to create a noticeable 3D style that adds a huge amount of depth.

+$14. Peugeot Hybrid4

parallax scrolling: Madwel

+$Peugeot uses parallax scrolling to create an auto-playing web comic [Image: Peugeot]

+$Peugeot+$has gone all out with using parallax scrolling to create an auto-playing comic in the browser. The comic plays as you scroll down the page (or use its autoplay feature that automatically scrolls) and helps to advertise the car manufacturer's new HYbrid4 technology.

+$15. Cultural Solutions

parallax scrolling: Cultural solutions

+$The circles move at different speeds for a subtle 3D effect [Image: Cultural Solutions]

+$Arts Consultancy文化解决方案+$employs a subtle parallax scrolling effect to introduce depth to its homepage. Its main brand image is the use of colourful circles - the circles in the background move slower than those in the foreground, creating a subtle 3D effect.

+$16. Walking Dead

Parallax scrolling websites: Walking Dead

+$Walking Dead uses parallax scrolling to pull you into its gory world [Image: CableTV]

+$We're big fans of TV zombie drama行尸走肉+$at Creative Bloq, and we were gripped by this website launched to promote it. The imaginative site harks back to the show's comic strip origins and makes clever use of parallax scrolling to pull you into its sick and depraved world.

首席设计师Gavin Beck说:“我们作为展会的粉丝首先参与其中。” “通过这个驱动器,我们想要在行尸走肉中创造一个粉丝可以探索和欣赏的世界。

“为实现这一目标,我们研究了几种现有的技术和技术,如HTML5,CSS3,JavaScript / jQuery,Web音频/ HTML5音频和视差滚动。面临的挑战是找到一种独特的方法将所有这些方法合并到一个参与跨所有平台的经验。“

+$17. New York Times: Tomato Can Blues

Examples of parallax scrolling websites: New York Times

+$A beautiful experience is to be had with this parallax scrolling New York Times article [Image: ]

+$In today's era of low attention spans and bite-size media, how do you attract people to longform journalism?+$Tomato Can Blues+$is a great response to that problem from the New York Times, combining some clever web design techniques with storytelling and comic-inspired illustrations created by Atilla Futaki.

这篇文章是我们见过的视差滚动的最佳例子之一,文章将向您介绍由Mary Pilon编写的笼式战斗机的故事。当您滚动浏览内容时,插图会通过巧妙的动画和更改生动,让您完全沉浸在内容中。

Futaki的插图基于警方记录,证人帐户,照片和记者的笔记,并注重细节。总而言之,这是一次很棒的阅读体验 - 这是在线新闻的未来吗?

+$18. Snow Fall

Example of parallax scrolling websites: Snow Fall

+$The New York Times' 'Snow Fall' article kickstarted a whole new craze for rich parallax sites [Image: New York Times]

+$One of the first sites to really push the boundaries on what you could do with longform editorial content online, the New York Times'雪落+$article combines a range of different elements, including parallax scrolling and web video.

这篇关于Tunnel Creek雪崩恐怖的文章于2012年12月在网上发布,但作为你可以用视差滚动做的一个例子,它仍然很强大。该报以创新的方式介绍了获得普利策奖的文章,吸引了全世界设计界的关注。

相关文章:



翻译字数超限