“Ngày hết tết tới” mỗi
năm tết đến xuân về, trong mỗi con người chúng ta, ai cũng có những cảm xúc
riêng của mình (thiết nghĩ riêng Tôi thì không “Nỗi buồn cứ u uất bao vây”), cảm
nhận được vẻ đẹp của mùa xuân với cây cối đâm chồi nảy lộc, còn gì thú vị hơn
khi bạn đem về trên Blog/Website của chính mình.
Chính vì lẻ trên, hôm
nay mình hướng dẫn các bạn hiệu ứng hoa
mai rơi giúp cho blog của bạn trở nên đẹp hơn trong không khí ngày Tết cổ
truyền của dân tộc. Ngoài ra các hiệu ứng hoa anh đào rơi, hiệu ứng
lá rơi (khi trời chuyển sang thu), hiệu ứng tuyết rơi, hiệu ứng
sao rơi,…Thì cũng từ một đoạn Code mà ra thôi.
Đọc thêm:
☼
Giờ bắt đầu thủ thuật cùng Windows2it.
Vào Blog
=> Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl
+ F và tìm đến thẻ </head>. Sau đó dán đoạn mã
Code sau ở phía trên thẻ </head> và Lưu mẫu.
<script type='text/javascript'> //<![CDATA[ var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwRO0rW8JwhCxnaJbIlkhWn4Iskcy9j_W1AvPIghEOM7MsjAtccESZPEohM0gcOQN8m4UP8i3XJ_bdd38Tru1x31ac0U6afKwGOh-aYSMruWBN1RYUJQMTvUTsHqr8mD89u-AVvcV0ug/s1600/hoamai.png"; //the location of the snowflakes var pictureWidth = 15; //the width of the snowflakes var pictureHeight = 15; //the height of the snowflakes var numFlakes = 10; //the number of snowflakes var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms) var lrFlakes = 10; //the speed that the snowflakes should swing from side to side if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; } //draw the snowflakes for( var x = 0; x < numFlakes; x++ ) { if( document.layers ) { //releave NS4 bug document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>'); } else { document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>'); } } //calculate initial positions (in portions of browser window size) var xcoords = new Array(), ycoords = new Array(), snFlkTemp; for( var x = 0; x < numFlakes; x++ ) { xcoords[x] = ( x + 1 ) / ( numFlakes + 1 ); do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() ); } while( typeof( ycoords[snFlkTemp] ) == 'number' ); ycoords[snFlkTemp] = x / numFlakes; } //now animate function flakeFall() { if( !getRefToDivNest('snFlkDiv0') ) { return; } var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0; //find screen settings for all variations. doing this every time allows for resizing and scrolling if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else { if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) { scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else { if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } } if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else { if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else { if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } } } //move the snowflakes to their new position for( var x = 0; x < numFlakes; x++ ) { if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; } var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; } if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0; divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix; divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix; ycoords[x] += downSpeed; } } //DHTML handlers function getRefToDivNest(divName) { if( document.layers ) { return document.layers[divName]; } //NS4 if( document[divName] ) { return document[divName]; } //NS4 also if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera) if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4 return false; } window.setInterval('flakeFall();',100); //]]> </script>
·
Bạn muốn hoa anh đào rơi hay lá
rơi hay tuyết rơi hay sao rơi,…Thì các bạn chỉ cần thay đổi
hình ảnh này https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwRO0rW8JwhCxnaJbIlkhWn4Iskcy9j_W1AvPIghEOM7MsjAtccESZPEohM0gcOQN8m4UP8i3XJ_bdd38Tru1x31ac0U6afKwGOh-aYSMruWBN1RYUJQMTvUTsHqr8mD89u-AVvcV0ug/s1600/hoamai.png
là xong.
· 15 Chiều rộng của bông.
·
15 Chiều cao của bông.
·
10
Số bông hoa xuất hiện cùng một lúc.
·
0,01
Tốc độ rơi của các bông hoa.
·
10
Tốc độ các bông hoa giao động từ bên trái sang bên phải và ngược lại.
Nếu
bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những
bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều JJJ
Quá trình cài đặt gặp vấn đề gì cứ để lại Comment !


http://ungdungmaytinhaz.blogspot.com/
Demo ungdungmaytinhaz.blogspot.com
#outer-wrapper {
background: #fff; thay đổi thành mã màu #fff thành mã màu bạn muốn
width: 1170px;
text-align: left;
font: 12px Arial;
margin: 0 auto;
padding: 10px;
margin-top: 10px;
}
>>> bảng mã màu đây nhé: https://sites.google.com/site/wwwcaotongvn/css
https://www.facebook.com/photo.php?fbid=688347534640280&set=a.330833443725026.1073741828.100003951181644&type=3&theater
>>> Nền Blog chia theo vùng. Nên việc thay màu nền có thể tùy biến nhiều vùng khác nhau .. Cái này Bạn phải biết thêm một tí về CSS là oke ngay (là đẹp ngay)
https://www.facebook.com/photo.php?fbid=212233892459071&set=a.206711303011330.1073741829.100010173843669&type=3&theater
Chú ý: Tất cả đoạn Code rơi đều tùy biến đoạn code này mà ra :)
Với nhiều năm kinh nghiệm trong lĩnh vực in ấn, là địa chỉ có uy tín tại Hà Nội. Công ty In Long Gia luôn đẩy mạnh phát triển dịch vụ in ấn nhất là mảng sản xuất in hộp cứng cao cấp.
Đến với chúng tôi khách hàng sẽ được hỗ trợ tư vấn và thiết kế hoàn toàn miễn phí. Với mục tiêu thỏa mãn mọi nhu cầu của khách hàng. In Long Gia luôn mang đến cho khách hàng những sản phẩm vỏ hộp bìa cứng sang trọng và đẹp mắt nhất.
Là xưởng sản xuất trực tiếp không qua trung gian , sử dụng công nghệ máy móc in ấn hiện đại. Giúp bạn tiết kiệm đến 30% chi phí nhưng vẫn đảm bảo chất lượng.
quảng cáo online Sản phẩm công nghệ tự động độc quyền của TekDT
cài win dễ dàng cài windows dễ dàng
Đăng nhận xét