SoundCloud CoverFlow
How do I make an soundcloud coverflow?
What is a soundcloud coverflow? How do you make a soundcloud coverflow? This script and codes were developed by James Podles on 23 November 2022, Wednesday.
SoundCloud CoverFlow - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SoundCloud CoverFlow</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato);
* { margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box;
}
html { height:100%; width: 100%; position: absolute; top:0; right:0;
}
body { height: 100%; background-color:#2c3e50; font-family:lato;
}
.container { background-color:#2c3e50; width:77%; min-height:100%; margin:0 auto;
}
h1 { width:100%; text-align:center; color:white; letter-spacing:2px; text-shadow:rgba(0,0,0,0.6) 0 1px 0;
}
h2 { margin-top:30px;
}
img { width:250px; height:250px; box-shadow:2px 2px 5px rgba(0,0,0,.5);
}
.coverflow { height: 200px; perspective: 500px; transform-style: preserve-3d; margin:60px auto 0 -50px;
}
.coverflow .flowItem{ position:absolute; height: 200px; width: 200px; left:50%; top:50%; margin-left:-100px; margin-top: -75px; cursor: pointer; z-index: 10; transition: all 1s;
}
#music-player { clear:both; width:300px; margin:100px auto;
}
#widget { height: 5em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <h1>SoundCloud CoverFlow</h1> <div class="coverflow"> <div class="flowItem"><img class="itemImage" src="https://i2.sndcdn.com/avatars-000034856919-a7wqj6-t200x200.jpg?3eddc42" id="jslack"></div>
<div class="flowItem"><img class="itemImage" src="https://i2.sndcdn.com/avatars-000043983953-ylnwct-t200x200.jpg?3eddc42" id="paragon">
</div>
<div class="flowItem"><img class="itemImage" src="https://i4.sndcdn.com/artworks-000025271749-37k914-t200x200.jpg?3eddc42" id="ambient"></div>
<div class="flowItem"><img class="itemImage" src="https://i3.sndcdn.com/avatars-000033284358-b910uv-t200x200.jpg?3eddc42" id="4am"></div> </div> <div id="music-player"></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>
SoundCloud CoverFlow - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato);
* { margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box;
}
html { height:100%; width: 100%; position: absolute; top:0; right:0;
}
body { height: 100%; background-color:#2c3e50; font-family:lato;
}
.container { background-color:#2c3e50; width:77%; min-height:100%; margin:0 auto;
}
h1 { width:100%; text-align:center; color:white; letter-spacing:2px; text-shadow:rgba(0,0,0,0.6) 0 1px 0;
}
h2 { margin-top:30px;
}
img { width:250px; height:250px; box-shadow:2px 2px 5px rgba(0,0,0,.5);
}
.coverflow { height: 200px; perspective: 500px; transform-style: preserve-3d; margin:60px auto 0 -50px;
}
.coverflow .flowItem{ position:absolute; height: 200px; width: 200px; left:50%; top:50%; margin-left:-100px; margin-top: -75px; cursor: pointer; z-index: 10; transition: all 1s;
}
#music-player { clear:both; width:300px; margin:100px auto;
}
#widget { height: 5em;
}
SoundCloud CoverFlow - Script Codes JS Codes
$(document).ready(function(){ $('#paragon').click(function(){ $('#music-player').empty().append('<iframe width="100%" height="60" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F95822276&color=ff6600&auto_play=false&show_artwork=false"></iframe>'); }); $('#jslack').click(function(){ $('#music-player').empty().append('<iframe width="100%" height="60" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F114182304&color=ff6600&auto_play=false&show_artwork=false"></iframe>'); }); $('#ambient').click(function(){ $('#music-player').empty().append('<iframe width="100%" height="60" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F74169030&color=ff6600&auto_play=false&show_artwork=false"></iframe>'); }); $('#4am').click(function(){ $('#music-player').empty().append('<iframe width="100%" height="60" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F77711065&color=ff6600&auto_play=false&show_artwork=false"></iframe>'); });
});
$(function(){ transformCovers(); $('.coverflow').on('click','.flowItem:not(.selected)',function(){ transformCovers($(this)); });
});
function transformCovers(centerItem,callback) { if(typeof(centerItem)=="undefined"){ var items = $('.coverflow .flowItem'); centerItem = items.eq(parseInt(items.length/2)); } if(!centerItem.hasClass('selected')){ var leftItems = centerItem.prevAll('.flowItem'); var rightItems = centerItem.nextAll('.flowItem'); var transform_vals = "translateX(0px) rotateY(0deg) translateZ(0)"; centerItem.css({"transform": transform_vals}); leftItems.each(function(i){ var itemdelta = i+1; var transform_vals = "translateX("+((itemdelta)*-30)+"px) rotateY(40deg) translateZ(-200px)"; $(this).css({"transform": transform_vals}); }); rightItems.each(function(i){ var itemdelta = i+1; var transform_vals = "translateX("+((itemdelta)*30)+"px) rotateY(-40deg) translateZ(-200px)"; $(this).css({"transform": transform_vals}); }); centerItem.addClass('selected').siblings('.selected').removeClass('selected'); }
}
Developer | James Podles |
Username | jpod |
Uploaded | November 23, 2022 |
Rating | 3 |
Size | 3,430 Kb |
Views | 10,120 |
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 |
Flyer-flip | 3,641 Kb |
Reading Progress Bar | 4,260 Kb |
Stack of Cards | 2,633 Kb |
Photo Grid | 2,351 Kb |
Scrambled City | 6,489 Kb |
Envelope Email Form | 4,653 Kb |
Soft Progress bar | 3,431 Kb |
Animated Fonts Awesome | 4,251 Kb |
Soundcloud music player | 4,275 Kb |
LED Social Icons | 2,999 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 |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
TestTube CSS | EZPK | 2,710 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
Calculator | Rzencoder | 4,572 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Reading Grid | Tappily | 4,306 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!