AlbumFront
How do I make an albumfront?
Https://soundcloud.com/user-565831773. What is a albumfront? How do you make a albumfront? This script and codes were developed by on 12 January 2023, Thursday.
AlbumFront - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>albumFront</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="album"></div>
<div class="sndcld"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
AlbumFront - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Pacifico");
@import url("https://fonts.googleapis.com/css?family=Orbitron");
@import url("https://fonts.googleapis.com/css?family=Julius+Sans+One");
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
.album { cursor: pointer; height: 600px; width: 600px; word-wrap: break-word; overflow: hidden; padding: 20px; padding-top: 0px; padding-right: 05px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #222; font-family: 'Press Start 2P', cursive; font-size: 29px;
}
.wstd { -webkit-animation-name: wstd; animation-name: wstd; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
@-webkit-keyframes wstd { 0% { opacity: 0; } 50% { opacity: 100; } 100% { opacity: 0; }
}
@keyframes wstd { 0% { opacity: 0; } 50% { opacity: 100; } 100% { opacity: 0; }
}
AlbumFront - Script Codes JS Codes
function openInNewTab(url) { var win = window.open(url, '_blank'); win.focus(); }
$( document ).ready(function($){ var album = $('.album'); var bg = ''; var hueStep = 3; var hueStart=300; var alpha = 0.1; var stringa = 'lynx'.repeat(5); var alphaStep = 0.1; var tohalf = 11; String.prototype.repeat= function(n){ n= n || 1; return Array(n+1).join(this); } for(var i = 0;i<tohalf;i++){ bg+='<span class="text" style="color:hsla('+((i*hueStep)+hueStart)+', 96%, 52%, '+alpha+');">'+stringa+'</span>'; alpha+=alphaStep; } alpha+=alphaStep; for(var i = tohalf;i<tohalf*2;i++){ bg+='<span class="text" style="color:hsla('+((i*hueStep)+hueStart)+', 96%, 52%, '+alpha+');">'+stringa+'</span>'; alpha-=alphaStep; } album.html(bg); $('.text:eq(15)').html('<span class="text" style="color:'+$('.text:eq(15)').css("color")+'">lynx: </span><span class="wstd" style="color:hsla(181, 92%, 100%, 0.8)"> wstd </span>'); album.on('click', (e)=>{ openInNewTab('https://soundcloud.com/user-565831773') });
});
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 |
Vkapi | 2,787 Kb |
AlbumBack | 2,821 Kb |
Simple toggle | 2,684 Kb |
Slow laggy attempt | 5,947 Kb |
KYIVSTONER_KEYPAD | 6,702 Kb |
Custom Context Menu With Toasts | 5,643 Kb |
Angular attempts | 7,167 Kb |
Audio Drumpad Sampler | 6,931 Kb |
Ambitheater | 9,605 Kb |
Rotating rainbow preloader | 3,043 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 |
Blog | Rottingroom | 1,430 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
Awesome | Samarthpd | 2,901 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Three js | Paulq | 2,353 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Sticky Navbar | Phantomesse | 5,106 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!