scrolling animation with css3

Question

im doing some animation with css3 using this example:

http://www.justinaguilar.com/animations/index.html#

I have made Jquery code to provide that animations appears by scrolling. When i do the animation just with one div everything is going right, but something is going wrong when i try to apply the same animation for two divs with the same class, the first rectangle is getting animated but not happens with the second; Here is the code:

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

	<style>

		body {
		   height: 2200px;
		}
		#objeto {
		  /* modifique la posición para que se vea en la caja de stacksnippet */
		 
		  width: 30%;
		  height: 200px;
		  background-color: red;
		  visibility: hidden;
		}

		.slideUp {
		  animation-name: slideUp;
		  animation-duration: 1s;
		  animation-timing-function: ease;
		  visibility: visible !important;
		}
		@keyframes slideUp {
		  0% {
		    transform: translateY(100%);
		  }
		  50% {
		    transform: translateY(-8%);
		  }
		  65% {
		    transform: translateY(4%);
		  }
		  80% {
		    transform: translateY(-4%);
		  }
		  95% {
		    transform: translateY(2%);
		  }
		  100% {
		    transform: translateY(0%);
		  }
		}
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		li{
			color: black;
		}
		.foo{
			background-color: yellow;
		}
	</style>
</head>
<body>


	 <div id="objeto" style="position: relative;
		  top: 100px;"></div>

	<div id="objeto"></div> 

	



	<script>


	$(window).scroll(function() {
  		$('#objeto').each(function() {
		    var imagePos = $(this).offset().top;
		    var topOfWindow = $(window).scrollTop();

	    console.log(imagePos, topOfWindow);
	    if (imagePos < topOfWindow + 400) {
	      $(this).addClass("slideUp");
	    }
	  });
	});

	/*$(window).scroll(function() {
  		$('ul').each(function( ) {
		    $(this).css("background-color","blue")
		    
	  });
	});*/

	</script>
</body>
</html>

You can make the test. If you put $('#objeto').length it returns 1, even if you have 5 elements with same id. Duplicated ids in the same html page is a bad practice and it causes a lot of problems. This solves with the answer below. — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Mar 8, 2016 at 11:10

Yox2l · Accepted Answer · 2016-03-08 11:06:24Z

1

You should use class instead of ID. since ID is unique (https://css-tricks.com/the-difference-between-id-and-class).

Simply change the code to:

.objeto {
      /* modifique la posición para que se vea en la caja de stacksnippet */

      width: 30%;
      height: 200px;
      background-color: red;
      visibility: hidden;
    }

And

<div class="objeto" style="position: relative;
      top: 100px;"></div>

<div class="objeto"></div>

And

$('.objeto').each(function() {
        var imagePos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();

answered Mar 8, 2016 at 11:06

Yox2l

486 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

scrolling animation with css3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related