Quantcast
Channel: フォトフェイシャルを受けられない人はいるのかについて
Viewing all articles
Browse latest Browse all 25
↧

Chia sẻ Javascript hiệu ứng tuyết rơi cho trang web, diễn đàn

December 13, 2013, 9:40 pm
$
0
0

 

 

Noel hay Giáng sinh sắp đến rồi có nhiều WEBMASTER học viên, sinh viên HỌC LẬP TRÌNH PHP, HỌC THIẾT KẾ WEB, HỌC QUẢN TRỊ WEB muốn thêm chút hiệu ứng tuyết rơi, ông già tuyết cho website của mình, công ty mình thêm sinh động.

Nay HTVSITE xin chia sẻ với các bạn thư viện code hỗ trợ cho các việc này nhé!

 

Học thiết kế website | Học lập trình PHP với hiệu ứng Javascript tuyết rơi và ông già tuyết cưỡi tuần lộc

 

1. Hiệu ứng tuyết rơi:

Trước nay có rất nhiều đoạn mã Javascript hỗ trợ cho việc này.

Nhưng nếu nói tới mức đóng gói tiện dùng, dễ sử dụng và nhẹ thì phải nói tới thư viện snowstorm của schillmania.com:

http://schillmania.com/projects/snowstorm/

Ngoài ra trên trang http://schillmania.com/ còn có rất nhiều các thư viện ứng dụng, hiệu ứng Javascript khác nên các bạn vào vọc thêm nhé!

2. Hiệu ứng ông già Noel cưỡi tuần lộc:

Mùa giáng sinh mà có ông già Noel cưỡi tuần lộc chạy tới chạy lui thì không có gì thú vị bằng.

Hiệu ứng này rất cơ bản chỉ cần chèn đoạn code này trước thẻ <body> là được nhé!

<script type='text/javascript'>
 $(function(){
    $('html').append('<img id="halo" title="Happy Noel" style="cursor:pointer;position:fixed;z-index:99999" height="120" src="http://lh6.ggpht.com/–821TuXi7o0/UMN0DyDHwtI/AAAAAAAAFL8/V3nQtexRIIk/ghost_thumb.gif"/>')
    setInterval(function(){
       var $X=Math.ceil(Math.random()*$(window).width())
       var $Y=Math.ceil(Math.random()*$(window).height())
       $('img#halo').animate({'left':$X,'top':$Y},5000)
    },5000)
    $('img#halo').click(function(){
        window.open('http://lh6.ggpht.com/–821TuXi7o0/UMN0DyDHwtI/AAAAAAAAFL8/V3nQtexRIIk/ghost_thumb.gif','')
    })
 })
</script>

3. Hiệu ứng tuyết rơi bằng đoạn mã Javascript khác:

