After finding this javascript code on Codepen and seeing that it worked perfectly in the console there, I tried to run it on my computer with jQuery but it didn't work outside of Codepen. Even when attempting to use it on JSfiddle or compile the SCSS code into CSS, it still wouldn't function properly. Surprisingly, the code only works flawlessly within Codepen. The button effectively turns the TV on and off.
Check out the codepen link here.
Here is the SCSS JSfiddle for reference.
And here is the CSS JSfiddle link.
Below is the HTML code snippet:
<section class="screen">
<div class="content">
<!-- [FS] NOTE: This can also function as a normal web page with regular content -->
</div>
</section>
<button id="switcher-tv">Turn on/off</button>
Here is the SCSS code:
$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;
}
The JavaScript code section:
(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();
});
})();
Finally, the compiled CSS code:
body {
font-family: sans-serif;
background-color: #111111;
}
a {
color: #ff5f2e;
}
a:hover {
color: #fcbe32;
}
button {
position: fixed;
right: 20px;
bottom: 20px;
padding: 20px;
font-weight: 700;
font-size: 16px;
}
h1 {
text-align: center;
}
.screen {
background-color: #e1eef6;
position: fixed;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
content: " ";
overflow: hidden;
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: #e1eef6;
}