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.
HTML
Create simple HTML banner block place some content in each Collapsable block.
|
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.
This awesome script developed by crianbluff, Visit their official codepen repository for more information and follow for future updates.
