Every app or website has a number of features, and it's important for the users to know about them when they come to the website or when they sign up.
Mobile apps are already using onboarding screens and we have made similar display method for the web. This experiment is made on the top of jQuery so remember to include it. We are using
We created a
wrapper div and divided it into two parts
footer using CSS Grids. Body part contains
text whereas footer contains the buttons.
You can add a number of icons, but I have added four in this example.
active class brings the icon in the middle and hide the sibling icons.
Same goes for current icon info, all the info and icons are mapped with the
id, Whenever the
Previous button is clicked
active class is added on info and icon divs
In CSS part, I first aligned the icons on the right side which is out of the view. When clicked on the
Next button, I add the
active class and it brings it in the front. When again
Next button is clicked
toLeft class is added to the current
active icon and it get animated to the left side.
Same concept and classes are applied to info divs
Now we just need to
remove classes according to the clicked buttons, and at last we get this cool animated
Onboarding Features Tour, for suggestions or questions use the comment section below
and get updates and coupon codes for our products