LIVE SITE

Erase on click

On Click, All interactions

$w.onReady(function () {

    let bs = [{

            boxId: '#b1',

            labelId: '#ifcMall',

            underlineId: '#ifcMallUnderline',

            label: 'ifc mall',

            linesFrom: 0,

            isUnderline: true

        },

        {

            boxId: '#b2',

            labelId: '#tPark',

            underlineId: '#tParkUnderline',

            label: 'T Park',

            linesFrom: 10,

            isUnderline: true

        },

        {

            boxId: '#b3',

            labelId: '#shadowHarp',

            underlineId: '#shadowHarpUnderline',

            label: 'Shadow Harp',

            linesFrom: 20,

            isUnderline: true

        },

        {

            boxId: '#b4',

            labelId: '#pyeShirts',

            underlineId: '#pyeShirtsUnderline',

            label: 'PYE 2015',

            linesFrom: 30,

            isUnderline: true

        },

        {

            boxId: '#b5',

            labelId: '#cpa',

            underlineId: '#cpaUnderline',

            label: 'Cathay Pacific - Artmap',

            linesFrom: 40,

            isUnderline: true

        },

        {

            boxId: '#b6',

            labelId: '#vhk',

            underlineId: '#vhkUnderline',

            label: 'Very Hong Kong',

            linesFrom: 50,

            isUnderline: true

        },

        {

            boxId: '#b7',

            labelId: '#NikeHk',

            underlineId: '#NikeHkUnderline',

            label: 'Nike Hk',

            linesFrom: 60,

            isUnderline: true

        },

        {

            boxId: '#b8',

            labelId: '#laneCrawford',

            underlineId: '#laneCrawfordUnderline',

            label: 'Lane Crawford',

            linesFrom: 70,

            isUnderline: true

        },

        {

            boxId: '#b9',

            labelId: '#taiKwun',

            underlineId: '#taiKwunUnderline',

            label: 'Tai Kwun',

            linesFrom: 80,

            isUnderline: true

        },

        {

            boxId: '#b10',

            labelId: '#nwd',

            underlineId: '#nwdUnderline',

            label: 'New World Develop',

            linesFrom: 90,

            isUnderline: true

        },

        {

            boxId: '#b11',

            labelId: '#ic2020',

            underlineId: '#ic2020Underline',

            label: 'integral-conversation 2020',

            linesFrom: 100,

            isUnderline: true

        },

        {

            boxId: '#b12',

            labelId: '#woto',

            underlineId: '#wotoUnderline',

            label: 'Wonders of the Ocean',

            linesFrom: 110,

            isUnderline: true

        },

    ];


    bs.forEach(b => {

        let { labelId, underlineId, boxId, linesFrom } = b;

        $w(b.boxId).onClick(() => {

            let isClicked = true;

            //let lightBoxClosed = false;

            let line = createNewLine();


            setTimeout(() => {

                while (isClicked) {

                    $w(underlineId).hide();

                    $w(labelId).show();

                    revealLine(linesFrom++, line);

                    isClicked = false;

                }

            }, Math.floor(Math.random() * 60))

        });

    });

});


function createNewLine() {

    let line = `<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><rect x="${getRandomNumber() / 10}" y="${getRandomNumber()}" width="${800 - (getRandomNumber() / 5)}" height="${getRandomNumber() + 100}" fill="${getRandomColor()}" transform="rotate(${getRandomNumber() * 0.25},${getRandomNumber()},${getRandomNumber()})" />" /></svg>`;

    return line;

}


function getRandomNumber() {

    let r = Math.floor(Math.random() * 20);

    return r;

}


function getRandomColor() {

    let letters = `0123456789ABCDEF`;

    let color = ``;

    for (let i = 0; i < 6; i++) {

        color += `${letters[Math.floor(Math.random() * 16)]}`;

    }

    return `#${color}`;

}


const revealLine = (l, line) => {

    $w('#l' + l).src = line;

    if ($w('#l' + l).hidden) {

        $w('#l' + l).show("Reveal");

    }

}

Explore more Hover interactions 

Appearing Hot Dog

Jonathan Tsodikovitch

Shop Now

Appearing Hot Dog

Jonathan Tsodikovitch

Shop Now

Add a Title

Add a Title

Tags

Sites on X | © 2021 made with ❤️ on Editor X.