Как запустить анимацию при скроллинге (достижении метки <a name>)?

Вопрос-ответ JavaScript
1

Есть маленькая анимация - появление текста( на JQuery). Сейчас она работает при клике на второй блок (светло-серый) - http://jsfiddle.net/j6odxckb/
Как можно сделать так чтобы эта анимация запускалась не при клике по этому блоку, а при скроллинге, когда второй блок становится видимым (т.е. - когда достигает метки “а1”)?
Возможно, реализация задуманного неверная (запуск не через метку делается). Если да - подскажите, где почитать.

2

http://jsfiddle.net/j6odxckb/4/

Поступаем, как с комиксами:

  1. Навешиваем на событие scroll объекта window проверку ZagolovokBlock2IsInVision
  2. При каждом скролле проверяем является ли ZagolovokBlock2IsInVision - true
  3. Если да, то вызываем функцию ShowText
  4. В функции ZagolovokBlock2IsInVision проверяем:
    $(window).scrollTop() + $(window).height() >= $block2.offset().top + $('.zagolovok-block2').height()
    текущее значение прокрутки + высота окна >= текущее положение верха блока $block2 + высота блока .zagolovok-block2

Мой тебе совет: старайся выдерживать определенный стиль написания кода, расставляй пробелы, так намного удобнее читать код.
Так же посмотри, как @dmitry показал, как правильно сделать задание с комиксами:
http://forum.jscourse.com/t/24-reshenie-zadachi-s-podgruzkoj-komiksov/957

p.s. Если кому-то что-то непонятно - задавайте вопросы

1 лайк
3

спасибо
А не подскажите, как можно точно также запустить анимацию на CSS?
Есть готовая анимация в блоке - http://jsfiddle.net/nyrkxsbb/1/
Тот же случай - при скроллинге должна запускаться анимация второго блока (так же как и первого квадрата при загрузке страницы).
Решение - присвоить в функции JQuery Css-свойство ‘animation-name’,‘move’ - похоже, неверное решение. Также не подходит вариант с запуском анимации с паузы (когда бы изначально в CSS свойствах этого блока было задано animation-play-state: paused; а в функции JQuery задавать этому свойству значение running).
Здесь http://javascript.ru/forum/misc/44239-poyavlenie-ischeznovenie-ehlementa-pri-prokrutke-stranicy-jquery.html обсуждался вроде похожий вариант, но я не понимаю этого условия.
Или возможно, можно сделать запуск при скроллинге в нужном месте с помощью только CSS, или как-то с метками? (не знаю существует ли такой способ вообще)

4

Можно
Вот библиотека, на главной странице вся анимация при помощи CSS
http://daneden.github.io/animate.css/

Сделал при помощи данной библиотеки
http://jsfiddle.net/nyrkxsbb/2/

5

спасибо
но только оно запускается каждый раз, когда прокручивать страничку вверх-вниз, а надо чтобы только один раз, при достижении блока (как в примере с текстом).
Есть библиотека, кажись специально под такую цель - wow.js
Здесь http://master-css.com/page/wowjs#cut на простом примере показано
Я не понимаю, как под эту библиотеку свойства анимации прописывать. В примере на сайте они там под картинку прописаны:

img 
class="wow zoomInUp" 
data-wow-offset="200" 
data-wow-delay="0.5s" 
data-wow-duration="2s" 
src="images/dog1.jpg" 
alt="Собака - лучший друг человека"

А как это для блока CSS? Прямо в стилях CSS?

Вот то что есть (нерабочее) - http://animatecss.esy.es/

И как это можно сделать без подключения библиотек, @dmitry подскажи пожалуйста. Или очень много кода будет?

6

Можно взять логику из примера и заставить ее сработать только 1раз (или указать какие другие условия). Смотри по времени: если есть время разобраться с задачей, я бы рекомендовал написать решение самостоятельно. Если нет, должна быть туча библиотек эту задачу решающая.

Выглядит как синтаксис html аттрибутов.