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

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

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

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

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

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

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

2016-05-21_192340

Добавляем JS

[php]

/* 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)’});
});
});
}
[/php]

CSS

[php]

.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; }

/* ———————————————————————————————————————————————— */
[/php]

HTML

[php]
<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>
[/php]

Похожие статьи

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

Я свяжусь с Вами в течении 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"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

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

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

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

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

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

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

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

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

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

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

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

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Обсудить условия
Вкратце опишите Вашу ситуацию или задайте свои вопросы, я свяжусь с вами в течении 15 минут в рабочее время
Введите контактный E-mail (используется для ответа)

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

Сообщение

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