Buenos días,
¿Sabéis si es posible crear con WebDesigner 19 el efecto de ondas de agua en una fotografía al pasar el puntero del ratón por encima?. Si lo fuera, ¿podríais decirme cómo hacerlo?
Hola, no entiendo bien lo que quieres hacer, tienes una foto del mar en la web y quieres que al pasar el ratón por encima se escuche el sonido de las olas? O tienes un vídeo del mar y quieres que se active al pasar el ratón?
Si es la opción del vídeo puedes probar este código, tienes que añadir la URL de la foto y del vídeo
<!DOCTYPE html>
<html>
<head>
<title>Reproductor de video con imagen de portada</title>
<style>
video::-webkit-media-controls { display:none !important; }
video::-webkit-media-controls-enclosure { display:none !important; }
video::-webkit-media-controls-panel { display:none !important; }
video:hover {
cursor: pointer;
}
</style>
</head>
<body>
<video width="400" height="400" controls="false" poster="ruta-imagen-portada.jpg">
<source src="url-archivo.mp4" type="video/mp4">
<source src="url.tuvideo.mov" type="video/mov">
Tu navegador no admite la reproducción de video HTML5.
</video>
<script>
var video = document.querySelector('video');
video.addEventListener('mouseover', function() {
video.play();
});
video.addEventListener('mouseout', function() {
video.pause();
});
</script>
</body>
</html>
Creo que ahora los navegadores no permiten la reproducción automática de vídeo, la cosa es probar. Un saludo
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.container').mousemove(function(e) {
var ripple = $('<div class="ripple"></div>');
$(this).find('.overlay').append(ripple);
ripple.css({
top: e.pageY - $(this).offset().top - ripple.height() / 2,
left: e.pageX - $(this).offset().left - ripple.width() / 2
}).on('animationend', function() {
$(this).rem
ove();
});
});
});
</script>
</body>
</html>
Hola Carlos, muchas gracias por tu interés. No es un vídeo, sino una fotografía del mar y lo que quiero, lo he visto en algunas web, es que cuando se pase el puntero del ratón por encima aparezcan ondas. Te pongo un enlace de YouTube donde lo hacen con Elementor: 
Si pudieras ayudarme te lo agradecería mucho.
Con el mismo programa no se puede hacer ese efecto
Mañana por la tarde intento hacer lo del vídeo con Magix webdesigner añadiendo ese archivo
Se puede hacer algo parecido mediante código pero no queda igual, prueba el código puedes cambiar los parámetros para modificar la transparencia de las ondas
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
display: inline-block;
overflow: hidden;
}
.image {
display: block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.ripple {
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.2); /* Cambia el valor alpha para ajustar la transparencia */
border-radius: 60%;
transform: scale(0);
opacity: 0;
pointer-events: none;
animation: rippleEffect 1s linear;
}
@keyframes rippleEffect {
0% {
transform: scale(0);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<img src="url-ruta-imagenjpg" alt="Imagen del mar" class="image" />
<div class="overlay"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.container').mousemove(function(e) {
var ripple = $('<div class="ripple"></div>');
$(this).find('.overlay').append(ripple);
ripple.css({
top: e.pageY - $(this).offset().top - ripple.height() / 2,
left: e.pageX - $(this).offset().left - ripple.width() / 2
}).on('animationend', function() {
$(this).rem
ove();
});
});
});
</script>
</body>
</html>
Puedes probar también con estos colores rgba modificando el código
background: rgba(0, 0, 0, 0); este es totalmente transparente no sé si se verá
background: rgba(120, 190, 220, 1);
Este es azul agua
Un saludo
De nuevo, muchas gracias Carlos. No sé donde me equivoco: Cojo la imagen del mar como marcador de posición y en el body copio este código, no?. Pero, de esta manera, cuando abro la página no aparece nada. ¿Dónde me equivoco?
Si logras crear el efecto de ondas de mar con Magix WebDesigner, me lo dices, vale?
Un saludo
Donde pone "URL de la imagen jpg" tienes que poner la URL de dónde este la imagen, sube la imagen a la carpeta donde tengas esa página web y luego pon la URL en el código
Hola Carlos. Sigue sin funcionar, no aparece nada cuando le doy al icono de vista previa. La ruta de mi imagen es: E:\Ice\WEB_ICE\- EFECTO AGUA\WEB\agua.jpg. Si pongo esta ruta, que es donde está la foto, no funciona.
También he probado poniendo: http://localhost:8000/virtd80744aa/index.htm. Esta es la url de la vista previa y en el código he puesto esta url cambiando index.html por agua.jpg. Estos dos ficheros están en la misma carpeta.
No sé donde me equivoco, ¿puedes ayudarme?
Un saludo
Hola de momento no pude hacer las pruebas hay algún tipo de error en los servidores
Respecto a la URL , no sé si funciona el local ,sube la imagen a tu servidor y pon la URL , a ver si se soluciona lo de los servidores de Magix y te dejo el ejemplo
Un saludo
Hola, aquí puedes ver el efecto
http://cinedibus.magix.net/public/ondas/
cambia la url
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
display: inline-block;
overflow: hidden;
}
.image {
display: block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.ripple {
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.2); /* Cambia el valor alpha para ajustar la transparencia */
border-radius: 60%;
transform: scale(0);
opacity: 0;
pointer-events: none;
animation: rippleEffect 1s linear;
}
@keyframes rippleEffect {
0% {
transform: scale(0);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<img src="http://cinedibus.magix.net/public/ondas/agua.jpg" alt="Imagen del mar" class="image" />
<div class="overlay"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.container').mousemove(function(e) {
var ripple = $('<div class="ripple"></div>');
$(this).find('.overlay').append(ripple);
ripple.css({
top: e.pageY - $(this).offset().top - ripple.height() / 2,
left: e.pageX - $(this).offset().left - ripple.width() / 2
}).on('animationend', function() {
$(this).rem
ove();
});
});
});
</script>
</body>
</html>
un saludo
Gracias de nuevo Carlos. Ahora sí me funciona, pero no es exactamente el mismo efecto de ondas de agua que me interesaba. ¿No se puede hacer con WebDesigner 12?
Hola, el efecto del vídeo no consigo hacerlo con webdesigner, lo siento. Un saludo
Hola Carlos,
He estado de viaje y no he podido darte las gracias antes. Muchas gracias por tu interés y esfuerzo.
Un saludo
De nada, para cualquier cosa por aquí estamos, gracias y un saludo.