Como animar anillos en forma de ondas

Written by:

|

Hola, en esta publicacion vamos a ver como crear anillos animados que podremos usar como parte de nuestros banners, o en cualquier lugar en el que deseen usarlo conjuntamente con imagenes o texto.

El Codigo HTML

Nuestro codigo HTML va a ser bien simple, los circulos seran creados usando etiquetas div las cuales vamos a personalizar usando CSS. Ademas, cada div va a contener clases de estilo divididas para poder usarlas de manera mas generalizada. Y como queremos que simulen efecto en particular, incluiremos una animation-delay en cada div para simular el efecto de onda. Sin mas les dejo abajo el HTML.

<div class="circle-bigbox">
        <div class="circle-box pos-relative">
            <div class="circle csize-0 pos-absolute animstate" style="animation-delay: 0.4s;"></div>
            <div class="circle csize-1 pos-absolute animstate" style="animation-delay: 0.8s;"></div>
            <div class="circle csize-2 pos-absolute animstate" style="animation-delay: 1.2s;"></div>
            <div class="circle csize-3 pos-absolute animstate" style="animation-delay: 1.6s;"></div>
        </div>
</div>

Si guardas el documentos en este estado, la vista previa mostrara una pagina en blanco, pero el contenido esta presente. Para ver el contenido pasaremos al estilo css.

Configurando el estilo CSS

Aqui esta el contenido CSS, cada clase declarada en el codigo de arriba, lo vamos a definir aqui abajo, incluyendo la animacion.

<style>
        .pos-relative{position: relative;}
        .pos-absolute{position: absolute;}
        .circle-bigbox{height: calc(10*8vw); width:calc(10*8vw);margin: auto; display: block;}
        .circle-box{width: 100%; height: 100%;}
        .circle{border-radius: 50%; opacity: 0;}
        .csize-0{width: 100%; height: 100%; top: 0;left: 0; border: 4px dashed rgba(0, 0, 0, .25);}
        .csize-1{width: 80%; height: 80%; top: 10%; left: 10%; border: 4px dashed rgba(0, 0, 0, .5);}
        .csize-2{width: 60%; height: 60%; top: 20%; left: 20%; border: 4px dashed rgba(0, 0, 0, .75);}
        .csize-3{width: 40%; height: 40%; top: 30%; left: 30%; border: 4px dashed rgba(0, 0, 0,1);}
        .pulse-circle{-webkit-animation: pulsing-circle 2.4s forwards; animation: pulsing-circle 2.4s forwards;}
        .fade-in-img{animation: fade-in 2.4s forwards;}
        
        @keyframes fade-in {
            from {opacity: 0; transform: scale(.7);}
        }        
        @keyframes pulsing-circle{
            from{top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.1);}
            to{opacity: 1;}            
        }
</style>

Al final este estilo, si refrescamos el navegador podran ver un resultado similar a este:

ripples rings using divs and styles

Resultado final sera este que muestro abajo:

Un extra para mostrar en pantalla con Javascript

El extra va a ser este codigo javascript que permitira que los anillos se muestren en cuanto entren en la zona de la pantalla. O sea, que con este codigo podemos usar nuestra animacion en un banner que se encuentre en cualquier parte de nuestra pagina, y este solo se activara una vez la zona en la que se encuentra se muestre en pantalla. La explicacion simple va a ser que vamos a estar chequeando la posicion de la animacion con respecto al alto de la pantalla y asi activar la animacion en el momento adecuado. Sin mas el codigo:

<script>
        (function(){
            var ppanim,
                winHeight;
            
            function init(){
                ppanim = document.querySelectorAll('.animstate');
                winHeight = window.innerHeight;
            }
            
            function chkpos(){
                for(var i =0; i<ppanim.length; i++){
                    var elnh = ppanim[i];
                    var posfromtop = ppanim[i].getBoundingClientRect().top;					
                    if(posfromtop - winHeight <= 0){			
                        elnh.classList.add('pulse-circle');
                    }
                }
            }            
            window.addEventListener('scroll', chkpos);
            window.addEventListener('resize', init);
            
            init();
            chkpos();
        })();
    </script>

Hasta aqui esta pequeña publicacion, espero les haya gustado y nos vemos en la proxima aventura.

Continue Reading…