From the glory of the king

Search “notes of autumn wind” on wechat. Pay attention to me, don’t get lost.

In the king’s world, not only happiness, but also learning, let you become a happy and knowledgeable person. The hero of this is its novice guidance.

Why do you say that? Let’s look at some pictures first.

Yes, the above is the rookie guidance of King glory, hand in hand teaching, and the wonderful voice of Daji.

The whole process is about2 minutes. It uses a variety of boot methods,Mask guidance, bubble guidance, video guidance, operation guidance and preset tasksIt can be said that in terms of novice guidance, it’s really “detailed”, using a variety of patterns. But it takes only two minutes of guidance to let you quickly experience the use of the whole product. It makes you feel so satisfied to defeat the enemy and so simple to win a game. You reap a lot of happiness and become dependent on it.

If there is no rookie guide, let a rookie who has never played this kind of game start a 5v5 If you start the actual combat before you understand the operation, the newcomer will be beaten miserably. If you are complained by your teammates, you will soon lose a game, resulting in a sense of frustration. You feel that the game is rubbish, let alone experience pleasure from the game.

So the novice guide is a way to let users quickly understand the product features and the use of products in a short time.

It is a very important and necessary function to learn! This is also the key content of this article. The following is the principle of practical explanation

Let me first introduce several common types of novice guidance effect pictures.

1. Guide page

The guide page generally appears when the app is opened for the first time and consists of 3-5 pages.

2. Mask guidance

A black translucent mask is used on the top of the whole interface of the product, which enables the user to focus on the function points or gesture instructions.

3. Bubble / pop up

Pop up a bubble prompt box next to the operation button or pop up a pop-up window directly.

4. Animation / Video Guide

Users can quickly understand the whole product according to the dynamic demonstration.

5. Operational guidance

Step by step guide you to operate, encourage users to participate in it, while learning to use.

6. Preset tasks

The default task is to automatically create some examples related to the product form for users after they enter the product, instead of leaving an empty page for users.

People will assume a greater responsibility than others, so recently I met such a demand. However, what I need to achieve is relatively simple. I only need to implement the mask guidance.

Today, let’s implement this function. Let’s take a look at what our goal looks like. It only takes about 5 minutes to learn the core code, only 9 lines of JS code and 60 lines of CSS code. So go on and look down ~ the highlight part will have a different harvest~

It mainly includes three parts: mask, bubble and highlight.

The mask and bubble are very familiar to many students. Here is only posted code, there is nothing too much to explain, mainly the use of absolute positioning.

//Mask implementation
<style> .guide-mask {
  z-index: 999999;
  background-color: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  opacity: 0.8;
} </style>
<div class="guide-mask"></div>

//Bubble realization
<style> .tooltip-box:before {
  content: "";
  position: absolute;
  right: 100%;
  top: -10px;
  left: 20%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 13px solid white;
} </style>
<div class='tooltip-box'>
  Skills of Qiufeng
</div>

Layer splicing

And how to achieve this? How can a blank box be generated in the middle of the mask? There are no CSS attributes I know that can implement this feature, if not. Does that mean that I need to empty this highlighted block by myself, and realize it by splicing. As shown below, this is my first intuitive idea.

This method is more stupid, but it is more cumbersome.

z-index

z-indexAttribute sets the z-order of a positioning element and its descendants or flex project. When the elements overlap, the larger Z-index elements will cover the smaller elements to display in the upper layer.

Because we can use itz-indexThis feature, as long as thez-indexJust set it higher than our mask.

Through layer decomposition, we can see the element line of the targetSkills of QiufengIt’s at the top, not the topNotes of autumn windThe text is on the same level. So the solution is that we can’t make the mask empty in the middle, but we can pass itz-indexLet’s put the target element above the mask, and then add a white background box between the mask and the target element, so as to achieve the highlight effect. If you still don’t understand, you can see the figure below.

