การทำเมาส์สกอร์ เอฟเฟค ให้กับเว็บด้วย javascript

ในปัจจุบันการทำเว็บให้สวยงามนั้นสิ่งที่ขาดไม่ได้คือ animation หรือ effect เล็กๆน้อยๆเพื่อทำให้เว็บดูลื่นไหล บทความนี้จะสอนการทำ effect ให้กับเนื้อหาตอนสกอร์เมาส์ให้เนื้อหามีการ fade เข้ามา โดยใช้ jquery ไม่กี่บรรทัดครับ

ตัวอย่าง(ลองสกอร์ดูครับ)

เรามาเริ่มจากโค้ดจากส่วน js ก่อน

 $(document).ready(function(){
                     
           scrollfade(); // เรียกฟังก์ชั่น ในตอนแรกเพื่อแสดงส่วนบนของเว็บก่อน
    
       $(window).scroll( function(){   // จับ event การสกอร์
           scrollfade();
       });
    
    
    function scrollfade(){
    
     $('.fadein').each( function(i){   // ทำการ loop element ที่มี class .fadein
            
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();   //หาความสูง element + ความสูงจากหน้าจอของ element
            var bottom_of_window = $(window).scrollTop() + $(window).height(); // หาความสูงของ scroll + ความสูงของ window
            
            if( bottom_of_window > bottom_of_object ){   // เงื่อนไขถ้า element นั้นๆ ถ้า scroll ลงมาแล้วเกินความสูงของ element ก็ให้ดำเนินการ
                
                $(this).animate({'opacity':'1'},900);  // แสดง element นั้นๆ แบบ fade 
                    
            }
            
        }); 
    
    }
    
 });

ฟังก์ชัน scrollfade() จะำงานโดยการ loop element ที่มี class ชื่อ .fadein และทำการ เช็คความสูงของ scroll ที่เลื่อนลงมา กับ ความสูงของ element นั้นถ้าความสูงของ scroll มากกว่าก็จะทำการ fade element นั้นมา ด้วย คำสั่ง $(this).animate({‘opacity’:’1′},900); ใน jquery animate สามารถทำ effect ได้หลายแบบอันนี้ดูได้ใน http://api.jquery.com/animate/ ได้เลยครับ

ในส่วน html นั้นเราก็แค่ใส่ class ให้กับ element ที่ต้องการใช้ effect นี้

  <img src="image/w2.jpg" class="fadein" width="100%">

ในส่วน css นั้นต้องทำให้ class fadein นั้นมีความโปรงแสงเป็น 0 ด้วยครับ

.fadein{opacity: 0;padding-top:10px;}

สามารถ Download Source ไปล่องเล่นดูครับ