Created
December 29, 2017 20:30
-
-
Save m1k3yfoo/c994e050b3793441d258080b34318cc0 to your computer and use it in GitHub Desktop.
[Flex Panels Image Gallery] #CSS, #JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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; | |
} | |
/* '*' adds to all elements and any :before and :after pseudo-elements that they may generate */ | |
*, *: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 */ | |
/* Transitioning font-size and flexbox size over 0.7s */ | |
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; | |
/* Make the flex items flexboxes that contain other flex items */ | |
display: flex; | |
/* Evenly distribute the remaining space between all panels */ | |
flex: 1; | |
/* Default is stack left to right. Column stacks them top to bottom */ | |
flex-direction: column; | |
justify-content: center; /* Center flex items vertically */ | |
align-items: center; /* Center flex items horizontally */ | |
} | |
.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); } | |
/* Selecting flex children */ | |
.panel > * { | |
margin:0; | |
width: 100%; | |
transition:transform 0.5s; | |
border: 1px solid red; /* Makes it easier to see the flexboxes */ | |
flex: 1 0 auto; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
/* Hide the words in the first row out of view way up top */ | |
.panel > *:first-child { | |
transform: translateY(-100%); | |
} | |
/* When a class of 'open-active' is added, it slides in from the top */ | |
.panel.open-active > *:first-child { | |
transform: translateY(0); | |
} | |
/* Hide the words in the 3rd row out of view way down the bottom */ | |
.panel > *:last-child { | |
transform: translateY(100%); | |
} | |
.panel.open-active > *: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; | |
/* When it has a class of 'open', it expands 5x of other flex items */ | |
flex: 5; | |
} | |
</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> | |
const panels = document.querySelectorAll('.panel'); | |
function toggleOpen() { | |
// Add the class 'open' | |
this.classList.toggle('open'); | |
} | |
function toggleOpenActive(e) { | |
// to see all the properties being transitioned | |
console.log(e.propertyName); | |
if (e.propertyName.includes('flex')) { | |
this.classList.toggle('open-active'); | |
} | |
} | |
panels.forEach(panel => panel.addEventListener('click', toggleOpen)); | |
// Once the panel has finished transitioning then we slide in the words | |
panels.forEach(panel => panel.addEventListener('transitionend', toggleOpenActive)); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment