Skrypt dla animacji listy wpisów (jquery)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function blogPostsListAnimation(elements, duration = 800) {
    function showElements(element, duration) {
        let top_of_element = $(element).offset().top;
        let bottom_of_element = $(element).offset().top + $(element).outerHeight();
        let bottom_of_screen = $(window).scrollTop() + window.innerHeight;
        let top_of_screen = $(window).scrollTop();
        time = duration/1000;
        if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            $(element).css({'opacity': '1', 'transition' : `opacity ${time}s ease-in-out`});
        }
        else {
            $(element).css({'opacity': '0', 'transition' : `opacity ${time}s ease-in-out`});
        }
    }
    function skrollBlog(elements, first) {
        if(first) {
            $.each($(elements), function() {
                $(this).css({'opacity': '0'});
            });
        }
        $.each($(elements), function() {
            showElements(this, duration);
        });
    }
    $(window).scroll(function() {
        skrollBlog(elements);
    });
    skrollBlog(elements, true);
}
 
// podać klas elementów które animujemy, 2 to czas trwania animacji (nie koniecznie, z defaultu 0.8s)
blogPostsListAnimation('', 1000);