An Trần Digital
No Result
View All Result
Thứ Sáu, Tháng Một 27, 2023
  • Thủ thuật
    • All
    • Thủ thuật Blogspot/Blogger
    • Thủ thuật iOS
    • Thủ thuật Phần Mềm
    • Thủ thuật Wordpress
    Plugin tạo bài viết liên quan trong theme Flatsome

    Plugin tạo bài viết liên quan trong theme Flatsome

    Tổng hợp cấu hình redirect 301 trong file htaccess

    Tổng hợp cấu hình Redirect 301 .htaccess file

    Hướng dẫn xoá category trong url wordpress

    Hướng dẫn cách xoá Category trong Url wordpress

    Code trang trí tết cho website wordpress

    Code trang trí tết cho website – Hiệu ứng hoa mai rơi đẹp

    • Thủ thuật Blogspot/Blogger
    • Thủ thuật Phần Mềm
    • Thủ thuật iOS
    • Thủ thuật WordPress
  • Đồ hoạ
    • All
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
    Share 16 bộ preset màu HongKong lightroom mobile đẹp

    Share 16 bộ preset màu HongKong lightroom mobile đẹp

    Preset Lightroom Mobile đi siêu thị tone hàn quốc đẹp

    Preset Lightroom Mobile đi siêu thị tone hàn quốc đẹp

    Tải preset lightroom travel cho ảnh du lịch

    Tải bộ preset lightroom travel cho ảnh du lịch chuyên nghiệp

    Tải preset lightroom mobile tone ngoại cảnh du lịch

    Share bộ preset lightroom mobile tone ngoại cảnh đẹp free

    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • All
    • Blogger/Blogspot
    • Wordpress
    Template blogspot bất động sản nhà đất miễn phí

    Share 5 template blogspot bất động sản nhà đất miễn phí

    Share template blogspot tin tức

    Share template blogspot tin tức Zing News

    Tải theme Newspaper mới nhất miễn phí

    [Download] Chia sẻ theme Newspaper wordpress mới nhất miễn phí

    Template Blogspot của blogger StarTuanIT

    Chia sẻ Template Blogspot của blogger StarTuanIT

    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • All
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình - Web
    • Marketing - SEO
    Khoá học tiếng Trung miễn phí

    Chia sẻ khoá học tiếng Trung dành cho người mới bắt đầu

    chia-sẻ-khoá-học-dựng-nhân-vật-hoạt-hình-3D-với-Blender-antrandigital

    Chia sẻ khoá học Dựng nhân vật hoạt hình 3D với Blender

    khoa-hoc-photoshop-thiet-ke-cho-giao-dien-website-antrandigital

    Hướng dẫn dùng Photoshop thiết kế cho giao diện website

    chia-se-khoa-hoc-reactjs-day-du-mien-phi-antrandigital

    Chia sẻ khoá học ReactJS đầy đủ miễn phí

    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Blog
Subscribe
An Trần Digital
  • Thủ thuật
    • All
    • Thủ thuật Blogspot/Blogger
    • Thủ thuật iOS
    • Thủ thuật Phần Mềm
    • Thủ thuật Wordpress
    Plugin tạo bài viết liên quan trong theme Flatsome

    Plugin tạo bài viết liên quan trong theme Flatsome

    Tổng hợp cấu hình redirect 301 trong file htaccess

    Tổng hợp cấu hình Redirect 301 .htaccess file

    Hướng dẫn xoá category trong url wordpress

    Hướng dẫn cách xoá Category trong Url wordpress

    Code trang trí tết cho website wordpress

    Code trang trí tết cho website – Hiệu ứng hoa mai rơi đẹp

    • Thủ thuật Blogspot/Blogger
    • Thủ thuật Phần Mềm
    • Thủ thuật iOS
    • Thủ thuật WordPress
  • Đồ hoạ
    • All
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
    Share 16 bộ preset màu HongKong lightroom mobile đẹp

    Share 16 bộ preset màu HongKong lightroom mobile đẹp

    Preset Lightroom Mobile đi siêu thị tone hàn quốc đẹp

    Preset Lightroom Mobile đi siêu thị tone hàn quốc đẹp

    Tải preset lightroom travel cho ảnh du lịch

    Tải bộ preset lightroom travel cho ảnh du lịch chuyên nghiệp

    Tải preset lightroom mobile tone ngoại cảnh du lịch

    Share bộ preset lightroom mobile tone ngoại cảnh đẹp free

    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • All
    • Blogger/Blogspot
    • Wordpress
    Template blogspot bất động sản nhà đất miễn phí

    Share 5 template blogspot bất động sản nhà đất miễn phí

    Share template blogspot tin tức

    Share template blogspot tin tức Zing News

    Tải theme Newspaper mới nhất miễn phí

    [Download] Chia sẻ theme Newspaper wordpress mới nhất miễn phí

    Template Blogspot của blogger StarTuanIT

    Chia sẻ Template Blogspot của blogger StarTuanIT

    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • All
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình - Web
    • Marketing - SEO
    Khoá học tiếng Trung miễn phí

    Chia sẻ khoá học tiếng Trung dành cho người mới bắt đầu

    chia-sẻ-khoá-học-dựng-nhân-vật-hoạt-hình-3D-với-Blender-antrandigital

    Chia sẻ khoá học Dựng nhân vật hoạt hình 3D với Blender

    khoa-hoc-photoshop-thiet-ke-cho-giao-dien-website-antrandigital

    Hướng dẫn dùng Photoshop thiết kế cho giao diện website

    chia-se-khoa-hoc-reactjs-day-du-mien-phi-antrandigital

    Chia sẻ khoá học ReactJS đầy đủ miễn phí

    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Blog
