neumorphic-product-intro

Product intro generator based on:

• ES6 classes
• Shadow DOM v1
• Neumorphism design trend
• No-dependency pure JS.

Browser Support

Firefox	Chrome	Safari	Edge	IE
63	53	10	79	Nope

Installation

Download the js file from dist folder or just use a CDN instead:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/gokhanmeteerturk/[email protected]/dist/product-intro-main.js"></script>

Css code is placed dynamically in a shadow root, so you don't need to link a css file.

Usage

let myIntro = new ProductIntro(settings = {
    steps: [{
            selector: "#login_button",
            title: "Click Here to Login",
            content: "Start by logging in using this button right here."
        },
        {
            selector: "a.profile.active",
            title: "Your Profile",
            content: "You can always view your profile by using this button."
        },
    ],
    finishButtonText:"Finish",
    skipButtonText:"Skip"
});

myIntro.start();

finishButtonText and skipButtonText parameters are optional, and default to "Finish", "Skip" respectively.

Limitations:

Currently, ProductIntro only "circles" the element it locates using the selector(via svg clip path). If your selector points at a big container, this cut-out circle will have a large diameter. Since the message element is placed 'next to' this circle, a large enough circle may force this message out of the viewport.

Until new "step types" such as "rectangular cut-out" or "no cut-out" are introduced, it is recommended that you only use selectors to point at small components such as buttons or input areas.