Tips for displaying animations only the first time using HTML and CSS:

Question

Tips for displaying animations only the first time using HTML and CSS:

Upon the initial visit to my website, a captivating animation introduces itself with the words

"Hello. I'm Bob" as it gracefully fades into view. Navigating through the menu bar allows users to explore different sections of the site.

However, there is an issue when users decide to return back to the main page - the animation plays again. To rectify this, I simply want the text "Hello. I'm Bob" displayed without any animation effect.

$(".fade-in-first").addClass("animated fadeInUp");
setTimeout(function(){
     $(".fade-in-second").animate({ opacity: 1 });
    $(".btn-explore").addClass("pulse-anim");
}, 1300);

The jQuery code above controls the animation sequence. Ideally, I would like to implement a condition such as ...

if (count) == 0, then animate, count ++

Despite my attempts at using variables to achieve this, I encountered difficulties in implementing the desired functionality.

javascript jquery html css animation

Answer 1

Answer №1

One way to keep track of whether a user has viewed the animation is by utilizing localStorage.

Regarding the setTimeout function used in the code snippet, I have some reservations about it, but I'll leave it as is.

$(".fade-in-first").addClass("animated fadeInUp");
setTimeout(function(){
  if(typeof(localStorage.getItem("welcomeShown")) != null && localStorage.getItem("welcomeShown") != "true"){
    $(".fade-in-second").animate({ opacity: 1 },5000);
    localStorage.setItem("welcomeShown","true");
  }else{
    $(".fade-in-second").css("opacity", 1);
  }

  $(".btn-explore").addClass("pulse-anim");
}, 1300);

If you want to experiment with this code, feel free to check it out on CodePen. There's even a button provided to clear the localStorage for multiple trial runs!

Answer 2

One way to keep track of whether a user has viewed the animation is by utilizing localStorage.

Regarding the setTimeout function used in the code snippet, I have some reservations about it, but I'll leave it as is.

$(".fade-in-first").addClass("animated fadeInUp");
setTimeout(function(){
  if(typeof(localStorage.getItem("welcomeShown")) != null && localStorage.getItem("welcomeShown") != "true"){
    $(".fade-in-second").animate({ opacity: 1 },5000);
    localStorage.setItem("welcomeShown","true");
  }else{
    $(".fade-in-second").css("opacity", 1);
  }

  $(".btn-explore").addClass("pulse-anim");
}, 1300);

If you want to experiment with this code, feel free to check it out on CodePen. There's even a button provided to clear the localStorage for multiple trial runs!

Answer 3

Answer №2

If the user's browser reloads your site upon returning to the homepage (not a single-page app), your scripts will reset as well, causing the count value to be lost. This value is essential for tracking the user's previous visit.

To address this issue, you can either use a cookie, or utilize either sessionStorage or localStorage.

// sessionStorage or localStorage (both work the same way)
if (!sessionStorage.getItem('hasVisited')) {
  $(".fade-in-first").addClass("animated fadeInUp");
  setTimeout(function(){
    $(".fade-in-second").animate({ opacity: 1 });
    $(".btn-explore").addClass("pulse-anim");
  }, 1300);

  sessionStorage.setItem('hasVisited', true); 
}

Use sessionStorage if you only need to track their homepage visit for the current session. The stored data is available until the tab, window, or browser is closed. Note that sessionStorage behavior may vary across tabs due to how browsers handle tab history.

Choose localStorage if you want the value to persist across different sessions and tabs. All browsing tabs on your site share the synchronized localStorage object.

Note 1: It's advised to manipulate values in the Web Storage API (session/localStorage) using setItem() / getItem() to prevent issues with inherited prototype values and accidental property overwrites.

For instance:

localStorage.key = 'My key value';
console.log(localStorage.key);

In the above scenario, the assigned value is accessible but inadvertently replaces the key method of the localStorage object!

Note 2: These values are limited to the same subdomain and protocol! Crossing subdomains or protocols won't retain the information from www.example.com to login.example.com, or transitioning between http://www.example.com and https://www.example.com.

Cookies

Cookies offer an alternative solution, although parsing values requires more effort (especially when already using jQuery). Pay attention to set the appropriate path for the cookie's scope and consider the expires attribute. Refer to these resources for additional details:

https://www.w3schools.com/js/js_cookies.asp

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Answer 4

If the user's browser reloads your site upon returning to the homepage (not a single-page app), your scripts will reset as well, causing the count value to be lost. This value is essential for tracking the user's previous visit.

To address this issue, you can either use a cookie, or utilize either sessionStorage or localStorage.

// sessionStorage or localStorage (both work the same way)
if (!sessionStorage.getItem('hasVisited')) {
  $(".fade-in-first").addClass("animated fadeInUp");
  setTimeout(function(){
    $(".fade-in-second").animate({ opacity: 1 });
    $(".btn-explore").addClass("pulse-anim");
  }, 1300);

  sessionStorage.setItem('hasVisited', true); 
}

Use sessionStorage if you only need to track their homepage visit for the current session. The stored data is available until the tab, window, or browser is closed. Note that sessionStorage behavior may vary across tabs due to how browsers handle tab history.

Choose localStorage if you want the value to persist across different sessions and tabs. All browsing tabs on your site share the synchronized localStorage object.

