We are building a product, and we want to demonstrate a new user that how to flow with the system. I've seen some websites and apps showing a dull overlay on background and putting instructions over the screen.
Example:
For First time user: i.imgur.com/N92LD7n.png
For Regular user: i.imgur.com/XMX9fWW.png
I want the similar thing. I hope, I am clear enough. :)
I think you can use something like foundation joyride to replicate the behaviour like your screenshot.. foundation.zurb.com/sites/docs/v/5.5.3/components… foundation is a whole framework but you can find many jquery implementations of joyride
Alkshendra Maurya
Frontend Engineer | Hashnode Alumnus
Made a little pen for you: codepen.io/alkshendra/pen/KVNowK
For hiding the overlay in subsequent visits, you can set a cookie to remember that the user has visited before. Or, for a logged in user you can send a status from backend that'd hide the overlay.
Upvote if it helps :)