es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


5 secuencias de comandos de control deslizante de comparación de imágenes gratuitas

Los controles deslizantes superpuestos le permiten hacer comparaciones entre dos imágenes, generalmente un tipo de antes-después, con las dos imágenes superpuestas entre sí. El usuario puede arrastrar un deslizador que se puede manipular para mostrar menos de la imagen anterior y más de la imagen posterior, y viceversa.

Es la forma perfecta para ciertos escenarios, como ver los duros efectos de la atmósfera de Marte o cómo los paisajes de la ciudad cambian durante medio siglo.

Para los diseñadores, también es una gran manera de reflexionar sobre la cantidad de cambio que una técnica o enfoque tiene en una imagen original. Hay varias bibliotecas JS que puede usar con fines comparativos. Aquí hay 5 de ellos.

Veinte Veinte

Twentytwenty es una herramienta visual para que sea fácil notar las diferencias entre dos imágenes. Esta herramienta utiliza jQuery y jquery.event.move para funcionar. Es muy fácil de usar, simplemente apila dos imágenes en un contenedor, luego llama a twentytwenty(); para el contenedor.

Entonces:

 $ ("# contenedor"). twentytwenty (); 

Twentytwenty es sensible y funciona para todos los dispositivos, y si utiliza el marco de Foundation, esto funcionará de la caja.

Yuxtaponer

Juxtapose le ayuda a comparar dos elementos multimedia (fotos o GIF) y le permite resaltar el cambio entre las imágenes a lo largo del tiempo. Este plugin es fácil de usar y funciona en todos los dispositivos. Simplemente proporcione dos imágenes y luego llame al complemento con las opciones disponibles.

En las opciones, puede establecer la posición de inicio del control deslizante, configurarlo en posición vertical u horizontal, agregar etiquetas y créditos, animación y más.

Pruebe una demostración a continuación:

imgSlider

imgSlider es un plugin jQuery simple para hacer el control deslizante de comparación de imágenes. El uso es simple y fácil: después de incluir su JS y CSS, ajuste las imágenes en div con la clase left para la imagen anterior, y right clase right para la imagen posterior, luego .slider(); llamando a .slider(); . Las opciones del complemento incluyen establecer la posición inicial del control deslizante y agregar / mostrar instrucciones en el control deslizante.

Llamar al plugin:

 $ ('. slider'). slider (); 
Cocoen

Cocoen permite el contacto con el uso del evento jQuery-Touch. Es fácil de aplicar debido a una estructura HTML similar al plugin Twentytwenty . En la pila de scripts, además de jQuery, debe incluir la biblioteca jQuery Touch Event, junto con este complemento.

$ (document) .ready (function () {$ ('. cocoen'). cocoen ();});

Pruebe una demostración a continuación:

Control deslizante de comparación de imágenes

CodyHouse hizo una demostración de un control deslizante de comparación de imágenes con CSS3, jQuery y algunos scripts para manejar el evento de arrastre y agregar soporte móvil. Puede seguir la explicación completa y las instrucciones de uso de este complemento aquí y ver la demostración aquí.

Pruebe una demostración a continuación:

Aquí hay 3 más:

Cato : otros complementos necesitan jQuery como dependencia, pero Cato no requiere dependencia para funcionar, por lo que es una biblioteca más liviana para los controles deslizantes de comparación de imágenes. El uso es fácil, solo incluya la biblioteca CSS y JS de Cato y siga su estructura HTML.

Hay opciones disponibles para aplicar en su control deslizante, que incluyen agregar información sobre herramientas, cambiar la dirección del control deslizante e incluso agregar efectos de filtro como sepia y escala de grises. Sin embargo, debe tener en cuenta que Cato actualmente solo tiene soporte para WebKit.

Antes Después - Esto es ligero, totalmente receptivo, y funciona en cualquier diseño y tamaño. Puedes ver las demostraciones en vivo en Codepen.

Control deslizante de comparación de video HTML5 : cuando otros desarrolladores intentan crear un control deslizante de comparación para las imágenes, Dudley Storey aplica el control deslizante al video. Para hacer el trabajo, utilizó el jQuery y solo unas pocas líneas de código. Vea la demostración en Codepen para ver la acción.

8 Limitaciones de Tumblr que probablemente no sepa

8 Limitaciones de Tumblr que probablemente no sepa

Ya hemos cubierto algunos consejos y trucos de Tumblr que pueden ayudarlo con su experiencia de blogging. Además de eso, presentamos algunas herramientas y extensiones para sacar el máximo provecho de Tumblr. Pero apostamos a que no sabía que existen limitaciones en cuanto a lo que puede hacer en Tumblr, por ejemplo, solo puede publicar una determinada cantidad de publicaciones por día . Un

(Consejos de tecnología y diseño)

20 mejores regalos para aspirantes a diseñadores de movimiento UX

20 mejores regalos para aspirantes a diseñadores de movimiento UX

Los diseñadores de interfaces están cada vez más interesados ​​en el diseño de UX con maquetas animadas que emulan las acciones de los usuarios. Estas maquetas de UX se basan en el movimiento con efectos animados para definir cómo debe responder una interfaz a la entrada del usuario .La mayoría de los diseñadores de UX aprenden a usar software para crear estas animaciones. Las dos o

(Consejos de tecnología y diseño)