Tạo Hiệu Ứng Hoa Đào Rơi Tuyệt Đẹp Trang Trí Blogspot Mừng Tết 2018

Chào mừng anh em đã trở lại với blog Siin Blog.

Mình mới làm được hiệu ứng hoa đào rơi tuyệt đẹp nên share cho anh em cho nóng 😀

Demo:

Mới đó thôi mà cũng gần hết năm 2017 rồi !!! Tết tây đã gần hơn và cũng chỉ 8 ngày nữa là tết tây rồi. Hôm nay mình quyết định chia sẻ cách để trang trí blog của mình có thêm không khí tết hơn. Mời các bạn đọc và làm theo...

CÁC BƯỚC THỰC HIỆN:

Bước 1: Truy cập vào trang chỉnh sửa HTML của blogspot.

Bước 2: Dán đoạn code này phía trên thẻ </body>hoặc </head>

<!-- Hoa Đào Rơi --><style> #snowflakeContainer { position: absolute; left: 0px; top: 0px;}.snowflake {    padding-left: 15px;    font-family: Cambria, Georgia, serif;    line-height: 2px;    position: fixed;    color: #FFFFFF;    user-select: none;    z-index: 1000;}.snowflake:hover {    cursor: default;}</style><div id='snowflakeContainer'><p class='snowflake'><img src='https://i.imgur.com/X4YsHlR.png'/></p></div><script>var requestAnimationFrame = window.requestAnimationFrame ||                             window.mozRequestAnimationFrame ||                             window.webkitRequestAnimationFrame ||                            window.msRequestAnimationFrame;var transforms = ["transform",                   "msTransform",                   "webkitTransform",                   "mozTransform",                   "oTransform"];                   var transformProperty = getSupportedPropertyName(transforms);var snowflakes = [];var browserWidth;var browserHeight;var numberOfSnowflakes = 50;var resetPosition = false;function setup() { window.addEventListener("DOMContentLoaded", generateSnowflakes, false); window.addEventListener("resize", setResetFlag, false);}setup();function getSupportedPropertyName(properties) {    for (var i = 0; i < properties.length; i++) {        if (typeof document.body.style[properties[i]] != "undefined") {            return properties[i];        }    }    return null;}function Snowflake(element, radius, speed, xPos, yPos) {    this.element = element;    this.radius = radius;    this.speed = speed;    this.xPos = xPos;    this.yPos = yPos;    this.counter = 0;    this.sign = Math.random() < 0.5 ? 1 : -1;    this.element.style.opacity = .1 + Math.random();    this.element.style.fontSize = 2 + Math.random() * 20 + "px";}Snowflake.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(element, xPosition, yPosition) { var val = "translate3d(" + xPosition + "px, " + yPosition + "px" + ", 0)";    element.style[transformProperty] = val;}function generateSnowflakes() {    var originalSnowflake = document.querySelector(".snowflake");    var snowflakeContainer = originalSnowflake.parentNode; browserWidth = document.documentElement.clientWidth;    browserHeight = document.documentElement.clientHeight;    for (var i = 0; i < numberOfSnowflakes; i++) {        var snowflakeCopy = originalSnowflake.cloneNode(true);        snowflakeContainer.appendChild(snowflakeCopy);        var initialXPos = getPosition(50, browserWidth);        var initialYPos = getPosition(50, browserHeight);        var speed = 5+Math.random()*40;        var radius = 4+Math.random()*10;        var snowflakeObject = new Snowflake(snowflakeCopy,                  radius,                  speed,                  initialXPos,                  initialYPos);        snowflakes.push(snowflakeObject);    } snowflakeContainer.removeChild(originalSnowflake);    moveSnowflakes();}function moveSnowflakes() {    for (var i = 0; i < snowflakes.length; i++) {        var snowflake = snowflakes[i];        snowflake.update();    }    if (resetPosition) {     browserWidth = document.documentElement.clientWidth;     browserHeight = document.documentElement.clientHeight;        for (var i = 0; i < snowflakes.length; i++) {         var snowflake = snowflakes[i];                  snowflake.xPos = getPosition(50, browserWidth);         snowflake.yPos = getPosition(50, browserHeight);     }          resetPosition = false;    }        requestAnimationFrame(moveSnowflakes);}function getPosition(offset, size) { return Math.round(-1*offset + Math.random() * (size+2*offset));}function setResetFlag(e) { resetPosition = true;}</script>

Bước 3: Lưu mẫu.

Chúc các bạn thành công!!!

Baca juga