hí anh em, gần tết rồi, nhiều nhà đã chuẩn bị mọi thứ cho việc đón tết. từ dọn và lao nhà cửa, thì còn phải trang trí cho đẹp, đặc biệt là phải có bánh mức hay cành mai đào trưng vào dịp tết. ....
 |
| Code trang trí tết cho website |
và trang trí bên ngoài thì chưa đủ, chúng ta hãy cùng trang trí thêm bên trong, đó là website của chúng ta. hãy coi một website như một ngôi nhà, và chúng ta hãy trang trí cho nó thêm cành mai đào để có thêm không khí tết nhá.
và sau đây với những code này mà lấy đi trang trí cho website của các bạn thì phải gọi là bá cháy lun ấy chứ. ;>>>
code này thì nó sẽ hỗ trợ cả cho blogger/wordpress và nhiều nền tảng khác nữa nhá.
Code 1: hoa mai/ đào rơi
copy toàn bộ code bên dưới và dán vào phía trên thẻ </body>
<script type='text/javascript'>
//<![CDATA[
var pictureSrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-1H6oY9kE_VyQhCgknUsfDMedAa1sfNkfo72CnyQ_1X3MATW_nZTnH3yUDaxQ5wv7LZojGR16q1MRiqxkk0VaQogpOL_i4X01_8-BXsOs8CmSU8inJHmG3f0OUaSiIYRKql8szPjDpg/s1600/hoamai.png"; //Link ảnh hoa muốn hiển thị trên web
var pictureWidth = 15; //Chiều rộng của hoa mai or đào
var pictureHeight = 15; //Chiều cao của hoa mai or đào
var numFlakes = 10; //Số bông hoa xuất hiện cùng một lúc trên trang web
var downSpeed = 0.01; //Tốc độ rơi của hoa
var lrFlakes = 10; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại
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>
mọi người có thể thay link ảnh hoa muốn hiển thị thành link ảnh hoa khác. ở đây mình sẽ hỗ trợ cho mọi người là hoa mai và hoa đào.
link ảnh hoa đào:
https://blogger.googleusercontent.com/img/a/AVvXsEiGwiKY4UEVHwcigi0lLQ6z43PYHoscMVaIsV2umnXlIP3UFgD_zsvkAZ5xY5BihQzm8mWSlB1oWkPFetYgv0Hs7MPwLTduLS2afd_NQyxja4Bjp8XMP7lPR4fDgZ38asrlHRwtywb3nW5RlSECQpi7DnpkrrqH0WrUB_hHRYMbinqR9p2qpgbBusqZxA=s320
code 2 hoa mai hoa đào rơi, tối ưu
code này thì mình đã tối ưu, nó ngắn ngọn và dễ dùng hơn code ở phái trên. code cũng mượt mà hơn ở trên.
<div id='tet'>
<p class='tetkimidev'><img style="width:20px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-1H6oY9kE_VyQhCgknUsfDMedAa1sfNkfo72CnyQ_1X3MATW_nZTnH3yUDaxQ5wv7LZojGR16q1MRiqxkk0VaQogpOL_i4X01_8-BXsOs8CmSU8inJHmG3f0OUaSiIYRKql8szPjDpg/s1600/hoamai.png" /></p>
</div>
code css
<style>
#tet{position:absolute;left:0px;top:0px;}
.tetkimidev{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;}
.tetkimidev:hover {cursor:default}
</style>
code js dán vào phía trên thẻ </body>
<script>
//<![CDATA[
var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
var transforms=["transform","msTransform","webkitTransform","mozTransform","oTransform"];
var transformProperty=getSupportedPropertyName(transforms);
var tetkimidevs=[];
var browserWidth;
var browserHeight;
var numberOftetkimidevs=39;
var resetPosition=false;
function setup(){
window.addEventListener("DOMContentLoaded",generatetetkimidevs,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 tetkimidev(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"
}
tetkimidev.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 generatetetkimidevs(){
var b=document.querySelector(".tetkimidev");
var h=b.parentNode;browserWidth=document.documentElement.clientWidth;
browserHeight=document.documentElement.clientHeight;for(var d=0;d<numberOftetkimidevs;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 tetkimidev(j,g,c,e,a);
tetkimidevs.push(f)
}h.removeChild(b);
movetetkimidevs()}
function movetetkimidevs(){for(var b=0;b<tetkimidevs.length;b++){
var a=tetkimidevs[b];a.update()
}
if(resetPosition){browserWidth=document.documentElement.clientWidth;
browserHeight=document.documentElement.clientHeight;for(var b=0;b<tetkimidevs.length;b++){
var a=tetkimidevs[b];a.xPos=getPosition(50,browserWidth);
a.yPos=getPosition(50,browserHeight)}resetPosition=false}requestAnimationFrame(movetetkimidevs)}
function getPosition(b,a){return Math.round(-1*b+Math.random()*(a+2*b))}
function setResetFlag(a){resetPosition=true};
//]]>
</script>
đây là code mà mình đã tối ưu và nó khá mượt, mọi người cũng có thể thay link ảnh tại HTML thành link của hoa hình ảnh khác.
code 3 trang trí tết bằng cành mai, câu đối đỏ.
<div class="kimidev-tet-left" ><img alt="Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-YsNGBS5Go9gcmN0sW-pe-vCtvy0Knf0dhXRryIli70yDq4c-6630coZkTR-sqUKQm1JEya4IbJBYZIL54jnznKCp4sz6TC5xbQOnGdNub5dySMtsdrq0yjPnMxCRlLYxpaAPFpFu_ye/s0/nam-moi-hanh-phuc-binh-an-den.png" style="width:130px;"/></div>
<div class="kimidev-tet-right"><img alt="Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaXQWGDhnwTDp94mPuqoPztqlK2rXgF4epRYCyzSMx9zW0wDpeo_v-kp10kVWkx3D_4FjBQwuxyKglOK-8bgicwEiUzsJD5ZgMQOBAGnHN7xS7iou7N9v6UjfDvN2v-buTFvPVlAxefnAU/s0/ngay-xuan-vinh-hoa-phu-quy-ve.png" style="width:130px;"/></div>
code css
<style>
.kimidev-tet-left{position:fixed;top:0;left:0;z-index:9999}
.kimidev-tet-right{position:fixed;top:0;right:0;z-index:9999}
@media(max-width:767px){.kimidev-tet-left,.kimidev-tet-right{display:none!important}}
</style>
okii thì phía trên là 3 code trang trí tết cho website của bạn, nếu như có thắc mắc hay không hiểu chỗ nào thì mọi người có thể comment bên dưới cho mình biết mình sẽ giải đáp cho mọi người.
chúc mọi người có một năm mới thật là zui zẻ và hạnh phúc bên gia đình của mình nhá.
