The front end rookie guide I learned from Honor of Kings

Wechat search for “Notes of autumn Wind”. Pay attention to me, front-end learning don’t get lost.

In the world of Kings, there is not only happiness, but also learning, so that you can become happy and rich in knowledge. The credit for this, it has to be said, is its novice guidance.

Why do you say that? Let’s start with a couple of pictures.

Yes, the above is the king of glory novice guide, hand – in – hand teaching, and Daji’s beautiful voice.

The whole process takes about 2 minutes. It uses a variety of ways to guide, mask guide, bubble guide, video guide, operation guide and preset tasks, can be said in the novice guide, really “fine”, with a variety of tricks. But it takes just two minutes to guide you through the entire product, to show you how satisfying it is to beat an enemy and how easy it is to win a game. You get a lot of pleasure and you become dependent on it.

Guidance, but if no beginner give a no never played such games, will fight to fit a 5 v5, in his haven’t understand operation, just to fit in actual combat, the couple will be played very badly, complain by teammates do not say, will soon lose a game, resulting in frustration, think this game is garbage, Not to mention the thrill of the game.

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

It is a very important and necessary feature to learn! This is the focus of this article. The following is to explain the principle of actual combat

I first introduce several common types of novice guide renderings.

1. The guide page

The boot page usually appears when the APP is first opened and consists of 3-5 pages.

2. Mask guide

A black translucent mask is placed over the entire interface of the product. This guide allows the user to focus on the circled function points or gesture instructions.

3. Bubbles/pop-ups

Pop up a bubble prompt next to the operation button or pop up a popover.

4. Animation/video guide

Users can quickly understand the whole product based on the dynamic demo.

5. Operational boot

Step by step guide you through the process and encourage users to participate and learn as they go.

6. Preset tasks

The default task is to automatically create some examples related to the product shape for the user after they enter the product, rather than leaving the user with an empty page.

People will fall to the people also, so recently I encountered such a need. But what I need to implement is also relatively simple, only need to implement the mask boot.

Today we’re going to implement that. Let’s take a look at what our target looks like. The core code takes about 5 minutes to learn, with just 9 lines of JS and 60 lines of CSS. So read on for a different look at the highlights

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

Masks and bubbles are very familiar to many students. Here is only paste code, nothing too much can be explained, mainly using the 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>
Copy the code

// Bubble implementation<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'>Autumn wind skills</div>
Copy the code

Layer joining together

And how do we do this highlighting? How can I create a blank box in the middle of the mask? There is no CSS property that I know of that would implement this feature, if not. Does that mean THAT I have to empty out this highlighted block myself, and do it by stitching it together. This is my first instinct, as shown below.

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

z-index

The Z-index attribute sets a z-order that locates an element and its descendants or flex project. When elements overlap, the larger z-index element is displayed on top of the smaller one.

Because we can take advantage of the z-index feature by setting the z-index of our target element to be higher than our mask.

Through layer decomposition, we can see that the target element of the line of Autumn wind’s skill is at the top level, not at the same level as Autumn wind’s note text. So the solution is that we can’t leave the mask in the middle, but we can use z-index to put our target element on top of the mask, and then add a white background box between the mask and the target element to get the highlight effect. If you still don’t understand, you can see the following picture.

With that knowledge aside, we use the getBoundingClientRect attribute to get the size of the target element and its position relative to the viewport. Then the layout is done by absolute positioning. The following is the main logic of the implementation (the code is crude, mainly meaning expression

<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>Autumn wind notes</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'>Autumn wind skills</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>
Copy the code

Above is to achieve a mask guide implementation scheme. Of course, such a subtle design is inseparable from a great open source project, the above is a reference to the open source project IntroJS to achieve.

box-shadow

In addition to compatibility issues (not compatible with ie8 and previous versions), this solution is also a relatively simple method. Take a look at the box-shadow method.

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * / box - shadow: 2 p 2 p 2 px 1 px rgba (0, 0, 0, 0.2);Copy the code

The core idea is that we can achieve this by setting a relatively large shadow diffusion radius and setting a translucent background color.

box-shadow: 0 0 0 2000px rgba(0.0.0.5);
Copy the code

canvas

The full screen translucent mask is drawn on the Canvas, then the highlights are drawn, and the overlaped areas are made transparent using the XOR option in the globalCompositeOperation.

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);
Copy the code

Full code repository: github.com/hua1995116/…

By the way, I would like to introduce a few open source projects that I have seen with good beginner guides.

jquery-pagewalkthrough

Advantages: Hand-drawn style, suitable for specific site style.

Cons: Reliance on jQuery.

intro.js

Advantages: Rich mask bootstrap examples, customizable themes

Cons: Free for individuals, paid for by businesses.

driver.js

Advantages: MIT open source, with similar functionality to intro.js.

Disadvantages: Examples are not as rich as intro.js.

At this point, this article concludes.

reference

zhuanlan.zhihu.com/p/33508501

www.zhihu.com/question/20…

www.woshipm.com/ucd/3506054…

Juejin. Im/post / 684490…

Developer.mozilla.org/zh-CN/docs/…

Welcome to pay attention to “notes of autumn wind”, front-end learning do not get lost or add wechat Qiufengblue, exchange and study together.