Coverflow in HTML5 for iPhone/iPod Touch
I have to do a web page destined for iPhone and iPod-touch that needs to incorporate the Coverflow style of apple in a page to display a list of videos.
I've heard something about gizmos that could help, but I can't find anything relevant or tha开发者_Go百科t could work properly with the iPhone/iPod-Touch navigation.
Anyone knows something that could help me getting started?
Thanks -Stephanie
Try ContentFlow: http://www.jacksasylum.eu/ContentFlow/
Here is an example that is working on my iPhone : http://www.majes.fr/
This is the best one which i found till now ;) Coverflow
This is a cross-browser implementation of Cover Flow: http://luwes.co/labs/js-cover-flow/
The primary mode works in HTML5 (JavaScript/CSS) and it has a fallback for older browsers in flash. It supports mobile, you can flip through the covers with a simple swipe gesture.
Tested on: Safari, Chrome, Firefox, Opera, IE8+, iPad, iPhone
This might help you: http://paulbakaus.com/2008/05/31/coverflow-anyone/
Though it doesn't seem that there is any official way to do it because CSS transforms only all a 2d matrix, so you can't get a trapezium shape.
you can find tons of coverflow samples in google but all the samples that i found are too complex(a lot of files or hard to implement) and they don't give what i was looking so i decide to create a coverflow
1.- less files
2.- easy to implement
3.- Works with Webkit (Safari, Safari Mobile and Chrome)
the code that i'm going to show is just to give you a clue of what can you do with your project
this is a very simple sample that only shows you the essential it's not a final work
this coverflow works with a input range (slider) and thats it
When you get the idea of how coverflow works you will be able to add more features clicks, touches, flip cover....
Finally here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CoverFlow</title>
<style>
html { height: 100%; }
body { background-image: -webkit-radial-gradient(gray 0%, black 100%); }
#coverflow {
width: 800px;
height: 400px;
overflow: hidden;
margin: 100px auto;
-webkit-perspective: 500;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transform-style: preserve-3d;
}
#container {
height: 100%;
width: 100%;
margin-left: 350px;
background-color: transparent;
-webkit-transition: all 400ms ease-in-out;
}
.holder {
float: left;
position: absolute;
margin-top: 100px;
margin-left: 20px;
-webkit-transition: all 300ms ease-in-out;
-webkit-box-reflect: below 4px
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, .3)),
color-stop(1, rgba(255, 255, 255, .3))
);
}
.slider {
position: absolute;
width: 200px;
height: 30px;
margin: 0 0 0 430px;
-webkit-appearance: none !important;
border-radius: 6px;
border: 1px solid white;
background: #999;
opacity: .5;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 50px;
height: 18px;
border-radius: 8px;
border: 2px solid #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999), color-stop(.5, #000) );
}
#log { color: white; font-size: 30pt; }
</style>
</head>
<body onload="flow()">
<div id="coverflow">
<div id="container">
<div class="holder" id="1"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="2"><img src="../img/2.jpg" width="200"></div>
<div class="holder" id="3"><img src="../img/3.jpg" width="200"></div>
<div class="holder" id="4"><img src="../img/4.jpg" width="200"></div>
<div class="holder" id="5"><img src="../img/5.jpg" width="200"></div>
<div class="holder" id="6"><img src="../img/6.jpg" width="200"></div>
<div class="holder" id="7"><img src="../img/7.jpg" width="200"></div>
<div class="holder" id="8"><img src="../img/8.jpg" width="200"></div>
<div class="holder" id="9"><img src="../img/9.jpg" width="200"></div>
<div class="holder" id="10"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="11"><img src="../img/2.jpg" width="200"></div>
</div>
</div>
<input id="slider" class="slider" type="range" min="1" max="11" value="6" onchange="flow();">
<a id="log">value</a>
<script>
function flow() {
var space = 2;
var coverCount = 11;
var current = slider.value;
var cover = document.getElementById(current + "");
var position = [0, 230, 180, 130, 80, 30, -20, -70, -120, -170, -220, -270];
for (var i = current; i < (coverCount +1); i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i+space)*50)+"px,0,-10px) rotateY(-65deg)";
document.getElementById(i + "").style.zIndex = -i + "";
}
for (var i = 1; i < current; i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i-space)*50)+"px,0,-10px) rotateY(65deg)";
document.getElementById(i + "").style.zIndex = i + "";
}
cover.style.webkitTransform = "translate3d("+(slider.value*50)+"px,0,100px) rotateY(0deg)";
cover.style.zIndex = current + "";
document.getElementById("container").style.marginLeft = position[current] + "px";
document.getElementById("log").innerHTML = slider.value + "";
}
</script>
</body>
</html>
i know you can find a lot of better coverflows this is just to share
Just remember to replace the path of the images and/or names
Hope it helps
Good Luck
I mainly stick with native App development, so I don't know if there is an existing cover flow implementation, but using Dashcode Parts you can add some more complex UI elements.
You could try xFlow! http://xflow.pwhitrow.com
i just made this http://coulisse.luvdasun.com/
not sure if it works on iphone / ipod, i still have to test that
gr.
You can try this, I have developed specifically for iOS devices. Has touch gestures enabled. http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/
加载中,请稍侯......
精彩评论