HTML Explanation
01
In the <body>, a div with the class layer holds an image that will be animated as the user scrolls.
02
This is followed by a section element with a tall height (200vh), ensuring enough scroll space.
03
Another div with the class text is used to display a message in the center of the screen.
04
The text contains an h2 heading, which includes the main title and a stylized subtitle wrapped in a span.
05
Finally, another section with the class sec2 is included at the bottom to provide additional scrolling content.
CSS Explanation
01
The universal selector (*) resets margin and padding and applies the 'Poppins' font family to all elements.
02
The body is given a dark background with a gradient color (#000863).
03
The .layer class styles the fixed background image, which remains stationary as you scroll.
04
The image inside this div is styled to be absolute positioned and covers the screen horizontally with a slight left offset.
05
The section elements are given large heights to enable scrolling, with distinct background images that remain fixed, creating a parallax effect.
06
The sec2 section has a different background image, again set to cover the entire section.
07
The .text class centers its content both vertically and horizontally.
08
Inside .text, the h2 heading is styled with white text, a large font size, and letter-spacing for an elegant appearance.
09
The span inside the h2 uses background-clip and color properties to create a text masked with an image background, giving it a standout effect.
Javascript Explanation
01
The JavaScript adds the dynamic scroll animation effect to the .layer element.
02
The script selects the .layer element and listens for the scroll event on the window object.
03
Each time the user scrolls, the scroll event triggers a function that calculates the scroll position (window.scrollY).
04
This value is then used to update the left position of the .layer, creating a horizontal scrolling effect that increases in speed proportionally to the vertical scroll distance (value * 2).
HTML
CSS
JS
CSS