Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

S6. Control deslizante táctil 3D para móviles


  Publicado hace |  Etiquetas: , , , , , , ,

Que es S6?

Un control deslizante 3D ligero que funciona con el toque o contacto sobre los móviles mediante transiciones aceleradas por hardware que generalmente son compatibles; S6 es creado por iDangero.us

Objetivos

El objetivo de S6 es llegar a utilizarlo en sitios web para móviles y web. Diseñado principalmente para iOS, pero también trabaja en nuevos androides, así como los últimos navegadores de escritorio con soporte de transformaciones 3D.

Características

  • Toque de rotación
  • Toque emulación. Esta función será útil si vas a utilizar en el escritorio. S6 acepta eventos del ratón, como eventos de toque haciendo clic y arrastrando para girar deslizante.
  • Vertical/Horizontal. S6 tiene estos 2 modos para la rotación y golpes.
  • S6. Un cubo de diversión ya que S6 tiene seis caras.
  • Modo Libre. Cuando este control está activado no tienen posiciones fijas.
  • Rotación/ajuste de cambio de tamaño. S6 se reinicializa después de la rotación o cambio de tamaño de dispositivo o navegador.
  • Sensible. Se puede utilizar con una anchura o/y la altura se define en porcentajes. Útil para el uso en dispositivos con resoluciones diferentes.
  • HTML. Podremos poner cualquier contenido HTML dentro de la diapositiva.
  • API. S6 viene con API muy rico. Te permite crear tu paginación propia, “siguiente” y “anterior” botones “play” y los botones de “pausa”.
  • Compatibilidad. Compatible con los navegadores que soportan CSS3 Transformaciones 3D, como Mobile Safari (iOS) más reciente, el navegador nativo de Android, Google Chrome, Safari, Firefox, etc.
  • Fallback. S6 viene con característica sorprendente si quieres usarlo en muchos dispositivos que no admiten transformaciones 3D. En este caso es necesario también incluir Swiper y si el navegador no soportan transformaciones 3D, S6 lo detectará.
  • Bibliotecas. S6 está diseñado para su uso con jQuery (jQuery Mobile) o bibliotecas de JavaScript Zepto.
  • Fácil de usar. Debido a la API simple y el diseño HTML.
  • Documentación. S6 viene con documentación completa ilustrada PDF.
  • Ultra ligero. Sólo el 3,4 KB minified y comprimido

A continuación te presentamos un video donde se muestra lo que S6 puede hacer en los móviles.

Imagen de previsualización de YouTube

Ejemplo de Uso en HTML


<div>

<div class="s6-wrapper">

<!--First Slide-->

<div>

<!-- Any HTML content of the first slide goes here -->

</div>

<!--Second Slide-->

<div>

<!-- Any HTML content of the second slide goes here -->

</div>

<!--Third Slide-->

<div>

<!-- Any HTML content of the third slide goes here -->

</div>

<!--Fourth Slide-->

<div>

<!-- Any HTML content of the third slide goes here -->

</div>

</div>

</div>

Para más información visita la Página oficial de s6 http://www.idangero.us/sliders/s6/

Fuente: Jorge Soza Suazo

comments powered by Disqus