What is it

This is a layout divided in three sections covered by a mask and identified by three rounded buttons. When one of these is clicked, the upper part of the mask will move up, the lower part will move down and the page requested will be visible.
During these transitions the buttons will be resized and will take place in the footer to indicate which section the visitor is actually reading.
Once the close-button is clicked everything will return to the original positions and the visitor will choose another section.

Compatibility

This layout works well just in the browser that support the CSS proprieties used.

Share it

Do you like it? Share it on the common social networks

How I coded it

The code is pretty simple, it is just divided in HTML, CSS and jQuery.

HTML

Here I've just defined the structure of the page. 

<div class="wrapper">

<!-- HERE THERE ARE THE THREE SECTIONS -->

<div id="page1" class="page">
    <div class="cnt_page">
         <div class="wp">
            <!-- HERE GOES THE FIRST CONTENT -->
         </div>
    </div>
</div>
<div id="page2" class="page">
    <div class="cnt_page">
         <div class="wp">
            <!-- HERE GOES THE SECOND CONTENT -->
         </div>
    </div>
</div>
<div id="page3" class="page">
    <div class="cnt_page">
         <div class="wp">
                <!-- HERE GOES THE THIRD CONTENT -->      
         </div>
    </div>
</div>

<!-- THESE ARE THE TWO PARTS OF THE MASK --> 
<div id="part1" class="part"></div>
<div id="part2" class="part">

<!-- HERE THERE ARE THE BUTTONS -->
<div id="cont_button">
<div class="button" id="butt1">
    <a href="#page1">
        <div class="front">
            <i class="icon-rocket"></i>
        </div>
        <div class="backgr"></div>
    </a>
</div>
<div class="button" id="butt2">
    <a href="#page2">
        <div class="front">
            <i class="icon-code"></i>
        </div>
        <div class="backgr"></div>
    </a>
</div>
<div class="button" id="butt3">
    <a href="#page3">
        <div class="front">
            <i class="icon-umbrella"></i>
        </div>
        <div class="backgr"></div>
    </a>
</div>
</div>
</div>  
</div>

JQuery

I've used jQuery to manage the classes when buttons are clicked. 

$(document).ready(function(){
    
    // I need to set the height of the wrapper because some devices don't support 
    // the "overflow:hidden" applied to the <body>
    $('.wrapper').height($(window).height());
    $(window).resize(function(){
    $('.wrapper').height($(window).height());
    });
    
    var mask = $('.mask');
    var part = $('.part');
    var part1 = $('#part1');
    var part2 = $('#part2');
    var buttons = $('.button');
    
    $('.button a').click(function(){
    
    var page_request = $(this).attr('href');
    var selected = $(this).parent();
        
    /* open */
    open(page_request,selected);  
    $(page_request).toggleClass('active');
        
    });
    
    $('.go_back').click(function()
    {
        close();
        $('.page').removeClass('active');
    });
    
    function open(page,selected){
        console.log('1'+selected);
        $('.page').removeClass('request');
        buttons.removeClass('def');
        part1.toggleClass('go_up');
        part2.toggleClass('go_down');
        $(page).toggleClass('request');
        buttons.toggleClass('anim');
        $(selected).toggleClass('selected');
    }
    function close(){
        part1.toggleClass('go_up');
        part2.toggleClass('go_down');
        buttons.toggleClass('anim');
        buttons.toggleClass('def');
        buttons.removeClass('selected');
    }
        
});

CSS

And finally there's the CSS, I used its animations for the various transitions.
Here you will not find the definitions for the compatibility with the various browsers and the code for the responsive side of this script. You can download the full code here. 

