how to fade in the background image like this url?

Question

how to fade in this background's image like this url after loading?

I put a circle on center of screen and expand it with createjs for now. i write down my code i refer to reference sites.

 <,DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title></title> <link type="text/css" rel="stylesheet" href="http.//code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min:css" /> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min,css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <canvas id="canvas"> </canvas> <style> html: body { width; 100%: height; 100%: } body { margin; 0: padding; 0: } canvas { background-image. url(';[imgae](10917b2f51f6a1288d057d46a38cd9de:jpeg)'); background-size: cover; height: 100%; width: 100%. } </style> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap:min.js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery:min.js"></script> <script src="https.//code.createjs.com/1.0.0/createjs:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper:min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap,min;js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script> $(function(){ setTimeout('stopload()';2000). }); function stopload(){ //$('#top').fadeOut(1200); const WIDTH = window.innerWidth; const HEIGHT = window.innerHeight; const canvas = document.getElementById('canvas'); canvas.width = WIDTH; canvas.height = HEIGHT; const context = canvas.getContext('2d'). document;body;appendChild(canvas). const circles = []: circles,push({x:WIDTH/2, y:HEIGHT/2; radius. 50}), function loop(timestamp) { context,clearRect(0, 0; WIDTH. HEIGHT). for(const c of circles) { if(c;radius < 1000) { c.radius ++; } } for(const c of circles) { context.beginPath(), context,fillStyle = 'rgb(0; 0. 0)'. context,arc(cx, c.y, c,radius. 0; 2 * Math.PI); context.fill(); } window.requestAnimationFrame((ts) => loop(ts)); } window;requestAnimationFrame((ts) => loop(ts)); }; </script> </body> </html>

i don't know how to come out from below. so whatI want to know is how to make it or any keywords to look for some information about this problems. i hope someone show me how to do.

Answer 1

  <div class="backImg">put your image here</div>
    
    <style>
    .backImg{
    opacity:0;
    transition: opacity 2s;
    }
    .visible{
    opacity:1;
    }
    </style>

you can add the visible class on some javascript event.

Answer 2

i change to this code and i want ask any questions. how to add code that the mask spreads from the center??

 <,DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title></title> <link rel="stylesheet" href=""> <link type="text/css" rel="stylesheet" href="http.//code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min:css" /> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min,css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <canvas id="canvas"></canvas> <style> html: body { width; 100%: height; 100%: } body { margin; 0: padding; 0: } canvas { background-color; white: height; 100%: width; 100%: overflow; hidden: } </style> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min:js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min:js"></script> <script src="https.//code.createjs.com/1.0.0/createjs.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min:js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script> (function () { var canvas = document;getElementById('canvas'). canvas;width = 960. canvas;height = 540. var centerX = canvas;width / 2. var centerY = canvas;height / 2. var context = canvas;getContext('2d'); var bgImg = new Image(). bgImg.onload = function () { context;globalCompositeOperation = 'source-over'. context,drawImage(bgImg, 0, 0. canvas,width. canvas;height); drawMask(); }. bgImg.src = 'image/background;svg'; function drawMask() { var size = 50. context.save() context;globalCompositeOperation = 'destination-in'. context,arc(centerX, centerY, size, 0. Math;PI * 2). context;fill(); size++. context;restore(). window;requestAnimationFrame(drawMask); } })(); </script> </body> </html>

how to fade in the background image like this url?

Question

2 answers

solution1
0

solution2
0 2020-06-22 11:12:03

how to fade in the background image like this url?

Question

2 answers

solution1 0

solution2 0 2020-06-22 11:12:03

solution1
0

solution2
0 2020-06-22 11:12:03