No Result
View All Result
An Trần Digital
No Result
View All Result
× Cùng nhau: ĐẾM NGƯỢC NGÀY TẾT NGUYÊN ĐÁN
Home Source Code

Code hiệu ứng hoa mai rơi cho blog/website

by An Tran
in Source Code
Reading Time: 5 mins read
Code hiệu ứng hoa mai rơi cho blog/website

Nội dung bài viết

  1. Code hoa mai rơi dành cho website
  2. Code hoa mai rơi dành cho blogspot/blogger

Nhân dịp năm mới đã tới và Tết Nguyên Đán chỉ còn chưa tới 30 ngày nữa là sẽ đến. Nên nay mình chia sẻ cách tạo hiệu ứng hoa mai rơi cho website để cùng nhau cho có không khí tết

Dưới đây là code hiệu ứng hoa mai rơi cho blog/website

Code hoa mai rơi dành cho website

Copy đoạn code bên dưới và sau đó dán trên thẻ </body>

<style>
    #hoamaitet{position:absolute;left:0px;top:0px;}
    .hoamai{padding-left:15px;font-size:14px;line-height:24px;position:fixed;color:#ebebeb;user-select:none;z-index:1000;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
    .hoamai:hover {cursor:default}
</style>
<div id='hoamaitet'>
<p class='hoamai'><img style="width:20px" src="https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png" /></p>
</div>
<script style='text/javascript'>
    //<![CDATA[
    var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var transforms=["transform","msTransform","webkitTransform","mozTransform","oTransform"];var transformProperty=getSupportedPropertyName(transforms);var hoamais=[];var browserWidth;var browserHeight;var numberOfhoamais=50;var resetPosition=false;function setup(){window.addEventListener("DOMContentLoaded",generatehoamais,false);window.addEventListener("resize",setResetFlag,false)}setup();function getSupportedPropertyName(b){for(var a=0;a<b.length;a++){if(typeof document.body.style[b[a]]!="undefined"){return b[a]}}return null}function hoamai(b,a,d,e,c){this.element=b;this.radius=a;this.speed=d;this.xPos=e;this.yPos=c;this.counter=0;this.sign=Math.random()<0.5?1:-1;this.element.style.opacity=0.5+Math.random();this.element.style.fontSize=4+Math.random()*30+"px"}hoamai.prototype.update=function(){this.counter+=this.speed/5000;this.xPos+=this.sign*this.speed*Math.cos(this.counter)/40;this.yPos+=Math.sin(this.counter)/40+this.speed/30;setTranslate3DTransform(this.element,Math.round(this.xPos),Math.round(this.yPos));if(this.yPos>browserHeight){this.yPos=-50}};function setTranslate3DTransform(a,c,b){var d="translate3d("+c+"px, "+b+"px, 0)";a.style[transformProperty]=d}function generatehoamais(){var b=document.querySelector(".hoamai");var h=b.parentNode;browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var d=0;d<numberOfhoamais;d++){var j=b.cloneNode(true);h.appendChild(j);var e=getPosition(50,browserWidth);var a=getPosition(50,browserHeight);var c=5+Math.random()*40;var g=4+Math.random()*10;var f=new hoamai(j,g,c,e,a);hoamais.push(f)}h.removeChild(b);movehoamais()}function movehoamais(){for(var b=0;b<hoamais.length;b++){var a=hoamais[b];a.update()}if(resetPosition){browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var b=0;b<hoamais.length;b++){var a=hoamais[b];a.xPos=getPosition(50,browserWidth);a.yPos=getPosition(50,browserHeight)}resetPosition=false}requestAnimationFrame(movehoamais)}function getPosition(b,a){return Math.round(-1*b+Math.random()*(a+2*b))}function setResetFlag(a){resetPosition=true};
    //]]>
