jquery - toda - modal responsive css
Patrón de triángulo sensible a la pantalla completa (2)
Salir de la caja un poco - ¿por qué no capturar todos los eventos de clic, luego extraer las coordenadas x, y y hacer algunas matemáticas simples para determinar en qué "triángulo" se produjo el clic?
Si necesita un triángulo real, puede agregar un svg u otro gráfico, pero no base su UI en ese gráfico real, ¿basarlo en la ubicación del clic?
Si su diseño / IU necesita triángulos, esa es una pregunta diferente de la detección. Puede aplicar el diseño de "triángulo" con consultas de medios y puntos de interrupción complicados. Sin embargo, su pregunta no contenía demasiados detalles para guiar una respuesta a sus problemas de UI.
Recientemente profundicé un poco más en el diseño de UX móvil y encontré un tema interesante con respecto a la selección de 1 mano / pulgar.
La idea principal es que tienes 2 áreas triangulares con las que puedes hacer clic con el pulgar. Intenté encontrar una solución a través de CSS o jQuery para crear 2 áreas de triángulo que son clic / touch-able pero fallé.
Lo intenté:
- fuentes del icono
- svgs (esto no funcionó, ya que svgs son todavía rectangulares)
- divs con bordes en forma de triángulo
- lienzo (no funcionó tan bien)
- Fuentes ASCII
- jQuery, nada realmente útil en este frente: /
- divs rotados (transformación CSS)
¿Tiene alguna sugerencia acerca de cómo puedo lograr 2 triángulos sensibles que se ajustan a la pantalla, no se superponen como en esta pantalla, que se puede hacer clic y accesible en el DOM?
El punto principal en términos de UI es que los usuarios necesitan ver las áreas de clic / tocar (visualmente) para determinar la posibilidad de interacción. Obtener el área de un clic (en un estilo de triángulo) probablemente no sea el problema. Sin embargo, mostrarles a los usuarios que necesitan interactuar en un área determinada es la clave.
¡No quiero tener escalas o diferentes versiones de imágenes! Me gustaría ver una solución CSS o JavaScript ...
Supongo que el mayor problema es que el triángulo no es proporcional + la capacidad de respuesta
Esta imagen debe ilustrar la idea: triángulo receptivo http://s7.directupload.net/images/140212/7q8q4nha.jpg
Tu mejor opción es usar un simple SVG
<svg viewBox="0 0 1 1" preserveAspectRatio="none">
<polyline points="0,0 1,0 0,1" fill="#F00" id="top"/>
<polyline points="1,0 1,1 0,1" fill="#0F0" id="bottom"/>
</svg>
Puede usar CSS para aplicar estilo a los elementos al desplazarse:
#top:hover {
fill: #880000;
}
Y jQuery para detectar si se ha hecho clic en un elemento:
$(''#top'').click(function () { ...
Aquí hay una demostración: http://codepen.io/Godwin/pen/mIqlA