Skip to content

Instantly share code, notes, and snippets.

@gscottolson

gscottolson/index.html

Last active December 10, 2015 21:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gscottolson/4497619 to your computer and use it in GitHub Desktop.
Save gscottolson/4497619 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Hjörtur Hilmarsson. CoverFlow - CoverFlow built with CSS3 and a small doze of JavaScript
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3 CoverFlow</title>
<link rel="stylesheet" href="css/coverflow.css">
<!-- Modernizr -->
<script src="js/libs/modernizr.js"></script>
</head>
<body>
<div id="coverflow">
<section data-cover="http://a2.mzstatic.com/us/r1000/060/Features/1c/df/c3/dj.sahccbiy.170x170-75.jpg" ></section>
<section data-cover="http://a3.mzstatic.com/us/r1000/102/Music/95/45/3f/mzi.xqnmexwi.170x170-75.jpg" ></section>
<section data-cover="http://a4.mzstatic.com/us/r1000/014/Music/ea/6f/96/mzi.egqrvlca.170x170-75.jpg" ></section>
<section data-cover="http://a3.mzstatic.com/us/r1000/096/Music/1a/86/1f/mzi.dcotnnwo.170x170-75.jpg" ></section>
<section data-cover="http://a4.mzstatic.com/us/r1000/094/Music/a8/8b/db/mzi.dyzjtwow.170x170-75.jpg" ></section>
<section data-cover="http://a1.mzstatic.com/us/r1000/024/Music/81/54/3b/mzi.cceuzwlz.170x170-75.jpg" ></section>
<section data-cover="http://a5.mzstatic.com/us/r1000/103/Music/2f/08/9e/mzi.gxjxokia.170x170-75.jpg" ></section>
</div>
<nav id="controls">
<a id="prev">Left</a> & <a id="next">Right</a>
</nav>
<!-- Javascript -->
<script src="js/coverflow.js"></script>
</body>
</html>
Raw
script.js
/**
*
* CoverFlow using CSS3
*
* @author: Hjörtur Elvar Hilmarsson
*
**/
(function() {
// Local variables
var _index = 0,
_coverflow = null,
_prevLink = null,
_nextLink = null,
_albums = [],
_transformName = Modernizr.prefixed('transform'),
// Constants
OFFSET = 70; // pixels
ROTATION = 45; // degrees
BASE_ZINDEX = 10; //
MAX_ZINDEX = 42; //
/**
* Get selector from the dom
**/
function get( selector ) {
return document.querySelector( selector );
};
/**
* Renders the CoverFlow based on the current _index
**/
function render() {
// loop through albums & transform positions
for( var i = 0; i < _albums.length; i++ ) {
// before
if( i < _index ) {
_albums[i].style[_transformName] = "translateX( -"+ ( OFFSET * ( _index - i ) ) +"% ) rotateY( "+ ROTATION +"deg )";
_albums[i].style.zIndex = BASE_ZINDEX + i;
}
// current
if( i === _index ) {
_albums[i].style[_transformName] = "rotateY( 0deg ) translateZ( 140px )";
_albums[i].style.zIndex = MAX_ZINDEX;
}
// after
if( i > _index ) {
_albums[i].style[_transformName] = "translateX( "+ ( OFFSET * ( i - _index ) ) +"% ) rotateY( -"+ ROTATION +"deg )";
_albums[i].style.zIndex = BASE_ZINDEX + ( _albums.length - i );
}
}
};
/**
* Flow to the right
**/
function flowRight() {
// check if has albums
// on the right side
if( _index ) {
_index--;
render();
}
};
/**
* Flow to the left
**/
function flowLeft() {
// check if has albums
// on the left side
if( _albums.length > ( _index + 1) ) {
_index++;
render();
}
};
/**
* Enable left & right keyboard events
**/
function keyDown( event ) {
switch( event.keyCode ) {
case 37: flowRight(); break; // left
case 39: flowLeft(); break; // right
}
};
/**
* Register all events
**/
function registerEvents() {
_prevLink.addEventListener('click', flowRight, false);
_nextLink.addEventListener('click', flowLeft, false);
document.addEventListener('keydown', keyDown, false);
};
/**
* Initalize
**/
function init() {
// get albums & set index on the album in the middle
_albums = Array.prototype.slice.call( document.querySelectorAll( 'section' ));
_index = Math.floor( _albums.length / 2 );
// get dom stuff
_coverflow = get('#coverflow');
_prevLink = get('#prev');
_nextLink = get('#next');
// display covers
for( var i = 0; i < _albums.length; i++ ) {
var url = _albums[i].getAttribute("data-cover");
_albums[i].style.backgroundImage = "url("+ url +")";
}
// do important stuff
registerEvents();
render();
};
// go!
init();
}());
Raw
style.css
/*
* Layout
*/
html, body {
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);
height: 100%;
width: 100%;
text-align: center;
font-family: sans-serif;
}
/*
* Coverflow
*/
#coverflow {
height: 100%;
width: 100%;
-webkit-perspective: 600px;
}
#coverflow section {
display: position;
position: absolute;
top: 50%;
left: 50%;
width: 170px;
height: 170px;
margin-left: -90px;
margin-top: -90px;
background-color: white;
background-size: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-ms-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
-webkit-box-reflect: below 0
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), to(white));
}
/*
* Controls
*/
#controls {
position: absolute;
width: 100%;
bottom: 10%;
z-index: 1;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
color: #999;
font-size: 18px;
}
#controls a {
color: white;
cursor: pointer;
}
#controls a:hover {
color: 66FFFF;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment