Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create multiple background image parallax in CSS?
Parallax scrolling is a frequently employed design technique that adds a sense of movement and depth to web pages. This is accomplished by moving separate page elements at distinct speeds to simulate the effect of depth on a flat surface. A unique and imaginative approach to implementing this technique is to utilize numerous background images in CSS. In this article, we will be exploring how to create a multiple background image parallax effect in CSS, including the steps to set up the HTML structure and the CSS styling needed to create the desired effect. Whether you are a beginner or an experienced front-end developer, this guide will provide you with the knowledge and tools needed to create a stunning multiple background image parallax effect on your website.
Syntax
element {
background-image: url(image-location.jpg);
}
background-image Property
The attribute background-image in CSS is employed to designate one or more pictures to be employed as the backdrop for an HTML element. This grants the capacity to incorporate one or more pictures as the foundation of an element. The pictures can be located in a particular region of the element, can be set to duplicate horizontally or vertically, or can be resized to cover the entire element or only a fraction of it.
element {
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
Animation Property
The CSS animation property confers the ability to create animations on HTML elements sans the assistance of JavaScript. This attribute empowers you to articulate a series of keyframes that describe the modification of an element over a given period. These keyframes are utilized to denote the styles of an element at diverse points in time, while the animation attribute governs the method by which the element advances from one keyframe to another.
Below is a concise elucidation of every constituent of the animation property −
Name − The nomenclature of the animation, which is utilized to make reference to it within the @keyframes regulation.
Duration − The duration of the animation, which symbolises the period for which an animation should last in order to consummate, is manifested in seconds using a time string value (such as "5s").
Timing-function − The velocity trajectory of the animation, which can be manoeuvred to follow a linear, ease, ease-in, ease-out, ease-in-out, or a tailored cubic-bezier function.
Delay − The span of the delay prior to instigate the animation, measured in seconds (for example, "2s").
Iteration-count − The tally of iterations the animation should execute, or the term "infinite" to indicate that the animation should continue to loop indefinitely.
Direction − The trajectory of the animation, which can be either "normal" to get going in the usual direction, "reverse" to go in the opposite direction, or "alternate" to go forward and backward alternately.
Fill-mode − Designates the approach to satisfy the animation's non-operational state, with options including "none", "forwards", "backwards", or "both".
Play-state − Denotes whether the animation is in a state of motion or suspension, characterized by the values "running" or "paused", respectively.
Approach
To engender a parallax effect with multiple background images in CSS, a sequence of instructions should be followed −
Furnish a constituent that will embrace the milieu portrayals. In the current instance, the component is a div tagged as parallax-container.
Define the height and width of the container element, and set the overflow property to hidden. This will ensure that only the visible portion of the images is shown. Additionally, the position property is set to relative to make sure that the position of the background images is relative to the container.
Create separate elements for each background image, and set their position to absolute. This allows you to position each image precisely within the container element. The height and width of each element are set to 100% so that they fill the entire container.
Establish the background image for each element by utilizing the background-image property. Ensure that you supply the accurate file path for each individual image.
Create an animation for each element that will move the background image along the X-axis. This is done using the animation property in combination with the @keyframes rule. The translateX property is used to move the element, and the value you set for this property determines how far the element moves in the horizontal direction.
To preserve a smooth and continuous animation experience, the property of animation-timing-function is allocated a value of linear, signifying a consistent advancement of the animation throughout. Moreover, the animation-iteration-count property is configured to have an infinite value, indicating that the animation repeats ceaselessly, with no pre-defined constraint on the number of times it loops.
Example
The following is the complete code which we are going to have a look at in this example −
<!DOCTYPE html>
<html>
<head>
<title>How to create multiple background image parallax in CSS?</title>
<style>
.parallax-container {
height: 200px;
width: 100%;
overflow: hidden;
position: relative;
}
.layer-1,
.layer-2,
.layer-3 {
background-position: center;
background-size: cover;
position: absolute;
height: 200px;
width: 100%;
}
.layer-1 {
background-image: linear-gradient(red,orange);
animation: move-layer-1 15s linear infinite;
}
.layer-2 {
background-image: linear-gradient(blue,lightblue);
animation: move-layer-2 20s linear infinite;
}
.layer-3 {
background-image: linear-gradient(green,lightgreen);
animation: move-layer-3 25s linear infinite;
}
@keyframes move-layer-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-30%);
}
}
@keyframes move-layer-2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-60%);
}
}
@keyframes move-layer-3 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-90%);
}
}
</style>
</head>
<body>
<h4>How to create multiple background image parallax in CSS?</h4>
<div class="parallax-container">
<div class="layer-1"></div>
<div class="layer-2"></div>
<div class="layer-3"></div>
</div>
</body>
</html>
Conclusion
In summary, producing a multi-layered background image parallax effect in CSS is a straightforward and powerful technique to introduce dimension and animation to your website. By adhering to the directions described in this exposition, you can produce a visually pleasing and captivating experience for your viewers that will be remembered for a long time. Whether your design aspirations are rudimentary or elaborate, the flexibility of CSS empowers you to tailor your design to fit your exclusive prerequisites. Therefore, why not embark on this journey and explore the design potentialities to attain remarkable results!
1K+ Views
