Hiệu ứng quét mã QRCode

Đoạn mã JavaScript hỗ trợ tạo và xoay vòng mã QR từ một mảng các URL, tạo ra tính năng tương tác cho website. Nó bao gồm chức năng hiển thị mã QR và thêm hiệu ứng hình ảnh để tăng sự thu hút của người dùng, phù hợp để tích hợp vào một module hoặc plugin. Tùy nhu cầu và khả năng sáng tạo của bạn.

Các yếu tố chính gồm:

Tạo mã QR: Hàm generateQRCode() tạo mã QR cho một URL và xóa mã cũ trước khi hiển thị mã mới, đảm bảo nội dung luôn được cập nhật mới.
Xoay vòng URL: startQRCodeRotation() thay đổi mã QR mỗi 5 giây, chọn ngẫu nhiên một URL từ mảng arr_polydev. Mã xử lý đảm bảo URL mới khác với URL trước đó.
Hiệu ứng nhấp nháy: áp dụng trước khi cập nhật mã QR để thu hút sự chú ý của người dùng, tạo sự tò mò đối với người dùng.
Hiệu ứng quét: CSS thêm hiệu ứng quét liên tục, mô phỏng quá trình quét trên mã QR, tạo yếu tố trực quan và tương tác.

Tính năng này lý tưởng cho các website muốn chia sẻ nhiều liên kết và có thể dễ dàng điều chỉnh tích hợp vào plugin, module trên site.

HTML

CSS

body {
    height: 100vh;
    margin: 0;
    background-color: 484848;
    overflow: hidden;
}

.polydev-qrcode-animate {
    width: 100%;
    height: 100vh;
    overflow: hide;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@keyframes scanQr {
    0% {
        background: linear-gradient(0deg, #ff5b23 0, rgba(255, 167, 137, .536896) 24.43%, rgba(255, 255, 255, 0) 100%);
        top: 0;
    }

50% {
        background: linear-gradient(0deg, #ff5b23 0, rgba(255, 167, 137, .536896) 24.43%, rgba(255, 255, 255, 0) 100%);
        top: 95%;
    }

51% {
        background: linear-gradient(180deg, #ff5b23 0, rgba(255, 167, 137, .536896) 24.43%, rgba(255, 255, 255, 0) 100%);
        top: 95%;
    }

100% {
        background: linear-gradient(180deg, #ff5b23 0, rgba(255, 167, 137, .536896) 24.43%, rgba(255, 255, 255, 0) 100%);
        top: 0;
    }
}

.flash {
    animation: flash-animation 0.5s ease-in-out 3;
}

@keyframes flash-animation {

0%,
    100% {
        opacity: 1;
    }

50% {
        opacity: 0;
    }
}

.qa-info .scan-qa {
    position: relative;
    width: 128px;
    height: auto;
    border: 4px solid #fff;
    border-radius: 8px;
}

.qa-info .scan-qa .scan-animation {
    width: 100%;
    height: 10px;
    position: absolute;
    animation-name: scanQr;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

JavaScript

// Array of URLs
const arr_polydev = ["https://wikipoly.com", "https://polyxgo.vn", "https://polyxgo.com", "https://thank.zone"];

let previousURL = ""; // Variable stores previous URL

// Function to generate QR code
function generateQRCode(text) {
    const qrContainer = document.getElementById("qrcode");
    qrContainer.innerHTML = ""; // Clear old QR code before generating a new one
    new QRCode(qrContainer, {
        text: text,
        width: 128,
        height: 128,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
}

// Function to create flash effect
function flashEffect() {
    const qrContainer = document.getElementById("qrcode");
    qrContainer.classList.add('flash'); // Add the flash class
    setTimeout(() => {
        qrContainer.classList.remove('flash'); // Remove the flash class after the flashing is done
    }, 1500); // Flash duration of 1.5 seconds
}

// Function to change QR code every 5 seconds
function startQRCodeRotation() {
    setInterval(() => {
        let randomIndex;
        let randomURL;
        
        // Loop to ensure the new URL is different from the previous one
        do {
            randomIndex = Math.floor(Math.random() * arr_polydev.length); // Pick a random URL
            randomURL = arr_polydev[randomIndex];
        } while (randomURL === previousURL); // Repeat if the new URL is the same as the previous one
        
        previousURL = randomURL; // Update the previous URL
        
        flashEffect(); // Add flash effect before changing the QR code
        setTimeout(() => {
            generateQRCode(randomURL); // Change the QR code after flashing
        }, 1500); // Wait 1.5 seconds after the flash effect to change the QR code
    }, 5000); // Change QR code every 5 seconds
}

// Start generating a random QR code and change it every 5 seconds
generateQRCode(arr_polydev[0]); // Start with the first URL
previousURL = arr_polydev[0]; // Set the initial previous URL
startQRCodeRotation();

Preview: Hiệu ứng quét mã QRCode

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Hiệu ứng quét mã QRCode

Về WikiPoly

Liên hệ

HTML

CSS

JavaScript

Preview: Hiệu ứng quét mã QRCode

Đăng nhập