+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Спасибо за оставленную заявку
Ожидайте звонка

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

Блог вебмастера

2016-05-21_192340

Добавляем JS


  /* Mobile & Animation */
  var Android = navigator.userAgent.search(/Android/i);
	var iPhone = navigator.userAgent.search(/iPhone/i);
	var iPad = navigator.userAgent.search(/iPad/i);
	if(Android != -1 || iPhone != -1 || iPad != -1) { $('html').css('width', window.innerWidth + 'px'); }
  else {
    /* Animation */
		$(".scroll").each(function () {
			var block = $(this);
			$(window).scroll(function() {
				var top = block.offset().top;
				var bottom = block.height()+top;
				top = top - $(window).height();
				var scroll_top = $(this).scrollTop();
				if ((scroll_top > top) && (scroll_top < bottom)) { if (!block.hasClass("animated")) { block.addClass("animated"); block.trigger('animateIn'); } }
        else { block.removeClass("animated"); block.trigger('animateOut'); }
			});
		});
    /* Time Parser */
    $(".servants em").each(function() {
      $(this).attr("data-number", parseInt($(this).text()));
    });
    $(".servants, .myanimations").on("animateIn", function() {
      var inter = 1;
      $(this).find("em").each(function() {
        var count = parseInt($(this).attr("data-number")),
            block = $(this),
            timeout = null,
            step = 1;
        timeout = setInterval(function() {
          if (step == 25) {
            block.text(count.toString());
            clearInterval(timeout);
          } else {
            block.text((Math.floor(count*step/25)).toString());
            step++;
          }
        }, 60);
      });
    }).on('animateOut', function() {
      $(this).find('.anim').each(function() {
        $(this).css('opacity', 0.01);
        $(this).css({'-webkit-transform': 'scale(0.7, 0.7)', '-moz-transform': 'scale(0.7, 0.7)'});
      });
    });	
	}

CSS


.animated { -webkit-animation-duration:2s; animation-duration:2s; }
.animated { -webkit-animation-fill-mode:both; animation-fill-mode:both; }

 .servants .serv, .servants .serv em,.promo-slider span.image { opacity:0; }

/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* Animations */

/* fadeIn */
@-webkit-keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
.animated.fadeIn { -webkit-animation-name:fadeIn; animation-name:fadeIn; }

/* scaleIn */
@-webkit-keyframes scaleIn {
  0% { opacity:0; -webkit-transform:scale(0, 0); }
  100% { opacity:1; -webkit-transform:scale(1, 1); }
}
@keyframes scaleIn {
  0% { opacity:0; transform:scale(0); }
  100% { opacity:1; transform:scale(1); }
}
.animated.scaleIn { -webkit-animation-name:scaleIn; animation-name:scaleIn; }

/* flatUp */
@-webkit-keyframes flatUp {
  0% { opacity:0; -webkit-transform:translateY(50%); }
  100% { opacity:1; -webkit-transform:translateY(0); }
}
@keyframes flatUp {
  0% { opacity:0; transform:translateY(50%); }
  100% { opacity:1; transform:translateY(0); }
}
.animated.flatUp { -webkit-animation-name:flatUp; animation-name:flatUp; }

/* hatch */
@-webkit-keyframes hatch {
	0% { -webkit-transform:rotate(0deg) scaleY(0.6); }
	20% { opacity:1; -webkit-transform:rotate(-2deg) scaleY(1.05); }
	35% { opacity:1; -webkit-transform:rotate(2deg) scaleY(1); }
	50% { opacity:1; -webkit-transform:rotate(-2deg); }
	65% { opacity:1; -webkit-transform:rotate(1deg); }
	80% { opacity:1; -webkit-transform:rotate(-1deg); }
	100% { opacity:1; -webkit-transform:rotate(0deg); }
}
@keyframes hatch {
	0% { transform:rotate(0deg) scaleY(0.6); }
	20% { opacity:1; transform:rotate(-2deg) scaleY(1.05); }
	35% { opacity:1; transform:rotate(2deg) scaleY(1); }
	50% { opacity:1; transform:rotate(-2deg); }
	65% { opacity:1; transform:rotate(1deg); }
	80% { opacity:1; transform:rotate(-1deg); }
	100% { opacity:1; transform:rotate(0deg); }
}
.animated.hatch { -webkit-animation-name:hatch; animation-name:hatch; }

/* ------------------------------------------------------------------------------------------------------------------------------------------------ */

HTML

<div id="slide2"><div class="slide-pd">
  <div class="servants scroll animated">
    <div class="serv scroll scaleIn animated"><em class="scroll fadeIn animated" data-number="110">110</em><span>домов</span><br>в&nbsp;коттеджном<br>городке</div>
    <div class="serv scroll scaleIn animated"><em class="scroll fadeIn animated" data-number="14">14</em><span>гектаров</span><br>площадь городка</div>
    <div class="serv scroll scaleIn animated"><em class="scroll fadeIn animated" data-number="15">15</em><span>минут</span><br>до&nbsp;Владивостока</div>
    <div class="serv scroll scaleIn animated"><em class="scroll fadeIn animated" data-number="5">5</em><span>минут</span><br>до&nbsp;берега моря</div>
  </div>
</div></div>

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка