<!-- https://codepen.io/ettrics/pen/myzoZP -->
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<title>CodePen - Material Design Expanding Overlay</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
font-weight: 400;
text-align: center;
}
.blocks {
position: fixed;
bottom: 0;
z-index: 1;
list-style-type: none;
display: flex;
width: 100%;
margin: 0;
padding: 0;
}
.blocks__block {
will-change: transform;
position: relative;
height: 20vh;
flex: 1;
transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.blocks__block:nth-child(1) {
background: #f4d35d;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.blocks__block:nth-child(2) {
background: #db5b4a;
-webkit-transform-origin: 25% 100%;
transform-origin: 25% 100%;
}
.blocks__block:nth-child(3) {
background: #e2bb7f;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.blocks__block:nth-child(4) {
background: #f67b7d;
-webkit-transform-origin: 75% 100%;
transform-origin: 75% 100%;
}
.blocks__block:nth-child(5) {
background: #a1775a;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.blocks__block.active {
z-index: 2;
}
.blocks-content {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
height: 100vh;
width: 100%;
}
.blocks-content__content {
will-change: transform, opacity;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
position: fixed;
width: 100%;
z-index: 3;
top: 0;
left: 0;
height: 100vh;
padding: 10vw;
font-size: 20px;
opacity: 0;
visibility: hidden;
text-align: center;
-webkit-transform: scale(0.9);
transform: scale(0.9);
transition: all 0.3s 0.2s ease-out;
}
.blocks-content__content.active {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
visibility: visible;
}
.blocks-content .blocks__content-close {
position: absolute;
right: 2vw;
top: 2vh;
font-size: 30px;
cursor: pointer;
transition: all 0.2s ease-out;
}
.blocks-content .blocks__content-close:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.blocks-content p {
font-size: 16px;
line-height: 2;
max-width: 800px;
}
.blocks-content h2 {
padding: 15px 30px;
font-weight: 300;
letter-spacing: 6px;
box-shadow: inset 0 0 0 3px #000;
}
.blocks-names {
position: fixed;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
font-size: 18px;
letter-spacing: 4px;
cursor: pointer;
transition: all 0.15s ease-out;
}
.blocks-names .blocks__name {
flex: 1;
height: 20vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Demo */
main {
position: relative;
z-index: 1;
padding: 3vh 5vw;
height: 80vh;
display: flex;
flex-flow: column wrap;
justify-content: center;
background: rgba(237,201,130,0.85);
}
main h1 {
margin: 0;
font-weight: 300;
color: #38c5b9;
}
main h1 a {
font-size: 48px;
}
main p {
font-weight: 300;
font-size: 16px;
max-width: 340px;
margin: 7px auto;
}
main a {
text-decoration: none;
color: #38c5b9;
font-size: 30px;
}
main .plate {
position: absolute;
top: 50%;
left: 50%;
max-width: 380px;
width: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
</style>
</head>
<body translate="no">
<main>
<h1><a href="http://ettrics.com/">Ettrics</a></h1>
<p>A Material Design inspired expanding overlay for showcasing a variety of content.</p>
<p><a href="https://twitter.com/ettrics/" target="_blank"><i class="fa fa-twitter"></i></a></p>
<img class="plate" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/plate.svg" alt="">
</main>
<ul class="blocks-names">
<li class="blocks__name">Eggs</li>
<li class="blocks__name">Bacon</li>
<li class="blocks__name">Toast</li>
<li class="blocks__name">Donuts</li>
<li class="blocks__name">Coffee</li>
</ul>
<ul class="blocks">
<li class="blocks__block" id="1"></li>
<li class="blocks__block" id="2"></li>
<li class="blocks__block" id="3"></li>
<li class="blocks__block" id="4"></li>
<li class="blocks__block" id="5"></li>
</ul>
<ul class="blocks-content">
<li class="blocks-content__content">
<div class="content__close"></div>
<h2>Eggs</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae modi esse, totam sequi non quae, rerum facilis nesciunt iusto praesentium officiis assumenda dignissimos. Saepe, facere incidunt. Laudantium quisquam asperiores sint.</p>
<i class="blocks__content-close fa fa-close"></i>
</li>
<li class="blocks-content__content">
<h2>Bacon</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ducimus voluptate velit quae cumque neque minima harum libero eligendi alias laboriosam ad, consequuntur error atque incidunt assumenda sapiente! Architecto, excepturi?</p>
<i class="blocks__content-close fa fa-close"></i>
</li>
<li class="blocks-content__content">
<h2>Toast</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eligendi quis accusantium recusandae iusto sed, magni iure magnam, architecto quisquam pariatur minus, rem alias. Eum voluptatem maiores quae reiciendis cupiditate.</p>
<i class="blocks__content-close fa fa-close"></i>
</li>
<li class="blocks-content__content">
<h2>Donuts</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus officiis voluptates et, atque animi quae hic dolorem neque magnam reprehenderit sint dolor omnis modi mollitia labore quidem aspernatur ab architecto.</p>
<i class="blocks__content-close fa fa-close"></i>
</li>
<li class="blocks-content__content">
<h2>Coffee</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus officiis voluptates et, atque animi quae hic dolorem neque magnam reprehenderit sint dolor omnis modi mollitia labore quidem aspernatur ab architecto.</p>
<i class="blocks__content-close fa fa-close"></i>
</li>
</ul>
</body>
</html>
$color1 = #f4d35d
$color2 = #db5b4a
$color3 = #e2bb7f
$color4 = #f67b7d
$color5 = #a1775a
*
box-sizing: border-box
body
font-family: 'Open Sans'
font-weight: 400
text-align: center
.blocks
position: fixed
bottom: 0
z-index: 1
list-style-type: none
display: flex
width: 100%
margin: 0
padding: 0
&__block
will-change: transform
position: relative
height: 20vh
flex: 1
transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1)
&:nth-child(1)
background: $color1
transform-origin: 0% 100%
&:nth-child(2)
background: $color2
transform-origin: 25% 100%
&:nth-child(3)
background: $color3
transform-origin: 50% 100%
&:nth-child(4)
background: $color4
transform-origin: 75% 100%
&:nth-child(5)
background: $color5
transform-origin: 100% 100%
&.active
z-index: 2
.blocks-content
list-style-type: none
margin: 0
padding: 0
position: absolute
bottom: 0
left: 0
height: 100vh
width: 100%
&__content
will-change: transform, opacity
display: flex
align-items: center
justify-content: center
text-align: center
flex-direction: column
position: fixed
width: 100%
z-index: 3
top: 0
left: 0
height: 100vh
padding: 10vw
font-size: 20px
opacity: 0
visibility: hidden
text-align: center
transform: scale(0.9)
transition: all .3s .2s ease-out
&.active
opacity: 1
transform: scale(1)
visibility: visible
.blocks__content-close
position: absolute
right: 2vw
top: 2vh
font-size: 30px
cursor: pointer
transition: all .2s ease-out
&:hover
transform: scale(1.1)
p
font-size: 16px
line-height: 2
max-width: 800px
h2
padding: 15px 30px
font-weight: 300
letter-spacing: 6px
box-shadow: inset 0 0 0 3px black
.blocks-names
position: fixed
bottom: 0
left: 0
z-index: 2
width: 100%
list-style-type: none
margin: 0
padding: 0
display: flex
font-size: 18px
letter-spacing: 4px
cursor: pointer
transition: all .15s ease-out
.blocks__name
flex: 1
height: 20vh
display: flex
align-items: center
justify-content: center
/* Demo */
main
position: relative
z-index: 1
padding: 3vh 5vw
height: 80vh
display: flex
flex-flow: column wrap
justify-content: center
background: rgba(#edc982, 0.85)
h1
margin: 0
font-weight: 300
color: #38C5B9
a
font-size: 48px
p
font-weight: 300
font-size: 16px
max-width: 340px
margin: 7px auto
a
text-decoration: none
color: #38C5B9
font-size: 30px
.plate
position: absolute
top: 50%
left: 50%
max-width: 380px
width: 100%
transform: translate(-50%, -50%)
z-index: -1
block = $('.blocks__block')
bname = $('.blocks__name')
content = $('.blocks-content__content')
closeBtn = $('.blocks__content-close')
wHeight = $(window).outerHeight()
wWidth = $(window).outerWidth()
bHeight = block.outerHeight()
bWidth = block.outerWidth()
xVal = Math.round(wWidth / bWidth) + 0.03
yVal = wHeight / bHeight + 0.03
expand = ->
num = $(this).index()
aBlock = block.eq(num)
if !aBlock.hasClass('active')
bname.css 'opacity', '0'
aBlock.css
'transform': 'scale(' + xVal + ',' + yVal + ')'
'-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
aBlock.addClass 'active'
openContent num
return
openContent = (num) ->
content.css
'transition': 'all 0.3s 0.4s ease-out'
'-webkit-transition': 'all 0.3s 0.4s ease-out'
aContent = content.eq(num)
aContent.addClass 'active'
return
closeContent = ->
bname.css 'opacity', '1'
content.css
'transition': 'all 0.1s 0 ease-out'
'-webkit-transition': 'all 0.1s 0 ease-out'
block.css
'transform': 'scale(1)'
'-webkit-transform': 'scale(1)'
block.removeClass 'active'
content.removeClass 'active'
return
updateValues = ->
`var yVal`
`var xVal`
`var bWidth`
`var bHeight`
`var wWidth`
`var wHeight`
if block.hasClass('active')
aBlock = $('.blocks__block.active')
wHeight = $(window).height()
wWidth = $(window).width()
bHeight = block.height()
bWidth = block.width()
xVal = Math.round(wWidth / bWidth) + 0.03
yVal = wHeight / bHeight + 0.03
aBlock.css
'transform': 'scale(' + xVal + ',' + yVal + ')'
'-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
return
$(window).on 'resize', updateValues
bname.on 'click', expand
closeBtn.on 'click', closeContent