One line of code will teach you how to make novice guides

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

Hello everyone! I’m a front name,

Novice guided teaching

We do a variety of H5 applications often meet the need to do a novice guide, as a small white I, the previous treatment scheme:

1. Directly make a popover floating layer (0.8 transparency), popover floating layer can be directly selected by the UI box, but such a box to select the figure, there is a layer of translucent mask, the effect is not very ideal. Barely working!

2. A simple line of code will help you with a CSS property:

 box-shadow:0 0 0 9999px rgba(0.0.0.0.7);
Copy the code

Take a look at the implementation:

The code:

import React from 'react';
import BaseComponent from '@/components/BaseComponent';

import './index.scss';
import Button from '@/components/Button';

interface INewPersonGuidanceProps {}

const overCount = 2;
interface INewPersonGuidanceState {
  guideIndex: number;
}

/** ** novice boot *@export
 * @class NewPersonGuidance
 * @extends {BaseComponent<INewPersonGuidanceProps>}* /
export default class NewPersonGuidance extends BaseComponent<
  INewPersonGuidanceProps.INewPersonGuidanceState
> {
  constructor(props) {
    super(props);
    this.state = {
      guideIndex: 1}; }/** ** * Click change boot location *@memberOf NewPersonGuidance* /
  onClick = () = > {
    const { guideIndex } = this.state;
    const nextGuideIndex = guideIndex + 1;
    this.setState({
      guideIndex: nextGuideIndex,
    });
  };

  render() {
    const { guideIndex } = this.state;
    if (guideIndex > overCount) return null;
    return (
      <Button className="new-person-guidance" onClick={this.onClick}>
        <div className={`guideOverlap guide-The ${guideIndex} `} >
          <div className="guide-img" />
        </div>
      </Button>); }}Copy the code

.new-person-guidance {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background: transparent;
    z-index: 100;

    .guideOverlap {
        position: absolute;
        box-shadow: 0 0 0 9999px rgba(0.0.0.0.7);
        transition: all 0.3 s ease 0s;
    }

    .guide-img {
        position: absolute;
        bottom: -100px; } / / boot1The location of the.guide-1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 100px;
        left: 130px;
        border-radius: 50%;
        .guide-img {
            width: 204px;
            height: 94px;
            left: -100px;
            @include bgFill("guide-1.png"); }} // Boot2The location of the.guide-2 {
        position: absolute;
        width: 200px;
        height: 400px;
        top: 250px;
        right: 100px;
        border-radius: 50%;
        .guide-img {
            width: 172px;
            height: 94px;
            @include bgFill("guide-4.png");
            left: -80px; }}}Copy the code

Realize the principle of

Box-shadow :inset 0 0 0 9999px rgba(0,0,0,0.7);

The first value: inset indicates an inner shadow, which defaults to an outer shadow if not written.

Second value: horizontal offset (length value)

Third value: vertical offset (length value)

Third value: blur size, blur radius (length value)

The fourth value: extended radius. The main application scenario is contour simulation (length value)

The fifth value: the color value

Box-shadow allows infinite shadow effects to be superimposed over and over again, so in theory box-shadow can draw any shape.

Here we mainly talk about the difference between the blur size and the extended radius. If we set the blur size, the blur range value is gradually blurred. The extension radius is a contour extension and is therefore a great property for novice bootstrapping.

Conclusion:

Please feel free to discuss in the comments section. The nuggets will draw 100 nuggets in the comments section after the diggnation project. See the event article for details