</script>

Demo

Xem thêm: Code web đếm ngày yêu

Code hoa mai rơi dành cho blogspot/blogger

Vào Blog của bạn, sau đó vào Chủ đề => Chỉnh sửa HTML. Tiếp theo dán đoạn code bên dưới trên thẻ </head>

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/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 có thể tuỳ chỉnh

  • Muốn thay đổi hình hoa mai thành hoa đào hay tuyết rơi,…thì chỉ cần đổi link hình ảnh này https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png
  • 15 là chiều rộng của bông
  • 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.

CHÚC CÁC BẠN THÀNH CÔNG !!!

5/5 - (1 bình chọn)
Tags: code hoa mai rơicode trang trí tết cho website cho website wordpresscode web
Previous Post

Code tuyết rơi trang trí noel cho website/blog

An Tran

An Tran

Tôi là An Trần, thuộc thế hệ 9X. Hiện tại đang làm nhân viên cắt cỏ tại sân Old Trafford.

Related Posts

Code tuyết rơi trang trí noel cho website
Source Code

Code tuyết rơi trang trí noel cho website/blog

01/11/2022
Share code web đếm ngày yêu
Source Code

Share code web đếm ngày yêu cực đẹp

04/09/2022
0 0 votes
Đánh Giá
Subscribe
Login
Notify of
guest

Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Tên. Xin cảm ơn!

guest

Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Tên. Xin cảm ơn!

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

0 Comments
Inline Feedbacks
View all comments

Hosting nên dùng

  • Trending
  • Comments
  • Latest
Preset camera raw photoshop free

2000+ Preset Camera Raw chỉnh màu ảnh đẹp nhất

25/06/2020
chia-se-preset-lightroom-mobile-sieu-dep-cho-chinh-anh

1000+ Chia sẻ Preset Lightroom Mobile siêu đẹp free cho chỉnh ảnh

04/12/2020
share-preset-lightroom-tone-xam-son-tung-antrandigital

Share Preset Lightroom tone xám Sơn Tùng M-TP

17/02/2021
Preset camera raw photoshop free

2000+ Preset Camera Raw chỉnh màu ảnh đẹp nhất

10
chia-se-khoa-hoc-seo-len-top-cung-chuyen-gia-unica-antrandigital

Chia sẻ khoá học SEO lên TOP cùng chuyên gia UNICA

6
khoa-hoc-seo-email-marketing-mien-phi-antrandigital

Chia sẻ khoá học SEO và Email Marketing miễn phí

5
Code hiệu ứng hoa mai rơi cho blog/website

Code hiệu ứng hoa mai rơi cho blog/website

02/01/2023
Code tuyết rơi trang trí noel cho website

Code tuyết rơi trang trí noel cho website/blog

01/11/2022
Share code web đếm ngày yêu

Share code web đếm ngày yêu cực đẹp

04/09/2022


An Trần Digital là blog cá nhân chia sẻ preset lightroom, camera raw từ máy tính đến mobile, template blogspot, theme wordpress và các khoá học khác hoàn toàn miễn phí.

DMCA.com Protection Status

Comments gần đây

  • Khoa trong Chia sẻ khoá học Photoshop của Quỳnh Uyên Full
  • An Tran
    Quản lý
    trong Chia sẻ khoá học SEO và Email Marketing miễn phí
  • Đăng Khoa trong Chia sẻ khoá học SEO và Email Marketing miễn phí

Xem nhiều nhất ngày

2000+ Preset Camera Raw chỉnh màu ảnh đẹp nhất

Code trang trí tết cho website – Hiệu ứng hoa mai rơi đẹp

Về An Trần Digital

Giới thiệu về tôi

Bảo mật

Hợp tác

Bản quyền

Liên hệ

Donate

© 2022 An Trần Digital - Powered by An Trần.

No Result
View All Result
  • Thủ thuật
    • Thủ thuật Blogspot/Blogger
    • Thủ thuật Phần Mềm
    • Thủ thuật iOS
    • Thủ thuật WordPress
  • Đồ hoạ
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Blog

© 2022 An Trần Digital - Powered by An Trần.

wpDiscuz