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

Retrieve an object that includes a property with an array of objects by filtering it with an array of strings

I have a large JSON file filled with data on over 300 different types of drinks, including their ingredients, names, and instructions. Each object in the file represents a unique drink recipe. Here is an example of how one of these objects is structured: ...

javascriptarraysjsonobject

Shell script for swapping all occurrences of :*; with a comma

Below are some CSS color variables defined in hex: --state-success-text: #3c763d; --state-success-background: #dff0d8; To create a comma-separated list of these color variables, the output should look like this: state-success-text, state-success ...

cssbashsedcss-variables

Bootstrap datepicker not applying datepicker-options as expected

I have been trying to pass all my options in a JSON file according to the instructions on http://angular-ui.github.io/bootstrap/#/top, but unfortunately, I haven't been able to get it to work. I've been experimenting with the Plunkr provided on t ...

javascriptangularjstwitter-bootstrapdatepicker

Accessing an Accurate and Customized Menu Selection from an Old-School .ASP Loop Area

I am currently facing an issue with the note section in my form. Users with permissions can add information to a specific record, including deleting or editing their own notes. However, when I implemented a Jquery Modal Menu for confirming deletions, I enc ...

javascriptjqueryasp-classic

Eliminate the need for jQuery when performing basic text rotation operations

Currently, I find myself loading an entire jQuery library for a task that could be achieved with much simpler code. The task involves cycling through a list of text spans to display different messages each time. Below is the existing code: (function($) ...

javascriptjquery

Choosing a particular svg path in d3.js using JSON attribute

Is it feasible to isolate just one of the SVG paths generated from a geoJSON file using D3? In my scenario, the paths represent different areas on a map. Users can pick an area from a dropdown menu. I aim to utilize the selected value from this list to pin ...

javascriptjsond3.jssvg

jQuery prioritizes enforcing style over using a CSS file

I am facing an issue with a nested div functioning similar to a drop-down menu. The problem arises when I click on the #two div as I want it to disappear. To handle this, I utilized jQuery and tried using both .hide() and .slideUp(). However, upon implem ...

jqueryhtmlcss

Guide on generating a child element in a React application using server response

I have developed a react application with multiple nested routes. One of the nested routes utilizes a backend API that returns complete HTML content. My goal is to display this HTML content with the same styling in my UI without directly manipulating the ...

htmlreactjsreact-dom

Utilizing HTML and JavaScript to dynamically switch stylesheets based on the width of

When it comes to using stylesheets for mobile and non-mobile devices, there is a need for different approaches. The idea of comparing browser height and width in JavaScript seems like a good one, but the implementation may not always work as expected. ...

javascripthtmlcssstylesheet

Utilizing App Script for Filtering Data with Multiple Criteria

Having trouble transferring data from a data sheet to my report sheet using multiple criteria for matching. I wrote some code that worked, but it's returning all data instead of filtering by criteria. I want the function to search for column criteria ...

javascriptgoogle-apps-scriptgoogle-sheets

Creating a platform akin to YouTube for sharing videos online

Currently, I am in the process of creating a personalized website that bears similarities to YouTube. However, I am unsure about how to enable new pages and files on this platform. Despite being relatively new to HTML, I possess a basic understanding of co ...

htmlyoutubeweb

The table appears to be fixed in place and will not scroll, even though the data

Previously, my code was functioning perfectly with the mCustomScrollbar I implemented to scroll both vertically and horizontally on my table. However, while revising my jQuery code for organization purposes, I seem to have unknowingly altered something tha ...

javascriptjqueryhtml

The background image of the LI element is displayed behind the image within the list item

So, here is the outline of my HTML structure: <li class="block1"> <a title="Block 1 Title" href="get/wzTZKKrI1kQ"> <img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg"> ...

htmlcssimage

Align the text vertically in a Bootstrap button

Can anyone lend a hand with vertically aligning text in a Bootstrap button? When I use the align-middle class, the text is aligned as desired. However, if I use the align-top class, the text remains top-aligned no matter what I do. Any suggestions? Here& ...

htmlcssbootstrap-4

My attempt to incorporate an ajax loading gif into my website has been met with technical difficulties and is currently not functioning as

I am currently developing an uploader feature for my website located at To enhance user experience, I aim to display a loading animation in the form of a .gif image while the select box is being populated with subcategory options via an AJAX request. Bel ...

phphtmlajaxgifloader

Tips for aligning divs side by side with smaller divs stacked below them

I have a collection of dynamically generated divs that act as panels for selecting different options. These divs can be categorized into two types: regular and short. The height of the regular divs is determined using JavaScript to match the height of the ...

csshtml

Using Jquery to automatically populate an input field if the user already exists

I'm currently working on populating a form if the user input for name and firstname already exists in my database. However, I am facing an issue with my JavaScript program where it fails to check if the name and firstname combination already exists i ...

javascriptphpjquery

Clicking the save button in the modal updates the text on both the current tab and any previously clicked tabs

I'm looking to implement tabs that, when clicking on the edit icon, open a modal for editing the content of each tab. The issue I'm currently encountering is that if I open the editor for one tab, close it without saving, then open the editor fo ...

javascripthtmlcss

Comparison: NumberFormatter versus NumberFormat in PHP and JavaScript

My attempts to format currency seem to yield inconsistent results. Using PHP with the NumberFormatter class, here's a snippet of my code: $number = 5125.99; echo getInternationallyFormattedCurrency($number, 'tl-PH', 'PHP'); echo & ...

javascriptphpinternationalization

Unable to incorporate additional functions while using directives

http://example.com Is there a way to incorporate an addChild(tree) function into this code in order to expand the data array? I have made changes to the template as shown below: '<p>{{ family.name }}{{test }}</p>'+ '<ul>& ...

angularjshtml