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

Calculate the total of the temporary information entered into the input field

the ajax success function is malfunctioning

Conceal mobile button

Is there a way to transmit a div using Node.js?

Is there anyone who can provide a straightforward solution (code) for < something basic?

The alignment of flexNav.js submenus is not consistent

Activating the Isotope

The dropdown functionality in Bootstrap appears to be malfunctioning

Obtain the height and width of the original images from the href and assign them to your attributes using jQuery

Is there a way to delete a table row and then set a background color for every other table row that remains?

How can one use jQuery to target elements that have names that are in an array format?

How can I adjust the size and width of the autofocus cursor inside an input box using Angular?

Vue JS encounters difficulties when attempting to lazy load various images from a randomized image URL

What is the simplest method for transferring data to and from a JavaScript server?

ion-grid featuring alternate columns

Practical Guide to Implementing Ajax and JSON Encoding in Zend Framework 2

`Is it challenging to convert JSON into HTML, leading to undefined results?`

Issues with displaying images in CSS when using HTML 5 canvas drawing

Automatic placement of the cursor at the left end of the username field in the registration form is required

Bootstrap's landing page problem