0
им делать некоторые анимации с CSS3, используя этот пример:прокрутки анимации с CSS3
http://www.justinaguilar.com/animations/index.html#
Я сделал Jquery код, чтобы обеспечить, что анимации появляется при прокрутке. Когда я делаю анимацию только с одним div, все идет правильно, но что-то не так, когда я пытаюсь применить ту же анимацию для двух div с одним и тем же классом, первый прямоугольник становится анимированным, но не происходит со вторым; Вот код:
<!DOCTYPE html>
<html lang="en">
<head>
\t
\t <style>
\t \t body {
\t \t height: 2200px;
\t \t }
\t \t #objeto {
\t \t /* modifique la posición para que se vea en la caja de stacksnippet */
\t \t
\t \t width: 30%;
\t \t height: 200px;
\t \t background-color: red;
\t \t visibility: hidden;
\t \t }
\t \t .slideUp {
\t \t animation-name: slideUp;
\t \t animation-duration: 1s;
\t \t animation-timing-function: ease;
\t \t visibility: visible !important;
\t \t }
\t \t @keyframes slideUp {
\t \t 0% {
\t \t transform: translateY(100%);
\t \t }
\t \t 50% {
\t \t transform: translateY(-8%);
\t \t }
\t \t 65% {
\t \t transform: translateY(4%);
\t \t }
\t \t 80% {
\t \t transform: translateY(-4%);
\t \t }
\t \t 95% {
\t \t transform: translateY(2%);
\t \t }
\t \t 100% {
\t \t transform: translateY(0%);
\t \t }
\t \t }
\t </style>
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
\t \t
\t <meta charset="UTF-8">
\t <title>Document</title>
\t <style>
\t \t li{
\t \t \t color: black;
\t \t }
\t \t .foo{
\t \t \t background-color: yellow;
\t \t }
\t </style>
</head>
<body>
\t <div id="objeto" style="position: relative;
\t \t top: 100px;"></div>
\t <div id="objeto"></div>
\t
\t <script>
\t $(window).scroll(function() {
\t \t $('#objeto').each(function() {
\t \t var imagePos = $(this).offset().top;
\t \t var topOfWindow = $(window).scrollTop();
\t console.log(imagePos, topOfWindow);
\t if (imagePos < topOfWindow + 400) {
\t $(this).addClass("slideUp");
\t }
\t });
\t });
\t /*$(window).scroll(function() {
\t \t $('ul').each(function() {
\t \t $(this).css("background-color","blue")
\t \t
\t });
\t });*/
\t </script>
</body>
</html>
Вы можете сделать тест. Если вы поместите '$ ('# objeto'). Length' возвращает 1, даже если у вас есть 5 элементов с одинаковым идентификатором. Дублированные идентификаторы на одной странице html - это плохая практика, и это вызывает множество проблем. Это решает ответ ниже. –