jQuery Waypoints - несколько div с таким же классом

Question

Я внимательно следил за этим руководством: http://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/. Я хотел бы применить fadein почти к каждому элементу страницы. Это означает использование этого метода jQuery, который я хотел бы создать для каждого элемента отдельно для каждого элемента и дублировать код, поскольку в противном случае каждый элемент с тем же классом в настоящее время затухает только с первой путевой точкой.

Вот что я имел:

// hide our element on page load 
$('.fade-in').css('opacity', 0); 

$('.fade-in').waypoint(function() { 
$('.fade-in').addClass('fadeInUp'); 
}, { offset: '95%' }); 

Следуя этой страницы, я пытался адаптировать его иметь:

Но я не мог заставить его работать ... какие-либо идеи, пожалуйста? (Мой Jquery вполне может быть откусил)

// hide our element on page load 
$('.fade-in').css('opacity', 0); 

var sticky = []; 
$('.fade-in').each(function(idx){ 
sticky[idx] = new Waypoint.Sticky({ element: this }); 
$({element: this}).addClass('fadeInUp'); 
}); 

Я также не уверен, как добавить в смещение части.

Очень большое спасибо

Answer 1

Я не уверен, что я могу следовать код выше, но я думаю, что я понимаю, что вы пытаетесь достичь, и я сделал что-то подобное.

Используйте путевые точки, чтобы добавить класс к элементам и CSS обработать переход или анимацию.

Предполагается, что вы используете jQuery-версию путевых точек.

site.js

$(document).ready(function(){ 
    //set a waypoint for all the page parts on the page 
    var ppWaypoint = $('.pp').waypoint(function(direction) { 
     //check the direction 
     if(direction == 'down') { 
      //add the class to start the animation 
      $(this.element).addClass('show'); 
      //then destroy this waypoint, we don't need it anymore 
      this.destroy(); 
     } 
    }, { 
     //Set the offset 
     offset: '80%' 
    }); 
}); 

Ваш CSS может делать все, что вы хотите на самом деле, давайте предположим, что вы просто хотите, чтобы исчезнуть в элементах

style.css

.pp { 
    transition-property: opacity; 
    transition-duration: 0.8s; 
    opacity: 0; 
} 
.pp.show { 
    opacity: 1; 
} 

CSS здесь довольно прост; просто по умолчанию непрозрачность элемента установлена ​​в 0, а при добавлении класса шоу непрозрачность изменяется на 1. Свойство и продолжительность перехода сделают это приятным и плавным.

Для чего-то немного более холодного, вы можете заставить его двигаться вверх, а также исчезать, просто изменив свой CSS немного;

.pp { 
    transition-property: opacity, transform; 
    transition-duration: 0.8s; 
    opacity: 0; 
    transform: translateY(5px); 
} 
.pp.show { 
    transform: translateY(0px); 
    opacity: 1; 
} 

Все, что я сделал, это добавить свойство transform translateY для обработки движения вверх.

Я упустил все дополнительные CSS-определения браузера, но вы хотели бы включить их точно.

Надеюсь, это поможет!