Magic Layout - JQuery плагин для анимации элементов на сайте.
Категория: jQuery.
В этой статье расскажу о новом JQuery плагине, который был обнаружен, подробно называется он Magic Layout. У этого плагина только одна задача, это оживлять блоки на веб-странице. Вы можете увидеть возможности плагина на демонстрационной странице. Прочитав эту статью, вы увидите как автор описывает процесс создания этого примера.
DEMO
Шаг-1
Подключения необходимых файлов и библиотек.
Прежде всего, нам необходимо подключить файл animate.css в раздел заголовка.
Этот файл описывает правила CSS для плагина анимации.
После этого, мы также должны подключить несколько дополнительных JS файлов:
1) Библиотека jQuery (jquery.js)
2) Сам плагин (magicLayout.js)
3) Файл инициализации (main.js)
В результате должен получиться следующий код:
КОД
Шаг-2
HTML разметка
В этой статье расскажу о новом JQuery плагине, который был обнаружен, называется он Magic Layout. У этого плагина только одна задача, это оживлять блоки на веб-странице. Вы можете увидеть возможности плагина на демонстрационной странице. Прочитав эту статью, вы увидите как автор описывает процесс создания этого примера.
Шаг-1 Подключения необходимых файлов и библиотек.
Прежде всего, нам необходимо подключить файл animate.css в раздел заголовка. Этот файл описывает правила CSS для плагина анимации.
После этого, мы также должны подключить несколько дополнительных JS файлов:
1) Библиотека jQuery (jquery.js)
2) Сам плагин (magicLayout.js)
3) Файл инициализации (main.js)
В результате должен получиться следующий код:
Спойлер
<head>
<link rel="stylesheet" href="/core/css/less/animate.css" type="text/css"/>
</head>
<body>
<script src="/js/jquery.js"></script>
<script src="/js/magicLayout.js"></script>
<script src="/js/main.js"></script>
</body>
Шаг-2 HTML разметка
Вы должны добавить класс layer для всех элементов на странице которые хотите анимировать.
Также вы можете настроить параметры по умолчанию, используя data атрибуты: data-show-effect (надо указать имя эффекта) и data-show-delay (установить задержку анимации).
Ниже приведен пример:
Спойлер
<header id="display-one" class="header box_blur display_js">
<div class="main-container main-container_fullheight">
<div class="welcome">
<h1 class="welcome__header">
<span class="welcome__name layer" data-show-effect="fadeInDown" data-show-delay="500">Magic Layout</span>
<span class="welcome__label layer" data-show-effect="fadeInUp" data-show-delay="500">JQuery plugin by which you can animate all the elements on the page</span>
</h1>
<div class="welcome__footer">
<a href="https://github.com/melnik909/magic_layout" rel="nofollow external" target="_blank" class="welcome__link layer" data-show-effect="zoomIn" data-show-delay="1000">Download</a>
</div>
</div>
</div>
</header>
После раздела заголовка переходим к созданию раздела основного содержания.
Спойлер
<section id="display-two" class="wrapper wrapper_boxshadow display_js">
<div class="main-container main-container_padding">
<div class="main-container__header">
<h2 class="title"><span class="title__label">KEY FEATURES</span></h2>
<div class="subtitle">Why it is useful</div>
</div>
<div class="features display-ib-box_3columns">
<article class="features__inner display-ib-box__item">
<h4 class="features__title layer" data-show-effect="jumpInLeft" data-show-delay="100">CSS3 Animations</h4>
<p class="features__description layer" data-show-effect="jumpInLeft" data-show-delay="100">The plugin use the best browser features when available (CSS3 transition and transform, GPU acceleration) </p>
</article>
<article class="features__inner display-ib-box__item">
<h4 class="features__title layer" data-show-effect="jumpInUp" data-show-delay="600">Includes LESS and SASS</h4>
<p class="features__description layer" data-show-effect="jumpInUp" data-show-delay="600">The plug-in supports modern preprocessors of LESS and SASS</p>
</article>
<article class="features__inner display-ib-box__item">
<h4 class="features__title layer" data-show-effect="jumpInRight" data-show-delay="900">Support mobile devices</h4>
<p class="features__description layer" data-show-effect="jumpInRight" data-show-delay="900">The plug-in is well optimized under mobile devices. Animations work clean and smoothly</p>
</article>
<article class="features__inner display-ib-box__item">
<h4 class="features__title layer" data-show-effect="jumpInLeft" data-show-delay="300">EASY TO USE & CUSTOMIZE</h4>
<p class="features__description layer" data-show-effect="jumpInLeft" data-show-delay="300">Modern preloader is easy to use and customize</p>
</article>
<article class="features__inner display-ib-box__item">
<h4 class="features__title layer" data-show-effect="jumpInUp" data-show-delay="800">Support modern browsers and platform</h4>
<p class="features__description layer" data-show-effect="jumpInUp" data-show-delay="800">IE 10+, Opera, Google Chrome, Firefox, Yandex Browser, Safari, Androind, iOS</p>
</article>
<article class="features__inner display-ib-box__item">
<h4 class="features__title layer" data-show-effect="jumpInRight" data-show-delay="1200">Documentation</h4>
<p class="features__description layer" data-show-effect="jumpInRight" data-show-delay="1200">Extensive step-by-step guide to help you with usage and customization.</p>
</article>
</div>
</div>
</section>
<section id="display-three" class="wrapper display_js">
<div class="main-container_fullwidth">
<div class="main-container__header">
<h2 class="title"><span class="title__label">More my plugins</span></h2>
<div class="subtitle">WebGl, Jquery, PureJS, AngularJS, pureCSS, Material Design, Bootstrap</div>
</div>
<div class="list-works grid_3columns">
<a href="#http://stas-melnikov.ru/animated_alert/" rel="nofollow external" class="list-works__item layer" data-show-effect="fadeIn" data-show-delay="300">
<img src="http://stas-melnikov.ru/cliparts/notebook2_480x480.jpg" class="list-works__img" alt="Work" />
<div class="list-works__overlay">
<span class="list-works__name-project">Animated alert</span>
<span class="list-works__link-project">showmore</span>
</div>
</a>
<a href="#http://stas-melnikov.ru/layer_modal_bootstrap/" rel="nofollow external" class="list-works__item layer" data-show-effect="fadeIn" data-show-delay="500">
<img src="http://stas-melnikov.ru/cliparts/notebook3_480x480.jpg" class="list-works__img" alt="Work" />
<div class="list-works__overlay">
<span class="list-works__name-project">Layered modal for Bootstrap3</span>
<span class="list-works__link-project">showmore</span>
</div>
</a>
<a href="#http://stas-melnikov.ru/webgl_generator_3dmodels/" rel="nofollow external" class="list-works__item layer" data-show-effect="fadeIn" data-show-delay="900">
<img src="http://stas-melnikov.ru/cliparts/clipart_480x480.jpg" class="list-works__img" alt="Work" />
<div class="list-works__overlay">
<span class="list-works__name-project">WebGL Generator of Models</span>
<span class="list-works__link-project">showmore</span>
</div>
</a>
<a href="#http://stas-melnikov.ru/layered_responsive_modal_window/" class="list-works__item layer" rel="nofollow external" data-show-effect="fadeIn" data-show-delay="1000">
<img src="http://stas-melnikov.ru/cliparts/notebook5_480x480.jpg" class="list-works__img" alt="Work" />
<div class="list-works__overlay">
<span class="list-works__name-project">Layered Responsive Modal Window</span>
<span class="list-works__link-project">showmore</span>
</div>
</a>
<a href="#http://stas-melnikov.ru/responsive_elements/" class="list-works__item layer" rel="nofollow external" data-show-effect="fadeIn" data-show-delay="1200">
<img src="http://stas-melnikov.ru/cliparts/notebook_480x480.jpg" class="list-works__img" alt="Work" />
<div class="list-works__overlay">
<span class="list-works__name-project">Responsive Framework</span>
<span class="list-works__link-project">showmore</span>
</div>
</a>
<a href="#http://stas-melnikov.ru/3d_panorama/" class="list-works__item layer" rel="nofollow external" data-show-effect="fadeIn" data-show-delay="1400">
<img src="http://stas-melnikov.ru/cliparts/notebook2_480x480.jpg" class="list-works__img" alt="Work" />
<div class="list-works__overlay">
<span class="list-works__name-project">3D Panoramas</span>
<span class="list-works__link-project">showmore</span>
</div>
</a>
<a href="#http://stas-melnikov.ru/hovers/" class="list-works__item layer" rel="nofollow external" data-show-effect="fadeIn" data-show-delay="100">
<img src="http://stas-melnikov.ru/cliparts/notebook5_480x480.jpg" class="list-works__img" alt="Work" />
<div class="list-works__overlay">
<span class="list-works__name-project">Hovers Effects</span>
<span class="list-works__link-project">showmore</span>
</div>
</a>
<a href="#http://stas-melnikov.ru/material_table/" class="list-works__item layer" rel="nofollow external" data-show-effect="fadeIn" data-show-delay="300">
<img src="http://stas-melnikov.ru/cliparts/notebook3_480x480.jpg" class="list-works__img" alt="Work" />
<div class="list-works__overlay">
<span class="list-works__name-project">Material Responsive Table</span>
<span class="list-works__link-project">showmore</span>
</div>
</a>
<a href="#http://stas-melnikov.ru/material_bootstrap_theme/" class="list-works__item layer" rel="nofollow external" data-show-effect="fadeIn" data-show-delay="600">
<img src="http://stas-melnikov.ru/cliparts/clipart_480x480.jpg" class="list-works__img" alt="Work" />
<div class="list-works__overlay">
<span class="list-works__name-project">Material Design for Bootstrap 3</span>
<span class="list-works__link-project">showmore</span>
</div>
</a>
</div>
</div>
</section>
Плагин имеет 36 различных CSS эффектов, с полным списком которых вы сможете ознакомиться в документации плагина.
Шаг-3
Инициализация плагина
Мы будем инициализировать плагин несколько раз.
Первый раз, когда пользователь загружает нашу страницу для просмотра, в этот момент мы вызываем scrollEvent.init()функцию.
Здесь мы инициализируем плагин через magicLayout функцию.
Первый аргумент является контейнер – текущий активный экран.
В нашем случае это #display-one.
Во время прокрутки страницы нам надо установить активную функцию отображения, для того чтобы сделать это, мы добавляем обработчик событий для scroll и вызываем функцию scrollEvent.setActiveDisplay().
Он рассчитывает scrollTop, а затем используя scrollEvent.getActiveDisplay() мы находим активный экран.
Затем определяем время, когда мы должны инициализировать плагин.
Это мы сделаем когда пользователь прокручивает как минимум половину экрана.
Для ‘container’ мы выбираем значение следующего блока относительно текущему.
Таким образом, когда посетитель прокручивает половину экрана, мы можем видеть анимированные элементы в следующей части экрана.
Спойлер
(function($){
var body = $("body");
var scrollEvent = {
displays: $(".display_js"),
init: function(){
var display_active = scrollEvent.getActiveDisplay();
$(this).magicLayout({
container: display_active
});
scrollEvent.sedtBodyId(display_active);
$(document).on('scroll', function(){
scrollEvent.setActiveDisplay();
});
},
getActiveDisplay: function(){
var window_top = $(window).scrollTop(),
offsetTop, display_active, cache;
display_active = scrollEvent.displays.filter(function(index, element){
cache = $(element);
offsetTop = cache.offset().top;
return window_top >= offsetTop && window_top < offsetTop + cache.outerHeight();
});
return display_active;
},
setActiveDisplay: function(){
var window_top = $(window).scrollTop(),
display_active = scrollEvent.getActiveDisplay();
if(window_top > display_active.offset().top + display_active.outerHeight() / 2){
$(this).magicLayout({
container: display_active.next()
});
$(this).magicLayout({
container: display_active
});
}
if(!display_active.hasClass("display_active")){
scrollEvent.sedtBodyId(display_active);
display_active.addClass("display_active").siblings(".display_js").removeClass("display_active");
$('[data-scroll-nav=' + scrollEvent.displays.index(display_active) + ']').addClass("nav__link_active").siblings().removeClass("nav__link_active");
}
},
sedtBodyId: function(display_active){
body.attr("id", display_active.attr('id') + "_active");
},
scroll: function(element){
var display_id = element.attr('data-id-section'),
display_active = $('#' + display_id),
position = display_active.offset().top;
$(this).addClass("nav__link_active").siblings().removeClass("nav__link_active");
$("html, body").animate({scrollTop: position}, 1200);
body.removeClass("nav-panel_active");
scrollEvent.sedtBodyId(display_active);
if(!display_active.hasClass("active_container")){
$(this).magicLayout({
container: display_active
});
}
}
};
scrollEvent.init();
$("#action_button").on('click', function(){
location.reload();
});
})(jQuery);
В этой статье мы рассмотрели плагин, который поможет вам создать оригинальную веб-страницу.
Плагин доступен на https://github.com/melnik909/magic_layout
Студия дизайна интерьеров ДекАрт decartdesign.ru/index.shtml поможет реализовать самые смелые проекты в современном ремонте, вашей квартиры или загородного дома.
Комментарии (0)