Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2017, 15:00
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 29

Как установить по очередный запуск функции на анимации элементов, при скроле
На странице есть 2-ве секции которые содержат в себе от 5 до 6 элементов. При скроле страницы до секции с элементами, запускается функция с добавлением класса активного состояния (анимацией). Но сейчас, при прокрутке до 1-й секции сейчас запускается анимация сразу на 2-й секции и докрутив уже до второй секции анимация не запускается т.е функция уже проставила активный класс всем элементам ещё в тот момент когда запустилась на 1-й секции. Как можно организоваться нормальный порядок запуска анимации?

window.onscroll = function () {
    programmList('#standart');
    programmList('#addational');
};

function programmList(ind) {
    var section =  document.querySelector(ind);

    var toSection = section.getBoundingClientRect().top;

    if(window.pageYOffset >= (toSection + 200)) {
        var sectionItem = section.querySelectorAll('.programm__item');

        console.log('Start Animation ' + ind);

        var i = 0;
        var speed = 500;

        var activeItem = setInterval(function () {
            sectionItem[i].classList.add('programm__item_active');
            i++;
            if(i >= sectionItem.length) {
                clearInterval(activeItem);
            }
        }, speed)
    }
}


<header> 
 // Первый экран и навигация
</header>
<section id="presentation" class="presentation">
    <div id="presentation__slide" class="slide">
        <ul class="slide__outer">
            <li class="slide__item">
                <img src="/image/slide/slide1.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide2.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide3.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide4.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide5.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide6.jpg" alt="" class="responsive-img">
            </li>
        </ul>
    </div>
    <div class="presentation__content">
       <p>Итальянское искусство во всей своей многогранности: чудная аура керамики, гастрономия и виноделие. Словно ожившие пейзажи художников эпохи Возрождения в уникальных ландшафтах Равенны, Римини, Болоньи.</p>
       <p>Знакомство с мастерами гончарного искусства, их ремеслом. И, говорим по-итальянски! Возможность изучения итальянского языка в рамках эффективного курса обучения во время путешествия, результатом которого станет Ваше взаимопонимание и успешное общение с Италией, ее искусством, культурой и традициями.</p>
    </div>
</section>
<section id="addational" class="programm__addational">
    <h1 class="programm__headig text-center">Индивидуальныя программа:</h1>
    <p class="programm__content">Каждая программа может быть изменена и осуществлена по требованиям участников с предварительным определением стоимости дополнительных мастер классов и экскурсий.</p>
    <p class="programm__content">Организаторы готовы удовлетворить любые дополнительные желания к согласованной программе по просьбе участников перед поездкой и во время пребывания в Фаэнце.</p>
    <p class="text-bold text-upper text-center">Предлагаются:</p>

    <div class="programm__list">

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/music_key_opt.svg"></object>
            </div>
            <div class="programm__title">Музыкальные мастер-классы</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/planeer_opt.svg"></object>
            </div>
            <div class="programm__title">Пленэр с художником Фатеевым</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/colessium_opt.svg"></object>
            </div>
            <div class="programm__title">Мастер-классы по истории, искусству и литературе Италии</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/pasta_opt.svg"></object>
            </div>
            <div class="programm__title">Дегустации местных продуктов, эногастрономические туры</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/pizza_opt.svg"></object>
            </div>
            <div class="programm__title">Италия в одной пицце в ресторане "O fiore mio"</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/chef_opt.svg"></object>
            </div>
            <div class="programm__title">Кулинарные мастер-классы «Руки в тесте»</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/way_opt.svg"></object>
            </div>
            <div class="programm__title">Экскурсии в другие итальянские города</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object data="/image/svg/bicycle_opt.svg" type="image/svg+xml"></object>
            </div>
            <div class="programm__title">Велосипедные туры</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object data="/image/svg/hot_spring_opt.svg" type="image/svg+xml"></object>
            </div>
            <div class="programm__title">Термальные однодневные процедуры</div>
        </div>

    </div>

    <div class="programm__price programm__price_nomrg">
        <div class="programm__cost">Создайте свою мечту</div>
        <button class="programm__btn" data-type="constract">Создать свою программу</button>
        <p><small>* Цена дополнительных экскурсий и мероприятий зависит от количества желающих и от выбранного типа транспорта.</small></p>
    </div>

</section>

Последний раз редактировалось villiwalla, 08.02.2017 в 16:22. Причина: add html
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2017, 15:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

villiwalla,
может минимальный макет с css и html
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2017, 15:44
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 29

рони, Добавил часть макета
Ответить с цитированием
  #4 (permalink)  
Старый 08.02.2017, 16:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

villiwalla,
не понимаю как связан ваш скрипт с предоставленным html. id на всякий случай параметр уникальный, неповторимый по стандарту.
Ответить с цитированием
  #5 (permalink)  
Старый 08.02.2017, 16:29
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 29

рони,
С ID исправил. По поводу скрипта, кручу страницу в низ, как только докручиваю до секции #presentation, скрипт начинает добавлять вложенным элементам класс с анимацией, в т.ч и элементам из секции #addational. Как это исправить? Что бы когда докрутил до #presentation была только активация его дочерних элементов, а не сразу во всех секциях.
Ответить с цитированием
  #6 (permalink)  
Старый 08.02.2017, 16:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

villiwalla,
if(window.pageYOffset >= (toSection + 200))
if(toSection <= 200)

function programmList(ind) {
    var section =  document.querySelector(ind);
    if(!section||section.classList.contains("active")) return;
    var toSection = section.getBoundingClientRect().top;

    if(toSection <= 200) {
        section.classList.add("active");
        var sectionItem = section.querySelectorAll('.programm__item');

        console.log('Start Animation ' + ind);

        var i = 0;
        var speed = 500;

        var activeItem = setInterval(function () {
            sectionItem[i].classList.add('programm__item_active');
            i++;
            if(i >= sectionItem.length) {
                clearInterval(activeItem);
            }
        }, speed)
    }
}
Ответить с цитированием
  #7 (permalink)  
Старый 09.02.2017, 11:02
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 29

рони,
Спасибо! Могли бы пояснить?
if(!section||section.classList.contains("active")) return;
Ответить с цитированием
  #8 (permalink)  
Старый 09.02.2017, 11:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от villiwalla
Могли бы пояснить?
if(!section||section.classList.contains("active")) return;
если блока нет или блок уже был анимирован ничего не делать
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заблокировать отмену анимации GIF при нажатии на ESC? kaf Events/DOM/Window 9 13.01.2013 12:48
Как определить пользователь сам нажал элемент или при помощи функции click(); finlandia Элементы интерфейса 13 10.01.2013 23:09
Как установить курсор на грид при открытии формы vva1972 ExtJS 1 07.11.2011 11:12
Запуск при редиректе некой js функции Dorsaj Элементы интерфейса 0 22.10.2010 16:05
Как установить кодировку при записи в MySQL Arfey Общие вопросы Javascript 6 14.06.2010 18:00