<div class="site-body">
            <!-- HEADER -->
            <!-- HEADER WITH MAIN NAV -->
            <header class="main-header">
                
<div class="main-navigation">
    <nav class="main-nav">
        <ul class="unstyled-list">
            <li><a class="page-toggle" href="#/about">About</a></li>
            <li><a class="github-toggle" href="https://github.com/boosmoke"><i class="fa fa-github-alt" aria-hidden="true"></i></a></li>
            <li><a class="page-toggle" href="#/contact">Contact</a></li>
        </ul>
    </nav>
</div>
<h1>Hello my name is BooSmoke</h1>
<div class="header-container">
    <div id="about" class="header-page">
        <div class="content">
            <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis deleniti, magnam corporis est quod consectetur veritatis ex quis quibusdam eveniet quidem modi nisi vitae debitis!
            </p>
        </div>
    </div>
    <div id="contact" class="header-page">
        <div class="content">
            <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat atque distinctio voluptate nesciunt esse unde?
            </p>
            <div class="contact-socials">
                <a href="#"><i class="fa fa-github-alt" aria-hidden="true"></i></a>
                <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                <a href="#"><i class="fa fa-codepen" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
</div>
            </header>
            <!-- HERO SECTION -->
            <section class="articles ">
                <div data-color="blue" class="container-article fade-in-article">
    <h1>Article one.</h1>
    <a class="toggle-article btn btn-article"></a>
    <span class="date small">2 May 2013</span>
    <div class="post-content">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut fugiat excepturi quis? Provident aliquam nesciunt cumque praesentium, vitae porro tempora totam laudantium nulla expedita adipisci, aut perferendis inventore vero! Laudantium et illum explicabo suscipit recusandae blanditiis consequuntur perferendis amet sunt?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil possimus suscipit sed quia, libero molestiae animi distinctio, recusandae, quaerat quam quas. Accusantium vero saepe possimus rem totam impedit cum tempora quo cupiditate consectetur provident accusamus quod, maxime libero nulla nihil!
        </p>
    </div>
    <div class="post-content">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut fugiat excepturi quis? Provident aliquam nesciunt cumque praesentium, vitae porro tempora totam laudantium nulla expedita adipisci, aut perferendis inventore vero! Laudantium et illum explicabo suscipit recusandae blanditiis consequuntur perferendis amet sunt?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil possimus suscipit sed quia, libero molestiae animi distinctio, recusandae, quaerat quam quas. Accusantium vero saepe possimus rem totam impedit cum tempora quo cupiditate consectetur provident accusamus quod, maxime libero nulla nihil!
        </p>
    </div>
    <div class="post-content">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut fugiat excepturi quis? Provident aliquam nesciunt cumque praesentium, vitae porro tempora totam laudantium nulla expedita adipisci, aut perferendis inventore vero! Laudantium et illum explicabo suscipit recusandae blanditiis consequuntur perferendis amet sunt?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil possimus suscipit sed quia, libero molestiae animi distinctio, recusandae, quaerat quam quas. Accusantium vero saepe possimus rem totam impedit cum tempora quo cupiditate consectetur provident accusamus quod, maxime libero nulla nihil!
        </p>
    </div>
    <div class="post-content">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut fugiat excepturi quis? Provident aliquam nesciunt cumque praesentium, vitae porro tempora totam laudantium nulla expedita adipisci, aut perferendis inventore vero! Laudantium et illum explicabo suscipit recusandae blanditiis consequuntur perferendis amet sunt?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil possimus suscipit sed quia, libero molestiae animi distinctio, recusandae, quaerat quam quas. Accusantium vero saepe possimus rem totam impedit cum tempora quo cupiditate consectetur provident accusamus quod, maxime libero nulla nihil!
        </p>
    </div>
    <div class="post-content">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut fugiat excepturi quis? Provident aliquam nesciunt cumque praesentium, vitae porro tempora totam laudantium nulla expedita adipisci, aut perferendis inventore vero! Laudantium et illum explicabo suscipit recusandae blanditiis consequuntur perferendis amet sunt?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil possimus suscipit sed quia, libero molestiae animi distinctio, recusandae, quaerat quam quas. Accusantium vero saepe possimus rem totam impedit cum tempora quo cupiditate consectetur provident accusamus quod, maxime libero nulla nihil!
        </p>
    </div>    
</div>
            </section>
            <section id="content" class="content-section">
                <div id="panels" class="panels">
