Skip to content

Instantly share code, notes, and snippets.

@sxidsvit

sxidsvit/amimation_blocks_plugin

Forked from Scretch-1/amimation_blocks_plugin
Created June 22, 2018 11:41
Show Gist options
  • Save sxidsvit/4b204a52eb3b1493059f4060d5f86df5 to your computer and use it in GitHub Desktop.
Save sxidsvit/4b204a52eb3b1493059f4060d5f86df5 to your computer and use it in GitHub Desktop.
Download ZIP
Анимация блоков при скролле страницы
Raw
amimation_blocks_plugin
//Для начала подключаем animate_plugin
//Далее подключаем плагин waypoints https://github.com/imakewebthings/waypoints
//Далее на странице подключаем "animate" стили в
<head>
<link rel="stylesheet" href="libs/animate-plugin/animate.min.css">
</head>
//После в самом низу тега
<body>
<script type="text/javascript" src="libs/animate-plugin/animate-css.js"></script>
<script type="text/javascript" src="libs/animate-plugin/jquery.waypoints.min.js"></script>
</body
//В файле "common.js" прописываем функцию вызова плагина
$(document).ready(function(){
$("section h2").animated("zoomInUp");
})
//--HTML--//
//Пример применения
<section class="s_1" style="height: 800px;">
<h2>Section Header</h2>
</section>
<section class="s_2" style="height: 800px;">
<h2>Section Center</h2>
</section>
<section class="s_3" style="height: 800px;">
<h2>Section Content</h2>
</section>
<section class="s_4" style="height: 800px;">
<h2>Section Footer</h2>
</section>
//--end HTML--//
//--JS--//
//Animate CSS + WayPoints javaScript Plugin
//Example: $(".element").animated("zoomInUp", "zoomOutDown");
//Урок http://webdesign-master.ru/blog/html-css/22.html
(function($) {
$.fn.animated = function(inEffect) {
$(this).each(function() {
var ths = $(this);
ths.css("opacity", "0").addClass("animated").waypoint(function(dir) {
if (dir === "down") {
ths.addClass(inEffect).css("opacity", "1");
};
}, {
offset: "90%"
});
});
};
})(jQuery);
//--end JS--//
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment