•  0
  •  96

Animacja odliczania podczas wyświetlenia

Jeśli chcesz osiągnąć efekt animowanego odliczania do wartości liczbowej określonej w tagach wybranego elementu, podczas pojawienia się go w polu widzenia użytkownika - możesz skorzystać z mojej propozycji rozwiązania tego zagadnienia.

Aby osiągnąć zamieżony efekt potrzebujesz jQuery, ViewPortChecker'a oraz plugin countTo. Następnie należy za pomocą "View checker'a" sprawdzić czy element znajduje się z polu widzenia użytkownika i przybindować proces odliczania.

Kompletny kod znajduje się poniżej, uruchamiający całą procedurę przy 30% tolerancji, do elementów klasy .counter.

Aby zobaczyć jak to wygląda w rzeczywistości - zerknij na moją stronę główną.

	$('.counter').each(function () {

		$(this).viewportChecker({
			repeat: false,
			classToRemove: 'counter',
			offset: 30,
			callbackFunction: function (elem, action)
			{
				$(elem).countTo({
					speed: 5000,
					refreshInterval: 50,
					to: $(elem).text()
				});
			}
		});
	});
Dodaj komentarz
Brak wyników.