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

22 tháng 12
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!!!

51 nhận xét:
  1. Trả lời
    1. nó lỗi như nào đó bác, chụp e xem với

      Xóa
    2. Win xp tôi xem thì nó ô vuông á ông :v

      Xóa
    3. hồi nãy dùng icon, bh dùng ảnh nên hết lỗi r :v

      Xóa
  2. Trả lời
    1. Không phải lỗi mà là do coppy code nên ra vậy =))

      Xóa
    2. copy từ Sublime ra paste vào bị như vậy đó =))

      Xóa
  3. đã fix hoa đào bị lỗi ô vuông, các bạn cập nhật lại nha (3)

    Trả lờiXóa
  4. Hay đó em! cho a xin code này về cập nhật bài viết trên Blog a nha!

    Trả lờiXóa
  5. Trả lời
    1. Em bận làm project cuối kỳ nữa anh ạ :(

      Xóa
  6. Trả lời
    1. Chúc hưng vui chơi giáng sinh đừng ra sản phẩm =))

      Xóa
    2. ôm láp thì chỉ có quay tay thôi :V

      Xóa
    3. Quay nhẹ nhẹ thôi nha :))

      Xóa
  7. ẩn link hình ảnh khi comment là đúng ngon luôn
    https://i.imgur.com/nl4WF5p.png

    Trả lờiXóa
  8. https://i.imgur.com/XvNBNLW.png
    Icon to quá e ơi, giới hạn size lại đi e :3

    Trả lờiXóa
  9. Mọi người cho em hỏi làm sao để ẩn link ảnh ạ
    https://i.imgur.com/yBE6w6v.png

    Trả lờiXóa
  10. Hello Hưng
    https://i.imgur.com/TzcSGuw.gif

    Trả lờiXóa
  11. Trả lời
    1. [i]https://i.imgur.com/r8rE8dQ.png[/i]

      Xóa
    2. [i]https://i.imgur.com/fLuk2SM.png[/i]

      Xóa
  12. [i]https://i.imgur.com/XFBEusz.png[/i]

    Trả lờiXóa
  13. Lưu lại chờ Tết thả đào khắp temp :3

    Trả lờiXóa
  14. Tét :v
    [i]https://i.imgur.com/FJErTJF.png[/i]

    Trả lờiXóa

Bình luận mới