Как сделать анимацию элемента при скролле?

Question

[Eridiant]

Как сделать что бы элемент мерцал во время скроллинга?
ЗЫ ответ в комментариях к ответу

Answer 1

[zhivulinal]

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

Эффект называется parallax лучший способ решения - найти готовый плагин

Comments

[Eridiant]

это не параллакс

[zhivulinal]

Любое воздействие на элемент при скролле (влево, вправо, вверх, вниз) - называется параллаксом.
Чтобы элемент мерцал, можно сделать так:
- CSS класс со стилями мерцания
- JS событие "скролл" при скролле)
- JS событие "стоп"
При скролле элементу добавляется класс, при остановке класс удаляется.

[zhivulinal]

Если Jquery можно вдохновиться этим:
https://gabrieleromanato.name/jquery-check-if-user...

[Eridiant]

zhivulinal, в js есть событие стоп?) так и писать el.onstop.removeClass() ?

[zhivulinal]

Eridiant, я скинул пример в нем реализована ваша задача.
В JS можно все - в том числе реализовать собственные евенты типа $(el).on("stop", func())

[Eridiant]

да, благодарю
но это все равно не параллакс)

(function( $ ) {
	$.fn.stopScroll = function( options ) {
		options = $.extend({
			delay: 250,
			callback: function() {}
		}, options);
		
		return this.each(function() {
			var $element = $( this ),
				element = this;
			$element.scroll(function() {
				clearTimeout( $.data( element, "scrollCheck" ) );
				$.data( element, "scrollCheck", setTimeout(function() {
					options.callback();
				}, options.delay ) );
			});
		});
	};

})( jQuery );