Je dois faire une page web destinée à l'iPhone et à l'iPod-touch qui doit incorporer le style de pomme Coverflow dans une page pour afficher une liste de vidéos.Coverflow en HTML5 pour iPhone/iPod Touch
J'ai entendu quelque chose sur les gadgets qui pourraient aider, mais je ne trouve rien de pertinent ou qui pourrait fonctionner correctement avec la navigation iPhone/iPod-Touch.
Quelqu'un sait quelque chose qui pourrait m'aider à démarrer?
Merci -Stephanie
Je tiens surtout avec le développement natif App, donc je ne sais pas s'il y a une mise en œuvre des flux de couverture existante, mais en utilisant Dashcode Parts vous pouvez ajouter quelques éléments d'interface utilisateur plus complexes.
Cela pourrait vous aider: http://paulbakaus.com/2008/05/31/coverflow-anyone/
Bien qu'il ne semble pas qu'il y ait de façon officielle le faire parce que CSS ne transforme que tout une matrice 2d, de sorte que vous ne pouvez pas obtenir une forme de trapèze.
Essayez ContentFlow: http://www.jacksasylum.eu/ContentFlow/
Voici un exemple qui fonctionne sur mon iPhone: http://www.majes.fr/
Vous pouvez essayer xFlow! http://xflow.pwhitrow.com
je viens de faire ce http://coulisse.luvdasun.com/
ne sais pas si cela fonctionne sur iphone/ipod, je dois encore vérifier que
gr.
Ceci est une implémentation multi-navigateur de Cover Flow: http://luwes.co/labs/js-cover-flow/
Le mode primaire fonctionne en HTML5 (JavaScript/CSS) et il a un repli pour les navigateurs plus anciens en flash. Il prend en charge les mobiles, vous pouvez faire défiler les couvertures d'un geste simple.
Testé sur: Safari, Chrome, Firefox, Opera, IE8 +, iPad, iPhone
C'est une bonne implémentation, mais le plus grand inconvénient est qu'il ne se dégrade pas gracieusement (désactiver JavaScript et boom, pas de contenu) et n'est absolument pas accessible aux personnes handicapées. Parce qu'il repose sur une source JSON externe, il est également inutilisable dans les galeries générées par CMS comme Wordpress. Au lieu d'analyser un fichier JSON, il aurait été préférable de styliser les éléments de la figure dans le HTML. – KPM
Merci pour vos commentaires. Ne pas suivre le commentaire JSON externe cependant, dites-vous qu'il est impossible d'avoir un fichier JSON dans un site Wordpress? Néanmoins, le script permet également JSON en ligne. – luwes
Vous pouvez essayer, j'ai développé spécialement pour les appareils iOS. A des gestes tactiles activés. http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/
Le lien solitaire est [considéré comme une mauvaise réponse] (http://stackoverflow.com/faq#deletion) car il n'a aucune signification en lui-même et la ressource cible n'est pas garantie d'être vivante dans le futur. [Il serait préférable] (http://meta.stackexchange.com/q/8259) d'inclure les parties essentielles de la réponse ici, et de fournir le lien pour référence. – j0k
vous pouvez trouver des tonnes d'échantillons coverflow dans google mais tous les échantillons que je trouve sont trop complexes (beaucoup de fichiers ou difficiles à mettre en œuvre) et ils ne donnent pas ce que je recherchais je décide pour créer un CoverFlow
moins de fichiers
1.-facile à mettre en œuvre 2.-
3.- Fonctionne avec Webkit (Safari, Safari Mobile et Chrome)
le code que je vais vous montrer est juste pour vous donner un indice de ce que vous pouvez faire avec votre projet
c'est très simple échantillon qui vous montre que le essentiel ce n'est pas un travail final
ce CoverFlow fonctionne avec une plage d'entrée (curseur) et thats it
Lorsque vous avez l'idée de la façon dont fonctionne CoverFlow vous serez en mesure de ajouter plus de fonctionnalités cli CKS, touche, couvercle rabattable ....
Enfin, voici le 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>
je sais que vous pouvez trouver beaucoup de mieux coverflows c'est juste de partager
Rappelez-vous de remplacer le chemin des images et/ou des noms
it helps
Bonne chance
Oui, je vois dashcode peut aider à ajouter des éléments plus complexes facilement, mais malheureusement, rien ne semble pointer vers quelque chose même proche de coverflow. Je jetterai un coup d'oeil plus profond, peut-être que je peux trouver quelque chose qui satisfera mon DA de toute façon. Merci. – Stef