CODEWITHSUNDEEP
csscss-animations
Matteo
Matteo

Reputation: 3

Vertical Scrolling Line

I'm trying to recreate the vertical purple scrolling line that appear on this website but I can't get the animation to work properly. This is where I got stuck so far, I can't understand why the animation is not working.

<div class="tm-scroll">
  <span></span>
</div>

.tm-scroll {
    position: relative;
    width: 2px;
    height: 130px;
    background-color: #e5e5e5;
    overflow: hidden;
    margin: auto;
}

.tm-scroll span {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #77249e;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    animation: scrollHelperFerro 2s infinite ease-in-out;
}

Thanks for your help

Upvotes: 0

Views: 1246

Answers (2)

Bhavesh Ajani
Bhavesh Ajani

Reputation: 1261

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tm-scroll {
            position: relative;
            width: 2px;
            height: 130px;
            background-color: #e5e5e5;
            overflow: hidden;
            margin: auto;
        }
        
        .tm-scroll span {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #77249e;
            width: 100%;
            height: 100%;
            transform: translateY(-100%);
            animation: scrollHelperFerro 2s infinite ease-in-out;
        }
        
        @keyframes scrollHelperFerro {
            0% {
                transform: translateY(-100%);
            }
            50% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(100%);
            }
        }
    </style>
</head>

<body>
    <div class="tm-scroll"><span></span></div>
</body>

</html>

here you define only animation-name, time, etc. but actual CSS animation code is following

animation: scrollHelperFerro 2s infinite ease-in-out;

add animation css:

@keyframes scrollHelperFerro {
        0% {
            transform: translateY(-100%);
        }
        50% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(100%);
        }
    }

Upvotes: 0

vishnu sandhireddy
vishnu sandhireddy

Reputation: 1176

You have to add scrollHelperFerro animation using keyframes like below https://codepen.io/rohinikumar4073/pen/MWaeRMZ

.tm-scroll {
  position: relative;
  width: 2px;
  height: 130px;
  background-color: #e5e5e5;
  overflow: hidden;
  margin: auto;
}

.tm-scroll span {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #77249e;
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  animation: scrollHelperFerro 2s infinite ease-in-out;
}

@keyframes scrollHelperFerro {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
  ,
}


}
<div class="tm-scroll">
  <span></span>
</div>

Upvotes: 1

Related Questions