<a href="#" class="panel brown" data-color="brown">
        <div class="content">
            <div class="fixed">
                <span class="small">
                    3 Jul 2014
                </span>
                <h1>
                    Lorem, ipsum dolor.
                </h1>
                <div class="excerpt">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima maiores similique tenetur accusantium nobis. Ipsam perspiciatis animi eos consequuntur optio!
                </div>
                <span class="small read">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    Read more
                </span>
            </div>
        </div>
        <div class="overlay"></div>
        <div class="color">
            <footer class="panel-footer">
                
            </footer>
        </div>
    </a>
    <a href="#" class="panel red" data-color="red">
        <div class="content">
            <div class="fixed">
                <span class="small">
                    3 Jul 2014
                </span>
                <h1>
                    Lorem, ipsum dolor.
                </h1>
                <div class="excerpt">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima maiores similique tenetur accusantium nobis. Ipsam perspiciatis animi eos consequuntur optio!
                </div>
                <span class="small read">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    Read more
                </span>
            </div>
        </div>
        <div class="overlay"></div>
        <div class="color">
            <footer class="panel-footer">
                
            </footer>
        </div>
    </a>
    <a href="#" class="panel blue" data-color="blue">
        <div class="content">
            <div class="fixed">
                <span class="small">
                    3 Jul 2014
                </span>
                <h1>
                    Lorem, ipsum dolor.
                </h1>
                <div class="excerpt">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima maiores similique tenetur accusantium nobis. Ipsam perspiciatis animi eos consequuntur optio!
                </div>
                <span class="small read">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    Read more
                </span>
            </div>
        </div>
        <div class="overlay"></div>
        <div class="color">
            <footer class="panel-footer">
                
            </footer>
        </div>
    </a>
    <a href="#" class="panel green" data-color="green">
        <div class="content">
            <div class="fixed">
                <span class="small">
                    3 Jul 2014
                </span>
                <h1>
                    Lorem, ipsum dolor.
                </h1>
                <div class="excerpt">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima maiores similique tenetur accusantium nobis. Ipsam perspiciatis animi eos consequuntur optio!
                </div>
                <span class="small read">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    Read more
                </span>
            </div>
        </div>
        <div class="overlay"></div>
        <div class="color">
            <footer class="panel-footer">
                
            </footer>
        </div>
    </a>
    <a href="#" class="panel yellow" data-color="yellow">
        <div class="content">
            <div class="fixed">
                <span class="small">
                    3 Jul 2014
                </span>
                <h1>
                    Lorem, ipsum dolor.
                </h1>
                <div class="excerpt">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima maiores similique tenetur accusantium nobis. Ipsam perspiciatis animi eos consequuntur optio!
                </div>
                <span class="small read">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    Read more
                </span>
            </div>
        </div>
        <div class="overlay"></div>
        <div class="color">
            <footer class="panel-footer">
                
            </footer>
        </div>
    </a>
</div>
            </section>
        </div>
@import url('https://fonts.googleapis.com/css?family=Arimo:400,400i,700');
$bodyFont : 'Arimo', sans-serif;
$title-color   :#2c2c2c;
$hover-blue    :#00bcd4;
*{
  box-sizing: border-box;
}
body, html{
  height:100%;
}
body{
  font-family: $bodyFont;
  margin: 0;
  text-align: center;
  //fade in website on page load
  opacity: 1;
  transition: 1s opacity;
}
.site-body{
  min-height: 100%;
  height:100%;
  overflow: hidden;
}
.main-header{
  background-color: $title-color;
  color: white;
  z-index: 9;
  height:55px;
  transition: height 300ms ease-in-out;
  overflow: hidden;
  position: relative;
}

.showheader .main-header{
  height:350px;
}

.header-container{
  background-color: $title-color;
  font-size: 18px;
  color: #d8d8d8;
  position: absolute;
  top: 140px;
  bottom:0;
  width: 100%;
}


.main-header h1{
  background-color: $title-color;
  font-size: 36px;
  margin: 29px 0 25px;
  color: $hover-blue;
}

.header-page{
  bottom: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 0;
  transition: opacity 750ms,width 0s linear;
}
.header-page.show{
  width:100%;
  opacity: 1;
  p{
    margin: 15px 0 25px;
  }
}


