Como añadir un efecto de distorsión a un fondo.
El efecto conseguido será de que cuanto mas se aleje el puntero del ratón del centro de la pantalla mas se distorsionará la imagen de fondo, sin embargo el texto y todo lo que esté dentro de este div no se verá afectado.
Pasos a seguir:
Al div que contiene la imagen de fondo se le cambiará el id, y si no se quiere tocar el código se le denominará como miFondo
Añadir un elemento CodeBlock y en la parte de JavaScript pegamos el código de abajo
jQuery(document).ready(function(){
const fondo = document.querySelector('#miFondo')
let calculado = 0
var width = window.innerWidth /200
window.addEventListener('resize', function(){
width = window.innerWidth /200
})
document.addEventListener('mousemove', function(raton){
let valor = raton.pageX /100
if(valor > width){
calculado = valor - width
}else{
calculado = width-valor
}
fondo.style.backdropFilter = 'blur('+calculado+'px)';
})
})
Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.
Nos vemos en la próxima. ?
El diseño fluido se refiere a un enfoque de diseño web en el que las dimensiones de los elementos son flexibles, escalando proporcionalmente al tamaño de la pantalla del usuario.
En lugar de medidas fijas de píxeles, utiliza unidades relativas como porcentajes o ems para garantizar que el diseño se ajuste sin problemas, independientemente del dispositivo.
Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.
Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen
