Скрипты

timeloto-скрипт-моментальной-лотереи Оригинальный скрипт TimeLoto с качественным дизайном, тремя соц. системами для входа, встроено звуковое оповещение при выиграше. Выплаты на:...
vcity-браузерная-игра vCity - это браузерная онлайн-игра, которая разработана с помощью новейших веб-технологий. vCity - это многофункциональный игровой скрипт, который...
php-pro-bid-v7-8-магазин-аукцион PHP Pro Bid является первым продуктом на рынке, который включает всестороннюю поддержку как онлайн-аукционов, так и электронной коммерции. Если Вам...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Magic Layout - JQuery плагин для анимации элементов на сайте.

Magic-layou jQuery-plugin

В этой статье расскажу о новом 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 поможет реализовать самые смелые проекты в современном ремонте, вашей квартиры или загородного дома.   



  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...