.header-page .content{
  max-width: 700px;
  margin:0 auto;
  padding: 0 18px;
}
.header-page .contact-socials{
  margin: 34px -18px;
  vertical-align: middle;
  a{
    text-decoration: none;
    border: 2px solid #cfcfcf;
    border-radius: 50px; 
    display: inline-block;
    color: #cfcfcf;
    font-size: 44px;
    width:65px;
    height:65px;
    margin: 0 10px;
    line-height: 1.4;
  }
  i{
    transition: color 250ms ease-in-out;
  }
  .fa-github-alt:hover{
    color:rgb(81, 92, 102);
  }
  .fa-linkedin:hover{
    color:#0077B5;
  }
  .fa-instagram:hover{
    color:#885A4D;
  }
  .fa-codepen:hover{
    color:#7E0B80;
  }
}
.main-nav .fa-github-alt{
  font-size: 2em;
  position: relative;
  top:3px;
  line-height: 0;
}
//mobile menu
.main-nav{
  font-size: 1.5rem;
  transition: all ease-in-out 250ms;
  text-transform: uppercase;
  a{
    text-decoration: none;
    padding: 1rem 1rem 1rem 2rem;
    font-weight: 300;
    color: #fff;
    &:hover{
      color: $hover-blue;
    }
  }
}

  .main-navigation{
    width:100%;
  }
  .logo{
    margin-left:1.4em;
    left:0;
    z-index:102;
  }

  .main-nav{
    background: $title-color;
    display: inline-block;
    position: relative;
    width:100%;
    font-size: .9rem;
    top: 0;
    left:0;
    margin-left: 0;
    height:55px;
  }

  //////////////
  .main-nav ul{
  margin: 0;
  padding: 0;
  list-style:none;
  display: inline-block;
  height:100%;
  border: none;
}

.main-nav li{
  display: inline-block;
  margin: 1em .5em;
  border-bottom: none;
  transition: initial;
  &.active{
    
    a{
      color: $hover-blue;
    }
  }
  &:last-of-type{
    margin-right: .3em;
  }
}

.main-nav a{
  display: inline-block;
  font-weight: 900;
  letter-spacing: 3px;
  text-decoration: none;
  text-transform: uppercase;
  padding: .4em .4rem;
  font-size: .9em;
}



// THIS IS FOR THE SCALE TO START ON THE CORRECT POSITION FOR OVERLAY
.panel.brown .overlay{
  transform-origin: 0% 50%!important;  
}
.panel.red .overlay{
  transform-origin: 25% 50%!important;
}
.panel.blue .overlay{
  transform-origin: 50% 50%!important;
}
.panel.green .overlay{
  transform-origin: 75% 50%!important;
}
.panel.yellow .overlay{
  transform-origin: 100% 50%!important;
}

/* PANEL/ARTICLE ANIMATION CLASSES */
.visible-article{
  max-height:3000px!important;
  overflow: visible;
}

.expand-full-width{
  transform: scaleX(5)!important;
}
.bring-to-front{
  z-index:10;
}
.invisible{
  opacity: 0!important;
}
.hidden{
  display: none!important;
}

.overflow-y-visible{
  overflow-y:visible;
}

.fade-in-up{
  transform: translateY(0)!important;
  opacity: 1!important;
}
section.articles{
    max-height:0;
    transition: none;
    overflow: hidden;
}
.container-article{
    padding:27px 5% 75px;
    height:100%;
    background:#fff;
    font-size: 16px;
    line-height: 24px;
    margin: 0 auto;
    max-width: 950px;
    position: relative;
    transition: all 250ms ease-in-out;
    opacity: 0;
    transform: translateY(30%);
}



 .articles h1{
    color: #2d2d2d;
    font-size: 40px;
    line-height: 48px;
    margin: 8px auto 0;
    max-width: 640px;
    text-align: center;
}
.articles .small{
    color: #c8c8c8;
}
.post-content{
    margin: 0 auto;
    max-width: 640px;
    padding: 9px 0 0;
}

.post-content p{
    margin:25px 0;
    font-size: 16px;
    line-height: 24px;
}

.btn-article{
    border-radius: 38px;
    border: 1px solid #afafaf;
    height: 38px;
    width: 38px;
    position: absolute;
    right: 10px;
    text-decoration: none;
    top: 12px;
    transform: rotate(-180deg);
    transition: border .3s,box-shadow .3s,transform .3s;
    z-index: 1;
}
.btn-article::after{
    height: 36px;
    line-height: 36px;
    width: 36px;
    position: absolute;
    color: #afafaf;
    content:"X";
    font-size: 22px;
    left: 0;
    text-align: center;
    top: 0;
}

