Một năm canh tý trôi qua với nhiều biến động về cả tình hình dịch bệnh và kinh tế. Nhưng thật may nhà nước đã kịp thời có những biện pháp ứng phó nhanh nhẹn và hiệu quả để hạn chế tối thiểu tốc độ lây lan và kiểm soát tốt tình hình. Cũng vì vậy mà Việt Nam ta đã là một trong những nước được cho là chống dịch hiệu quả nhất.
Để cùng chung tay đẩy lùi dịch bệnh hiện tại đang hoành hành, mỗi người dân đều cần phải có ý thức rửa tay, đeo khẩu trang và khai báo y tế để có một cái tết tân sửu như ý.
Và cũng cùng góp một phần vào tinh thần phòng dịch cũng như không khí tết 2021, sharescript xin được chia sẻ một đoạn code trang trí web ngày tết cho các website và blog.
Chia sẻ code vui lòng ghi nguồn Sharescript.net, cảm ơn bạn!
Code trang trí web:
Bạn đặt đoạn code sau vào phần body của trang:
<style type="text/css">
@media only screen and (max-width: 1300px) {
#anhien {
display: none;
}
}
@media only screen and (max-width: 765px) {
#respo {
width: 150px !important;
}
}
</style>
<span id="anhien">
<img style="position:fixed;z-index:9999;top:0;left:0;width:120px;" src="____Link_câu_đối_bên_trái____" />
<img style="position:fixed;z-index:9999;top:0;right:0;width:120px;" src="____Link_câu_đối_bên_phải____"/>
</span>
<div style="position:fixed;z-index:9999;bottom:-70px;left:0;width:100%;height:104px;background:url(____Link_ảnh_chân_trang____) repeat-x bottom left;"></div>
<img id="respo" style="position:fixed;z-index:9999;bottom:0px;left:20px;width: 200px;" src="____Link_ảnh_chân_trang_2____"/>
Nếu bạn muốn xem full code để giống sharescript thì tải code bên dưới nhé!
Tùy chỉnh:
- 1300px: Dùng cho responsive, khi độ rộng trình duyệt lớn hơn 1300px thì áp dụng css bên dưới
- 765px: Tương tự 1300px
- bottom:-70px: Chỉnh lại là -50px nếu bạn muốn link ảnh chân trang lồi lên 1 chút để hợp với web của bạn
- bottom:0px: Chỉnh lại là 20px nếu link ảnh chân trang là -50px
Chia sẻ code vui lòng ghi nguồn Sharescript.net, cảm ơn bạn!
Code hiệu ứng trái tim rơi (Emoji):
Dưới đây là script:
{
const num_of_hearts = 30;
const driftX = 50;
const gravity = 100;
const update_speed = 900;
const heartTypes= [... "♥💕💓💔💖💗💘💝💞💟💙💚💛💜" ];
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
const viewSpaceWidth = viewportWidth+50;
const viewSpaceHeight = viewportHeight+50;
const randomInt = ((xmin,xmax) => (Math.floor( Math.random() * (xmax + 1 - xmin) + xmin )));
const randomReal = ((xmin,xmax) => ( Math.random() * (xmax - xmin) + xmin ));
const randomColor = (() => ("hsla" + "(" + randomInt(0,360) + "," +
randomInt(70,100) + "%," +
randomInt(40,60) + "%," +
randomReal(.8,1) + ")" ) );
const f_restart_heart = ((xx) => {
xx["xxleft"]=randomInt(0, viewSpaceWidth);
xx.style.left= xx["xxleft"] + "px";
xx["xxtop"]=randomInt(0, viewSpaceHeight) - viewSpaceHeight;
xx.style.top= xx["xxtop"] + "px";
xx["xrotate"] = randomInt(-150, 150);
xx.style.transform = "rotate(" + xx["xrotate"] + "deg)";
});
const heart_box = document.createElement("div");
heart_box.setAttribute("id","heart_box");
const f_new_heart = (() => {
const yy = document.createElement("div");
yy. textContent= heartTypes[Math.floor( Math.random() * heartTypes.length )];
yy["xxleft"]=randomInt(0, viewSpaceWidth);
yy.style.left= yy["xxleft"] + "px";
yy["xxtop"]= -90;
yy.style.top= yy["xxtop"] + "px";
yy["xrotate"] = randomInt(-150, 150);
yy.style.transform = "rotate(" + yy["xrotate"] + "deg)";
yy.style.color = randomColor();
yy["xsize"]= 10 + randomInt(0,30);
yy.style.fontSize = yy["xsize"] + "px";
yy.style.position="fixed";
yy.style.zIndex= randomInt(100,9999) .toString();
yy.style.transition= "top linear 1.5s, left linear 1.5s, transform linear 1.5s";
// f_restart_heart(yy);
return yy;
});
{ for (let i=0; i < num_of_hearts; i++) { heart_box.appendChild( f_new_heart()) } } ;
document.body.appendChild(heart_box);
const heartNodes = Array.from (heart_box.children);
const f_update_positions = (() => {
heartNodes.forEach (((xx: HTMLElement) => {
xx["xxleft"] +=
(() => {
const rnd = Math.random();
if ( rnd < 0.3333 ) {
return 0;
} else if ( rnd < 0.6666) {
return driftX;}
else {
return - driftX;
}
}) ();
xx["xxtop"] = xx["xxtop"] + ( (xx["xsize"]/20) * (gravity) );
if ( xx["xxtop"] > (viewSpaceHeight) + viewSpaceHeight/10 ) {
f_restart_heart(xx);
} else {
xx["xxtop"] = xx["xxtop"] + gravity /10 * randomInt(0,10); };
if ( xx["xrotate"] !== 0 ) {
xx["xrotate"] = xx["xrotate"] + randomInt(-30,60);
xx.style.transform = "rotate(" + xx["xrotate"] + "deg)";
};
xx.style.left = xx["xxleft"] + "px";
xx.style.top = xx["xxtop"] + "px";
}))
});
setInterval( f_update_positions , update_speed);
}
;
Nếu bạn muốn xem full code để giống sharescript thì tải code bên dưới nhé!
Tùy chỉnh:
- num_of_hearts: Số emoji sẽ xuất hiện trên màn hình
- driftX: Tốc độ bay của emoji
- gravity: Lực hút xuống khi emoji đang bay
- update_speed: Tốc độ đổi góc bay của emoji
- ♥💕💓💔💖💗💘💝💞💟💙💚💛💜: Các emoji xuất hiện trên màn hình, bạn có thể đổi emoji tùy thích
Chia sẻ code vui lòng ghi nguồn Sharescript.net, cảm ơn bạn!
Mẹo: Bạn có thể thay đổi các trái tim bằng cách vào trang https://emojipedia.org/ để lấy icon
[khungdownload manguon=”” redirectbanggi=”sharescript-redirect” tenfilezip=”trang-tri-web-tet” linkbutton1=”https://github.com/phanminhtai/ss.net/blob/main/trang-tri-web-ten-tan-suu/index1.html” tenbutton1=”Code 1″ linkbutton2=”https://github.com/phanminhtai/ss.net/blob/main/trang-tri-web-ten-tan-suu/index2.html” tenbutton2=”Code 2″]
Chúc các bạn năm mới vui vẻ thành công hạnh phúc!