QRCode scan animation

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: QRCode scan animation

By me a coffee

<body>

@polyxgo

PolyXGO

This JavaScript code dynamically generates and rotates QR codes from an array of URLs, creating an interactive feature for websites. It includes functionality to display QR codes and adds visual effects for enhanced user engagement, making it suitable for a module or plugin integration.

Key elements include:

QR Code Generation: The generateQRCode() function generates a QR code for a URL and clears any existing code before displaying a new one, ensuring fresh content with each update.
URL Rotation: The startQRCodeRotation() function switches the QR code every 5 seconds, selecting a random URL from the arr_polydev array. It ensures a different URL from the previous one for each update.
Flash Animation: A flash effect is applied before updating the QR code to capture user attention. This creates a more dynamic and engaging experience.
Scan Effect: CSS adds a continuous scan animation, simulating a scanning process over the QR code. This creates a visually appealing and interactive element.

This feature is ideal for websites looking to share multiple links and can be easily adapted for integration into plugins or modules on sites.

HTML

CSS

JavaScript

Preview: QRCode scan animation

Login

Register