I would like for this message to appear periodically following the initial execution

I have developed a unique welcome feature using HTML and CSS that I would like to showcase intermittently.

--------------------------- My Desired Outcome ---------------------------

Initially, this feature should be triggered once (when a user first accesses this page on a browser).

Then, every 8 hours thereafter (even if the page is refreshed), the feature should be activated again.

Here is my customized welcome message:

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;
    }
}

Your guidance in helping me implement this functionality will be highly appreciated. Thank you :)

javascripthtmlcssanimation

Answer №1

In order for this to work consistently, persistent storage is necessary as the functionality is expected to persist even when the page is refreshed.

The process would involve storing the initial visit time of the user and then retrieving this value when checking if 8 hours have passed.

Additionally, utilizing methods such as setInterval() would be essential to continuously fetch the original date, compare it with Date.now(), and verify their equality.

Answer №2

To enhance user experience, the concept involves saving the date in localStorage when the webpage is initially accessed. By cross-referencing this stored date against a threshold of 8 hours, an informative message can be displayed. If the stored date exceeds 8 hours, it indicates that the message has been shown twice.

let showWelcome = localStorage.getItem("welcomeMessage"),
    showWelcomeTime = new Date().getTime(), 
    showWelcomeTimeout = 60*60*8;

showWelcomeCheck();

function showWelcomeCheck()
{
  const now = new Date().getTime();
  if (showWelcome === null)
  {
    welcome_greeting.classList.remove("hidden");
    showWelcomeSave();
    showWelcomeTimer(now - showWelcomeTime + showWelcomeTimeout);
  }
  else
  {
    showWelcome = +showWelcome;
    if (showWelcome) 
    {
      showWelcomeTimer((now - showWelcomeTime) - (now - showWelcome) + showWelcomeTimeout);
    }
  }
}

function showWelcomeSave()
{
  const now = new Date().getTime();
  showWelcome = showWelcome === null ? now : 0;
  localStorage.setItem("welcomeMessage", showWelcome);

  
  setTimeout(e => welcome_greeting.classList.add("hidden"), 10000);

}

function showWelcomeTimer(when)
{
  const loop = timestamp =>
  {
    if (timestamp < when)
      return requestAnimationFrame(loop);

    welcome_greeting.classList.remove("hidden");
    showWelcomeSave();
  }
  loop(0);
}

https://jsfiddle.net/4ahgkeb9/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having Trouble Retrieving and Updating Records in MS CRM?

My current situation involves working with Microsoft Dynamics coding for the first time, and I am in need of a solution for my code. I have established two entities called Acc and Con, where Acc serves as the parent entity and Con is the child entity of A ...

javascriptjqueryajaxcrudxrm

Do XAML-based apps on Windows 8 provide a noticeable speed advantage over those built with HTML and CSS?

We are in the process of developing a photo-heavy Windows 8 Metro-style app and are concerned about UI performance. While choosing Objective-C over HTML for iOS was an easy decision to achieve the necessary UI performance, we are unsure about the speed com ...

htmlxamlwindows-8microsoft-metrowinrt-xaml

Is it possible to activate the nearby dropdown based on the user's selection?

On my html webpage, I have a form that consists of three dropdown menus each with different options: The first dropdown (A) includes choices from 1 to 6, as well as 'not set'. The second dropdown (B) allows selections from 1 to 7, and also has ...

javascriptjqueryhtmldrop-down-menu

How to break down JSON into individual elements using JavaScript

