{"id":31640,"date":"2021-09-09T07:38:04","date_gmt":"2021-09-09T14:38:04","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=31640"},"modified":"2023-10-23T21:42:23","modified_gmt":"2023-10-24T04:42:23","slug":"parallax-scrolling","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/","title":{"rendered":"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts"},"content":{"rendered":"\n
\"Designing<\/figure>\n\n\n\n

Parallax scrolling is a creative tool for designers to create 3D experiences on a two-dimensional screen. The parallax scrolling effect can add depth and dimension, giving the user an immersive, engaging experience\u2014something brands constantly strive to achieve!<\/p>\n\n\n\n

What is Parallax Scrolling?<\/h2>\n\n\n\n

Parallax scrolling is a web design technique where elements appear to be moving at different speeds to produce a 3D scrolling effect.<\/p>\n\n\n\n

Similar to the depth perception of driving in a car where close objects pass by the vehicle fast while things in the distance pass slower.<\/em><\/p>\n\n\n\n

There are several types of parallax scrolling patterns<\/a>, but they all use separate layers of content to produce the desired effect. By setting different scrolling speeds for each layer, designers create the illusion of objects moving around the screen as the user scrolls.<\/p>\n\n\n\n

Want to create a parallax scroll in your design? It\u2019s easy in UXPin! Get a 14-day trial<\/a> and see how to do it quickly<\/a>. <\/p>\n\n\n\n

A Brief History of Parallax Scrolling<\/h3>\n\n\n\n

Parallax scrolling dates back to the 1930s<\/a> as a motion picture technique for animated films like Disney’s Snow White and the Seven Dwarfs<\/em>. In the early 1980s, video game designers used parallax scrolling to create 3D effects for 2D games, most notably 1981’s Jump Bug<\/em>.<\/p>\n\n\n\n

It wasn’t until 2007 that parallax scrolling made its web design debut using Javascript and CSS 2 on Internet Explorer 6. With the introduction of HTML5 and CSS 3 in 2011, parallax scrolling effects became easier to produce and thus grew in popularity.<\/p>\n\n\n\n

Today parallax scrolling can be incredibly complex, where web designers create immersive visual experiences.<\/p>\n\n\n\n

When to Use Parallax Scrolling<\/h2>\n\n\n\n

Although it’s a highly effective tool for creating unique user experiences, designers must consider the downsides of parallax scrolling<\/a>\u2014it can have adverse effects!<\/p>\n\n\n\n

Page Speed<\/h3>\n\n\n\n

Parallax scrolling is a page speed<\/a> killer, especially for websites on shared hosting plans. According to Google, two seconds is the threshold for eCommerce websites<\/a>. But for most other websites, the average is between 3-6 seconds.<\/p>\n\n\n\n

So, when it comes to eCommerce, what are your goals? To impress the user with your web design skills or sell products? Unless you’re able to optimize your page speed, you might want to avoid parallax scrolling for eCommerce or websites where speed matters.<\/p>\n\n\n\n

Check out this article on <\/em>how to improve page speed for parallax scrolling<\/em><\/a>.<\/em><\/p>\n\n\n\n

How Does it Affect the Content?<\/h3>\n\n\n\n

Another question you must ask before adding a parallax scrolling effect is, how does it affect the content?<\/em><\/p>\n\n\n\n

For example, on the Collage Crafting website<\/a>, designers chose to add a parallax effect for the point of sales outlets. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

But it’s difficult to read some of the content as it gets cut off at the top and bottom as you scroll. This isn’t a good user experience as the user cannot consume all of the content properly.<\/p>\n\n\n\n

If you need users to read your content, keep it simple! There are other ways designers can present content to users and still maintain legibility.<\/p>\n\n\n\n

Does Your Parallax Scrolling Effect Distract or Annoy the User?<\/h3>\n\n\n\n

Parallax scrolling has its place. For a creative agency, it makes sense to impress potential clients with your web design skills. <\/p>\n\n\n\n

But if I’m looking for car insurance quotes, do I really want to waste time scrolling through some fancy parallax effect to get to the quotation form? Probably not!<\/p>\n\n\n\n

For competitive industries where users want information fast, parallax scrolling could adversely affect bounce rates and conversions.<\/p>\n\n\n\n

Always think about the content, context, and how the website is trying to serve the user.<\/p>\n\n\n\n

9 Examples of Great Parallax Scrolling<\/h2>\n\n\n\n

We’ve found ten great examples of parallax scrolling. One theme that stands out for most of these websites is how designers have used parallax to help tell a story.<\/p>\n\n\n\n

As you will see from these examples, parallax can be a powerful storytelling tool, but it takes a lot of careful thought and planning.<\/p>\n\n\n\n

NIIKA<\/h3>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

NIIKA<\/a> is an Australian-based creative agency. The hero image features a beautiful abstract design with some subtle movement. Abstract objects move about the page while large moving headlines display the agency’s services as you scroll.<\/p>\n\n\n\n

Further down, another parallax scrolling effect uses a custom map fixed in the background with the agency’s contact details scrolling over the top.<\/p>\n\n\n\n

NIIKA also uses a parallax effect for its “WORK WITH US” call to action near the footer.<\/p>\n\n\n\n

Even though NIIKA uses a lot of copy in its parallax scrolling, you never lose critical information or messaging.<\/p>\n\n\n\n

CANN<\/h3>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

CANN<\/a> is an American cannabis-infused tonic drink producer. The website uses an immersive, seamless parallax scrolling effect to tell its brand story.<\/p>\n\n\n\n

The developers have done a fantastic job optimizing CANN’s website to accommodate such a complex parallax scrolling effect. <\/p>\n\n\n\n

The copy and content are legible, and the parallax effect helps tell the brand’s story, complete with bubbles representing an effervescent tonic. The web design also uses color effectively to represent CANN’s three flavors.<\/p>\n\n\n\n

Web designers have also done a fantastic job with CANN’s store<\/a>, ditching fancy effects to optimize the design for conversions.<\/p>\n\n\n\n

Toy Fight<\/h3>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Toy Fight<\/a> is a UK-based creative agency. The website features a simple yet elegant parallax scrolling effect on the home page, with a clear call to action appearing in the center of the page.<\/p>\n\n\n\n

Toy Fight uses a parallax effect on each page to transition from the hero into the page’s content. These transitions are clever because the animations are somewhat silly, while the rest of the content explains the company’s services and past work\u2014almost like pulling back the curtain.<\/p>\n\n\n\n

Toy Fight’s website is a fantastic example of how parallax scrolling can help tell a story.<\/p>\n\n\n\n

Garden<\/h3>\n\n\n\n

Garden is an award-winning Portuguese design studio. The website uses a beautiful parallax effect for the hero image of a garden sunset with the sun going down as you scroll.<\/p>\n\n\n\n

Further down, lines and icons appear as if being sketched as you scroll. The subtle effects draw your eyes to important information, like Garden’s services and headlines.<\/p>\n\n\n\n

Smart Move<\/h3>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Smart Move<\/a> is an initiative to attract and retain expertise in the Greater \u00d6rebro Area in Sweden. The website’s home page features an impressive horizontal parallax scrolling effect showcasing \u00d6rebro’s features and culture with relevant links to each.<\/p>\n\n\n\n

The parallax effect cleverly takes you through several Swedish settings, including nature, commerce, home life, entertainment, and nightlife.<\/p>\n\n\n\n

Bertani Wines<\/h3>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Bertani<\/a> is an Italian winemaker. The website features a horizontal parallax effect with images, videos, and copy to tell the brand’s story. <\/p>\n\n\n\n

The effect uses a mix of horizontal and vertical movement to take you on a journey through the brand, its vineyard, and its wines. Bertani’s designers have done well to balance a complex horizontal parallax effect with compelling storytelling. Everything makes sense, and the messaging stands out.<\/p>\n\n\n\n

Quentin Goupille<\/h3>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Quentin Goupille<\/a> is a freelance art director, illustrator & filmmaker from Paris. His portfolio uses parallax scrolling effects to help tell the story behind each project.<\/p>\n\n\n\n

Each page is different, and Quentin uses parallax effects to take the user on a journey through each of his films. The result is impressive as it helps showcase Quentin’s storytelling and creativity.<\/p>\n\n\n\n

Quentin Goupille’s website is an excellent example of how creatives can use parallax effects to showcase their work in a unique and engaging way.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Crazy About Eggs<\/h3>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Crazy About Eggs is a Dutch egg farmer passionate about free-range and ensuring their chickens live a healthy farm life.<\/p>\n\n\n\n

The website uses subtle parallax scrolling effects to introduce small elements and subheadings. The company’s egg boxes remain static as you scroll to halfway while the product’s benefits scroll on either side. <\/p>\n\n\n\n

This is an incredibly creative way to keep the brand front and so that the user becomes familiar with the product. Next time the user is in the supermarket, they’ll likely recognize Crazy About Eggs’ packaging.<\/p>\n\n\n\n

Kibana<\/h3>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Kibana is a resort in France with accommodations, events spaces, gardens, a market, and other outdoor experiences.<\/p>\n\n\n\n

The hero image features a text introduction. As you scroll, you’re immersed into one of Kibana’s beautiful gardens and instantly wish you were there!<\/p>\n\n\n\n

As you scroll further, subtle movements draw the user’s attention to Kibana’s key features and beautiful images. Near the footer, designers use a clever parallax effect to introduce Kibana’s team.<\/p>\n\n\n\n

Summary<\/h2>\n\n\n\n

Parallax scrolling is a powerful tool, but designers must use it to help tell a story rather than frivolous animations to impress users. Using parallax as effectively as the examples we showcase above takes a lot of time, collaboration, and planning.<\/p>\n\n\n\n

Always keep the user’s needs in mind and don’t use parallax effects if they adversely affect the user experience.<\/p>\n\n\n\n

Using UXPin to Design Amazing User Experiences<\/h2>\n\n\n\n

UXPin is a powerful collaborative design tool, allowing you to invite the entire team to contribute to a project’s success. UX designers can use UXPin<\/a> to design immersive visual experiences and user interfaces. <\/p>\n\n\n\n

Start creating beautiful user experiences with a free 14-day UXPin trial<\/a> today!<\/p>\n","protected":false},"excerpt":{"rendered":"

Parallax scrolling is a creative tool for designers to create 3D experiences on a two-dimensional screen. The parallax scrolling effect can add depth and dimension, giving the user an immersive, engaging experience\u2014something brands constantly strive to achieve! What is Parallax Scrolling? Parallax scrolling is a web design technique where elements appear to be moving at<\/p>\n","protected":false},"author":3,"featured_media":31641,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,6,7],"tags":[],"class_list":["post-31640","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"","yoast_metadesc":"Not sure how to design parallax scrolling website with taste? Check our tips and examples of other pages with a parallax scroll!","acf":[],"yoast_head":"\nDesigning with Parallax Scrolling: The Do\u2019s and Don\u2019ts | UXPin<\/title>\n<meta name=\"description\" content=\"Not sure how to design parallax scrolling website with taste? Check our tips and examples of other pages with a parallax scroll!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts\" \/>\n<meta property=\"og:description\" content=\"Not sure how to design parallax scrolling website with taste? Check our tips and examples of other pages with a parallax scroll!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-09T14:38:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-24T04:42:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/09\/Designing-with-parallax-scrolling.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts\",\"datePublished\":\"2021-09-09T14:38:04+00:00\",\"dateModified\":\"2023-10-24T04:42:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/\"},\"wordCount\":1531,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/Designing-with-parallax-scrolling.png\",\"articleSection\":[\"Blog\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/\",\"name\":\"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/Designing-with-parallax-scrolling.png\",\"datePublished\":\"2021-09-09T14:38:04+00:00\",\"dateModified\":\"2023-10-24T04:42:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Not sure how to design parallax scrolling website with taste? Check our tips and examples of other pages with a parallax scroll!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/Designing-with-parallax-scrolling.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/Designing-with-parallax-scrolling.png\",\"width\":1200,\"height\":600,\"caption\":\"Designing with parallax scrolling\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parallax-scrolling\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts | UXPin","description":"Not sure how to design parallax scrolling website with taste? Check our tips and examples of other pages with a parallax scroll!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/","og_locale":"en_US","og_type":"article","og_title":"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts","og_description":"Not sure how to design parallax scrolling website with taste? Check our tips and examples of other pages with a parallax scroll!","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/","og_site_name":"Studio by UXPin","article_published_time":"2021-09-09T14:38:04+00:00","article_modified_time":"2023-10-24T04:42:23+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/09\/Designing-with-parallax-scrolling.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts","datePublished":"2021-09-09T14:38:04+00:00","dateModified":"2023-10-24T04:42:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/"},"wordCount":1531,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/09\/Designing-with-parallax-scrolling.png","articleSection":["Blog","UI Design","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/","name":"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/09\/Designing-with-parallax-scrolling.png","datePublished":"2021-09-09T14:38:04+00:00","dateModified":"2023-10-24T04:42:23+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Not sure how to design parallax scrolling website with taste? Check our tips and examples of other pages with a parallax scroll!","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/09\/Designing-with-parallax-scrolling.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/09\/Designing-with-parallax-scrolling.png","width":1200,"height":600,"caption":"Designing with parallax scrolling"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/parallax-scrolling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Designing with Parallax Scrolling: The Do\u2019s and Don\u2019ts"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=31640"}],"version-history":[{"count":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31640\/revisions"}],"predecessor-version":[{"id":50817,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31640\/revisions\/50817"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/31641"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=31640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=31640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=31640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}