Story Box — это jQuery плагин для создания CSS3 анимации при прокрутки страницы. Эффект очень красивый.
Демо
А теперь перейдем к установке.
На страницах, где хотите видеть эффект, перед
ставите:
Код
<script src="http://my-wos.ru/winter-2015/tabs/jquery.js"></script>
<script src="http://my-wos.ru/winter-2015/tabs/story-box.min.js"></script>
<link type="text/css" rel="StyleSheet" href="http://my-wos.ru/winter-2015/tabs/tabs.css" />
Теперь нужные элементы поместить вот в такой код:
Код
<div id="block_mid" data-sb="fadeInUp,fadeInRight,fadeInDown,fadeInLeft,fadeInUpBig,fadeInRightBig,fadeInDownBig,fadeInLeftBig,bounceInUp,bounceInRight,bounceInDown,bounceInLeft,flipInX,flipInY,rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight,zenFadeInUp,zenFadeInRight,zenFadeInDown,zenFadeInLeft,zenFadeInUpBig,zenFadeInRightBig,zenFadeInDownBig,zenFadeInLeftBig" data-sb-hide="fadeOutUp">
Здесь ваш элемент дизайна
</div>
Например, вы хотите, чтобы "подверглись" анимации материалы. Для этого заходим в вид материалов нужного вам модуля, в самый верх ставим:
Код
<div id="block_mid" data-sb="fadeInUp,fadeInRight,fadeInDown,fadeInLeft,fadeInUpBig,fadeInRightBig,fadeInDownBig,fadeInLeftBig,bounceInUp,bounceInRight,bounceInDown,bounceInLeft,flipInX,flipInY,rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight,zenFadeInUp,zenFadeInRight,zenFadeInDown,zenFadeInLeft,zenFadeInUpBig,zenFadeInRightBig,zenFadeInDownBig,zenFadeInLeftBig" data-sb-hide="fadeOutUp">
И в самый низ:
Также с глобальными блоками и со всем остальным.
Для текста/счетчиков/картинок можно применить вот такой эффект:
Код
<div style="display: block;" data-sb="fadeInLeftBig" data-sb-hide="fadeOutUp">
Какая-нибудь картинка, текст или что-либо ещё
</div>
На видео этот эффект применен к верхней и нижней части сайта.
