Magic layout : jQuery plugin to Animate Page Elements

Magic layout : jQuery plugin to Animate Page Elements

0 32495
Magic layout

Dear reader, today we are going to tell you about new plugin that we discovered – Magic Layout. This simply plugin serves only one task – it animates blocks on web page. You can see the possibilities of the plugin on demo page. Continue reading to see how author describes the process of creation of this example.

Live Demo

Step 1 – Link necessary libraries and files

First of all, we need to attach ‘animate.css’ file in header section. This file describes css rules for plugin animation. After, we also have to attach few other js files:

  • jQuery library (jquery.js)
  • Magic Layout plugin (magicLayout.js)
  • main.js file with initialization code

In result we have to get the following code:

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

Step 2 – HTML markup

You need to add ‘layer’ class for any element you want to animate. Also you can adjust default settings using ‘data’ attributes: data-show-effect (to specify name of effect) and data-show-delay (to set delay for animation). Below is example:

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

After the header section, you can start another section:

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

The plugin has 36 various CSS effects, full list can be located in plugin’s documentation.

Step 3 – Plugin initialization

We will initialize the plugin several times. First time, when a visitor loads our page and see the page. In this moment, we invoke scrollEvent.init() function. Here we initialize the plugin using magicLayout function. First argument is container – current active screen. In our case this is ‘#display-one’.
During scroll the page, we need to set active display function, in order to do it, we add an event handler for ‘scroll’ event and call scrollEvent.setActiveDisplay() function. It calculates scrollTop, and then, using scrollEvent.getActiveDisplay() we find the active screen.
Then, we define time when we need to initialize the plugin. We will do it when visitor scrolls at least half of screen. For ‘container’ value we select the next block that is relative to the current. Thus, when visitor scrolled the half of screen, we can see animated elements in next screen.

(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);

Live Demo

[sociallocker]

download in package

[/sociallocker]

Conclusion

Today we reviewed the plugin that can help you make the original web-pages. The plugin is available on GitHub. It would be great to hear your feedback. Author needs your opinion. Thank you!

Author Bio: The theme is provided by Stas Melnikov, UI Designer/Front-End Developer.

SIMILAR ARTICLES


NO COMMENTS

Leave a Reply