Вопрос по animation и скроллам?

Question

[vladimir_html]

На лендингах обычно есть такие штуки: когда элемент попадает в зону видимости экрана, происходит какой-либо эффект появления, вот что имею сейчас
1. хотелось бы, чтобы контент появлялся только если находится в зоне видимости
2. список услуг появляется как то по-диагонали, вроде всё правильно, right изначально = -10%, animation right = 0,
Спасибо

Comments

[Антон]

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

[Kovalsky]

Репорт: это легко найти в гугле.

Answer 1

[one_day]

1 http://jquery.page2page.ru/index.php5/Работа_со_ск...

Answer 2

[kulaeff]

1. Для этого нужно использовать событие scroll или requestAnimationFrame, проверять scrollTop у анимируемого элемента и если он попал в видимость, то анимировать.
2. По диагонали появляется потому, что блок "Мы предлагаем" увеличивается по высоте (из-за анимации font-size) и смещает нижний блок вниз.

Замечания: анимировать font-size - так себе идея, несмотря на то, что это свойство animatable. Лучше использовать transform: scale. И вообще, не используйте $.animate, пользуйтесь css анимациями или, если анимации сложные, посмотрите в сторону GSAP.TweenLite.

Answer 3

[Николай Чуприк]

Анимация по попаданию верхнего края фрагмента <div class='container'> ...</div> на экран.

https://jsfiddle.net/tj2vn630/

$(window).on('scroll',function(){
	
  if ($(document).scrollTop() + $(window).height() - $('.container').offset().top > 0)	{
	 	$(window).off('scroll');

// Здесь ваша анимация

});

Что касается анимации, то лучше её делать средствами CSS, чем при помощи JS. Там у вас много чего в СSS, не относящегося к вопросу, поэтому вникать в листинг не хочу.