Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - JavaScript - How to make Scroll Drive All The Things using HTML CSS & JavaScript
    JavaScript

    How to make Scroll Drive All The Things using HTML CSS & JavaScript

    Coding StellaBy Coding Stella28 April 2024No Comments6 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s create a “Scroll Drive All The Things” effect using HTML, CSS, and JavaScript. This effect will give the impression of driving all the elements on the screen as the user scrolls, creating a dynamic and engaging experience.

    We’ll keep it playful yet straightforward, using HTML to structure the content, CSS for styling, and JavaScript to handle the scrolling animation.

    Let’s dive into building the “Scroll Drive All The Things” effect. Whether you’re a beginner or an experienced developer, this project offers a fun way to experiment with scroll animations and create an immersive user experience.

    Let’s drive all the things with the scroll!

    HTML :

    This HTML file creates a list of cards, each representing an HTML element. The cards are styled using CSS classes defined in the linked style.css file. Each card displays the name of an HTML element, and there’s a corresponding CSS class for each card to control its appearance.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>IO - Scroll Drive All The Things</title>
      <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="cards">
      <div class="card">&lt;html&gt;</div>
      <div class="card">&lt;base&gt;</div>
      <div class="card">&lt;head&gt;</div>
      <div class="card">&lt;link&gt;</div>
      <div class="card">&lt;meta&gt;</div>
      <div class="card">&lt;script&gt;</div>
      <div class="card">&lt;style&gt;</div>
      <div class="card">&lt;title&gt;</div>
      <div class="card">&lt;body&gt;</div>
      <div class="card">&lt;address&gt;</div>
      <div class="card">&lt;article&gt;</div>
      <div class="card">&lt;aside&gt;</div>
      <div class="card">&lt;footer&gt;</div>
      <div class="card">&lt;header&gt;</div>
      <div class="card">&lt;h1&gt;</div>
      <div class="card">&lt;h2&gt;</div>
      <div class="card">&lt;h3&gt;</div>
      <div class="card">&lt;h4&gt;</div>
      <div class="card">&lt;h5&gt;</div>
      <div class="card">&lt;h6&gt;</div>
      <div class="card">&lt;hgroup&gt;</div>
      <div class="card">&lt;main&gt;</div>
      <div class="card">&lt;nav&gt;</div>
      <div class="card">&lt;section&gt;</div>
      <div class="card">&lt;blockquote&gt;</div>
      <div class="card">&lt;cite&gt;</div>
      <div class="card">&lt;dd&gt;</div>
      <div class="card">&lt;dt&gt;</div>
      <div class="card">&lt;dl&gt;</div>
      <div class="card">&lt;div&gt;</div>
      <div class="card">&lt;figcaption&gt;</div>
      <div class="card">&lt;figure&gt;</div>
      <div class="card">&lt;hr&gt;</div>
      <div class="card">&lt;li&gt;</div>
      <div class="card">&lt;ol&gt;</div>
      <div class="card">&lt;ul&gt;</div>
      <div class="card">&lt;menu&gt;</div>
      <div class="card">&lt;p&gt;</div>
      <div class="card">&lt;pre&gt;</div>
      <div class="card">&lt;a&gt;</div>
      <div class="card">&lt;abbr&gt;</div>
      <div class="card">&lt;b&gt;</div>
      <div class="card">&lt;bdi&gt;</div>
      <div class="card">&lt;bdo&gt;</div>
      <div class="card">&lt;br&gt;</div>
      <div class="card">&lt;code&gt;</div>
      <div class="card">&lt;data&gt;</div>
      <div class="card">&lt;dfn&gt;</div>
      <div class="card">&lt;em&gt;</div>
      <div class="card">&lt;i&gt;</div>
      <div class="card">&lt;kbd&gt;</div>
      <div class="card">&lt;mark&gt;</div>
      <div class="card">&lt;q&gt;</div>
      <div class="card">&lt;rp&gt;</div>
      <div class="card">&lt;ruby&gt;</div>
      <div class="card">&lt;rt&gt;</div>
      <div class="card">&lt;s&gt;</div>
      <div class="card">&lt;samp&gt;</div>
      <div class="card">&lt;small&gt;</div>
      <div class="card">&lt;span&gt;</div>
      <div class="card">&lt;strong&gt;</div>
      <div class="card">&lt;sub&gt;</div>
      <div class="card">&lt;sup&gt;</div>
      <div class="card">&lt;time&gt;</div>
      <div class="card">&lt;u&gt;</div>
      <div class="card">&lt;var&gt;</div>
      <div class="card">&lt;wbr&gt;</div>
      <div class="card">&lt;area&gt;</div>
      <div class="card">&lt;audio&gt;</div>
      <div class="card">&lt;img&gt;</div>
      <div class="card">&lt;map&gt;</div>
      <div class="card">&lt;track&gt;</div>
      <div class="card">&lt;video&gt;</div>
      <div class="card">&lt;embed&gt;</div>
      <div class="card">&lt;iframe&gt;</div>
      <div class="card">&lt;object&gt;</div>
      <div class="card">&lt;picture&gt;</div>
      <div class="card">&lt;source&gt;</div>
      <div class="card">&lt;portal&gt;</div>
      <div class="card">&lt;svg&gt;</div>
      <div class="card">&lt;canvas&gt;</div>
      <div class="card">&lt;noscript&gt;</div>
      <div class="card">&lt;del&gt;</div>
      <div class="card">&lt;ins&gt;</div>
      <div class="card">&lt;caption&gt;</div>
      <div class="card">&lt;col&gt;</div>
      <div class="card">&lt;colgroup&gt;</div>
      <div class="card">&lt;table&gt;</div>
      <div class="card">&lt;tbody&gt;</div>
      <div class="card">&lt;tr&gt;</div>
      <div class="card">&lt;td&gt;</div>
      <div class="card">&lt;tfoot&gt;</div>
      <div class="card">&lt;th&gt;</div>
      <div class="card">&lt;thead&gt;</div>
      <div class="card">&lt;button&gt;</div>
      <div class="card">&lt;datalist&gt;</div>
      <div class="card">&lt;option&gt;</div>
      <div class="card">&lt;fieldset&gt;</div>
      <div class="card">&lt;label&gt;</div>
      <div class="card">&lt;form&gt;</div>
      <div class="card">&lt;input&gt;</div>
      <div class="card">&lt;legend&gt;</div>
      <div class="card">&lt;meter&gt;</div>
      <div class="card">&lt;optgroup&gt;</div>
      <div class="card">&lt;select&gt;</div>
      <div class="card">&lt;output&gt;</div>
      <div class="card">&lt;progress&gt;</div>
      <div class="card">&lt;textarea&gt;</div>
      <div class="card">&lt;details&gt;</div>
      <div class="card">&lt;summary&gt;</div>
      <div class="card">&lt;dialog&gt;</div>
      <div class="card">&lt;slot&gt;</div>
      <div class="card">&lt;template&gt;</div>
      <div class="card">&lt;acronym&gt;</div>
      <div class="card">&lt;applet&gt;</div>
      <div class="card">&lt;bgsound&gt;</div>
      <div class="card">&lt;big&gt;</div>
      <div class="card">&lt;blink&gt;</div>
      <div class="card">&lt;center&gt;</div>
      <div class="card">&lt;dir&gt;</div>
      <div class="card">&lt;font&gt;</div>
      <div class="card">&lt;frame&gt;</div>
      <div class="card">&lt;frameset&gt;</div>
      <div class="card">&lt;image&gt;</div>
      <div class="card">&lt;keygen&gt;</div>
      <div class="card">&lt;marquee&gt;</div>
      <div class="card">&lt;menuitem&gt;</div>
      <div class="card">&lt;nobr&gt;</div>
      <div class="card">&lt;noembed&gt;</div>
      <div class="card">&lt;noframes&gt;</div>
      <div class="card">&lt;param&gt;</div>
      <div class="card">&lt;plaintext&gt;</div>
      <div class="card">&lt;rb&gt;</div>
      <div class="card">&lt;rtc&gt;</div>
      <div class="card">&lt;spacer&gt;</div>
      <div class="card">&lt;strike&gt;</div>
      <div class="card">&lt;tt&gt;</div>
      <div class="card">&lt;xmp&gt;</div>
    </div>
    <!-- partial -->
      
    </body>
    </html>
    

    CSS :

    This CSS code imports styles for a design system and a demo layer. It defines keyframes for a slide-fade-in animation. In the demo layer, it sets up styles for cards, including grid layout, background, shadows, and spacing. Cards are dynamically sized and positioned based on their order.

    @import "https://unpkg.com/open-props" layer(design.system);
    @import "https://unpkg.com/open-props/normalize.light.min.css" layer(demo.support);
    
    @keyframes slide-fade-in {
      from {
        opacity: 0;
        box-shadow: none;
        transform: scale(.8) translateY(15vh);
      }
    }
    
    @layer demo {
      .card {
        @media (prefers-reduced-motion: no-preference) {
          view-timeline-name: --item-timeline;
          animation: slide-fade-in both;
          animation-timeline: --item-timeline;
          animation-range: contain 0% contain 50%;
        }
      }
    }
    
    @layer demo.support {
      * {
        box-sizing: border-box;
        margin: 0;
      }
    
      html {
        block-size: 100%;
        background: var(--surface-3);
      }
    
      body {
        min-block-size: 100%;
        font-family: system-ui, sans-serif;
    
        display: grid;
        place-content: center;
        padding-block: 30dvh;
      }
      
      .cards {
        display: grid;
        gap: var(--size-3);
        grid-auto-flow: dense;
        grid-template-columns: repeat(3, var(--size-content-1));
        
        & > .card {
          background: linear-gradient(#fff, #fff), var(--gradient-10);
          background-origin: border-box;
          background-clip: content-box, border-box;
          border-radius: var(--radius-3);
          box-shadow: var(--shadow-3);
          line-height: 3;
          padding-top: var(--size-1);
          font-size: var(--font-size-4);
          font-weight: var(--font-weight-6);
          font-family: var(--font-mono);
          display: grid;
          place-content: center;
          
          &:nth-of-type(4n) {
            grid-row: span 2;
            background-image: linear-gradient(#fff, #fff), var(--gradient-3);
          }
          
          &:nth-of-type(7n) {
            grid-row: span 3;
            background-image: linear-gradient(#fff, #fff), var(--gradient-5);
          }
          
          &:nth-of-type(5n) {
            grid-column: span 2;
            background-image: linear-gradient(#fff, #fff), var(--gradient-18);
          }
        }
      }
    }

    JavaScript:

    This code creates a sparkling effect on a webpage. It generates stars that twinkle and glow when you move your mouse or touch the screen. It sets up initial variables and utility functions, then handles mouse and touch events to create stars and glowing effects accordingly.

    let start = new Date().getTime();
    
    const originPosition = { x: 0, y: 0 };
    
    const last = {
      starTimestamp: start,
      starPosition: originPosition,
      mousePosition: originPosition
    }
    
    const config = {
      starAnimationDuration: 1500,
      minimumTimeBetweenStars: 250,
      minimumDistanceBetweenStars: 75,
      glowDuration: 75,
      maximumGlowPointSpacing: 10,
      colors: ["249 146 253", "252 254 255"],
      sizes: ["1.4rem", "1rem", "0.6rem"],
      animations: ["fall-1", "fall-2", "fall-3"]
    }
    
    let count = 0;
      
    const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min,
          selectRandom = items => items[rand(0, items.length - 1)];
    
    const withUnit = (value, unit) => `${value}${unit}`,
          px = value => withUnit(value, "px"),
          ms = value => withUnit(value, "ms");
    
    const calcDistance = (a, b) => {
      const diffX = b.x - a.x,
            diffY = b.y - a.y;
      
      return Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
    }
    
    const calcElapsedTime = (start, end) => end - start;
    
    const appendElement = element => document.body.appendChild(element),
          removeElement = (element, delay) => setTimeout(() => document.body.removeChild(element), delay);
    
    const createStar = position => {
      const star = document.createElement("span"),
            color = selectRandom(config.colors);
      
      star.className = "star fa-solid fa-sparkle";
      
      star.style.left = px(position.x);
      star.style.top = px(position.y);
      star.style.fontSize = selectRandom(config.sizes);
      star.style.color = `rgb(${color})`;
      star.style.textShadow = `0px 0px 1.5rem rgb(${color} / 0.5)`;
      star.style.animationName = config.animations[count++ % 3];
      star.style.starAnimationDuration = ms(config.starAnimationDuration);
      
      appendElement(star);
    
      removeElement(star, config.starAnimationDuration);
    }
    
    const createGlowPoint = position => {
      const glow = document.createElement("div");
      
      glow.className = "glow-point";
      
      glow.style.left = px(position.x);
      glow.style.top = px(position.y);
      
      appendElement(glow)
      
      removeElement(glow, config.glowDuration);
    }
    
    const determinePointQuantity = distance => Math.max(
      Math.floor(distance / config.maximumGlowPointSpacing),
      1
    );
    
    const createGlow = (last, current) => {
      const distance = calcDistance(last, current),
            quantity = determinePointQuantity(distance);
      
      const dx = (current.x - last.x) / quantity,
            dy = (current.y - last.y) / quantity;
      
      Array.from(Array(quantity)).forEach((_, index) => { 
        const x = last.x + dx * index, 
              y = last.y + dy * index;
        
        createGlowPoint({ x, y });
      });
    }
    
    const updateLastStar = position => {
      last.starTimestamp = new Date().getTime();
    
      last.starPosition = position;
    }
    
    const updateLastMousePosition = position => last.mousePosition = position;
    
    const adjustLastMousePosition = position => {
      if(last.mousePosition.x === 0 && last.mousePosition.y === 0) {
        last.mousePosition = position;
      }
    };
    
    const handleOnMove = e => {
      const mousePosition = { x: e.clientX, y: e.clientY }
      
      adjustLastMousePosition(mousePosition);
      
      const now = new Date().getTime(),
            hasMovedFarEnough = calcDistance(last.starPosition, mousePosition) >= config.minimumDistanceBetweenStars,
            hasBeenLongEnough = calcElapsedTime(last.starTimestamp, now) > config.minimumTimeBetweenStars;
      
      if(hasMovedFarEnough || hasBeenLongEnough) {
        createStar(mousePosition);
        
        updateLastStar(mousePosition);
      }
      
      createGlow(last.mousePosition, mousePosition);
      
      updateLastMousePosition(mousePosition);
    }
    
    window.onmousemove = e => handleOnMove(e);
    
    window.ontouchmove = e => handleOnMove(e.touches[0]);
    
    document.body.onmouseleave = () => updateLastMousePosition(originPosition);

    In conclusion, developing the “Scroll Drive All The Things” effect using HTML, CSS, and JavaScript has been an exciting exploration into creating dynamic scroll animations.

    Throughout this project, we’ve learned how to manipulate elements on the screen in response to the user’s scrolling actions, giving the impression of driving all the content. By combining HTML for structure, CSS for styling, and JavaScript for scroll animation, we’ve crafted an immersive and engaging user experience.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Magic Mouse Effect using HTML CSS & JavaScript
    Next Article How to make Responsive GSAP Slider with Button Wave Effect using HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025
    JavaScript

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    JavaScript

    How to create Cross Road Game using HTML CSS and JS

    2 May 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202419K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202416K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202414K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202412K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to make Neumorphism Calculator with Dark Light Theme in HTML CSS & JavaScript

    20 March 2025

    How to Make a Personal Portfolio Website Using HTML CSS & JavaScript

    9 December 2023

    Next Level Login & Registration Form using HTML & CSS

    11 January 2024

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    Latest Post

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood