Затухание элементов с одним и тем же классом только тогда, когда их середина достигает области просмотра с использованием путевых точек jQuery.

У меня есть одностраничный сайт, состоящий из множества разделов. Я хотел бы сделать его более динамичным, используя путевые точки jQuery.

Как это должно выглядеть:

Каждый раз, когда элемент с классом fade-in-element входит в область просмотра (с некоторым смещением), он получает специальный класс, который будет анимировать (затухать) элемент в НО ТОЛЬКО один элемент с класс & в настоящее время отображается в окне просмотра.

Чего я достиг:

ВСЕ элементы с классом исчезают, когда первый элемент с классом входит в область просмотра.

HTML:

<section>Some content</section>
<section>
    <div class="container fade-in-element">
        <div class="row">
            <div class="col-sm-4"> SOME CONTENT </div>
            <div class="col-sm-4"> SOME CONTENT </div>
            <div class="col-sm-4"> SOME CONTENT </div>
        </div>
    </div>
</section>

<section>
    <div class="container fade-in-element">
        <h1 class="heading">HEADING</h1>

        <p>TEXT</p>
        <p>TEXT</p>
    </div>
</section>

CSS: .fade-in-element { непрозрачность: 0; }

jQuery:

jQuery(document).ready(function ($) {
    $(function () {
        var inview = new Waypoint.Inview({
            element: $('.fade-in-wrap')[0],
            entered: function (direction) {
                $('.fade-in-element').addClass('animated2 fadeInLeft');
            },
            offset: '50%'
        });
    });
});

Кто-нибудь поможет? Благодарю вас!


javascript html jquery css jquery-waypoints
person Very Curious    schedule 19.01.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это то, что вам нужно

$('.fade-in-element').each(function(){
        var _this = this;
        var inview = new Waypoint({
            element: _this,
            handler: function (direction) {
                $(this.element).animate({'opacity': 1})
            },
            offset: '50%'
        });

        });

Это демонстрация

person Abdallah Arffak    schedule 19.01.2015
comment
Точно! ;) Спасибо! - person Very Curious; 19.01.2015

arrow_upward
0
arrow_downward

Вы должны обернуть его внутри if. Вы можете проверить размер окна с помощью $(window).width и .height., а текущую позицию с помощью $(document).scrollTop. Вы можете установить ограничивающую рамку с этими значениями и проверить, находится ли внутри div.

var top = $(document).scrollTop();
var height = $(window).height();
$('.fade-in-wrap').each(function(){
    var off = $(this).offset();
    if(off.top > top && off.top < top+height) {
        // Add the waypoint here. The element must be $(this)!
    }
});
person Balázs Varga    schedule 19.01.2015