Efectos de desplazamiento con el uso de eventos táctiles CSS3

Estoy utilizando desplazamiento y transiciones CSS3 para mostrar y ocultar una imagen. En dispositivos móviles, me gustaría usar la misma transición para eventos táctiles.Efectos de desplazamiento con el uso de eventos táctiles CSS3

Básicamente, el primer toque realizaría el efecto de desplazamiento o el desplazamiento, y el toque realizaría el desplazamiento.

Me gustaría evitar el uso de JavaScript para hacer esto. Si hay una manera de hacerlo con CSS3 puro esa sería la mejor opción.

Fuente

2011-11-30 mattwallace

estás cuestión es en realidad bastante impreciso; No estoy seguro si está preguntando * cómo * hacerlo en cualquiera de los dos, o puede hacerlo solo en CSS. Si desea obtener más información sobre cómo se puede hacer esto en javascript, actualice su pregunta y puedo actualizar mi respuesta :) – rlemon

* su pregunta ;-) –

Posible duplicado de [: la pseudo-clase activa no funciona en safari móvil] (https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari) – JakeGould

Use la pseudoclase :active en su css, luego agregue ontouchstart="" y onmouseover="" a la etiqueta body.

El código siguiente es un extracto de mi sitio, en el que tengo botones que hacen más pequeños y brillan en blanco cuando se cernían (en PC) o se mantienen abajo (en dispositivos táctiles)

<style> 
.boxbutton:active{ 
    -webkit-transform:scale(0.9); 
    -moz-transform:scale(0.9); 
    -ms-transform:scale(0.9); 
    -o-transform:scale(0.9); 
    transform:scale(0.9); 
    -webkit-box-shadow:0px 0px 20px #FFF; 
    -moz-box-shadow:0px 0px 20px #FFF; 
    -o-box-shadow:0px 0px 20px #FFF; 
    box-shadow:0px 0px 20px #FFF; 
} 
</style> 


<body ontouchstart=""> 
    <a href="#teamdiv"> 
     <div class="boxbutton" id="teambb"> 
      <h5>Team</h5> 
     </div> 
    </a> 
</body>

Las siguientes ediciones son ya no es relevante, porque he suprimido las instrucciones originales, incorrectas, pero si estuviera aquí antes de que éstos aún pueden ser útiles

EDIT: he descubierto que funciona de manera más fiable si, en lugar de poner ontouchstart="" en cada enlace, ponerlo en la etiqueta <body>. Por lo que su cuerpo de la etiqueta debe tener este aspecto <body ontouchstart=""> y sus enlaces tener este aspecto

<a href="#teamdiv"> 
    <div class="boxbutton" id="teambb"> 
    <h5>Team</h5> 
    </div></a>

EDIT 2: he dado cuenta de que, en lugar de copiar el CSS y utilizar consultas tamaño de la pantalla para el escritorio, sólo tiene que añadir `onmouseover = "" a la etiqueta del cuerpo también, por lo tanto, la pseudoclase activa será invocada por el mouse en el escritorio Y tocando en el móvil. Simplemente puede ignorar las divagaciones sobre consultas de medios si hace esto.

Fuente

2012-10-26 03:23:30

thx, funciona para mí. – Mario

Esto funciona. Gracias. Pero me encantaría una explicación de * why * ontouchstart = "" y onmouseover = "" lograr el efecto deseado. Ciertamente no es evidente para mí. –

Bueno, puede que no sea la mejor persona para explicar esto, pero la forma en que lo entiendo es la siguiente: ontouchstart y onmouseover son oyentes, esperan que el elemento en cuestión sea tocado o desplazado (en este caso) y luego se llama la función javascript que se nombra dentro de las comillas. En nuestro caso, dejamos las citas vacías para que no se haya ejecutado ningún script, pero debido a que los oyentes están allí, el navegador web todavía los considera activos. La pseudoclase activa se aplica a un elemento si actualmente está activo con javascript. Los oyentes hacen que se apliquen las pseudo clases activas. –

Si no desea modificar el código HTML, puede probar esto:

<script> 
    document.body.addEventListener('touchstart',function(){},false); 
</script>

Fuente

2013-09-06 10:00:12 RyanBay

Esto no funciona. – matthewpavkov

@matthewpavkov funcionaría pero debería ser addEventListener en lugar de addEventlistener. –

Efectos de desplazamiento con el uso de eventos táctiles CSS3

Respuesta

Cuestiones relacionadas