1. Inicio
  2. Pregunta y respuesta
  3. Coverflow en HTML5 para iPhone/iPod Touch

Coverflow en HTML5 para iPhone/iPod Touch

2010-04-18 14 views
8

Tengo que hacer una página web destinada para iPhone y iPod touch que necesite incorporar el estilo de Apple Coverflow en una página para mostrar una lista de videos.Coverflow en HTML5 para iPhone/iPod Touch

He escuchado algo sobre los artilugios que podría ayudar, pero no puedo encontrar nada relevante o que podría funcionar correctamente con la navegación de iPhone/iPod-Touch.

¿Alguien sabe algo que podría ayudarme a comenzar?

Gracias -Stephanie

Fuente

2010-04-18 Stef

Respuesta

0

me quedo sobre todo con el desarrollo de aplicaciones nativas, así que no sé si hay una aplicación de flujo de la cubierta existente, pero utilizando Dashcode Parts puedo añadir algunos elementos de interfaz de usuario más complejas.

Fuente

2010-04-18 16:06:26 jessecurry

+0

Sí, veo que dashcode puede ayudar a agregar elementos más complejos con facilidad, pero lamentablemente nada parece apuntar a algo que se acerque siquiera al flujo de cobertura. Tendré una mirada más profunda, tal vez pueda encontrar algo que complacerá a mi Fiscalía de todos modos. Gracias. – Stef

1

Esto podría ayudarle a: http://paulbakaus.com/2008/05/31/coverflow-anyone/

A pesar de que no parece que haya ninguna forma oficial de hacerlo porque las transformaciones CSS solamente toda una matriz 2D, por lo que no puede obtener una forma de trapecio.

Fuente

2010-04-18 16:06:58

2

Este es el mejor que he encontrado hasta ahora;) Coverflow

Fuente

2010-12-03 13:23:03

+0

mejor o primero – atilkan

2

Se trata de una aplicación multi-navegador de Cover Flow: http://luwes.co/labs/js-cover-flow/

El principal modo funciona en HTML5 (JavaScript/CSS) y tiene una reserva para navegadores más antiguos en flash. Es compatible con dispositivos móviles, puede hojear las portadas con un simple gesto de deslizar.

Probado en: Safari, Chrome, Firefox, Opera, Internet Explorer 8 +, iPad, iPhone

Fuente

2012-07-21 12:00:43 luwes

+0

Es una buena implementación, sin embargo, la mayor desventaja es que no se degrada con elegancia (deshabilitar JavaScript y boom, sin contenido) y no es accesible para las personas con discapacidad. Como se basa en una fuente JSON externa, tampoco se puede usar en galerías generadas por CMS como Wordpress. En lugar de analizar un archivo JSON, hubiera sido mejor diseñar elementos de figura en el html. – KPM

+0

Gracias por los comentarios. Sin embargo, siguiendo el comentario externo de JSON, ¿estás diciendo que es imposible tener un archivo JSON en un sitio de Wordpress? No obstante, el script también permite JSON en línea. – luwes

0

Puede probar esto, he desarrollado específicamente para los dispositivos IOS. Tiene gestos táctiles habilitados. http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/

Fuente

2012-08-21 13:20:21

+0

El enlace solitario es [considerada como una respuesta deficiente] (http://stackoverflow.com/faq#deletion) ya que no tiene sentido por sí mismo y no se garantiza que el recurso objetivo esté activo en el futuro. [Sería preferible] (http://meta.stackexchange.com/q/8259) incluir aquí las partes esenciales de la respuesta y proporcionar el enlace de referencia. – j0k

1

puede encontrar toneladas de muestras CoverFlow en Google pero todas las muestras que encontré es demasiado complejo (una gran cantidad de archivos o difícil de implementar) y que no se dé por lo que estaba buscando así que decido para crear un coverFlow

1.- archivos menos

2.- fácil de implementar

3.- Funciona con Webkit (Safari, Safari y Chrome móvil)

el código que voy a mostrar es sólo para darle una idea de lo que se puede hacer con su proyecto

este es un muy simple muestra que sólo se muestra el esencial que no es un trabajo final

este coverFlow trabaja con un rango de entrada (control deslizante) y eso es todo

Cuando se entiende la idea de cómo funciona coverFlow usted será capaz de agregar más funciones cli CKS, toca, cubierta abatible ....

Finalmente aquí está el código:

<!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>

sé que usted puede encontrar un montón de mejores coverflows esto es sólo para compartir

Sólo recuerde para reemplazar el camino de las imágenes y/o nombres de

Espero que ayuda

buena suerte

Fuente

2012-09-28 05:18:12

Cuestiones relacionadas

 Cuestiones relacionadas