Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fullscreen Expanding Div
<h1>Fullscreen Expanding Div</h1>
<div id="fsm_container" class="fsm-container">
<div class="fsm apple">
<i class="fa fa-apple"></i>
<h1 class="modal-content">Apple</h1>
</div>
<div class="fsm pied">
<i class="fa fa-pied-piper"></i>
<h1 class="modal-content">Pied Piper</h1>
</div>
<div class="fsm codepen">
<i class="fa fa-codepen"></i>
<h1 class="modal-content">CodePen</h1>
</div>
<div class="fsm google">
<i class="fa fa-google"></i>
<h1 class="modal-content">Google</h1>
</div>
</div>
// JS available on https://github.com/colinlohner/FSM-JS
//Setup
var fsmActual = document.createElement('div');
fsmActual.setAttribute('id', 'fsm_actual');
document.body.appendChild(fsmActual);
var $fsm = document.querySelectorAll('.fsm');;
var $fsmActual = document.querySelector('#fsm_actual');
$fsmActual.style.position = "absolute";
var position = {};
var size = {};
//modal action stuffs
var openFSM = function(event) {
var $this = event.currentTarget;
position = $this.getBoundingClientRect();
size = {
width: window.getComputedStyle($this).width,
height: window.getComputedStyle($this).height
}
$fsmActual.style.position = "absolute";
$fsmActual.style.top = position.top + 'px';
$fsmActual.style.left = position.left + 'px';
$fsmActual.style.height = size.height;
$fsmActual.style.width = size.width;
$fsmActual.style.margin = $this.style.margin;
setTimeout(function(){
$fsmActual.innerHTML = $this.innerHTML;
var classes = $this.classList.value.split(' ');
for (var i = 0; i < classes.length; i++) {
$fsmActual.classList.add(classes[i]);
}
$fsmActual.classList.add('growing');
$fsmActual.style.height = '100vh';
$fsmActual.style.width = '100vw';
$fsmActual.style.top = '0';
$fsmActual.style.left = '0';
$fsmActual.style.margin = '0';
}, 1);
setTimeout(function(){
$fsmActual.classList.remove('growing');
$fsmActual.classList.add('full-screen')
}, 1000);
};
var closeFSM = function(event){
var $this = event.currentTarget;
$this.style.height = size.height;
$this.style.width = size.width;
$this.style.top = position.top + 'px';
$this.style.left = position.left + 'px';
$this.style.margin = '0';
$this.classList.remove('full-screen');
$this.classList.add('shrinking');
setTimeout(function(){
while($this.firstChild) $this.removeChild($this.firstChild);
var classList = $this.classList;
while (classList.length > 0) {
classList.remove(classList.item(0));
}
$this.style = '';;
}, 1000);
};
for (var i = 0; i < $fsm.length; i++) {
$fsm[i].addEventListener("click", openFSM);
}
$fsmActual.addEventListener("click", closeFSM);
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
background-color: #f5f5f5;
font-family: 'Roboto', sans-serif;
&.no-scroll {
overflow: hidden;
}
}
h1 {
font-weight: 900;
text-transform: uppercase;
}
.fsm {
margin: 10vh 5vw;
background-color: blue;
height: 100px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #f5f5f5;
font-size: 1.5rem;
border-radius: 10px;
transition: 1s;
cursor: pointer;
.fa {
transition: 1s;
color: #f5f5f5;
font-size: 2.5vw;
&:before {
color: #f5f5f5;
}
}
.modal-content {
height: 0;
width: 0;
margin: 0;
}
h1.modal-content {
opacity: 0;
transition: 1s;
}
&.apple {
background: linear-gradient(135deg, #83458e 0%,#608dc9 100%);
}
&.pied {
background: linear-gradient(135deg, #6ecdc7 0%,#c7e4ec 100%);
}
&.codepen {
background: linear-gradient(135deg, #778899 0%,#DCDCDC 100%);
}
&.google {
background: linear-gradient(135deg, #4285f4 0%,#ea4335 100%);
}
&.growing {
h1.modal-content {
height: auto;
margin: 0;
opacity: 0;
transition-delay: 0.5s;
}
}
&.full-screen {
height: 100vh;
z-index: 100;
margin: 0;
border-radius: 0;
.fa {
font-size: 10vw;
}
.modal-content {
height: auto;
width: auto;
margin: inital;
}
h1.modal-content {
transition-delay: 0.5s;
opacity: 1;
}
}
&.shrinking {
h1.modal-content {
transition-delay: 0s;
transition: 0.5s;
opacity: 0;
display: block;
}
}
&-container {
display: flex;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment