3d mini flip player concept

Developer
Rune Sejer Hoffmann
Size
4,967 Kb
Views
8,096
  1. 3d mini flip player concept Previews
  2. 3d mini flip player concept HTML Codes
  3. 3d mini flip player concept CSS Codes
  4. 3d mini flip player concept JS Codes

How do I make an 3d mini flip player concept?

Just a little (not fully functional) media player just to play with the concept. And with little inspiration from the devwars challenge :). What is a 3d mini flip player concept? How do you make a 3d mini flip player concept? This script and codes were developed by Rune Sejer Hoffmann on 10 December 2022, Saturday.

3d mini flip player concept Previews
IQ Test

3d mini flip player concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3d mini flip player concept</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="playerwrap">
<div class="player"> <div class="songimg"> <div class="songtitle"> <div class="runout"> <span>Maroon 5</span> - sugar </div> </div> </div> <div class="playerbtns"> <div class="play"></div> <div class="prev"></div> <div class="forw"></div> <div class="volD"></div> <div class="volU"></div> </div>
</div>
</div>
<div class="progress"></div>	<audio class="audio" src="http://www.artplague.dk/_assets/Maroon 5 - Sugar (Audio).mp3" type="audio/mpeg"> Your browser does not support the audio tag!
</audio>
<div class="madeby"><p>Concept by - Rune </p></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3d mini flip player concept - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300,400);
/*options*/
body { Background: radial-gradient(circle farthest-side at right bottom, #9d8dcc, #471d44 35%, #25004a 98%); background-size: 100% 900px; background-repeat: no-repeat; overflow: hidden;
}
.madeby { position: absolute; left: 40px; right: 0; bottom: 10px; margin: auto; height: 40px; width: 130px; font-size: 12px; color: #f2f2f2; opacity: .6; font-family: 'Titillium Web', sans-serif;
}
.playerwrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 400px; width: 400px; perspective: 1000;
}
.player { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #f3f3f3; border-radius: 7px; height: 160px; width: 250px; overflow: hidden; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); transform-style: preserve-3d; transform-origin: 50% 50%; transition: all 1s ease-out; transform: scale(0.5) rotateY(0deg) rotate(10deg);
}
.playerwrap:hover .player { transform: scale(1) rotateY(360deg) rotate(0deg); animation: none;
}
.scalein { left: 0; right: 0; top: 0; bottom: 0; margin: auto; animation: scaleup 5s forwards linear;
}
.songimg { width: 100%; height: 60%; background: url(http://cdnpix.com/show/imgs/d0dfedba4569e947a7ea20c8b52b2794.jpg); background-position: center; background-size: 100%; border-bottom: 1px solid white;
}
.songtitle { position: relative; opacity: 0.9; width: 100%; height: 35px; top: 50px; padding-left: 10px; background: white; font-family: 'Titillium Web', sans-serif; color: black; overflow: hidden;
}
.runout { width: 500px; position: absolute; animation: runout 15s infinite linear; transition: all 1s linear;
}
.songtitle span { font-size: 20px;
}
.playerbtns { width: 100%; height: 100%; padding: 12px;
}
.play:hover, .prev:hover, .forw:hover, .volU:hover, .volD:hover { cursor: pointer;
}
.play { height: 40px; width: 40px; border-radius: 40px; background-color: black; float: left; background: url(http://publicdomainvectors.org/photos/1361982728.png); background-size: 600%; background-repeat: no-repeat; background-position: -25px 10px;
}
.pause { background-position: -137px 10px;
}
.prev, .forw { height: 20px; width: 20px; border-radius: 20px; background-color: blue; float: left; margin: 10px; margin-right: -1px;
}
.prev, .forw { background: url(http://publicdomainvectors.org/photos/1361982728.png); background-size: 600%; background-repeat: no-repeat; background-position: -0px 5px;
}
.forw { background-position: -30px 5px;
}
.prev:active, .forw:active { transform: scale(0.8);
}
.volU, .volD { height: 8px; width: 16px; background: black; float: right; margin: 10px; margin-right: 20px; background: url(https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/plus_minus-.png); background-size: 140%; background-repeat: no-repeat; background-position: -3px -14px;
}
.volU:active, .volD:active { transform: scale(0.8);
}
.volU { margin-right: -6px; height: 15px; background-position: -4px -1px;
}
.volD { margin-top: 14px;
}
/*Rules for switching songs*/
.playerwrap .player.flip { transition: all .1s linear; transform-origin: 100% 100%; transform: rotateX(90deg);
}
.progress { width: 100%; height: 20px;
}
@keyframes hover { 0% { transform: rotate(0deg) rotateY(0deg) scale(0.5); } 25% { transform: rotate(2deg) scale(0.5); } 75% { transform: rotate(-2deg) scale(0.5); } 100% { transform: rotate(0deg) rotateY(0deg) scale(0.5); }
}
@keyframes runout { 0% { left: -150px; } 100% { left: 270px; }
}

3d mini flip player concept - Script Codes JS Codes

//Working on
//Intro
//Play/Pause
$('.play').click(function() { $('.play').toggleClass('pause'); if ($(this).hasClass('pause')) { var audio = $("audio")[0]; audio.play(); } else { var audio = $("audio")[0]; audio.pause(); }
});
//Progress $(function() { $('.progress').progressbar({ value:37 });
});
//Volume up
function volumeUp(){ var volume = $(".audio").prop("volume")+0.2; if(volume >1){ volume = 1; } $(".audio").prop("volume",volume);
}
$('.volU').click(function() { volumeUp();
});
//Volume down
function volumeDown(){ var volume = $(".audio").prop("volume")-0.2; if(volume <0){ volume = 0; } $(".audio").prop("volume",volume);
}
$('.volD').click(function() { volumeDown();
});
//Next
$('.forw').click(function() { $('.player').addClass('flip'); setTimeout(function(){ $('.runout').text('Mellemfingamusik - Pepsi'); $('.songimg').css("background", "url(https://i.imgur.com/Oxxb8Xg.png) 60% center"); $('.player').removeClass('flip'); }, 200); $(".audio").attr("src","http://www.artplague.dk/_assets/mfm.mp3");
});
//Prev
$('.prev').click(function() { $('.player').addClass('flip'); setTimeout(function(){ $('.runout').text('Maroon 5 - sugar'); $('.songimg').css('background', 'url(http://cdnpix.com/show/imgs/d0dfedba4569e947a7ea20c8b52b2794.jpg) 60% center'); $('.player').removeClass('flip'); }, 200); $(".audio").attr("src","http://www.artplague.dk/assets/Maroon 5 - Sugar (Audio).mp3");
});
3d mini flip player concept - Script Codes
3d mini flip player concept - Script Codes
Home Page Home
Developer Rune Sejer Hoffmann
Username RSH87
Uploaded December 10, 2022
Rating 3.5
Size 4,967 Kb
Views 8,096
Do you need developer help for 3d mini flip player concept?

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!

Rune Sejer Hoffmann (RSH87) Script Codes
Name
Pure css download button
Perspective CSS hover effect
AngularJS Todolist
Left right navigation
Offset menu
3D CSS Gameboy
Nav ui
Search concept
Crosshair loader
Material design card
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!