CODEWITHSUNDEEP
javascriptjquerycsscss-animations
user8517929
user8517929

Reputation:

How to bind css animation duration to scroll

I want to make something like those website where you scroll down and some animation follows by your scrolling and if you scroll up it goes reverse.

I saw some libraries like this but I want to see can it be done some more simple way?

Thanks

$(document).ready(function(){
  var lastScrollTop = 0;
    $(document).scroll(function(event){
       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           $('div').removeClass('scrollUp').addClass('scrollDown');
       } else {
          $('div').removeClass('scrollDown').addClass('scrollUp');
       }
       lastScrollTop = st;
    });
});
body{
  height: 150vh;
  overflow-y: auto;
}
div {
    width: 100px;
    height: 100px;
    position: fixed;
}
@keyframes myfirst {
    0%   {background: rgba(0,0,0,0); top: 0px;}
    100% {background: rgba(0,0,0,1); top: 400px;}
}
.scrollDown{
  animation-name: myfirst;
  animation-duration: 5s;
  animation-direction: alternate;
}
.scrollUp{
  animation-name: myfirst;
  animation-duration: 5s;
  animation-direction: alternate-reverse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Besides this I just tried changing keyframes on scroll so 100% or the end of animations changes by scrolling down and 0% by scrolling up but it doesnt work:

 $(document).ready(function(){
  var lastScrollTop = 0;
    $(document).scroll(function(event){
       var st = $(this).scrollTop();
       $('head>style').last().remove();
       if (st > lastScrollTop){
           $('head').append('<style>@keyframes myfirst{0%{background: rgba(0,0,0,0); top: 0px;}100%{background: rgba(0,0,0,1); top: '+st+'px;}}</style>');
           $('div').removeClass('scrollUp').addClass('scrollDown');
       } else {
       $('head').append('<style>@keyframes myfirst{0%{background: rgba(0,0,0,0); top: '+st+'px;}100%{background: rgba(0,0,0,1); top: '+lastScrollTop+'px;}}</style>');
          $('div').removeClass('scrollDown').addClass('scrollUp');
       }
       lastScrollTop = st;
    });
});
body{
  height: 150vh;
  overflow-y: auto;
}
div {
    width: 100px;
    height: 100px;
    position: fixed;
    border: 1px solid black;
}
.scrollDown{
  animation-name: myfirst;
  animation-duration: 0s;
  animation-direction: alternate;
}
.scrollUp{
  animation-name: myfirst;
  animation-duration: 0s;
  animation-direction: alternate-reverse;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div></div>

SOLUTION WITH TRANSITION (WITHOUT KEYFRAMES)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<style> 
body{
  height: 150vh;
  overflow-y: auto;
}
div {
    width: 100px;
    height: 100px;
    position: fixed;
    border: 1px solid black;
    opacity: 0;
    transition: opacity 0s ease;
    background: rgb(0,0,0);
}
</style>
</head>
<body>
<div></div>
<script>
    $(document).ready(function(){
  var lastScrollTop = 0;
    $(document).scroll(function(event){
       var st = $(this).scrollTop();
       $('head>style').last().remove();
       if (st > lastScrollTop){
        
            $('div').css({
                opacity: function() {
                var opacity = ((1 - (400 - st) / 400) * 0.8);
                return opacity;
            }, left: st
        
           });
       } else {
          $('div').css({
                opacity: function() {
                var opacity = ((1 - (400 - st) / 400) * 0.8);
                return opacity;
            }, left: st
        
           });
       }
       lastScrollTop = st;
    });
});
</script>
</body>
</html>

Upvotes: 9

Views: 4614

Answers (1)

worc
worc

Reputation: 3786

It can be done more simply and without jQuery. This is a rough take, but I made it a bit more generic by adding a container and passing ratios around to get mostly full, bounded left-to-right position and zero-to-one opacity transitions:

var locked = false;
var container = document.getElementById('container');
var animated = document.getElementById('animated');

window.addEventListener('scroll', function() {
  if (!locked) {
    window.requestAnimationFrame(function() {

      animated.style.opacity = Math.min(window.scrollY / window.innerHeight, 1);
      animated.style.left = Math.min(animated.style.opacity * container.clientWidth, container.clientWidth - animated.clientWidth).toString() + 'px';

      locked = false; 
    });
  }
  locked = true;
});
#container {
  border: 1px solid red;
  height: 200vh;
  width: 80%;
}

#animated {
  width: 100px;
  height: 100px;
  position: fixed;
  opacity: 0;
  background: rgb(0, 0, 0);
}
<div id="container">
  <div id="animated"></div>
</div>

Upvotes: 1

Related Questions