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

Question

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?

apaul · Accepted Answer · 2015-08-25T16:46:22.227

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

Thanks, it works. Maybe it could work better with "transition" instead of the "@keyframes", doesn't it? — David Tabernero M., Aug 25 '15 at 16:50
@Davdriver I added the animation just to show that you could, but yes a transition will work just as well. — apaul, Aug 25 '15 at 17:02

score 1 · Answer 2 · answered Aug 25 '15 at 16:13

Methinnks it's not possible to 'spy' scroll with pure css. If you want, you can do this with jQuery:

$(document).scroll(function() {
    var pos = parseInt($(document).scrollTop())

    if(pos == 0) {
        $('.yourDivClass').css({
            height : '100px' , 
            color : '#fff'
        })
    }

    if (pos > 0 && pos <= 100) {
        $('.yourDivClass').css({
            height : '50px' , 
            color : 'blue'
        })
    }   

    console.log(pos)
})

and of course if you wanna get a smooth transition, you supposed to declare transitions in your css file

.yourDivClass {
    transition: height 0.5s ease
}

I know that way, but I asked if is it possible to to without plugins, only with pure JS. — David Tabernero M., Aug 25 '15 at 16:15

score 0 · Answer 3 · answered Aug 25 '15 at 15:55

Scrolling is an event. Once you scroll the page, the event gets triggered and something happens. You cannot control events using Pure CSS. Period.

Some people would argue that even :hover is an event. Yes, and it is for some strange reason, implemented in CSS, but not others.

score 0 · Answer 4 · edited May 23 '17 at 11:46

0

With pure CSS: no.

But you can have a class with keyframed animation associated with it, and then say when the element is scrolled into view, to add the class to the element. This will make it start doing the animation.

edited May 23 '17 at 11:46

Community

1
1

answered Aug 25 '15 at 15:57

Djave

8,595
8
70
124

I saw that page before, but would like to use only pure JS, is it possible? – David Tabernero M. Aug 25 '15 at 16:14

score 0 · Answer 5 · answered Aug 25 '15 at 15:58

0

You can use Waypoints.js to set what happens when you reach a specific element of a page.

answered Aug 25 '15 at 15:58

Dietrich George

114
9

I would like to use only pure JS, is it possible? – David Tabernero M. Aug 25 '15 at 16:14
Yes, you can check on scroll if the current position is greater than the scroll offset and the height of the element youre scrolling past. – Dietrich George Aug 26 '15 at 16:02

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

5 Answers5