Collapsable Banner animation with flexbox

Do you want to add Collapsable Banner animation on your website to preset more contest as website banner then here I am going to share simple pure css code snippet to create Collapsable Banner animation with flexbox. Now flexbox is new trend. It is in the W3C’s candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.
Collapsable Banner animation with flexbox


HTML

Create simple HTML banner block place some content in each Collapsable block.

<div class="banner">
    <div class="banner-item">
        <p class="banner-title">
            Cursos
        </p>
    </div>
 
    <div class="banner-item">
        <p class="banner-title">
            Profesores
        </p>
    </div>
 
    <div class="banner-item">
        <p class="banner-title">
            Especialidades
        </p>
    </div>
 
    <div class="banner-item">
        <p class="banner-title">
            Suscribete
        </p>
    </div>  
</div>


CSS

Now write css and make your banner block collapsable when ever you click on select box that box expand with content.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
*:focus {
    outline: 0;
}
 
html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
.banner {
    background-color: #00ffff;
    display: flex;
    height: 300px;
}
 
.banner-item {
    align-items: center;
    color: #ffffff;
    display: flex;
    flex: 1;
    font-size: 1.2em;
    font-weight: bold;
    justify-content: center;
    transition: flex-grow 0.3s ease;
}
 
.banner-item:hover {
    flex-grow: 10;
}
 
.banner-item:hover .banner-title {
    transform: rotateZ(0);
}
 
.banner-item:nth-child(1) {
    background-color: hsl(90, 100%, 40%);
}
 
.banner-item:nth-child(2) {
    background-color: hsl(30, 100%, 40%);
}
 
.banner-item:nth-child(3) {
    background-color: hsl(200, 100%, 40%);
}
 
.banner-item:nth-child(4) {
    background-color: hsl(280, 100%, 40%);
}
 
.banner-title {
    transform: rotateZ(-90deg);
    transition: transform 0.3s 0.3s ease;
}

See live demo and download source code.

DEMO

This awesome script developed by crianbluff, Visit their official codepen repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.