.btn-article:hover{
    border: 1px solid transparent;
    box-shadow: 0 0 0 4px #e1e1e1;
    transform: rotate(180deg);
}

.content-section{
    height:100%;
}
#panels{
    height:calc(100% - 55px);
    overflow: hidden;
    display: flex;
}

.panel{
    display: block;
    flex:1;
    position: relative;
    min-width: 240px;
    min-height: 460px;
    //box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
    color:#fff;
    transition: color 250ms ease-in-out;
}
.panel:nth-child(1){
    background-color: #7d4627;
}
.panel:nth-child(2){
    background-color: #b56969;
}
.panel:nth-child(3){
    background-color: #a8b6bf;
}
.panel:nth-child(4){
    background-color: #c9d8c5;
}
.panel:nth-child(5){
    background-color: #edd9c0;
}
.panel .content{
    height:100%;
    width:100%;
    position: absolute;
    z-index:4;
    opacity: 1;
    transition: opacity .35s ease-in-out;
}
.panel .fixed{
    padding: 47px 40px 0;
    text-align: left;
    max-width: 320px;
}

.panel h1{
    font-size: 45px;
    line-height: 45px;
    margin: 0;
    padding:0;
}
.panel .color{
    background-color: inherit;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width:100%;
    z-index: 2;
    transition: transform .35s linear;
    transform: translate3d(0,0,0);
}
 .hover .panel.shrink-right .color {
    transform:scaleX(.92188)translateX(12.5px);
   }
.hover .panel.shrink-left .color {
    transform:scaleX(.92188)translateX(-12.5px);
}
.hover .panel.expand .color {
    transform:scaleX(1.15625)translateX(0);
    z-index: 3;
    background: inherit;
} 

.hover .panel{
    background-color: #373737;
    color: #666;
}