{ "name": "Sophia", "age": "Unknown", "heroes": ["Batman", "Superman", "Wonder Woman"], "sidekicks": [ { "name": "Robin" }, { "name": "Flash Gordon" }, { "name": "Bucky Barnes" } ...

javascriptjson

Is it possible to configure the async.retry method to retry even upon successful queries, depending on a specific condition?

Currently, I am delving into the node.js async module and wondering if it's possible to modify the behavior of the async.retry method. Specifically, I'd like it to retry even on successful operations but halt based on a certain condition or respo ...

javascriptnode.jsasync.js

Tips for toggling the visibility of a <div> element with a click event, even when there is already a click event assigned

No matter what I try, nothing seems to be working for me. I'm looking to hide the <div id="disqus_thread"> at first and then reveal it when I click on the link "commenting", after the comments have loaded. This particular link is located at the ...

javascriptcssajaxshow-hideblogger

Step-by-step guide for importing a JSON file in React typescript using Template literal

I am facing an error while using a Template literal in React TypeScript to import a JSON file. export interface IData { BASE_PRICE: number; TIER: string; LIST_PRICE_MIN: number; LIST_PRICE_MAX: number; DISCOUNT_PART_NUM: Discout; } type Discoun ...

javascriptnode.jsreactjsjsontypescript

Having trouble interpreting PHP-generated JSON data in JavaScript

I have a PHP script that outputs a JSON string. <?php $arr = array( 'id' => '1', 'myarray' => array( array('a' => 'a1', 'b' => 'b1', 'c' => 'c1', & ...

phpjavascriptjson

Creating a visually striking layout with Bootstrap card columns masonry effect by seamlessly adjusting card heights to prevent any

When using the bootstrap card columns masonry and a user clicks on a button inside a card, the height of the card changes dynamically by adding a card-footer. However, in certain situations, the cards change position causing a jumpy effect. To see this i ...

javascriptjqueryhtmlcssbootstrap-4

"Exploring the seamless integration of easyXDM, AJAX, and En

In this new inquiry, I am facing a similar challenge as my previous query regarding loading a PHP file into a cross-domain page with dynamic element height. However, I am now exploring a different approach. Although I have managed to load my script into a ...

phpjavascriptajaxeasyxdm

The page's dimensions exceed the size of the device screen

I created this basic HTML content using React <!doctype html> <html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style>< ...

htmlcssreactjs

A script in PHP or JavaScript that dynamically generates two dual drop-down menus to assist with data selection

I have experience with php scripting, but I am facing challenges when trying to combine it with JavaScript. The issue arises when I have a form that includes dropdown menus for categories and subcategories. When a category is selected, the options in the s ...

javascriptphpajax

JavaScript ACTING UP -> CROSS-ORIGIN RESOURCE ACCESS ERROR

After extensive research and troubleshooting, it dawned on me that the issue was not with JavaScript itself. Instead, I was facing a cross origin resource exception, which occurred because the ajax request was unable to access my server script due to lac ...

javascriptphpajax

Set the background-color of each <td> element to be equal to a value in the array, with each group of three elements having the same

I am trying to color every <td> element in a row of three columns with the same color using the following code: for (var i = 0; itr < $("td").length; i++) { $("td").eq(i).css("background-color", Colors[i]); } However, this code colors each i ...

javascriptjqueryhtmlhtml-tableconditional-statements

Showing button based on a particular value

I am trying to dynamically display a button based on the value of the sendSMS property for the logged-in user. I have added this property in the viewer model, which is connected to the user's base model. However, I am encountering difficulties with us ...

javascriptangularjsnode.jsstrongloop

javascript extract data from JSON

How can I extract values from the [object Object] in javascript? I have a JSON response from PHP that I am passing into JavaScript. I want to retrieve the GPSPoint_lat and GPSPoint_lon values. var jArray = ; var obj = JSON.parse(jArray); I am gett ...

javascriptjson

Tips for passing down CSS styles through Less stylesheets

In an effort to create a legend below a <table> that matches the colors defined in Bootstrap stylesheets, I am struggling with the following: .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot ...

csstwitter-bootstrap-3lessless-mixins

Personalized ES6 Bootstrap module created for a toggle switch button in Vue

Utilizing the custom switch toggle in a Vue application is my current task. Check out this link for more on the custom switch toggle I found a button that suits my needs, but I am unsure how to properly integrate it into my component so it can handle the ...

javascriptvue.jsecmascript-6module

Using v-model in Vue, the first option has been chosen

Is there a way to set a default value for myselect when a user visits the site for the first time? I want the first option to be selected initially, but allow the user to change their choice if they prefer another option. Can this be achieved using v-model ...

javascriptselectvue.js

Exploring ways to display all filtered chips in Angular

As a new developer working on an existing codebase, my current task involves displaying all the chips inside a card when a specific chip is selected from the Chip List. However, I'm struggling to modify the code to achieve this functionality. Any help ...

htmlangulartypescriptmultidimensional-arrayangular-material