Buscar un código

Código que permite hacer transparentes zonas para dejar ver una imagen; fondo, texto, contenidos...

Se pueden crear divisiones calculando el número total de ellas. Un bucle, se encarga de generar los elementos virtualmente. Al clicar en dichos elementos, el fondo correspondiente se hace transparente.

Tiene variadas aplicaciones: crear Menús, Intros, Onepage, etc. Lo vemos e imaginamos con el ejemplo.

Un saludo

Este código permite sobreponer parte de una imagen encima de la otra, y con el ratón mover parte de la imagen superior sobre la imagen inferior.



Para este efecto se utilizan dos imágenes, la que esta encima y la que se encuentra debajo, y pulsando sobre la imagen o arrastrando el ratón, podemos descubrir mas o menos la imagen inferior.
El encargado de crear este efecto es el estilo clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Para el ejemplo, he utilizado una imagen a color, y la misma imagen en escala de grises para visualizar el efecto.

Siguiendo el código de Xavi (https://www.lawebdelprogramador.com/codigo/JavaScript/2654-Cambiar-la-imagen-cada-5-segundos.html), lo he puesto dentro de una clase para que se pueda utilizar varias veces en una misma pagina.

Se ha creado una clase que recibe el array bidimensional con las imágenes y urls, el elemento que contendrá el link y la imagen, y los milisegundos que quieras que vaya rotando las imágenes.

Este script descarga la imagen de un canvas y te da opciones de guardado

Este simple código muestra como mover un elemento de una ubicación a otra.

En este ejemplo, se mueve una imagen de dentro de un div a otro div.



Puedes ver la misma versión con Jquery: https://www.lawebdelprogramador.com/codigo/JQuery/5992-Mover-una-imagen-de-un-div-a-otro-div-con-JQuery.html

Este simple código muestra como mover un elemento de una ubicación a otra.

En este ejemplo, se mueve una imagen de dentro de un div a otro div.



Puedes ver la misma versión en JavaScript Vanilla: https://www.lawebdelprogramador.com/codigo/JavaScript/5991-Mover-una-imagen-de-un-div-a-otro-div-con-JavaScript.html

Visor de imágenes ordenadas por álbumes. Ampliable, compatible, flexible...

Funciona al pulsar en el enlace del álbum. Aparecerán tantas imágenes como contenga. Haz click en una miniatura, se ampliará al tamaño visible de la ventana del navegador. Vuelve a clicar en la imagen para retornar al álbum.

Espero que sea útil.

Un saludo

Se trata de un visor de imágenes y/o fotos manual...
Cambia las imágenes adelante y atrás clicando en la parte izquierda o derecha de la imagen y/o pulsando las teclas de dirección-flechas.
La imagen permanece centrada y ajustada proporcional a las dimensiones.

Es un diseño responsive, se adapta a cualquier resolución de pantalla y/o dispositivo.

Espero sea útil.

Un saludo

Este simple código muestra como gestionamos los grados que ha girado cada elemento al pulsar con rotan encima de la imagen.

Este código muestra como aumentar o disminuir el zoom de una imagen de 0.10 en 0.10.