การทำฝนตกในหน้าเว็บ ด้วย cavans

เทคนิคการทำ effect ฝนตกในหน้าเว็บโดยใช้ HTML5 CAVANS + JAVA-SCRIPT เอาไว้แต่งเว็บให้มีความน่าสนใจมากขึ้น

ในการทำเว็บมีบางครั้งที่เราอยากให้มี movement ให้เว็บดูมีชีวิตหรือเหมือนจริงมากขึ้นเพื่อไม่ให้น่าเบื่อเกินไป ช่วนนี้หน้าฝนเลยอย่ากทำเว็บและมี background เป็น ฝนตกลงในเว็บ  จึงไปหาวิธีการทำมาฝากกันครับ

ตัวอย่าง สามารถเลือกความเร็วและจำนวนฝนได้ (จริงสามารถทำ option ได้มากกว่านี้)

ในส่วน CODE

1  เราจะทำการ include jquery เข้ามา

<script src="jquery.min.js"></script>

2 css ที่ใช้ในการทำเป็น BACKGROUND ให้กับหน้าเว็บ

body{


   background:#000;
   -webkit-background-size: cover; /* For WebKit*/
   -moz-background-size: cover;    /* Mozilla*/
   -o-background-size: cover;      /* Opera*/
   background-size: cover;         /* Generic*/
   background-repeat: no-repeat;  
   background-position: center center;
   height:100%;
   width:100%;
   background-image: url(bg.jpg) /* ใช่รูปพื้นหลัง */;
   overflow: hidden;
   
}

3 ในส่วน body นั้นเราจะสร้าง Element Cavans ใช้ id ว่า rain

<canvas id="rain"></canvas>   

4 ในส่วนนี้เราจะใช้ JAVASCRIPT เพื่อสร้างฝนใน cavans กัน

    var canvas = $('#rain')[0]; // select cavans จาก id #rain
    canvas.width = $( window ).width(); // ตั้งค่าความกว้าง cavans
    canvas.height = $( window ).height(); // ตั้งค่าความสูง cavans
    var ctx = canvas.getContext('2d');
    var w = canvas.width; 
    var h = canvas.height;
    
    
    ctx.strokeStyle = 'rgba(174,194,224,0.5)';  // กำหนดสีน้ำฝน
    ctx.lineWidth = 1; // กำหนดขนาดเม็ดฝน
    ctx.lineCap = 'round'; 
    
    
   
    var particles = [];     
    var maxParts = 1000; // จำนวนนำฝน
    var angle = -4; // องศา
    var speed = 100; // ความเร็ว
    
      
    function initrain(){   // function กาากำหนดตำแหน่งและความยาวของฝน
    init=[];
    for(var a = 0; a < maxParts; a++) {
      init.push({
        x: Math.random() * w,
        y: Math.random() * h,
        l: Math.random() * 1,
        xs: angle + Math.random() * 4 + 2,
        ys: Math.random() * 10 + 10
      })
    }
    
     
     particles = [];
    for(var b = 0; b < maxParts; b++) {
      particles[b] = init[b];
    }     
    
    }     
    
    function draw() {  // function ในการวางฝนลงใน cavans
      initrain();  
      ctx.clearRect(0, 0, w, h);
      for(var c = 0; c < particles.length; c++) { 
        var p = particles[c];
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys);
        ctx.stroke();
      }
      move();
    }
    
    function move() { // function ในการเปลี่ยนตำแหน่งฝน
    
      for(var b = 0; b < particles.length; b++) {
        var p = particles[b];
        p.x += p.xs;
        p.y += p.ys;
        if(p.x > w || p.y > h) {
          p.x = Math.random() * w;
          p.y = -20;
        }
      }
    }
    
    
              
             
   var movement =    setInterval(draw, speed/60);

ในส่วนหลักของ code ก็มีเท่านี้ครับ เพื่อนๆสามาถถดาวร์โหลด SOURCE CODE  ไปลองศึกษากันได้ครับ

SOURCE CODE

หากมีข้อสงสัยหรือติดชมได้เลยครับ