.hover .panel.brown, .hover .panel.brown .color {
    background-color: darken(#7d4627,20%)!important;
}
.hover .panel.red, .hover .panel.red .color {
    background-color: darken(#b56969, 25%)!important;
}
.hover .panel.blue, .hover .panel.blue .color {
    background-color: darken(#a8b6bf,55%)!important;
}
.hover .panel.green, .hover .panel.green .color {
    background-color: darken(#c9d8c5, 55%)!important;
}
.hover .panel.yellow, .hover .panel.yellow .color {
    background-color: darken(#edd9c0, 55%)!important;
}
 .hover .expand.brown,  .hover .panel.expand.brown .color{
    background-color:#7d4627!important;
    color:#fff;
}
 .hover .expand.red,  .hover .panel.expand.red .color{
    background-color:#b56969!important;
    color:#fff;
}
 .hover .expand.blue,  .hover .panel.expand.blue .color{
    background-color:#a8b6bf!important;
    color:#fff;
}
 .hover .expand.green,  .hover .panel.expand.green .color{
    background-color:#c9d8c5!important;
    color:#fff;
}
 .hover .expand.yellow,  .hover .panel.expand.yellow .color{
    background-color:#edd9c0!important;
    color:#fff;
}

.panel .excerpt{
    display: block;
    margin-top:25px;
    font-size: 15px;
    line-height: 23px;
    opacity: .5;
    transition: opacity .35s;
}
.panel.expand .excerpt{
    opacity: 1;
}
.small{
    font-size: 12px;
    font-weight: 600;
    padding: 0 2px;
    text-transform: uppercase;
}
.panel .read{
    bottom: 50px;
    display: block;
    position: absolute;
}

.panel .panel-footer{
    background-color: rgba(0,0,0,.23);
    bottom: 0;
    height: 81px;
    left: 0;
    position: absolute;
    right: 0;
    display: block;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform .35s;
}


.hover .panel:hover .panel-footer {
    transform: scaleY(1);
}

.overlay{
    background-color: inherit;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width:100%;
    z-index: 3;
    transition: transform 250ms linear 350ms;
    transform: scaleX(0);
}


.scale-zero{
    transform: scaleY(0)!important;
}
View Compiled
var MapApp = ( function() {
/* GLOBAL VARIABLES */
var panels = $('.panel');
var animationComplete = true;
/* GLOBAL VARIABLES */

/* FUNCTIONS */
// mobile menu toggle
function mobileMenuToggle(){
    $('.main-nav').toggleClass('is-open');
    $('.hamburger').toggleClass('is-open');
    return false;
}
//remove panel classes on mouseout
function hideDiv(){
    $('#panels').removeClass('hover');
    $(this).removeClass('expand');
    $(this).prev().removeClass('shrink-right');
    $(this).next().removeClass('shrink-left');
}
//add panel classes on mousein
function revealDiv(){
    $('#panels').addClass('hover');
    $(this).addClass('expand');
    $(this).prev().addClass('shrink-right');
    $(this).next().addClass('shrink-left');
}
//change body background depending on article
function changeBgColor(panelColor){
    var color = panelColor;
    switch(color) {
        case "brown":
            $('body').css('background-color', '#7d4627')
            break;
        case "red":
            $('body').css('background-color', '#b56969')
            break;
        case "blue":
            $('body').css('background-color', '#a8b6bf')
            break;
        case "green":
            $('body').css('background-color', '#c9d8c5')
            break;
        case "yellow":
            $('body').css('background-color', '#edd9c0')
            break;
        default:
            $('body').css('background-color', '#2c2c2c')
    }
    
}
//part of reveal article, waits for transitionend before applying classes
 function switchAnimation(element, className, hidden){
     var articleContainer = $('.container-article');
     var secondElement = $('section.articles');
     articleContainer.on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function() {
        articleContainer.off( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd" );
        console.log('done');
        animationComplete=true;
    });
    secondElement.on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function() {
        hidden.addClass('hidden');
        secondElement.off( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd" );
    });
    element.on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function() {
            secondElement.addClass(className);
            articleContainer.addClass('fade-in-up');
            element.off( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd" );
        });
 }
//hide panels and reveal article
 function revealArticle(){
    if(animationComplete){
        animationComplete = false;
        var color = $(this).data('color');
        var colorDiv = $(this).find('.overlay');
        var contentDiv = $(this).find('.content');
        var footerDiv = $(this).find('.panel-footer');
        var panel = $(this); 
        var siteBody = $('.site-body');
        changeBgColor(color)
        panel.addClass('bring-to-front');
        colorDiv.addClass('expand-full-width');
        contentDiv.addClass('invisible');
        footerDiv.addClass('scale-zero');
        siteBody.addClass('overflow-y-visible');
        switchAnimation(colorDiv,'visible-article', $('.content-section'));
    }
    return;   
 }
//hide article and reveal panels
 function hideArticle(){
    if(animationComplete){
        animationComplete = false;
        var articleDiv = $('.articles');
        var articleContainer = $('.container-article');
        var panels = $('.content-section');
        var panel = $('.panel');
        var colorDiv = $('.overlay');
        var contentDiv = $('.content');
        var footerDiv = $('.panel-footer');
        var siteBody = $('.site-body');
        panels.removeClass('hidden');
        siteBody.removeClass('overflow-y-visible');
        articleContainer.on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function(event) { 
            articleDiv.toggleClass('visible-article');
            articleContainer.off( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd" ); 
        }); 
        articleContainer.removeClass('fade-in-up');
        articleDiv.on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function(event) {
            colorDiv.removeClass('expand-full-width');
            articleDiv.off( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd" );
        });
        colorDiv.on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function(event) {
            panel.removeClass('bring-to-front');
            contentDiv.removeClass('invisible');
            footerDiv.removeClass('scale-zero');
            animationComplete = true;
            colorDiv.off( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd"); 
        });
    }
    return;     
 }
 
function headerToggle(){
    var element = $(this);
    var href = this.href.split('/').pop();
    var headers = $('.header-page');
    var body = $('body');
    var pageToggles = $('.page-toggle');
    element.hasClass('selected') && body.hasClass('showheader') ? body.removeClass('showheader') : body.addClass('showheader');
    pageToggles.removeClass('selected');
    headers.removeClass('show');
    element.addClass('selected');
    $('#'+href+'').addClass('show');
}
 /* FUNCTIONS */
 function init() {
    // Application init code
    /* EVENT BINDINGS */
    //panel hover
    panels.on('mouseenter', revealDiv);
    panels.on('mouseleave', hideDiv);
    //panel & article click
    $('.panel').on('click', revealArticle);
    $('.toggle-article').on('click', hideArticle); 
    //main menu togge
    $('.page-toggle').on('click', headerToggle);
    /* EVENT BINDINGS */
}

return {
    init : init
};
})();

MapApp.init(); // Run application

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js