Glitch Effect | Vanilla Javascript

Trong bài viết này mình sẽ hướng dẫn các bạn làm Glitch Effect bằng CSS3 và Javascript đơn giản.
Glitch Effect | Vanilla Javascript

Giới thiệu

Hôm nay mình chia sẻ cho các bạn một hiệu ứng thích hợp dùng trong trang "404" hoặc trang "Comming soon" để giới thiệu sản phẩm thêm phần ấn tượng.

Chỉ cần các bạn biết một ít kiến thức cơ bản là có thể thực hiện được hiệu ứng website đơn giản này rồi đó!!!

Thực hiện

1. CSS

Ở đây chú ý đầu tiên là "#item-bg" chứa các ".box" phải có thuộc tính position: relative. Sau đó các ".box" này sẽ để thuộc tính là position: absolute.

2. Javascript

Đây là bước quan trọng nhất

Có 2 cách để tạo các ".box" dùng script để tạo ra hay chỉ đơn giản bạn tạo sẫn bằng html rùi dùng đoạn script sao để add các thuộc tính chuyển động cho nó.

$(document).ready(function() {
    setInterval(function(){
        let glitch = document.getElementsByClassName('box');
        for(let i = 0; i < glitch.length; i ++) {
            glitch[i].style.left = Math.floor(Math.random()*100) + 'vw';
            glitch[i].style.top = Math.floor(Math.random()*100) + 'vh';
            glitch[i].style.width = Math.floor(Math.random()*400) + 'px';
            glitch[i].style.height = Math.floor(Math.random()*100) + 'px';
            glitch[i].style.backgroundPosition = Math.floor(Math.random()*50) + 'px';
        }
    }, 2000);
});

Kết

Bạn thấy không rất đơn giản để chúng ta tạo ra các hiệu ứng đẹp mắt cho website. Bạn muốn kham thảo hơn các hiệu ứng khác thì hãy ghé qua Boldman nhé.

Hãy để lại comment mình sẽ giải đáp thắc mắc của các bạn sớm nhất.

Nếu bạn thích thì có thể like ngược lại thì dislike đều là động lực rất lớn cho mình.

P/s: Make simple, make easy, make beauty

<div id="item-bg" style="background-image: url(https://www.boldman.vn/wwwroot/templates/website/global/img/background.jpg);">
</div>

#item-bg {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    .box {
        position: absolute;
        background-attachment: fixed;
        background-image: url(https://www.boldman.vn/wwwroot/templates/website/global/img/background.jpg);
    }
}

<script type="text/javascript">
    $(document).ready(function() {
        let bg = document.getElementById('item-bg');
        let count = 20;
        for(let i = 0; i < count; i++) {
            let glitchBox = document.createElement('div')
            glitchBox.className = 'box';
            bg.appendChild(glitchBox);
        }
        setInterval(function(){
            let glitch = document.getElementsByClassName('box');
            for(let i = 0; i < glitch.length; i ++) {
                glitch[i].style.left = Math.floor(Math.random()*100) + 'vw';
                glitch[i].style.top = Math.floor(Math.random()*100) + 'vh';
                glitch[i].style.width = Math.floor(Math.random()*400) + 'px';
                glitch[i].style.height = Math.floor(Math.random()*100) + 'px';
                glitch[i].style.backgroundPosition = Math.floor(Math.random()*50) + 'px';
            }
        }, 200);  
    });
</script>

0 thảo luận về Glitch Effect | Vanilla Javascript

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục