close

.HTML5

Onboarding Features Tour

Free

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 onboardi... Read More

Demo
v0.1
22 Mar, 2018
Released
8 months ago
Updated
25+
Downloads

Description

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 jQuery just to select the elements and to add or remove the classes. It can be done through vanilla javascript but tried to make things simple and less code

Basic Structure

We created a wrapper div and divided it into two parts body and footer using CSS Grids. Body part contains Icons and 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 Next or 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 add and 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

Comments

Login to leave a comment 💬

Subscribe to our news letter

and get updates and coupon codes for our products


Copyright © 2018, UICardio