Virtual vinyl

Developer
David Storey
Size
3,474 Kb
Views
40,480
  1. Virtual vinyl Previews
  2. Virtual vinyl HTML Codes
  3. Virtual vinyl CSS Codes
  4. Virtual vinyl JS Codes

How do I make an virtual vinyl?

A playing vinyl record created mainly with CSS3 and little bit of JS to add the grooves. Had intended to turn this in a Spotify app but a) They recently stopped accepting new app submissions and b) The performance dropped noticeably once running inside the Spotify desktop app.. What is a virtual vinyl? How do you make a virtual vinyl? This script and codes were developed by David Storey on 12 July 2022, Tuesday.

Virtual vinyl Previews
IQ Test

Virtual vinyl - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Virtual vinyl</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="outer"> <div class="turning"> <div class="wobble"> <div class="layer rotating"> <div id="record" class="round"> </div> </div> <div class="layer backnforth"> <div id="sheen" class="round centered"></div> </div> <div class="layer rotating"> <div id="grooves"></div> <div id="label" class="round centered"> <div id="hole" class="round centered"></div> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Virtual vinyl - Script Codes CSS Codes

/* ========= COMMON ========= */
* {	margin: 0;	padding: 0;
}
body {	background-color: #121314;	background: url(http://i47.tinypic.com/33nw5fb.jpg);	background-size: cover;
}
.centered {	position: relative;	top: 50%;	left: 50%;	-webkit-transform: translateY(-50%) translateX(-50%);	-moz-transform: translateY(-50%) translateX(-50%);	transform: translateY(-50%) translateX(-50%);
}
.round {	border-radius: 50%;
}
/* ========= RECORD ELEMENTS ========= */
.outer { overflow-y: hidden;
}
.layer,
#record,
.outer {	height: 900px;
}
.layer,
#record {	display: block;	width: 900px;	position: absolute;
}
#record {	background-color: #070707;	-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5);	-moz-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5);	box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5);
}
#sheen {	display: block;	width: 100%;	height: 0px;	-webkit-box-shadow: 0px 0px 250px 100px rgba(255, 255, 255, 0.2);	-moz-box-shadow: 0px 0px 250px 100px rgba(255, 255, 255, 0.2);	box-shadow: 0px 0px 250px 100px rgba(255, 255, 255, 0.2);	-webkit-transform: rotate(45deg) translateX(-50%);	-webkit-transform-origin: 0;	-moz-transform: rotate(45deg) translateX(-50%);	-moz-transform-origin: 0;	transform: rotate(45deg) translateX(-50%);	transform-origin: 0;	position: absolute;	overflow: hidden;
}
#label {	display: block;	width: 33%;	height: 33%;	background-color: #CCC;	background-repeat: no-repeat;	background-position: center center;	background-size: contain;	-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.2);	-moz-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.2);	box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.2);
}
#hole {	display: block;	width: 10%;	height: 10%;	background-color: #121314;	-webkit-box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, 0.5);	-moz-box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, 0.5);	box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, 0.5);
}
/* ========= GROOVES ========= */
.groove {	display: block;	background-color: transparent;	border: 1px solid rgba(40, 40, 40, 0.3);	position: absolute !important;
}
.trackGroove {	border: 2px solid rgba(7, 7, 7, 0.2);
}
/* ========= ANIMATION ========= */
.turning .rotating {	-webkit-animation-name: rotate;	-webkit-animation-duration: 7s;	-webkit-animation-iteration-count: infinite;	-webkit-animation-timing-function: linear;	-moz-animation-name: rotate;	-moz-animation-duration: 7s;	-moz-animation-iteration-count: infinite;	-moz-animation-timing-function: linear;	animation-name: rotate;	animation-duration: 7s;	animation-iteration-count: infinite;	animation-timing-function: linear;
}
.turning .backnforth {	-webkit-animation-name: backnforth;	-webkit-animation-duration: 1s;	-webkit-animation-iteration-count: infinite;	-webkit-animation-timing-function: linear;	-moz-animation-name: backnforth;	-moz-animation-duration: 1s;	-moz-animation-iteration-count: infinite;	-moz-animation-timing-function: linear;	animation-name: backnforth;	animation-duration: 1s;	animation-iteration-count: infinite;	animation-timing-function: linear;
}
.turning .wobble { -webkit-animation: wobble 20s infinite; }
.rpm33 .rotating {	-webkit-animation-duration: 1.82s;	-moz-animation-duration: 1.82s;	animation-duration: 1.82s;
}
.rpm45 .rotating {	-webkit-animation-duration: 1.33s;	-moz-animation-duration: 1.33s;	animation-duration: 1.33s;
}
.rpm78 .rotating {	-webkit-animation-duration: 0.77s;	-moz-animation-duration: 0.77s;	animation-duration: 0.77s;
}
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@-webkit-keyframes backnforth { 33% { -webkit-transform: rotate(-1deg); } 66% { -webkit-transform: rotate(1deg); } }
@-webkit-keyframes wobble { 33% { -webkit-transform:rotate(0.1deg); } 66% { -webkit-transform: rotate(-0.1deg); } }
@-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
@-moz-keyframes backnforth { 33% { -moz-transform: rotate(-1deg); } 66% { -moz-transform: rotate(1deg); } }
@-moz-keyframes wobble { 33% { -moz-transform:rotate(0.1deg); } 66% { -moz-transform: rotate(-0.1deg); } }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes backnforth { 33% { transform: rotate(-1deg); } 66% { transform: rotate(1deg); } }
@keyframes wobble { 33% { transform:rotate(0.1deg); } 66% { transform: rotate(-0.1deg); } }

