Lo de las imágenes, que sería un
slider o rotador, podrías hacerlo así:
Código HTML:
Ver original <img src = "imagen1.jpg" /> <img src = "imagen2.jpg" /> <img src = "imagen3.jpg" /> <img src = "imagen4.jpg" />
Código CSS:
Ver original#slider img{
position: absolute;
opacity: 0;
transition: .4s;
}
Código Javascript
:
Ver originalvar div = document.getElementById("slider"),
img = div.getElementsByTagName("img"),
total = img.length,
i = 0,
slider = function(){
img[i].style.opacity = 0;
i = i == total - 1 ? 0 : ++i;
img[i].style.opacity = 1;
},
interval = null;
img[i].style.opacity = 1;
div.addEventListener("mouseover", function(){
slider();
interval = setInterval(slider, 1500);
}, false);
div.addEventListener("mouseout", function(){
clearInterval(interval);
});
Lo que hago es simple. Primero, le doy una posición absoluta a las imágenes para que queden una sobre otra, las hago opacas al punto de que no se vean y añado un tiempo de transición de 0.4 segundos para que se recree el efecto de difuminado. Luego, en el código JS, tomo al elemento contenedor de las imágenes y en él, busco a todas las imágenes que contenga, obtengo el total de ellas, inicializo un contador con el que iré rotando las imágenes y creo una función en la cual ocultaré a la imagen actual, actualizo al contador y muestro a la siguiente imagen. Más abajo, hago que por defecto se muestre la primera imagen con el efecto de difuminado (alterando su opacidad). Y para que todo esto surta efecto, controlo las acciones con los eventos
mouseover y
mouseout. Con el primero, ejecuto la función para el cambio de imagen una sola vez y luego establezco un intervalo de 1500 milisegundos o 1.5 segundos para que mientras el cursor se mantenga sobre el elemento contenedor de las imágenes, la función del cambio de imagen se efectúe en intervalos de 1.5 segundos. Cuando retiremos el cursor, limpiamos dicho intervalo, paralizando el accionar de la función.
Para lo de las escenas del vídeo, no sabría cómo ayudarte, pero una búsqueda te podría servir, me parece haber visto lo que mencionas.
Saludos
