Surely, everyone came across the site when visiting for the first time, the screen was dark and only some specific element on the site was lit up with a message about what element it was and why it was, how to use it. Such training complex interface sites. Help please find examples of such sites. Maybe someone knows what it is called, is there any work to create such training on the site or is it all from scratch to write on js + css from scratch?

  • one
    And what is difficult? To select a specific element, create a layer that will have transparency and is filled with black (blur), give it a z-index greater than the maximum z-index on the page. The element that needs to be allocated is giving z-index even more. We add some helper to the selected item, maybe popup. Lightweight construction. If you arrange the js as a function, you can only give the element id and the text of the tooltip at the input. - ilyaplot

3 answers 3

This is called a site tour or a site tour and other similar names)

For example here:

  1. http://www.coolwebmasters.com/reviews/3969-11-awesome-jquery-site-tour-plugins-for-guiding-users-with-style.html
  2. http://dicim.net/delam-ekskursiyu-po-sajte.html
  3. http://ruseller.com/lessons.php?rub=32&id=820 (a similar tour, like in 2 points)
  4. https://myrusakov.ru/jquery-tour.html
  • Huge thanks! ;) - lirik90

I recommend this plugin:

https://github.com/easelinc/tourist

An example can be found here:

http://easelinc.imtqy.com/tourist/

enter image description here

    We used introJS , I recommend: simple, free, reliable.