<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/pankucins/pen/wMbzLW?depth=everything&order=popularity&page=79&q=Overlay&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">body {
background: #d4e3e6;
}
.container {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -175px;
width: 350px;
background: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.container .background {
height: 252px;
position: relative;
overflow: hidden;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px;
border-radius: 10px 10px 0 0;
-moz-transition-property: background;
-o-transition-property: background;
-webkit-transition-property: background;
transition-property: background;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
-webkit-transition-duration: 2s;
transition-duration: 2s;
}
.container .background .forest-top svg polygon,
.container .background .forest-bot svg path {
-moz-transition-property: fill;
-o-transition-property: fill;
-webkit-transition-property: fill;
transition-property: fill;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
-webkit-transition-duration: 2s;
transition-duration: 2s;
}
.container .background .stars {
opacity: 0;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
-webkit-transition-duration: 2s;
transition-duration: 2s;
}
.container .background.day {
background-color: #0aceff;
}
.container .background.day .cloud {
opacity: 1;
}
.container .background.day .forest-top svg polygon {
fill: #149cbf;
}
.container .background.day .forest-bot svg path {
fill: #0d87a3;
}
.container .background.night {
background-color: #172a60;
}
.container .background.night .forest-top svg polygon {
fill: #18214f;
}
.container .background.night .forest-bot svg path {
fill: #172a60;
}
.container .background.night .cloud {
opacity: 0.2;
}
.container .background.night .stars {
opacity: 0.28;
}
.container .background .overlay {
position: absolute;
z-index: 10;
width: 0;
height: 0;
border-top: 252px solid rgba(255, 255, 255, 0.06);
border-right: 350px solid transparent;
}
.container .background .cloud {
position: absolute;
width: 100px;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
-webkit-transition-duration: 2s;
transition-duration: 2s;
}
.container .background .cloud.top {
top: -15px;
left: 0px;
}
.container .background .cloud.top-backup {
top: -15px;
left: -100px;
}
.container .background .cloud.mid {
top: 35px;
left: 200px;
}
.container .background .cloud.mid-backup {
top: 35px;
left: 0px;
}
.container .background .cloud.bot {
top: 65px;
left: -30px;
}
.container .background .cloud.bot-backup {
top: 65px;
left: -230px;
}
.container .background .forest-top,
.container .background .forest-bot {
position: absolute;
bottom: -3px;
}
.container .background .forest-top {
bottom: 10px;
}
.container .background .moon, .container .background .sun {
bottom: -40px;
}
.container .background .moon {
position: absolute;
left: 10px;
transform: scale(0.6, 1);
}
.container .background .moon svg {
width: 150px;
height: 150px;
}
.container .background .sun {
position: absolute;
left: 10px;
}
.container .background .sun svg {
width: 150px;
height: 150px;
}
.container .text {
text-align: center;
color: #172a60;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.container .text h3 {
font-size: 26px;
font-weight: bold;
padding-top: 35px;
}
.container .text p {
color: #69738e;
font-size: 13px;
margin-top: 10px;
}
.container .text .lbl {
position: relative;
display: block;
height: 34px;
width: 65px;
background: #dfe4f5;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
margin: 30px auto;
}
.container .text .lbl:after {
position: absolute;
right: -4px;
top: -2px;
display: block;
width: 38px;
height: 38px;
border-radius: 30px;
background: #172a60;
-moz-box-shadow: 0px 2px 5px -1px rgba(23, 42, 96, 0.75);
-webkit-box-shadow: 0px 2px 5px -1px rgba(23, 42, 96, 0.75);
box-shadow: 0px 2px 5px -1px rgba(23, 42, 96, 0.75);
content: '';
transition: all 0.3s ease;
}
.container .text .lbl:active:after {
transform: scale(1.15, 0.85);
}
.container .text .cbx:checked ~ label {
background: #cee7ed;
}
.container .text .cbx:checked ~ label:after {
left: -2px;
background: #00ccff;
-moz-box-shadow: 0px 2px 5px -1px rgba(0, 204, 255, 0.75);
-webkit-box-shadow: 0px 2px 5px -1px rgba(0, 204, 255, 0.75);
box-shadow: 0px 2px 5px -1px rgba(0, 204, 255, 0.75);
}
.container .text .hidden {
display: none;
}
.container.day h3 {
color: #0c8faf;
}
</style></head><body>
<div class="container">
<div class="background night">
<div class="overlay"></div>
<div class="sun"></div>
<div class="moon"></div>
<div class="stars"></div>
<div class="cloud top"></div>
<div class="cloud mid"></div>
<div class="cloud bot-backup"></div>
<div class="forest-top"></div>
<div class="forest-bot"></div>
</div>
<div class="text">
<h3>Night mode on</h3>
<p>Toggle switch to change lighting</p>
<input class="cbx hidden" type="checkbox" id="unchecked"/>
<label class="lbl" for="unchecked"></label>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script >$(function() {
var svg = [
'https://dl.dropboxusercontent.com/s/wppjkl1mapcofi1/egles_dark.svg?dl=0',
'https://dl.dropboxusercontent.com/s/1tluv1o16bu8dv1/egles_light.svg?dl=0',
'https://dl.dropboxusercontent.com/s/df61ibt6hk9mk2z/sun.svg',
'https://dl.dropboxusercontent.com/s/z5nkite52l21gnn/moon.svg',
'https://dl.dropboxusercontent.com/s/a24sxazrdbnkn4q/stars.svg?dl=0',
'https://dl.dropboxusercontent.com/s/n329j6mekvr5mec/makonis_1.svg?dl=0',
'https://dl.dropboxusercontent.com/s/jpd6t207d4s1ozo/makonis_2.svg?dl=0'
];
$('.forest-top').load(svg[0]);
$('.forest-bot').load(svg[1]);
$('.sun').load(svg[2]);
$('.moon').load(svg[3]);
$('.stars').load(svg[4]);
$('.cloud.top, .cloud.top-backup').load(svg[5]);
$('.cloud.mid, .cloud.mid-backup').load(svg[6]);
$('.cloud.bot, .cloud.bot-backup').load(svg[5]);
TweenLite.to($('.moon'), 0, {
bottom: '40px',
scale: 1
});
$('.cloud').each(function() {
tweenCloud($(this));
});
$('.cbx').bind('change', function() {
daySwap();
});
});
tweenCloud = function($cloud) {
var offset = $cloud.position(),
speed = (450 - offset.left) / 10;
TweenLite.to($cloud, speed, {
left: '350px',
onComplete: function() {
TweenLite.to($cloud, 0, {
left: '-300px',
//top: 120 - (Math.random() * 140) + 'px',
onComplete: function() {
tweenCloud($cloud)
}
})
}
})
}
daySwap = function() {
var $cbx = $('.cbx'),
day = !$cbx.is(':checked'),
$sun = $('.sun'),
$moon = $('.moon'),
bounceSize = 75,
visiblePosition = 45;
$('h3').fadeOut(function() {
$(this).text(((day) ? 'Night' : 'Day') + ' mode on').fadeIn();
$('.container').toggleClass('day');
$('.background').removeClass((day) ? 'day' : 'night').addClass((day) ? 'night' : 'day');
});
TweenLite.to((day) ? $sun : $moon, 0.2, {
bottom: bounceSize + 'px',
scaleX: 0.6,
ease: Bounce.easeOut
});
TweenLite.to((day) ? $sun : $moon, 0.3, {
bottom: '-40px',
ease: Power4.easeOut,
delay: 0.2
});
TweenLite.to((day) ? $sun : $moon, 0, {
scaleX: 1
})
TweenLite.to((day) ? $moon : $sun, 0.5, {
bottom: bounceSize + 'px',
scaleX: 1,
scaleY: 0.6,
ease: Bounce.easeOut,
delay: 1
});
TweenLite.to((day) ? $moon : $sun, 0.4, {
bottom: visiblePosition + 'px',
ease: Bounce.easeOut,
scaleY: 1,
delay: 1.2
});
}
//# sourceURL=pen.js
</script>
</body></html>