Virtual vinyl - Script Codes JS Codes

$(document).ready(function() {	var $grooves = $("#grooves");	// Add random grooving	for (counter = start; counter < end; counter += (increment + random(variance))) {	$("<div/>")	.addClass("groove round centered")	.width(counter)	.height(counter)	.appendTo($grooves);	}	// Add wider grooving for track breaks	for (var track in tracks) {	var size = start + ((end - start) * tracks[track]);	$("<div/>")	.addClass("groove round centered trackGroove")	.width(size)	.height(size)	.appendTo($grooves);	}	// Set the album-art label	$("#label").css("background-image", "url(" + covers[random(covers.length - 1)] + ")");
});
var	counter = 0,	start = $("#label" ).width() * 1.15,	end = $("#record").width() * 0.96,	increment = 6,	variance = 3,	tracks = [0.1, 0.33, 0.42, 0.56, 0.78, 0.94],	covers = [	"http://fenrisolo.files.wordpress.com/2010/09/god-help-the-girl-come-monday-night-cover-portada-catherine-ireton.jpg",	"http://upload.wikimedia.org/wikipedia/en/0/0f/Belle_And_Sebastian_-_If_You're_Feeling_Sinister.jpg",	"http://upload.wikimedia.org/wikipedia/sr/b/b4/Iron_Maiden_Killers.jpg",	"http://upload.wikimedia.org/wikipedia/en/5/50/Sgt._Pepper's_Lonely_Hearts_Club_Band.jpg",	"http://upload.wikimedia.org/wikipedia/en/0/00/TheClashLondonCallingalbumcover.jpg",	"http://upload.wikimedia.org/wikipedia/en/1/1f/Diamond_dogs.jpg"	];
function random(n) {	var r = (Math.round(Math.random() * n))	return r;
}
Virtual vinyl - Script Codes
Virtual vinyl - Script Codes
Home Page Home
Developer David Storey
Username davidpanik
Uploaded July 12, 2022
Rating 3
Size 3,474 Kb
Views 40,480
Do you need developer help for Virtual vinyl?

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!

David Storey (davidpanik) Script Codes
Name
Christmas CSS Challenge
Spiral Art Maker
Cage-o-graph
Local Weather
Speed Reader
Twitter Extractor
A Pen by David Storey
Chuck Norris Quotes
Circles
The Swear Machine
Create amazing web content with AI!

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!