Note 1: It's advised to manipulate values in the Web Storage API (session/localStorage) using setItem() / getItem() to prevent issues with inherited prototype values and accidental property overwrites.

For instance:

localStorage.key = 'My key value';
console.log(localStorage.key);

In the above scenario, the assigned value is accessible but inadvertently replaces the key method of the localStorage object!

Note 2: These values are limited to the same subdomain and protocol! Crossing subdomains or protocols won't retain the information from www.example.com to login.example.com, or transitioning between http://www.example.com and https://www.example.com.

Cookies

Cookies offer an alternative solution, although parsing values requires more effort (especially when already using jQuery). Pay attention to set the appropriate path for the cookie's scope and consider the expires attribute. Refer to these resources for additional details:

https://www.w3schools.com/js/js_cookies.asp

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Answer 5

Answer №3

An alternative approach that offers more flexibility, especially if you need to account for multiple visit scenarios.

if (!localStorage.hasVisited) {
    localStorage.hasVisited = true;
} else if (localStorage.hasVisited == 'true') {
    localStorage.hasVisited = false;
}

if(localStorage.hasVisited == 'true') {
    $(".fade-in-first").addClass("animated fadeInUp");
    setTimeout(function(){
        $(".fade-in-second").animate({ opacity: 1 });
        $(".btn-explore").addClass("pulse-anim");
    }, 1300);
}

Answer 6

An alternative approach that offers more flexibility, especially if you need to account for multiple visit scenarios.

if (!localStorage.hasVisited) {
    localStorage.hasVisited = true;
} else if (localStorage.hasVisited == 'true') {
    localStorage.hasVisited = false;
}

if(localStorage.hasVisited == 'true') {
    $(".fade-in-first").addClass("animated fadeInUp");
    setTimeout(function(){
        $(".fade-in-second").animate({ opacity: 1 });
        $(".btn-explore").addClass("pulse-anim");
    }, 1300);
}

Answer 7

Answer №4

One way to prevent replaying an animation on a specific page is by utilizing LocalStorage to set an attribute indicating that the animation has been loaded. However, this approach has its drawbacks as the user will not be able to see the animation again until they clear their LocalStorage.

An alternative approach, which I personally find better, is to use cookies with a short expiration time, such as 1 day.

Here's an example using localStorage:

// Play the animation only once using LocalStorage
if (!window.localStorage.getItem('homeAnimPlayed')) {
    setTimeout(() => {
        window.localStorage.setItem('homeAnimPlayed', "true");
        this.setState({ animationLoaded: true })
    }, 3000);
} else {
    this.setState({ animationLoaded: true })
}

And here's how you can achieve the same result with a cookie:

// Set a cookie to play the animation only once with 1-day expiration

function writeCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// Use these functions to read/write cookies with custom expiration dates
let cookie = readCookie("animPlayed_home");
if (!cookie) {
    setTimeout(() => {
        writeCookie("animPlayed_home", "true", 1);
        this.setState({ animationLoaded: true })
    }, 3000);
} else {
    this.setState({ animationLoaded: true })
}

Answer 8

One way to prevent replaying an animation on a specific page is by utilizing LocalStorage to set an attribute indicating that the animation has been loaded. However, this approach has its drawbacks as the user will not be able to see the animation again until they clear their LocalStorage.

An alternative approach, which I personally find better, is to use cookies with a short expiration time, such as 1 day.

Here's an example using localStorage:

// Play the animation only once using LocalStorage
if (!window.localStorage.getItem('homeAnimPlayed')) {
    setTimeout(() => {
        window.localStorage.setItem('homeAnimPlayed', "true");
        this.setState({ animationLoaded: true })
    }, 3000);
} else {
    this.setState({ animationLoaded: true })
}

And here's how you can achieve the same result with a cookie:

// Set a cookie to play the animation only once with 1-day expiration

function writeCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// Use these functions to read/write cookies with custom expiration dates
let cookie = readCookie("animPlayed_home");
if (!cookie) {
    setTimeout(() => {
        writeCookie("animPlayed_home", "true", 1);
        this.setState({ animationLoaded: true })
    }, 3000);
} else {
    this.setState({ animationLoaded: true })
}

Tips for displaying animations only the first time using HTML and CSS:

Answer №1

Answer №2

Cookies

Answer №3

Answer №4

Similar questions

Height of list items in image gallery does not automatically readjust

Issue with the formatting of the disabled button

Deleting query strings from the URL - HashRouter

Is there a way to bypass the default layout on app router in Next.js and implement our own custom page layout

Can you explain the purpose of this function on Google PlusOne?

What is causing my AJAX Contact Form to navigate away from the original page?

Submit Button Not Responding on Mobile Device

Using an external HTML file to import a template into Vue.js single file components

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Code executing twice instead of once in Javascript

Encountering a ValueError when attempting to validate form fields with Django and JavaScript

file_put_contents - store user-defined variables

What occurs when socket.io events are not properly handled?

Vue.js - Exploring methods to append an array to the existing data

Challenges in accurately selecting jQuery elements

What is the best way to access a DOM node within a withStyle component?

Expo BarCodeScanner becomes unresponsive (specifically, the camera) upon exiting the application

The value of 'this.selectedNodes' does not support iteration and is causing a

Accessing props in react-native-testing-library and styled-components is not possible

What is the best way to eliminate all frames from the current windows using jQuery?