I’m working on an Ecommerce page.
I designed a hero/about animation that is supposed to start when the home page is loading, and then disappear after the animation has finished. It seems to work as expected. But…
How can I make it so that the animation only plays
when the two following conditions are met:
a) when the user lands on the home page the very first time
b) when the user clicks the “about” menu button on the home page or other pages within the site
The animation should not play when:
a) the user is already within the site and clicks on the home (logo) link
b) the user scrolls back up on the home page (manually or by clicking the back-up button)
(don’t get confused by the many grid layers – this is still a work in progress)
How comfortable are you with writing javascript?
To check if the user has visited the site before you need to save the information to the users cookies or preferably the localStorage. Then you can check on every successive visit and not show the animation (hide the element).
I’m generally not comfortable with code, even less with writing Javascript.
I use the animation as a pre-loader on the home page, but it also serves as a substitute for an about page (not really as a transition between pages I guess).
the animation is a section that sits on top of (and covers) the home page
it goes away after the animation has played, or can be clicked away by the user
show the animation on first landing on site/homepage only
show the animation again when clicking on top nav menu item “about”
It’s kind of contradicting. Essentially when clicking about, it should link to the home-page and pretend you’re landing there the first time.
I don’t know how else I can explain it. Maybe check out the read-only link?
