Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Flex Panels 💪</title>
- <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
- </head>
- <body>
- <style>
- html {
- box-sizing: border-box;
- background: #ffc600;
- font-family: 'helvetica neue';
- font-size: 20px;
- font-weight: 200;
- }
- body {
- margin: 0;
- }
- *, *:before, *:after {
- box-sizing: inherit;
- }
- .panels {
- min-height: 100vh;
- overflow: hidden;
- display: flex;
- }
- .panel {
- background: #6B0F9C;
- box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
- color: white;
- text-align: center;
- align-items: center;
- /* Safari transitionend event.propertyName === flex */
- /* Chrome + FF transitionend event.propertyName === flex-grow */
- transition:
- font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
- flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
- background 0.2s;
- font-size: 20px;
- background-size: cover;
- background-position: center;
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- }
- .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
- .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
- .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
- .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
- .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
- /* Flex Children */
- .panel > * {
- margin: 0;
- width: 100%;
- transition: transform 0.5s;
- }
- .panel > *:first-child{
- transform: translateY(-1000%);
- }
- .panel.openActive > *:first-child{
- transform: translateY(0);
- }
- .panel > *:last-child{
- transform: translateY(1000%);
- }
- .panel.openActive > *:last-child{
- transform: translateY(0);
- }
- .panel p {
- text-transform: uppercase;
- font-family: 'Amatic SC', cursive;
- text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
- font-size: 2em;
- }
- .panel p:nth-child(2) {
- font-size: 4em;
- }
- .panel.open {
- font-size: 40px;
- flex: 4;
- }
- </style>
- <div class="panels">
- <div class="panel panel1">
- <p>Hey</p>
- <p>Let's</p>
- <p>Dance</p>
- </div>
- <div class="panel panel2">
- <p>Give</p>
- <p>Take</p>
- <p>Receive</p>
- </div>
- <div class="panel panel3">
- <p>Experience</p>
- <p>It</p>
- <p>Today</p>
- </div>
- <div class="panel panel4">
- <p>Give</p>
- <p>All</p>
- <p>You can</p>
- </div>
- <div class="panel panel5">
- <p>Life</p>
- <p>In</p>
- <p>Motion</p>
- </div>
- </div>
- <script>
- var panelList = document.querySelectorAll(".panel");
- var lastActive = '';
- function closeOpen(){
- if(!lastActive)
- return;
- var lastPanel = document.querySelector(`.${lastActive}`);
- lastPanel.classList.toggle('open',false);
- lastPanel.classList.toggle('openActive',false);
- };
- function openActive(e){
- this.classList.toggle('open',true);
- closeOpen();
- lastActive = this.classList[1];
- }
- function flexGrow(e){
- if(e.propertyName.includes('flex')){
- this.classList.toggle('openActive',true);
- }
- }
- panelList.forEach(el => {
- el.addEventListener('click',openActive);
- el.addEventListener('transitionend',flexGrow);
- });
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment