Open-Close-Abschnitte auf einer Webseite?

Question

Scrollen Sie unter site einige Male nach unten, um die Kacheln anzuzeigen. Klicken Sie auf eine beliebige Kachel, auf der zwei Abschnitte angezeigt werden.

Einer von rechts, ein anderer von der linken Seite und Overlays Landing Page.

Beide Abschnitte können durch Klicken auf Schließen auf der rechten Seite verlassen werden.

Wie ähnlich open-close-Effekt von Abschnitten zu tun?

Answer 1

$(document).on('click','#boxes div', function(e){ 
 
    $('body').addClass('show-menus'); 
 
}); 
 

 
$(document).on('click','.close', function(e){ 
 
    $('body').removeClass('show-menus'); 
 
});

#boxes div { 
 
    display:inline-block; 
 
    width:20%; padding-bottom:20%; 
 
    background:red; 
 
    cursor:pointer; 
 
} 
 
#boxes div:nth-child(even) { 
 
    background:blue; 
 
} 
 
#boxes div:hover { 
 
    opacity:0.5; 
 
} 
 

 
.left, .right { 
 
    transition:600ms ease-in-out transform; 
 
    position:fixed; top:0; height:100vh; 
 
} 
 

 
.left { 
 
    background:green; width:60%; 
 
    left:0; 
 
    transform:translate3d(-100%,0,0); 
 
} 
 

 
.right { 
 
    background:purple; width:40%; 
 
    right:0; 
 
    transform:translate3d(100%,0,0); 
 
} 
 

 
.show-menus .left, .show-menus .right { 
 
    transform:translate3d(0,0,0); 
 
} 
 

 
.right .close { 
 
    position:absolute; 
 
    top:10px; right:0; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="boxes"> 
 
    <div></div><div></div><div></div><div></div><div></div> 
 
</div> 
 

 
<div class="left"></div> 
 
<div class="right"><button class="close">close</button></div>