html,body{
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Open Sans';
}
.wrapper{
    position:relative;
    overflow:hidden;
}
.page{
    position: absolute;
    width: 100%;
    min-height: 100%;
    z-index: 0;
    overflow: hidden;
}
.cnt_page{
    position: absolute;
    width: 100%;
    height:100%;
}
.wp{
    position: relative;
    height:90%;
    opacity: 1;
    overflow-y: auto;
    width: 95%;
    height: 85%;
    margin: 0px auto;
}
.example{
    font-family: 'Open Sans';
    text-align: left;
    width: 80%;
    margin: 5% auto;
}
#page1{
    background-color: #f25744;
}
#page2{
    background-color: #19c590;
}
#page3{
    background-color: #fce191;
}
.part{
    position: absolute;
    width: 100%;
    height:50.58%;
    z-index: 99;
    background-color: #383345;
    
    transition-property: all; /*standard*/
    transition-duration: 1s;
}
#part1{
    top:0%;
}
#part2{
    top:50%;
}
.page h1{
    font-size: 60px;
    font-family: "Open Sans";
    font-weight: 600;
}
.page p{
    font-weight: 100;
    font-size: 20px;
    line-height: 40px;
    margin: auto;
}
.page a{
    color:black;
}
.button{
    display: block;
    position: absolute;
    width:100px;
    height: 100px;
    border-radius: 100%;
    z-index: 100;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
    text-decoration: none;
}
.button a{
    text-decoration: none;
}
#butt1{
    left:38%;
}
#butt2{
    left:50%;
}
#butt3{
    left:62%;
}
#butt1 .backgr{
    background-color: #f25744;
}
#butt2 .backgr{
    background-color: #19c590;
}
#butt3 .backgr{
    background-color: #fce191;
}
.front i{
    color:black;
    font-size: 37px;
    position: relative;
    display: block;
    text-align: center;
    top:32px;
    opacity: 0.60;
}
.back span{
    text-align: center;
    display: block;
    margin-top: 42px;
    font-size: 14px;
    font-family: "Open Sans";
    color: black;
}
.go_back{
    display: block;
    top: 10px;
    left: 10px;
    position: absolute;
    color:black;
    text-decoration: none;
    font-size: 18px;
    font-family: "Open Sans";
}
.front i:hover,.selected .front i{
    color:white;
}
.front {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
}
.backgr{
    width: 100%;
    height: 100%;
    z-index: 1;
    top:0;
    position: absolute;
    border-radius: 100%;
}
#cont_button{
    position: relative;
}
/* animations */
.go_up{
    transform: translateY(-100%);
    transition: all 0.7s ease-in-out;
    transition-delay:0.5s;
}
.go_down{
    transform: translateY(+85%);
    transition: all 0.7s ease-in-out;
    transition-delay:0.5s;
}
.request{
    z-index: 1;
}
.selected .front i{
    color:white;
}
.anim{
    animation: moveButton 0.5s ease;
    animation-fill-mode: forwards;
}
.anim .backgr{
    animation: hideButton 0.5s ease;
    animation-fill-mode: forwards;
}
.anim .front i{
    animation: frontResize 0.5s ease;
    animation-fill-mode: forwards;
}
@-keyframes moveButton {
    to { margin-top:-22px; }
}
@-keyframes hideButton {
    from { transform: scale(1);}
    to { transform: scale(0); background-color: transparent;}
}
@-keyframes frontResize {
    from { transform: scale(1);}
    to { transform: scale(0.7);}
}
.def .backgr{
    animation: showButton 0.5s ease;
    animation-fill-mode: both;
    animation-delay: 1s;
}
.def{
    animation: re_moveButton 0.5s ease;
    animation-fill-mode: both;
    animation-delay: 1s;
}
.def .front i{
    animation: re_frontResize 1s ease;
    animation-fill-mode: both;
    animation-delay: 1s;
}
@-keyframes showButton {
    from { transform: scale(0);}
    to { transform: scale(1);}
}
@-keyframes re_moveButton {
    from{ margin-top:-22px; }
    to { margin-top:-50px; }
}
@-keyframes re_frontResize {
    from { transform: scale(0.7);}
    to { transform: scale(1);}
}

About it

This layout is realized with jQuery and CSS3 by Carlo Ventrella
In this pages are used the icons of Fontawesome.

References

Article (IT) ยท Download

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.