Анимация при скролинге?

Question

[Muxailo]

Здравствуйте.
Проблема вот в чем:
При переключение вкладок анимация начинаеться до того как скроллинг до нее дошел.
Еффект создан при поможи ccs.animate и wow.min.js.
P.S.на простой странице роботает отлично,а когда добавляю вкладки,то нет

Answer 1

[Саша]

Muxailo какие вкладки, табы?
Прикрепите скриншот ошибки.

Comments

[Muxailo]

да,табами !
Ошибки нету.
Есть 5 вкладок. в них анимации.Но они запускаються как только я захожу на вкладку,а не тогда,когда я доскролил до нее.

[Саша]

Muxailo: по описанию не похоже на ошибку.
таб ведь изначально скрыт, а значит позиционирование элемента плагин просто не может просчитать.

скройте таб по другому, оставив в потоке.

[Muxailo]

Саша: ну да, там не ошибка.
Просто не знаю как сделать,чтоб анимация в табе начиналась когда доскроллю к ней.

[Саша]

Muxailo: в активном табе она сработает, а в скрытых при их активации надо активировать анимацию и все)

[Muxailo]

Саша: так она и активируеться при активации скрытых табов , а надо чтоб при видимости анимации)

[Саша]

Muxailo: ну, все верно)
там скрыт - невидим
активен - виден и отрабатывает анимация

[Muxailo]

Саша: так а как зделать чтоб анимация включалась,когда она видима)?

[Саша]

добавить условие в JS табов.
табы сами писали или использовали плагин?

[Muxailo]

Саша: табы сам.

[Саша]

Muxailo: скиньте код на codepen.io/pen
либо разберитесь, какой там класс добавляется на элементе при скролле к ним и добавляйте его на элементе в активном табе)
при выборе другого таба снимаем классы отвечающие за запуск анимации со всех элементов в табах и присваиваем в активном)
пробуйте

[Muxailo]

Саша: а подскажете как включать именно на активном?

[Саша]

Muxailo: покажите код табов, нужно дописать.

[Muxailo]

Саша: я прикрепил скрин,там видно как создались табы,и тот который активен.

[Саша]

Muxailo: приведите ваш код к правильному виду, а именно:
- вынесите CSS и JS в отдельный файл
и скиньте конкретно JS код который отвечает за табы.

Answer 2

[sendik]

я просто подключаю код jq

$(".class").each(function(){
				var imagePos = $(this).offset().top;
				var topOfWindow = $(window).scrollTop();
				if(imagePos<topOfWindow+400){
					$(this).addClass('animated');
				}
			});

попробуй, должно помочь

Comments

[Muxailo]

спасибо,попробую!