Application of CSS3 animation effects in activity pages

background

Before we know it, a busy year is coming to an end and it is time for the annual event. In order to show the festive atmosphere, dynamic effects on the event page are essential.

First, the effect picture:

1. Overall Analysis

From the picture, we can see that the main dynamic effects are dynamic indicator arrows and falling snow effects. It is not advisable to be lazy and directly use this effect picture as the background, because the size of the picture is more than 3M, which is a disaster for the server and user experience. Since it is an active page, the number of visits is naturally inevitable. Under the condition of high concurrency, the server is naturally overwhelmed, and we also feel sorry for the user's traffic and the time the user waits for a response. As a person who strives for perfection, our principle is to resolutely not use gif for effects that can be achieved by program, and save as many resources as possible.

2. Dynamic indicator arrows

From the perspective of program implementation, the first thing we need to do is to encapsulate the change points and separate the changes from the constants. The five levels in the figure are generally the same. Each level has a base and an arrow. After the levels are encapsulated, data is used to drive the position of each level and the arrow to indicate the direction.

The relevant data are as follows:

[
    {
        state: 0,
        left: 9,
        top: -2,
        direction: { rotateZ: 290, color: "#d26754" }
    },
    {
        state: 0,
        left: 66,
        top: 10,
        direction: { rotateZ: 24, color: "#f58351" }
    },
    {
        state: 0,
        left: 18,
        top: 20,
        direction: { rotateZ: 30, color: "#f78351" }
    },
    {
        state: 0,
        left: -2,
        top: 36.5,
        direction: { rotateZ: 295, color: "#e19d47" }
    },
    {
        state: 0,
        left: 52,
        top: 49.5,
        direction: { rotateZ: 293, color: "#e19d47" }
    }
]

1. Dynamic effect analysis

After carefully observing the renderings, it is found that the overall effect is a 3D perspective. The perspective is not a vertical look down, but a 45° angle look down. The first thing that comes to mind is the powerful CSS3 3D rotation. The arrow effect can be divided into running track + arrow running effect. In this way, you only need to make a 3D perspective of the track and repeat the movement of the arrow along the outer track.

2. Specific implementation

<div class="item" flex="main:center cross:center"
:style="{left:item.left+'%',top:item.top+'%'}"
v-for="item in items" @click="showReceive(item)">
    <div class="bottom" flex="main:center cross:center">
        <div class="direction" flex="dir:top" :style="{transform:`rotateX(34deg) rotateY(0deg) rotateZ(${item.direction.rotateZ}deg)`}">
            <div class="half"></div>
            <div class="half track">
                <div class="arrow"
                :style="{transform: `rotate(${item.direction.rotate}deg`,
                right:`${item.direction.right}px`,
                'border-color': `${item.direction.color} transparent transparent`
                }"></div>
            </div>
        </div>
    </div>
</div>
  .direction {
    position: absolute;
    width: 20px;
    height: 260%;
    .half {
      flex: 1;
    }
    .track {
      position: relative;
      //margin-top: 90px;
      margin-top: 2em;
      .arrow {
        position: absolute;
        width: 0;
        height: 0;
        border: 10px solid;
        border-color: red transparent transparent;
        animation: dynamicArrow 3000ms infinite linear;
      }
    }
  }
/* //Dynamic arrow*/
@keyframes dynamicArrow {
  0% {
    opacity: 1;
    bottom: 100%;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 0.1;
    bottom: -20px;
  }
  100% {
    opacity: 0;
  }
}

3. Snow falling all over the sky

If you observe the effect picture carefully, you will see that the snowflakes are big and small, moving at different speeds, near and far, and light and dark in color. The overall direction of the snowflakes' movement is from top to bottom and from left to right, and they fall very evenly.

1. Implementation ideas

Snowflake fluttering track + snowflake fluttering effect, tilt the track at a certain angle and then tile the entire screen, use data to control the position, level, size of snowflakes in the track, running delay, running speed, and color depth of each track. In order to see the effect more intuitively, set the background color of the track as shown below:

2. Specific implementation

<div class="snows">
  <div class="s_track" :style="{transform:`rotate(45deg) translate(${snow.deviation}px,${-snow.deviation}px)`,'z-index':snow.zindex}" v-for="snow in snows">
      <img class="snow" src="/static/original/img/DoubleDenierActivies/cbp_snow.png" :style="{opacity:snow.opacity,animation: `dynamicSnow ${snow.speed}ms ${snow.delay}ms infinite linear`,width:snow.size*1.14+'px',height:snow.size+'px'}"/>
  </div>
</div>
.s_track {
  position: absolute;
  width: 220%;
  // height: 10px;
  top: -10px;
  transform-origin: 0 0 0;
  .snow {
    visibility: hidden;
    position: absolute;
    z-index: 2;
    animation: dynamicSnow 2000ms infinite linear;
  }
}
/* //snowflake*/
@keyframes dynamicSnow {
  0% {
    visibility: visible;
    top: 0;
    left: 0;
    transform: rotate(0);
  }
  100% {
    visibility: visible;
    top: 100%;
    left: 100%;
    transform: rotate(360deg);
  }
}
let snows = [],
  initCount = 16;
for (let i = 0; i < initCount; i++) {
  let unit = i - 8,
    speed = i > 3 ? i % 3 : i,
    size = 0;
  speed++;
  if (i % 5 == 0) {
    size = 10;
  } else if (i % 8 == 0) {
    size = 20;
  } else {
    size = Math.random() * 10;
  }
  snows.push({
    deviation: unit * 40, //position delay: Math.random() * 1000, //delay speed: speed * 3000, //speed opacity: speed / 4,
    size: size,
    zindex: size >= 10 ? 4 : 0
  });
}
let snows2 = [];
snows.forEach(f => {
  snows2.push({
    ...f,
    deviation: snows[parseInt(Math.random() * initCount)].deviation - 10,
    delay: f.delay + 1000 //delay });
});
let snows3 = [];
snows.forEach(f => {
  snows3.push({
    ...f,
    deviation: snows[parseInt(Math.random() * initCount)].deviation - 20,
    delay: f.delay + 2000 //delay });
});
snows = snows.concat(snows2);
snows = snows.concat(snows3);
snows.sort((a, b) => a.deviation - b.deviation);
this.snows = snows;

IV. Conclusion

As a front-end developer, you must restore the renderings as much as possible. While pursuing the degree of restoration, you must also consider performance and user experience to make the page both beautiful and as lightweight and concise as possible.

The above is the application of CSS3 animation effects in activity pages introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: JavaScript in-depth analysis of the direction of this and how to modify the direction

>>: Implementation of tens of thousands of concurrent connections on a single machine with nginx+lua