Difference between revisions of "Parallax Scrolling"
(→Similar articles) |
|||
| (4 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | <seo title="Parallax Scrolling" metadescription="Parallax scrolling is a scrolling technique | + | <seo title="What is Parallax Scrolling? Definition + Example" metadescription="Parallax scrolling is a special scrolling technique that is used in web design to create an impression of depth. Learn more ..."/> |
== Definition == | == Definition == | ||
| − | + | [[File:Parallax-Scrolling.png|thumb|450px|right|alt=Parallax Scrolling|'''Figure:''' Parallax Scrolling - Author: Seobility - License: [[Creative Commons License BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/en/wiki/images/e/e9/Parallax-Scrolling.png]] | |
Parallax scrolling is a special scrolling technique that is used in web design to create an impression of depth. With this technique, the background of a web page moves at a slower speed than the foreground while scrolling, creating the illusion of three-dimensionality on a two-dimensional website. | Parallax scrolling is a special scrolling technique that is used in web design to create an impression of depth. With this technique, the background of a web page moves at a slower speed than the foreground while scrolling, creating the illusion of three-dimensionality on a two-dimensional website. | ||
| − | Initially known as "parallaxing", it originated from the multiplane camera technique which was introduced to animation in the 1930s. This technique uses multiple layers that are each moved by a different amount in the same direction. As a result, the faster moving layers are perceived as closer to the camera. Walt Disney applied parallaxing in his film classics such as Snow White, Bambi and Fantasia to create an illusion of movement and depth. From the 1980s onwards, the technique was used in 2D computer graphics and video games, especially by Arcade. Since 2011, web design utilizes parallax scrolling with HTML5 and CSS3 encoding to better engage users and improve the overall experience on websites. | + | Initially known as "parallaxing", it originated from the multiplane camera technique which was introduced to animation in the 1930s. This technique uses multiple layers that are each moved by a different amount in the same direction. As a result, the faster moving layers are perceived as closer to the camera. Walt Disney applied parallaxing in his film classics such as Snow White, Bambi and Fantasia to create an illusion of movement and depth. From the 1980s onwards, the technique was used in 2D computer graphics and video games, especially by Arcade. Since 2011, web design utilizes parallax scrolling with [[HTML5]] and CSS3 encoding to better engage users and improve the overall experience on websites. |
== Example for the implementation of the parallax effect with HTML5 and CSS == | == Example for the implementation of the parallax effect with HTML5 and CSS == | ||
| Line 65: | Line 65: | ||
[[Category:Web Design]] | [[Category:Web Design]] | ||
| + | |||
| + | <html><script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "https://schema.org/", | ||
| + | "@type": "ImageObject", | ||
| + | "contentUrl": "https://www.seobility.net/en/wiki/images/e/e9/Parallax-Scrolling.png", | ||
| + | "license": "https://creativecommons.org/licenses/by-sa/4.0/", | ||
| + | "acquireLicensePage": "https://www.seobility.net/en/wiki/Creative_Commons_License_BY-SA_4.0" | ||
| + | } | ||
| + | </script></html> | ||
| + | |||
| + | {| class="wikitable" style="text-align:left" | ||
| + | |- | ||
| + | |'''About the author''' | ||
| + | |- | ||
| + | | [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] The Seobility Wiki team consists of seasoned SEOs, digital marketing professionals, and business experts with combined hands-on experience in SEO, online marketing and web development. All our articles went through a multi-level editorial process to provide you with the best possible quality and truly helpful information. Learn more about <html><a href="https://www.seobility.net/en/wiki/Seobility_Wiki_Team" target="_blank">the people behind the Seobility Wiki</a></html>. | ||
| + | |} | ||
| + | |||
| + | <html><script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "https://schema.org", | ||
| + | "@type": "Article", | ||
| + | "author": { | ||
| + | "@type": "Organization", | ||
| + | "name": "Seobility", | ||
| + | "url": "https://www.seobility.net/" | ||
| + | } | ||
| + | } | ||
| + | </script></html> | ||
Latest revision as of 16:53, 6 December 2023
Contents
Definition
Parallax scrolling is a special scrolling technique that is used in web design to create an impression of depth. With this technique, the background of a web page moves at a slower speed than the foreground while scrolling, creating the illusion of three-dimensionality on a two-dimensional website.
Initially known as "parallaxing", it originated from the multiplane camera technique which was introduced to animation in the 1930s. This technique uses multiple layers that are each moved by a different amount in the same direction. As a result, the faster moving layers are perceived as closer to the camera. Walt Disney applied parallaxing in his film classics such as Snow White, Bambi and Fantasia to create an illusion of movement and depth. From the 1980s onwards, the technique was used in 2D computer graphics and video games, especially by Arcade. Since 2011, web design utilizes parallax scrolling with HTML5 and CSS3 encoding to better engage users and improve the overall experience on websites.
Example for the implementation of the parallax effect with HTML5 and CSS
To implement the parallax scroll effect into a website with HTML5 and CSS, a container element is used to design the website. A class is assigned to the container and a background image with a specific height is added. The properties of the class are defined in CSS:
<style>
/* Container class */
.parallax {
/* The image used */
background-image: url("parallax.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* scales the image to cover the entire container */
}
</style>
<body>
<!-- Container element within the HTML document -->
<div class="parallax">
<div>Container with additional content
</body>
The attribute "background-attachment: fixed" creates the parallax scroll effect by fixing the background image. The other background properties are used to center and scale the image. Alternatively, you can specify the height of the background image in percent.
Parallax scrolling is not suitable for mobile websites
While the parallax scrolling effect can greatly enhance the visual appearance of a website’s desktop version, it is less suitable for mobile devices. Due to the much smaller screen sizes of smartphones and tablets, the images used on a desktop PC for parallax scroll designs are often too large for these devices, both in terms of dimensions and file size. This translates into longer loading times. However, mobile internet users tend to have short attention spans and limited time. If a website is not loading fast enough, it loses its mobile visitors no matter how appealing the design is. After an average time of three seconds, users switch to the next website if the page is not ready for use.
Since parallax design requires advanced code, it can also cause significant performance problems on smartphones and tablets, such as "choppy" movements or even crashing the user's browser app. Therefore, websites using parallax scrolling usually provide simplified versions for mobile users.
Application for storytelling on the web
Parallax scrolling offers a linear and fluid approach to storytelling to create more vivid and interactive stories on the web. This technique can elegantly deliver a range of simple messages. You can, for example, use parallax scrolling to visualize the creation of a product from initial design through manufacturing to consumer use in an appealing way.
Storytelling rarely works across multiple pages. Visitors will most likely lose interest if they have to scroll through several pages in order to read a story. The design of the parallax effect, on the other hand, allows users to take control and read the entire story at their own pace from beginning to end. As the various layers respond differently to visitors' scrolling behavior this creates a sense of depth and you can even tell multiple storylines.
Related links
Similar articles
| About the author |
 |