DVD Wait Screen

dvd-wait-screen.markdown

DVD Wait Screen

A Pen by ömercan kömür on CodePen.

License.

index.html

<a href="https://www.w3schools.com"><img class="dvd" src="https://raw.githubusercontent.com/libretro/RetroArch/master/media/invader_dark.png"/>

script.js

$(document).ready(function() {
	tick();
});

var xVel = 1, yVel = 1;

function tick() {
	moveImage();
	
	setTimeout(function() {
		tick();
	}, 1);
}

function moveImage() {
	var cur = $(".dvd").offset();
  $(".dvd").offset({ top: cur.top + yVel, left: cur.left + xVel});
	
	if((cur.top + $(".dvd").height()) > $("body").height())
	{
		yVel = -1;
		tint();
	}
		if(cur.top < 0)
	{
		yVel = 1;
		tint();
	}
	
 if((cur.left + $(".dvd").width() - 0) > $("body").width())
	{
		xVel = -1;
		tint();
	}
		if(cur.left < 0)
	{
		xVel = 1;
		tint();
	}
}

function tint() {
	$(".dvd").css("filter", `sepia(100%) saturate(600%) brightness(80%) hue-rotate(${Math.random() * 360}deg)`);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>

style.scss

body {
	background: rgba(0,0,0,0.8);
}
html, body {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.dvd {
	width: 200px;
	opacity: 1;
	filter: sepia(100%) saturate(600%) brightness(100%) hue-rotate(190deg);
}