With the above knowledge, the positioning is poor, and we passgetBoundingClientRectProperty to get the size of the target element and its position relative to the viewport. Then the layout is carried out by absolute positioning. The following is the main logic of this implementation

<style> ...
  .guide-helper-layer {
    position: absolute;
    z-index: 9999998;
    background-color: #FFF;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 4px;
  }
  .guide-content {
    position: absolute;
    z-index: 10000000;
    background-color: transparent;
  }
  .guide-mark-relative {
    position: relative;
    z-index: 9999999 !important;
  }
  ... </style>
</head>
<body>
    <h2>Notes of autumn wind</h2>
    <div class="skill guide-mark-relative">
        ...
    </div>
    <div class="guide-mask"></div>
    <div class="guide-helper-layer" style="width: 472px; height:58px; top:55px;left: 36px;">
        <div class='tooltip-box'>
            Skills of Qiufeng
        </div>
    </div>
    <script> const guideTarget = document.querySelector('.skill')
        const tooltip = document.querySelector('.tooltip-box')
        var rect = guideTarget.getBoundingClientRect()
        const helperLayer = document.querySelector('.guide-helper-layer')
        helperLayer.style.left = rect.left - 3 + 'px'
        helperLayer.style.top = rect.top - 3 + 'px'
        helperLayer.style.width = rect.width + 3 * 2 + 'px'
        helperLayer.style.height = rect.height + 3 * 2 + 'px'
        tooltip.style.top = rect.height + 3 * 2 + 10 + 5 + 'px' </script>

The above is the implementation of a mask boot scheme. Of course, such a subtle design is inseparable from the great open source project, the above is a reference to the open source projectintrojsTo achieve.

box-shadow

In addition to the compatibility problem (incompatibility with lower version IE8 and previous versions), this scheme is also a relatively simple method. Let’s take a look at the introduction of box shadow.

`/*X offset | y offset | shadow blur radius | shadow diffusion radius | shadow color*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);`

The core idea is that we can set a larger shadow diffusion radius, and then set a translucent background color.

box-shadow: 0 0 0 2000px rgba(0,0,0,.5); 

canvas

First, the translucent mask of full screen is drawn by canvas, and then the highlight part is drawnglobalCompositeOperationInxorOption to make the overlap transparent.

const canvas = document.getElementById('guide-mask')
const width = window.innerWidth;
const height = window.innerHeight;
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
ctx.fillRect(0, 0, width, height);
ctx.fill();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.globalCompositeOperation = "xor";
ctx.fillRect(rect.left - 3, rect.top - 3, rect.width + 3 * 2 + 10 + 5, rect.height + 3 * 2); 

	Layer splicing	z-index	Box-shadow	Canvas
compatibility	very nice	very nice	commonly	commonly
Degree of difficulty	Slightly complicated	simple	simple	Slightly complicated
General evaluation	⭐️⭐️⭐️	⭐️⭐️⭐️⭐️⭐️	⭐️⭐️⭐️⭐️	⭐️⭐️⭐️⭐️

All of the above complete code warehouse:github.com/hua1995116/…

By the way, I would like to introduce several open source projects that I have seen novice guide better.

jquery-pagewalkthrough

Advantages: Hand Painted style, suitable for specific website style.

Disadvantage: you need to rely on jQuery.

intro.js

Advantages: rich mask guide examples, customizable theme

Disadvantages: personal free, business need to pay.

driver.js

Advantages: MIT open source, with and intro.js Almost the same function.

Disadvantages: the example does not intro.js Rich.

So far, this article ends here.

reference resources

https://zhuanlan.zhihu.com/p/33508501

https://www.zhihu.com/question/20295898

http://www.woshipm.com/ucd/3506054.html

https://juejin.im/post/6844903859786104839

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing

last

If my article helps you, I hope you can help me. Welcome to my WeChat official account.Notes of autumn wind, replyFriendsSecond, you can add wechat and join the communication group,Notes of autumn windWill always be with you.