DVD Screensaver
How do I make an dvd screensaver?
Simple DVD screensaver implementation with requestAnimationFrame. What is a dvd screensaver? How do you make a dvd screensaver? This script and codes were developed by Karl Saunders on 20 November 2022, Sunday.
DVD Screensaver - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DVD Screensaver</title> <link rel='stylesheet prefetch' href='https://app.mobiuswebdesign.co.uk/plugins/dvd/fonts/dvd.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="dvd"></div> <script src="js/index.js"></script>
</body>
</html>
DVD Screensaver - Script Codes CSS Codes
@font-face { font-family: 'dvd'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/dvd.eot?bj2v8n'); src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/dvd.eot?bj2v8n#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/dvd.ttf?bj2v8n') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/dvd.woff?bj2v8n') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/dvd.svg?bj2v8n#icomoon') format('svg'); font-weight: normal; font-style: normal;
}
body { overflow: hidden; width: 100vw; height: 100vh; margin: 0; background: #45484d; background: -moz-radial-gradient(center, ellipse cover, #45484d 0%, #000000 100%); background: -webkit-radial-gradient(center, ellipse cover, #45484d 0%, #000000 100%); background: radial-gradient(ellipse at center, #45484d 0%, #000000 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000', GradientType=1);
}
#dvd { position: absolute; background-size: 100% auto; background-repeat: no-repeat; width: 400px; height: 176px; color: #fff;
}
#dvd:before { font-family: 'dvd' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e900"; font-size: 175px;
}
DVD Screensaver - Script Codes JS Codes
var box = document.getElementById('dvd'), colors = ['#ff0000', '#ff4000', '#ff8000', '#ffbf00', '#ffff00', '#bfff00', '#80ff00', '#40ff00', '#00ff00', '#00ff40', '#00ff80', '#00ffbf', '#00ffff', '#00bfff', '#0080ff', '#0040ff', '#0000ff', '#4000ff', '#8000ff', '#bf00ff', '#ff00ff', '#ff00bf', '#ff0080', '#ff0040', '#ff0000'], currentColor = Math.floor((Math.random() * 25) + 1), win = window, ww = win.innerWidth, wh = win.innerHeight, translateX = Math.floor((Math.random() * ww) + 1), translateY = Math.floor((Math.random() * wh) + 1), boxWidth = box.offsetWidth, boxHeight = box.offsetHeight, boxTop = box.offsetTop, boxLeft = box.offsetLeft, xMin = -boxLeft, yMin = -boxTop, xMax = win.innerWidth - boxLeft - boxWidth, yMax = win.innerHeight - boxTop - boxHeight, request = null, direction = 'se', speed = 4, timeout = null;
init();
// reset constraints on resize
window.addEventListener('resize', function(argument) { clearTimeout(timeout); timeout = setTimeout(update, 100);
}, false);
function init() { request = requestAnimationFrame(init); move(); // setInterval(function() { // move(); // }, 16.66);
}
// reset constraints
function update() { xMin = -boxLeft; yMin = -boxTop; xMax = win.innerWidth - boxLeft - boxWidth; yMax = win.innerHeight - boxTop - boxHeight;
}
function move() { setDirection(); setStyle(box, { transform: 'translate3d(' + translateX + 'px, ' + translateY + 'px, 0)', });
}
function setDirection() { switch (direction) { case 'ne': translateX += speed; translateY -= speed; break; case 'nw': translateX -= speed; translateY -= speed; break; case 'se': translateX += speed; translateY += speed; break; case 'sw': translateX -= speed; translateY += speed; break; } setLimits();
}
function setLimits() { if (translateY <= yMin) { if (direction == 'nw') { direction = 'sw'; } else if (direction == 'ne') { direction = 'se'; } switchColor(); } if (translateY >= yMax) { if (direction == 'se') { direction = 'ne'; } else if (direction == 'sw') { direction = 'nw'; } switchColor(); } if (translateX <= xMin) { if (direction == 'nw') { direction = 'ne'; } else if (direction == 'sw') { direction = 'se'; } switchColor(); } if (translateX >= xMax) { if (direction == 'ne') { direction = 'nw'; } else if (direction == 'se') { direction = 'sw'; } switchColor(); }
}
function switchColor() { var color = Math.floor((Math.random() * 25) + 1); while( color == currentColor ) { color = Math.floor((Math.random() * 25) + 1) } setStyle(box, { color: colors[color] }); currentColor = color;
}
function getVendor() { var ua = navigator.userAgent.toLowerCase(), match = /opera/.exec(ua) || /msie/.exec(ua) || /firefox/.exec(ua) || /(chrome|safari)/.exec(ua) || /trident/.exec(ua), vendors = { opera: '-o-', chrome: '-webkit-', safari: '-webkit-', firefox: '-moz-', trident: '-ms-', msie: '-ms-', }; return vendors[match[0]];
};
function setStyle(element, properties) { var prefix = getVendor(), property, css = ''; for (property in properties) { css += property + ': ' + properties[property] + ';'; css += prefix + property + ': ' + properties[property] + ';'; } element.style.cssText += css;
}
Developer | Karl Saunders |
Username | Mobius1 |
Uploaded | November 20, 2022 |
Rating | 3 |
Size | 3,188 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Pure CSS Comma-seperated List | 3,664 Kb |
Pure CSS Tooltips | 2,271 Kb |
Classic Snake in Vanilla Javascript | 5,117 Kb |
Pure CSS Windows Loader | 2,724 Kb |
Onevent vs. addEventListener | 1,476 Kb |
Vanilla DataTables Demo | 8,190 Kb |
Vanilla DataTables - AJAX | 0 Kb |
Pure CSS Glitchy Text | 2,739 Kb |
Static vs. Live NodeList | 2,748 Kb |
Selectable | 4,392 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
Segments mouse following | Nosir | 2,909 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
GLSL Hills | Ykob | 6,991 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!