Steps | Quick CSS Animation Effects
Posted inOnline Tutorials

Quick CSS Animation Effects

1

 

source

Creating a Smooth Quick CSS Animation Effects Using HTML, CSS, and JavaScript

Introduction

In modern web development, creative scrolling effects enhance user experience and add a unique touch to website navigation. One such effect is horizontal page scrolling(Quick CSS Animation Effects), where content moves horizontally as the user scrolls vertically. This can be used in portfolios, presentations, landing pages, and other interactive designs.

In this blog post, we’ll break down a simple yet effective horizontal scrolling effect(Quick CSS Animation Effects) using HTML, CSS, and JavaScript. You’ll learn how to structure the layout, style it for an engaging visual experience, and use JavaScript to control the scrolling behavior.

Let’s dive into the code and explore how it works!

Understanding the Code Structure

The code consists of three parts:

  • HTML: Defines the page structure with multiple sections.
  • CSS: Styles the sections and applies a fixed container to create the horizontal effect.
  • JavaScript: Listens for scroll events and moves the container horizontally based on the vertical scroll position.

Step-by-Step Explanation

1. Setting Up the HTML Structure

The HTML consists of a container with five sections, each representing a different part of the horizontal scrolling layout.

Code Breakdown

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Horizontal Page Scrolling</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<section style="--clr:#dad4ff;">
			<div class="content">
				<h2>Section One</h2>
			</div>
		</section>
		<section style="--clr:#fffd92;">
			<div class="content">
				<h2>Section Two</h2>
			</div>
		</section>
		<section style="--clr:#ffe2eb;">
			<div class="content">
				<h2>Section Three</h2>
			</div>
		</section>
		<section style="--clr:#cfffca;">
			<div class="content">
				<h2>Section Four</h2>
			</div>
		</section>
		<section style="--clr:#dafff6;">
			<div class="content">
				<h2>Section Five</h2>
			</div>
		</section>
	</div>
	<script>
		window.addEventListener('scroll', function() {
			const scrollY = window.scrollY;
			const totalHeight = document.body.scrollHeight - window.innerHeight;
			const percentageScrolled = (scrollY / totalHeight) * 100;
			const translateX = (percentageScrolled/5) * -4;
			document.querySelector('.container').style.transform = `translateX(${translateX}%)`;
		});
	</script>
</body>
</html>

Explanation

  • The <div class="container"> wraps all sections.
  • Each <section> represents a horizontally arranged content block.
  • A CSS variable (--clr) is used for dynamic background colors for each section.
  • The <script> tag links to the JavaScript file (script.js), which controls the scrolling behavior.

2. Styling the Quick CSS Animation Effects Layout with CSS

Now, let’s add styling to make the layout visually appealing and responsive.

CSS Code

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,700,900&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body {
	min-height: 200vh; /* Ensures enough vertical scrolling space */
	background: #f2f2f2;
}

.container {
	position: fixed; /* Keeps sections in place */
	display: flex; /* Aligns sections horizontally */
	width: 500%; /* Each section takes 100% of viewport width */
	height: 100vh;
	transition: transform 0.5s ease-out; /* Smooth scrolling effect */
}

section {
	position: relative;
	width: 100vw; /* Each section takes full viewport width */
	height: 100vh;
	background: var(--clr); /* Dynamic background color */
	display: flex;
	justify-content: center;
	align-items: center;
	border: 5px solid #333;
}

.content {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.content h2 {
	font-size: 4em;
	color: #333;
}

Explanation

  • The body height is set to 200vh to allow enough scrolling space.
  • The .container is fixed and has display: flex, making sections align horizontally.
  • The width: 500% ensures that all five sections fit side by side.
  • The transition: transform 0.5s ease-out; makes the movement smooth.
  • Each section takes the full viewport width (100vw) and height (100vh).
  • CSS variables (--clr) are used for different background colors.

3.  JavaScript for Quick CSS Animation Effects To Scrolling Effect

The JavaScript listens for scroll events and moves the .container horizontally based on the vertical scroll position.

JavaScript Code

window.addEventListener('scroll', function() {
	const scrollY = window.scrollY; // Get current vertical scroll position
	const totalHeight = document.body.scrollHeight - window.innerHeight; // Total scrollable height
	const percentageScrolled = (scrollY / totalHeight) * 100; // Calculate scroll percentage
	const translateX = (percentageScrolled / 5) * -4; // Calculate horizontal translation
	document.querySelector('.container').style.transform = `translateX(${translateX}%)`; // Apply transformation
});

Explanation

  • window.scrollY gets the current vertical scroll position.
  • document.body.scrollHeight - window.innerHeight calculates the total scrollable height.
  • percentageScrolled computes how much the user has scrolled in percentage.
  • translateX = (percentageScrolled / 5) * -4; converts the vertical scroll movement into horizontal movement.
  • The .container is moved horizontally using transform: translateX().

Quick CSS Animation Effects- Best Practices and Recommendations 

  1. Enhance User Experience

    • Use smooth scrolling (scroll-behavior: smooth;) to make the effect more fluid.
    • Consider adding a scroll indicator to guide users.

  2. Make It Responsive

    • Test the effect on mobile devices and different screen sizes.
    • Adjust section sizes dynamically based on screen width.

  3. Improve Performance

    • Use requestAnimationFrame() instead of scroll event for better performance.
    • Optimize images and assets to ensure a fast loading time.

  4. Add Navigation

    • Implement arrows or buttons to let users manually navigate between sections.

Final Thoughts

This horizontal scrolling effect is an engaging way to showcase content interactively. By using HTML, CSS, and JavaScript, we’ve created a simple yet elegant scrolling experience that works seamlessly across devices.

Try customizing the sections with images, text, or animations to make it even more visually appealing!

Would you like to add smooth scrolling or animations to enhance this effect? Let me know in the comments! 🚀

Tags:

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *