top of page

Just Jolly Functions

Functions: Creating the Animated Scroll Effects with HTML, CSS, and JavaScript

Animated Scroll Effects refer to visual animations that are triggered as a user scrolls down or up a webpage. These animations create an engaging experience by revealing content, moving elements, or applying various effects based on the user's scroll position. It is commonly used in modern web design to enhance user interaction and improve the visual appeal of a post.



To create animated scroll effects with HTML, CSS, and JavaScript, we can use the following approach:

  1. CSS for animations: We'll define keyframes and transitions for scroll animations.

  2. JavaScript for triggering the animation: We'll listen for the scroll event to trigger animations when specific elements come into view.


Example: Scroll-triggered Fade-in Animation

We'll create a simple page where elements fade in as the user scrolls down.


HTML, CSS, and JavaScript Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Scroll Effects</title>
  <style>
    /* Basic styling */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      padding: 0;
    }

    .section {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .section:nth-child(odd) {
      background-color: #ffffff;
    }

    .section:nth-child(even) {
      background-color: #e0f7fa;
    }

    .fade-in {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    }

    /* Animations triggered when in view */
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    h1 {
      font-size: 3rem;
      margin: 0;
    }

    p {
      font-size: 1.25rem;
      margin: 10px 0 20px;
    }

    /* To make the page scrollable */
    .spacer {
      height: 100px;
    }

  </style>
</head>
<body>

  <div class="section">
    <div class="fade-in">
      <h1>Welcome to My Post</h1>
      <p>Scroll down to see more content.</p>
    </div>
  </div>

  <div class="section">
    <div class="fade-in">
      <h1>About Us</h1>
      <p>We create innovative solutions for modern problems.</p>
    </div>
  </div>

  <div class="section">
    <div class="fade-in">
      <h1>Our Services</h1>
      <p>We offer a wide range of services, tailored to your needs.</p>
    </div>
  </div>

  <div class="section">
    <div class="fade-in">
      <h1>Contact Us</h1>
      <p>We would love to hear from you! Reach out to us today.</p>
    </div>
  </div>

  <!-- Spacer to make scrolling more interesting -->
  <div class="spacer"></div>

  <script>
    // Select all elements with class "fade-in"
    const fadeInElements = document.querySelectorAll('.fade-in');

    // Function to check visibility of elements
    function checkVisibility() {
      fadeInElements.forEach(element => {
        const rect = element.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom >= 0) {
          element.classList.add('visible'); // Add class to trigger animation
        }
      });
    }

    // Run the checkVisibility function on scroll
    window.addEventListener('scroll', checkVisibility);

    // Also check visibility when the page loads (in case elements are already in view)
    window.addEventListener('load', checkVisibility);

    // Initial check in case page is already scrolled
    checkVisibility();
  </script>

</body>
</html>

Explanation of the Code:

  1. HTML:

    • We have multiple .section divs, each containing content with the .fade-in class.

    • The .fade-in class is initially set to have an opacity of 0 and a transform property to translate the content 50px down, making it invisible and off-screen.

  2. CSS:

    • The .fade-in class applies the animation effect: fading in (from opacity 0 to 1) and sliding up (from translateY(50px) to translateY(0)).

    • The .visible class is added when the element is in view, triggering the animation.

    • transition property is used to animate the opacity and the transform properties over 1 second.

  3. JavaScript:

    • The checkVisibility() function checks the position of each .fade-in element relative to the viewport using getBoundingClientRect().

    • If the element is within the visible area of the browser (i.e., the top of the element is above the bottom of the viewport), it adds the .visible class to trigger the animation.

    • The function is triggered on both the scroll and load events to ensure that animations are triggered when the page is loaded and when the user scrolls.

  4. Smooth Scrolling:

    • You can easily add more sections and they will have the same scroll animation applied. This makes the page feel interactive as elements animate into view when the user scrolls.


Result:

  • As you scroll down the page, each .fade-in section fades in smoothly and slides up into view.

  • The page is responsive, and the scroll animation triggers when elements come into the viewport, creating a dynamic and engaging experience for users.


Customization:

  • You can change the animation effect by modifying the CSS properties, such as adding rotation, scaling, or different color transitions.

  • You can also adjust the duration of the animation by changing the transition time in the CSS.

bottom of page