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.