How to animate sections in pure CSS when scrolling the page?


Tags: html,css,html5,css3

Problem :

I am looking for a way to animate (with @keyframes, transform...) some elements when the user scrolls the page. For example:

  • When offset is 0: div has height: 100px.
  • When offset is between 0 and 100: div is height: 50px and color: blue.
  • And so on...

Is is possible using pure CSS? If it is not, what are the most efficient ways to do it with HTML or Javascript?



Solution :

The most efficient way to animate an element's style properties depending on scroll position will probably be to add a class with a scroll function:

Working Example

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y > 500) {
    // myID.style.backgroundColor = "blue"; // you can add individual styles 
    myID.className = "blue" // or add classes
  } else {
    // myID.style.backgroundColor = "red";
    myID.className = "red"
  }
};

window.addEventListener("scroll", myScrollFunc);
body {
  height: 1100px;
}
#myID {
  position: fixed;
  height: 100px;
  line-height: 20px;
  transition: all 1s;
}
.blue {
  background: blue;
  animation: myAnimation 1s both;
}
.red {
  background: red;
}
@keyframes myAnimation {
  0% {
    border-radius: 0px;
    line-height: 10px;
  }
  100% {
    border-radius: 100%;
    line-height: 100px;
  }
}
<div id="myID" class="red">Hello world</div>

Docs:

.scrollY
.className
.addEventListener


    CSS Howto..

    How to make CSS flex properties compatible with older browsers?

    How to Achieve Word Wrap Effect With Children Divs

    how to really include html codes inside php

    How to get only the last ul of specific id on page via CSS :last-child property?

    How do you create boxes like github's explore section?

    How to move the blue twitter bird slowly using css and js?

    how to position nested list items?

    How to center the boxes as shown?

    How to lookup the applied font on JavaFX Label?

    How to keep the aspect ratio of the image in css?

    Animated HTML,CSS JavaScript. How can I implement this [closed]

    How to insert a line break before an element using CSS

    How does HTML/CSS determine the size?

    How can I improve my webpage code to be scalable for smaller sizes?

    How can I make all images of different height and width the same via CSS?

    How to overlay/overlap two div's designed with css to look like text bubbles?

    How to apply style to the divs that are added dynamically?

    how to properly use css in jsf?

    How to create invoice / money reciept with html [closed]

    Using jquery to swap text, how to revert other text to original?

    How to build a dashed line that has borders on both sides, using CSS

    Element has greater px width than device viewport but still shows completely (mobile web app)

    How to create CSS3 bounce effect with PURE CSS

    How to keep css content position when zooming in and out?

    how to increase/decrease font-size from external css [closed]

    How to know values of all attributes and properties of a tag element in HTML

    How to unfold or close content in html/JS - always assigned to different id

    How to exclude a child from the parent css property?

    How to “float” an absolutely positioned element div out of its container

    How to vertically center text overlapping an image?