2 Parallax Background Effects in CSS - Simple & Horizontal Parallax : Part1✨

#javascript #beginners #react #frontend

Creating eye-catching websites often involves adding subtle animations that engage users as they scroll. Parallax effects, where the background moves at a different speed than the foreground, can add a dynamic feel to your designs. In this blog, I'll show you how to implement two types of parallax effects: a simple vertical parallax and a horizontal parallax.

1. Simple Parallax Background

The first effect is a classic vertical parallax, where the background image moves slower than the content in the foreground as you scroll. This creates a sense of depth, making your website more engaging.

HTML:

<div class="parallax"></div>

CSS:

.parallax {
  background-image: url('your-image.jpg');
  min-height: 100vh; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Explanation:

background-image: Set your desired background image.
min-height: Ensures the parallax section takes up the full viewport height.
background-attachment: fixed: This is the key to creating the parallax effect, as it keeps the background fixed while the content scrolls over it.
background-position, background-repeat, and background-size: These properties ensure your background image is positioned correctly and covers the entire area.

2. Horizontal Parallax

Next, let's create a horizontal parallax effect. In this effect, the background image will move horizontally as the user scrolls, giving a unique twist to the traditional parallax effect.

HTML:

<div class="parallax-horizontal"></div>

CSS:

.parallax-horizontal {
  background-image: url('your-image.jpg');
  min-height: 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  animation: moveBackground 20s linear infinite;
}

@keyframes moveBackground {
  from { background-position: 0 0; }
  to { background-position: -100% 0; }
}

Explanation:

background-image, min-height, background-position, background-repeat, and background-size: These properties are similar to the vertical parallax but are configured for a horizontal effect.
animation: moveBackground 20s linear infinite: This keyframe animation continuously moves the background image from left to right, creating the parallax effect.
@keyframes moveBackground: Defines the animation, shifting the background image horizontally.

shop Link : https://buymeacoffee.com/pratik1110r/extras