Is it necessary to create a separate animation class to trigger CSS keyframe animations based on scroll position?

Question

Is it necessary to create a separate animation class to trigger CSS keyframe animations based on scroll position?

My website has a background animation that controls various shapes, each with their own unique animation styles:

animation: animShape 50s linear infinite;

The speed of the animations varies depending on the shape being displayed.

The animShape keyframes are defined as follows:

animShape {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
 }
}

I am looking to adjust the speed of each shape (represented by div elements) based on the scroll position.

I have been considering different approaches and was hoping for some guidance in the right direction.

Here's an idea I had:

$(document).on('scroll', '#section-trigger' , function(){              
$("#first-shape").removeClass('.first-animation-class');
$("#first-shape").addClass('.second-animation-class');})


$(document).on('scroll', '#another-section-trigger', function() {
$("#first-shape").removeClass('.second-animation-class');
$("#first-shape").addClass('first-animation-class');})

...

However, this approach would require me to create separate animation classes for each shape, which might not be the most efficient way to handle it.

Another option could be utilizing JQuery to manage all the animations, but I've read that it may not have direct access to :after elements. Any workarounds for this issue?

Apologies if the formatting is off – sometimes it gets confusing. Appreciate any help!

html jquery css

Answer 1

Answer №1

I created a dynamic animation that responds to scrolling and incorporated a timer to coordinate the start and finish of the animation.

Ensure that each animation aligns with the designated timer interval. For instance, I set up an animation to run for 2 seconds, repeated twice, resulting in a total duration of 4 seconds per cycle.

By making slight adjustments to the structure, you can implement various animations seamlessly

let timer;
var timerCount = 0;
MyTimer();
var element1 = document.getElementById("myDIV1");
var element2 = document.getElementById("myDIV2");
function doSomething() {
  
  if(!element1.classList.contains('anim1'))
      element1.classList.add("anim1");

  if(!element2.classList.contains('anim2')) 
      element2.classList.add("anim2");     
}


function MyTimer()
{
    timerCount = timerCount + 1;
    if(timerCount >= 5)
    {
     
      if(element1.classList.contains('anim1'))
         element1.classList.remove("anim1");
      if(element2.classList.contains('anim2'))
         element2.classList.remove("anim2");
         
       timerCount = 0;
    }
    timer = setTimeout(MyTimer, 1000);
}


document.addEventListener('scroll', function(e) {
 doSomething();
});

body{
   height:2500px;
}
.shape1{
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  float:left;

}
.shape2{
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  float:right;
}
.wrapper{
   width;100%;
   border:1px solid #ddd;
   padding:20px;
   margin:150px 20px;
   height:150px;
}
.anim1 {
  animation-name: example1;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

.anim2 {
  animation-name: example2;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@keyframes example1 {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:100px; top:0px;}
  50%  {background-color:blue; left:100px; top:100px;}
  75%  {background-color:green; left:0px; top:100px;}
  100% {background-color:red; left:0px; top:0px;}
}

@keyframes example2 {
  0%   {background-color:red; right:0px; top:0px;}
  25%  {background-color:yellow; right:100px; top:0px;}
  50%  {background-color:blue; right:100px; top:100px;}
  75%  {background-color:green; right:0px; top:100px;}
  100% {background-color:red; right:0px; top:0px;}
}

<div class="wrapper">
    <div id="myDIV1" class="shape1"></div>
    <div id="myDIV2" class="shape2"></div>
</div>

Answer 2

I created a dynamic animation that responds to scrolling and incorporated a timer to coordinate the start and finish of the animation.

Ensure that each animation aligns with the designated timer interval. For instance, I set up an animation to run for 2 seconds, repeated twice, resulting in a total duration of 4 seconds per cycle.

By making slight adjustments to the structure, you can implement various animations seamlessly

let timer;
var timerCount = 0;
MyTimer();
var element1 = document.getElementById("myDIV1");
var element2 = document.getElementById("myDIV2");
function doSomething() {
  
  if(!element1.classList.contains('anim1'))
      element1.classList.add("anim1");

  if(!element2.classList.contains('anim2')) 
      element2.classList.add("anim2");     
}


function MyTimer()
{
    timerCount = timerCount + 1;
    if(timerCount >= 5)
    {
     
      if(element1.classList.contains('anim1'))
         element1.classList.remove("anim1");
      if(element2.classList.contains('anim2'))
         element2.classList.remove("anim2");
         
       timerCount = 0;
    }
    timer = setTimeout(MyTimer, 1000);
}


document.addEventListener('scroll', function(e) {
 doSomething();
});

body{
   height:2500px;
}
.shape1{
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  float:left;

}
.shape2{
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  float:right;
}
.wrapper{
   width;100%;
   border:1px solid #ddd;
   padding:20px;
   margin:150px 20px;
   height:150px;
}
.anim1 {
  animation-name: example1;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

.anim2 {
  animation-name: example2;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@keyframes example1 {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:100px; top:0px;}
  50%  {background-color:blue; left:100px; top:100px;}
  75%  {background-color:green; left:0px; top:100px;}
  100% {background-color:red; left:0px; top:0px;}
}

@keyframes example2 {
  0%   {background-color:red; right:0px; top:0px;}
  25%  {background-color:yellow; right:100px; top:0px;}
  50%  {background-color:blue; right:100px; top:100px;}
  75%  {background-color:green; right:0px; top:100px;}
  100% {background-color:red; right:0px; top:0px;}
}

<div class="wrapper">
    <div id="myDIV1" class="shape1"></div>
    <div id="myDIV2" class="shape2"></div>
</div>

Is it necessary to create a separate animation class to trigger CSS keyframe animations based on scroll position?

Answer №1

Similar questions

Ways to activate a different jQuery event by utilizing the output from a previously run jQuery event

Sharing data with external domains and retrieving HTML output using JavaScript

Issues with Ajax.BeginForm causing JSON to be returned as undefined (Confirmed by Dev Tools)

Utilize Cordova to download files and access them within the Cordova framework

Tips for creating custom CSS to target a specific element within a group of similar elements

Looking for a way to ensure a div reaches 100% height within a specified area without exceeding the boundaries of the body?

The jQuery.addClass() function seems to be malfunctioning

Two vertical divs stacked on top of each other, each expanding to the entire height and width of the browser window

What occurs when Click events are triggered on an <object> element?

Steps to gather all the images within a directory

JavaScript - Capture the Values of Input Fields Upon Enter Key Press

Quirky PHP Chat feature you'll love

Is it possible to enclose an image with two <div> tags in a single line?

Steps for troubleshooting a Jquery Dialog

If a quote character is detected in a string, color the line red

Choose a specific item in jQuery to showcase an error notification

Display a dropdown menu when hovering over with a delay

Is there a difference between innerHTML strings and their corresponding strings in JavaScript?

Tips for using JavaScript to style an array items individually

A step-by-step guide on using Javascript to transform images into text