<section class="screen">
<div class="content">
<!-- [FS] NOTE: This is can be treated also as normal web page and containg normal content -->
</div>
</section>
<button id="switcher-tv">Turn on/off</button>
$color-text: #e1eef6;
$color-link: #ff5f2e;
$color-link-hover: #fcbe32;
$black: #111111;
body {
font-family: sans-serif;
background-color: $black;
}
a {
color: $color-link;
&:hover {
color: $color-link-hover;
}
}
button {
position: fixed;
right: 20px;
bottom: 20px;
padding: 20px;
font-weight: 700;
font-size: 16px;
}
h1 {
text-align: center;
}
.screen {
background-color: $color-text;
position: fixed;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
content: " ";
overflow: hidden;
// Fallback for old browsers
background: #16222A;
background: -webkit-linear-gradient(to left, #16222A , #3A6073);
background: linear-gradient(to left, #16222A , #3A6073);
background-size: cover;
background-image: url(https://cldup.com/gn3s3Fg75t.gif);
color: $color-text;
}
View Compiled
(function() {
var SELECTOR_SCREEN_ELEMENT = '.screen';
var SELECTOR_SWITCHER_TV = '#switcher-tv';
var isTurnedOn = true;
var timeline;
function buildTimeline() {
timeline = new TimelineMax({
paused: true
});
timeline
.to(SELECTOR_SCREEN_ELEMENT, .2, {
width: '100vw',
height: '2px',
background: '#ffffff',
ease: Power2.easeOut
})
.to(SELECTOR_SCREEN_ELEMENT, .2, {
width: '0',
height: '0',
background: '#ffffff'
});
}
function toggleSwitcherTV() {
if (isTurnedOn) {
timeline.restart();
}
if (!isTurnedOn) {
timeline.reverse();
}
isTurnedOn = !isTurnedOn;
}
// Initialize
$(document).ready(buildTimeline);
// Bindings
$(document).on('click', SELECTOR_SWITCHER_TV, function() {
toggleSwitcherTV();
});
})();
This Pen doesn't use any external CSS resources.