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

14.06.2016
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)

В результате должен получиться следующий код:

Шаг-2 HTML разметка 

Вы должны добавить класс layer для всех элементов на странице которые хотите анимировать.
Также вы можете настроить параметры по умолчанию, используя data атрибуты: data-show-effect (надо указать имя эффекта) и data-show-delay (установить задержку анимации).
Ниже приведен пример:

Magic Layout JQuery plugin by which you can animate all the elements on the page

      
        Download

После раздела заголовка переходим к созданию раздела основного содержания.

KEY FEATURES

      Why it is useful

CSS3 Animations

        
The plugin use the best browser features when available (CSS3 transition and transform, GPU acceleration)

Includes LESS and SASS

        
The plug-in supports modern preprocessors of LESS and SASS

Support mobile devices

        
The plug-in is well optimized under mobile devices. Animations work clean and smoothly

EASY TO USE & CUSTOMIZE

        
Modern preloader is easy to use and customize

Support modern browsers and platform

        
IE 10+, Opera, Google Chrome, Firefox, Yandex Browser, Safari, Androind, iOS

Documentation

        
Extensive step-by-step guide to help you with usage and customization.

More my plugins

      WebGl, Jquery, PureJS, AngularJS, pureCSS, Material Design, Bootstrap
    
    
      
        notebook2_480x480-6116933
         
          Animated alert
          showmore
        
      
      
        notebook3_480x480-8978860
         
          Layered modal for Bootstrap3
          showmore
        
      
      
        clipart_480x480-1034796
         
          WebGL Generator of Models
          showmore
        
      
      
        notebook5_480x480-6561693
         
          Layered Responsive Modal Window
          showmore
        
      
      
        notebook_480x480-5862485
         
          Responsive Framework
          showmore
        
      
      
        notebook2_480x480-6116933
         
          3D Panoramas
          showmore
        
      
      
        notebook5_480x480-6561693
         
          Hovers Effects
          showmore
        
      
      
        notebook3_480x480-8978860
         
          Material Responsive Table
          showmore
        
      
      
        clipart_480x480-1034796
         
          Material Design for Bootstrap 3
          showmore

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

Метки: ,