'I want this message to be shown at intervals after first run

I made this welcome feature using HTML and CSS, which I want to display at intervals.

--------------------------- What I want to achieve ---------------------------

First, this feature should be executed once (the moment a user opens this page on a browser).

Then, after every 8 Hours (even if the page is reloaded), the feature is executed again.

this is my welcome message here:

HTML:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../fontawesome-free-5.13.0-web/css/all.min.css" />
    <link rel="stylesheet" href="./style.css" />
    <title>greeting</title>
</head>

<body>
    <section id="welcome_greeting">
        <div id="welcome_greeting_inner">
            <div id="welcome_row_1">
                <div>hello</div>
                <div>world</div>
            </div>
            <div id="welcome_row_2">welcome</div>
            <div id="welcome_row_3">to</div>
            <div id="welcome_row_4">
                <div>
                    <p>our website</p>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section#welcome_greeting{
    padding: 0 20px;
    height: 100vh;
}

div#welcome_greeting_inner{
    font-family: 'Segoe UI';
    text-transform: capitalize;
}

div#welcome_greeting_inner div#welcome_row_1{
    font-size: 100px;
    display: flex;
    justify-content: space-evenly;
}

div#welcome_greeting_inner div#welcome_row_1 div:first-child{
    transform: translateY(-500px);
    opacity: 0;
    visibility: hidden;
    animation: rowOneA 2000ms ease 100ms forwards;
}

@keyframes rowOneA{
    100%{
        transform: translateY(0px);
        opacity: 1;
        visibility: visible;
    }
}

div#welcome_greeting_inner div#welcome_row_1 div:last-child{
    transform: translateY(-500px);
    opacity: 0;
    visibility: hidden;
    animation: rowOneB 2000ms ease 700ms forwards;
}

@keyframes rowOneB{
    100%{
        transform: translateY(0px);
        opacity: 1;
        visibility: visible;
    }
}

div#welcome_greeting_inner div#welcome_row_2{
    font-size: 120px;
    display: flex;
    justify-content: space-evenly;
    transform: rotateX(90deg);
    opacity: 0;
    visibility: hidden;
    animation: rowTwo 5000ms ease 1600ms forwards;
}

@keyframes rowTwo{
    100%{
        transform: rotateX(0deg);
        opacity: 1;
        visibility: visible;
    }
}

div#welcome_greeting_inner div#welcome_row_3{
    font-size: 100px;
    display: flex;
    justify-content: space-evenly;
    opacity: 0;
    visibility: hidden;
    animation: rowThree 6750ms ease 2600ms forwards;
}

@keyframes rowThree{
    100%{
        opacity: 1;
        visibility: visible;
    }
}

div#welcome_greeting_inner div#welcome_row_4{
    font-size: 160px;
    display: flex;
    justify-content: space-evenly;
}

div#welcome_greeting_inner div#welcome_row_4 > div > p{
    width: 0;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    overflow: hidden;
    animation: rowFour 6000ms ease 3300ms forwards;
}

@keyframes rowFour{
    100%{
        width: 100%;
        opacity: 1;
        visibility: visible;
    }
}

Please help me achieve this. Thank you :)

javascripthtmlcssanimationnode.jsfswatch


Solution 1:[1]

Technically speaking, this is only possible with persistent storage, since you're expecting it to run even if the page is refreshed.

You'd likely need to store the time when the user first visits the page, then retrieve the stored value when you need to check if it's been 8 hours.

This means you'd also have to use something like setInterval() to consistently pull in the first date, compare it to Date.now() and see if they're equal.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mytch

Related Questions