Animacja kolejnych div'ów podczas scroll'owania

Question

Witam. Tworze sobie większą stronę internetową i napotkałem problem, z którym nie mogę sobie poradzić.
Moja strona opiera się ma na wpisach. Chciałem dodać efekt, że podczas scroll'owania  kolejne wpisy za pomocą animacji i właściwości opacity będą okazywały się na ekranie. Udało mi się jak do tej pory napisać tyle:
 

		jQuery.expr[':'].regex = function(elem, index, match)
		{
			var matchParams = match[3].split(','),
			validLabels = /^(data|css):/,
			attr = {
				method: matchParams[0].match(validLabels) ? 
							matchParams[0].split(':')[0] : 'attr',
				property: matchParams.shift().replace(validLabels,'')
			},
			regexFlags = 'ig',
			regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
			return regex.test(jQuery(elem)[attr.method](attr.property));
		}
		$(document).ready(function()
		{
			$(window).scroll(function(){
				 var pos = $('div:regex(class,^post)').offset().top;
				 var scroll = $(window).scrollTop() + $(window).height();
				 if(scroll > pos + 100)
				 {
					
					$('div:regex(class,^post)').addClass('animation');
				 }
				 else
				 {
					  $('div:regex(class,^post)').removeClass('animation');
				 } 
				 
				
		})
		});

 

Posty mają klasy: post1 , post2 itp.
Powyższe kod działa tylko dla 1 diva o klasie post1, reszta tzn. post2, post3 nie mają już tej animacji.
Ogólnie chce uzyskać efekt:

		$(document).ready(function()
		{
			$(window).scroll(function(){
				 var pos = $('.post1').offset().top;
				 var scroll = $(window).scrollTop() + $(window).height();
				 if(scroll > pos + 100)
				 {
					
					$('.post1').addClass('animation');
				 }
				 else
				 {
					  $('.post1').removeClass('animation');
				 } 
				 
				
		})
		
			$(window).scroll(function(){
				 var pos = $('.post2').offset().top;
				 var scroll = $(window).scrollTop() + $(window).height();
				 if(scroll > pos + 100)
				 {
					
					$('.post2').addClass('animation');
				 }
				 else
				 {
					  $('.post2').removeClass('animation');
				 } 
				 
				
		})
			$(window).scroll(function(){
				 var pos = $('.post3').offset().top;
				 var scroll = $(window).scrollTop() + $(window).height();
				 if(scroll > pos + 100)
				 {
					
					$('.post2').addClass('animation');
				 }
				 else
				 {
					  $('.post3').removeClass('animation');
				 } 
				 
				
		})
		});

Proszę o pomoc, z góry dziękuje i pozdrawiam.

Answer 1

Witam. Jeżeli chcesz sam to zrobić to oczywiście super. Ale jeżeli nie masz nic przeciwko gotowym rozwiązaniom to proszę

scrollreveal

Comments

Dziękuje. Niestety mam ten sam problem. Działa tylko dla 1 diva.

<script>
            window.sr = ScrollReveal();
</script>

<div class="container"> 
        <div class="post">
                <p>Przykładowy tekst: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                       Nulla lorem odio, rhoncus nec est ac, lobortis tristique magna. </p>
        </div>
        <div class="post">
                 <p>Aenean ornare ultricies eros sit amet bibendum.
                 In pharetra consectetur faucibus.  </p> 
        </div>
<div> 
<script> 
      sr.reveal('.post', { container: '.container' });
</script>

 

---

	// JavaScript
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');

Podstawowa konfiguracja. Tam gdzie .foo, .bar podajesz elementy do animacji. Możesz ich dodać tyle ile chcesz ale w takiej formie. Po jednym i po każdym średnik.

---

Dziękuje bardzo :) Do zamknięcia.

Answer 2

Widzę, że już masz rozwiązanie. Ale ostatnio robiłem coś takiego w czystym js to pomyślałem, że podeślę bo może Cię zaciekawi.

https://github.com/NilmergOmino/2-strona-firmowa/blob/master/js/fade-in.js

do wdrożenia wystarczy podać odpowiednie klasy w fadeElements (9 linijka) oraz ustawić animację w css dla klasy fade-in-animation (lub zmienić jej nazwę w 6 i 15 linijce na jaką tam komu pasuje)

a tu jak działa w praktyce (ja oprócz opacity zrobiłem jeszcze delikatny ruch w górę):

https://nilmergomino.github.io/2-strona-firmowa/

Comments

Też się przyda, dziękuje bardzo :)