Fade Radial js or canvas

Question

Fade Radial js or canvas

Navigation

#1 by (0 votes)

5

Hello, I wonder if there is any transition I can make in radial or ink style dissolving (as if it were dripping ink)? For that purpose it will be cooler to open the site.

Fiddle: link

$(document).ready(function () {
    
        $('.fase_1').fadeIn(200);
        $('.fase_2').delay(300).fadeIn(200);
        $('.fase_3').delay(800).fadeIn(200);
    
})

#preload{position:fixed;width:100%;height:100%;z-index:50;overflow:hidden;}
#preload div{position:absolute;top:0;left:0;width:100%;height:100%;display:none;}
#preload div img{height:100%;width:100%;}
#preload{background-color: #2F2727;background-image: url(../images/bg_verde.jpg);background-position: center center;background-repeat: no-repeat;background-size:cover;background: -webkit-gradient(radial, center center, 0, center center, 460, from(#236a0f), to(#133e08));background: -webkit-radial-gradient(circle, #236a0f, #133e08);background: -moz-radial-gradient(circle, #236a0f, #133e08);background: -ms-radial-gradient(circle, #236a0f, #133e08);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><divid="preload">
        <div class="fase_1">
            <img src="http://www.matcha.provisorio.ws/images/fase_1.png"alt="Fase1" />
        </div>
        <div class="fase_2">
            <img src="http://www.matcha.provisorio.ws/images/fase_2.png"alt="Fase1" />
        </div>
        <div class="fase_3">
            <img src="http://www.matcha.provisorio.ws/images/fase_3.png"alt="Fase1" />
        </div>
    </div>

jquery canvas

asked by anonymous 10.06.2015 / 00:02

1 answer

Problem with footer in mobile sites Doubt with mvc list editing, using checkbox and editable field

score 0 · Accepted Answer

Hello,

I made an example (I actually updated your example)

Code with animation example

... where I used pure CSS animation.

It is necessary to set the positions and delays to achieve a better effect. You can still reverse the direction of the animation by changing this stretch of CSS.

@keyframes tinta {
    from {
        transform: scale(0);
    }
    , to {
        opacity: 1;
        transform: scale(1);
        display:block
    }
}

Reversing property values transform: scale (x);

I hope you have helped.