<script type='text/javascript'>
//<![CDATA[
var snowmax=100
var snowcolor=new Array("#f2f8fa","#eff5f7","#dcedf1","#ffffff")
var snowtype=new Array("Times","Arial","Times","Verdana")
var snowletter="*"
var sinkspeed=0.6
var snowmaxsize=30
var snowminsize=10
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
        rand=Math.floor(range*Math.random())
    return rand
}
function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i]=document.getElementById("s"+i)
                snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                snow[i].size=randommaker(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                snow[i].sink=sinkspeed*snow[i].size/5
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
                snow[i].style.left=snow[i].posx+'px';
                snow[i].style.top=snow[i].posy+'px';
        }
        movesnow()
}
function movesnow() {
        for (i=0;i<=snowmax;i++) {
                crds[i] += x_mv[i];
                snow[i].posy+=snow[i].sink
                snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
                snow[i].style.top=snow[i].posy+'px';
                if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                        snow[i].posy=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}
//]]>
</script>

 

4. Hiệu ứng dàn chuông treo phía trên trang web / blog:

B1. Chèn đoạn code sau phía trên thẻ </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src="http://blogthietke.googlecode.com/files/btk_holiday_bells.js"></script>
<script src="http://blogthietke.googlecode.com/files/btk_swfobject.min.js"></script>
<style type='text/css'>
/* HOLIDAY BELLS */
.b-page__content { min-height:60px; }
.b-head-decor { display:none; }
.b-page_newyear .b-head-decor { position:absolute; top:0; left:0; display:block; height:115px; width:100%; overflow:hidden; background:url('https://lh4.googleusercontent.com/-Fw52YRWmOes/UMB0XOjXsnI/AAAAAAAAC1E/EENsIn76nXk/b-head-decor_newyear.png') repeat-x 0 0; }
.b-page_newyear .b-head-decor__inner { position:absolute; top:0; left:0; height:115px; display:block; width:373px; }
.b-page_newyear .b-head-decor::before { content:''; display:block; position:absolute; top:-115px; left:0; z-index:3; height:115px; display:block; width:100%; }
.b-page_newyear .b-head-decor__inner_n2 { left:373px; }
.b-page_newyear .b-head-decor__inner_n3 { left:746px; }
.b-page_newyear .b-head-decor__inner_n4 { left:1119px; }
.b-page_newyear .b-head-decor__inner_n5 { left:1492px; }
.b-page_newyear .b-head-decor__inner_n6 { left:1865px; }
.b-page_newyear .b-head-decor__inner_n7 { left:2238px; }
.b-ball { position:absolute; }
.b-ball_n1 { top:0; left:3px; width:59px; height:83px; }
.b-ball_n2 { top:-19px; left:51px; width:55px; height:70px; }
.b-ball_n3 { top:9px; left:88px; width:49px; height:67px; }
.b-ball_n4 { top:0; left:133px; width:57px; height:102px; }
.b-ball_n5 { top:0; left:166px; width:49px; height:57px; }
.b-ball_n6 { top:6px; left:200px; width:54px; height:70px; }
.b-ball_n7 { top:0; left:240px; width:56px; height:67px; }
.b-ball_n8 { top:0; left:283px; width:54px; height:53px; }
.b-ball_n9 { top:10px; left:321px; width:49px; height:66px; }
.b-ball_n1 .b-ball__i { background:url('https://lh3.googleusercontent.com/-CBEwMmGrqZ8/UMB0VT8RJMI/AAAAAAAAC0U/VVuQKjz292Y/b-ball_n1.png') no-repeat; }
.b-ball_n2 .b-ball__i { background:url('https://lh5.googleusercontent.com/-wOz2yKeFu7I/UMB0URa7HNI/AAAAAAAAC0I/XnAVs3w9_Vw/b-ball_n2.png') no-repeat; }
.b-ball_n3 .b-ball__i { background:url('https://lh5.googleusercontent.com/-8A4ZJeTF4cg/UMB0UygpdrI/AAAAAAAAC0M/NfoWup7hI58/s67/b-ball_n3.png') no-repeat; }
.b-ball_n4 .b-ball__i { background:url('https://lh3.googleusercontent.com/-Nx7_Tm-nkAI/UMB0VkMAHpI/AAAAAAAAC0c/09GjFBtv1Sw/b-ball_n4.png') no-repeat; }
.b-ball_n5 .b-ball__i { background:url('https://lh5.googleusercontent.com/-4P-GX2WVLXI/UMB0V6O1MrI/AAAAAAAAC0Y/nNZOwiGOmRc/b-ball_n5.png') no-repeat; }
.b-ball_n6 .b-ball__i { background:url('https://lh4.googleusercontent.com/-Y8mmZd60f5k/UMB0WEfbWcI/AAAAAAAAC0k/xf-TW8EU0-w/b-ball_n6.png') no-repeat; }
.b-ball_n7 .b-ball__i { background:url('https://lh3.googleusercontent.com/-BYfmH5Mpksw/UMB0WbPto9I/AAAAAAAAC00/jFbTK8qzXbs/b-ball_n7.png') no-repeat; }
.b-ball_n8 .b-ball__i { background:url('https://lh5.googleusercontent.com/-AkG1qZqE2lA/UMB0WnEGXtI/AAAAAAAAC0s/VgQQkCeP7YQ/b-ball_n8.png') no-repeat; }
.b-ball_n9 .b-ball__i { background:url('https://lh5.googleusercontent.com/-qyza4SONUdM/UMB0W64FoOI/AAAAAAAAC1A/uBhV0yD6sbk/b-ball_n9.png') no-repeat; }
.b-ball_i1 .b-ball__i { background:url('https://lh6.googleusercontent.com/-QhhDd1SE_V0/UMB0PA61nFI/AAAAAAAACzg/CXvrLe3CRjI/b-ball_i1.png') no-repeat; }
.b-ball_i2 .b-ball__i { background:url('https://lh4.googleusercontent.com/-9XMuFc_Yp5c/UMB0QBkDNuI/AAAAAAAACzk/bKiU8K3vgXU/s61/b-ball_i2.png') no-repeat; }
.b-ball_i3 .b-ball__i { background:url('https://lh3.googleusercontent.com/-j6E5yxK2u-Y/UMB0PGXq-2I/AAAAAAAACzc/j1vsaU11xvc/b-ball_i3.png') no-repeat; }
.b-ball_i4 .b-ball__i { background:url('https://lh6.googleusercontent.com/-o2OZuJyWj4s/UMB0QoPX2KI/AAAAAAAACz4/JQIHqmVrhS8/b-ball_i4.png') no-repeat; }
.b-ball_i5 .b-ball__i { background:url('https://lh5.googleusercontent.com/-kG7U9F_tEx4/UMB0QYsHNLI/AAAAAAAACzw/3QInJrJIIfA/b-ball_i5.png') no-repeat; }
.b-ball_i6 .b-ball__i { background:url('https://lh4.googleusercontent.com/-TWr-kxeQTSc/UMB0UdruXgI/AAAAAAAAC0E/CS9sAXVQ_9E/b-ball_i6.png') no-repeat; }
.b-ball_i1{top:0; left:0; width:25px; height:71px; }
.b-ball_i2{top:0; left:25px; width:61px; height:27px; }
.b-ball_i3{top:0; left:176px; width:29px; height:31px; }
.b-ball_i4{top:0; left:205px; width:50px; height:51px; }
.b-ball_i5{top:0; left:289px; width:78px; height:28px; }
.b-ball_i6{top:0; left:367px; width:6px; height:69px; }
.b-ball__i { position:absolute; width:100%; height:100%; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; -o-transform-origin:50% 0; transform-origin:50% 0; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; pointer-events:none; }
.b-ball_bounce .b-ball__right{position:absolute; top:0; right:0; left:50%; bottom:0; z-index:9; }
.b-ball_bounce:hover .b-ball__right{ display:none; }
.b-ball_bounce .b-ball__right:hover{ left:0; display:block!important; }
.b-ball_bounce.bounce>.b-ball__i{ -webkit-transform:rotate(-9deg); -moz-transform:rotate(-9deg); -o-transform:rotate(-9deg); transform:rotate(-9deg); }
.b-ball_bounce .b-ball__right.bounce+.b-ball__i { -webkit-transform:rotate(9deg); -moz-transform:rotate(9deg); -o-transform:rotate(9deg); transform:rotate(9deg); }
.b-ball_bounce.bounce1>.b-ball__i {-webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); transform:rotate(6deg); }
.b-ball_bounce .b-ball__right.bounce1+.b-ball__i {-webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); transform:rotate(-6deg); }
.b-ball_bounce.bounce2>.b-ball__i{ -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
.b-ball_bounce .b-ball__right.bounce2+.b-ball__i{ -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
.b-ball_bounce.bounce3>.b-ball__i {-webkit-transform:rotate(1.5deg); -moz-transform:rotate(1.5deg); -o-transform:rotate(1.5deg); transform:rotate(1.5deg); }
.b-ball_bounce .b-ball__right.bounce3+.b-ball__i { -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); transform:rotate(-1.5deg); }
</style>

 

B2. Chèn đoạn code sau dưới thẻ <body>:

 

<div class='b-page_newyear'>
<div class='b-page__content'>
<i class='b-head-decor'>
<i class='b-head-decor__inner b-head-decor__inner_n1'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n2'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n3'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n4'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n5'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n6'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n7'>
<div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i1'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i2'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i3'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i4'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i5'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
<div class='b-ball b-ball_i6'><div class='b-ball__right'></div><div class='b-ball__i'></div></div>
</i>
</i>
</div>
</div>

5. Cuối cùng là hiệu ứng đầy đủ bao gồm cả tuyết rơi, ông già Noel cưỡi tuần lộc, con đường tuyết… mà HTVSITE đã sưu tầm, chỉnh sửa và phát triển được gửi các bạn nhé:

DEMO:

http://hocthietkeweb.org/sharecode/javascript-hieu-ung-tuyet-roi-ong-gia-noel-cuoi-tuan-loc/

DOWNLOAD: 

http://hocthietkeweb.org/sharecode/javascript-hieu-ung-tuyet-roi-ong-gia-noel-cuoi-tuan-loc.rar

 

P/s: Đôi khi bạn chèn code Javascript có chứa thư viện jQuery và lại được gọi làm nhiều lần thư viện thì có thể sẽ bị xung đột.

Và để giải quyết xung đột thì bạn vào link sau tham khảo nhé:

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

 

Và cuối cùng là chúc các bạn thành công nhé!

Thân,

HTVSITE EDU.

The post Chia sẻ Javascript hiệu ứng tuyết rơi cho trang web, diễn đàn appeared first on Học thiết kế Web Lập trình PHP Quản trị Website Internet Marketing.

↧
Search
Viewing all articles
Browse latest Browse all 25

Trending Articles

[Tut 18+] Hướng dẫn xóa quần áo trên người bằng Photoshop

November 7, 2016, 6:39 am

GLOBAL ROM - ROM QUỐC TẾ ANDROID 10 CHO GALAXY S10 S10PLUS MỸ

March 16, 2020, 8:02 am

[Việt hóa] SVN-Abril Fatface

December 4, 2015, 10:06 pm

Cho mình hỏi về lỗi nhảy cách chữ trong PAINT

November 14, 2014, 10:07 pm

Cần giúp đỡ : bị ẩn đường Path trong Ilusstrator

January 12, 2015, 1:08 am

[22+] Share bộ ảnh của Wanimal lượm lặt được trên mạng

August 3, 2016, 10:01 pm

Đoạn văn NLXH: Thất bại đơn giản chỉ là cơ hội để bắt đầu mọi thứ một...

September 24, 2017, 1:25 am

Brush phấn màu và kim tuyến tuyệt đẹp cho thiết kế

December 12, 2017, 6:32 pm

[RAW] Detective Conan File 1058

August 4, 2020, 6:52 pm

[MF] Bộ Sưu Tập CD Test Dàn Âm Thanh [WAV]

April 25, 2018, 1:40 am

[18+][Full Album] Model Luvian - Hot 2013 + 2014 [2.05GB]

February 25, 2017, 10:04 am

[Share] Chú Đại Bi cho những bạn cần in ấn!

July 5, 2016, 7:58 pm

Lỗi không mở được illustrator

August 25, 2014, 2:19 am

Lỗi hiển thị sai thông số kích thước trong corel x5,x7. Help me !

February 21, 2017, 5:46 pm

Có đôi lời muốn nói với [AE ttvnol f525]

April 26, 2019, 11:29 pm

DAELIM: BÌNH ẮC QUY

June 27, 2021, 9:18 pm

Lỗi không dùng lệnh trên cad được

May 31, 2018, 12:17 am

[SHARECUNGBAN] GERBER V10.2 Bộ SETUP Full Link tốc độ cao

November 3, 2019, 8:49 am

Lại thêm một người đẹp nude vì…”biển”

February 7, 2012, 3:54 am

Các video full quá trình vẽ, file PSD và Brush của WLOP.

January 2, 2017, 7:13 am
Search