This is the seventh day of my participation in the First Challenge 2022. For details: First Challenge 2022.

preface

Gone is the February 14, valentine’s day is not just today, but it is also the author’s wedding anniversary, I chose this day to joke that can have a holiday, less can now select the day of the feast is less and less, on the one hand, today is working day, everyone is busy, haven’t got round to observe a festival, on the other hand, choose to eat out today, Always have to queue for a long time, if you want to go to the back to supplement, there is no lack of festive atmosphere. So I wanted to write a program, a program that a front-end engineer can do, an online photo album, to record the unforgettable memories over the years.

Some time ago wrote 2 oil monkey script, are for the public number operators, today I want to put this online album also write a oil monkey script, maybe she will surprise, maybe also apply to you readers, secretly to the object installed a oil monkey script, Baidu will help you confess.

conceived

  • Open baidu home page and replace baidu LOGO with our photo
  • Click on logo animation to appear type animation
  • Draw a ❤ ️
  • Animation zoom out, one by one popover a screen ❤️
  • Fade in the album
  • Click on the upper right corner to close it

Demo video

Nuggets can not upload the video, you can follow my wechat public account “JS cool” to see the effect.

The technology used

  • jquery
  • Animejs JavaScript animation library

Use CSS to draw a heart

.heart{
  position:relative;
  width: 100px;
  height:100px;
  border:solid 1px #a00;
  transform:rotate(-45deg);
}
.heart:before{
  content:' ';
  position:absolute;
  top: -50%;
  left:0;
  display:block;
  width: 100%;
  height:100%;
  border-radius:50%;
  border:solid 1px #a00;
}
.heart:after{
  content:' ';
  position:absolute;
  top:0;
  right: -50%;
  display:block;
  width: 100%;
  height:100%;
  border-radius:50%;
  border:solid 1px #a00;
}
Copy the code

Use CSS to draw a heart, which is actually a div, a rectangle and 2 circles offset, and then rotate it 45 degrees

SVG path animation

We can draw a heart from www.figma.com/, copy it to SVG, initialize it to the length of the SVG path with sag’s dotted line offset strokeDashoffset, and gradually change it to 0. In Anime, you can set the path offset directly using animos. setDashoffset. The implementation code is as follows

await anime({
    targets: ".svg-heart path".strokeDashoffset: [anime.setDashoffset, 0].easing: "linear".duration: 3000,
  }).finished;
Copy the code

Isn’t that easy

Realize love bullets

Here I inserted 100 ❤️ into the canvas, and then repositioned it at the back, randomly inserting it into the canvas through anime, as follows

 await anime({
    targets: ".heart".translateX: function () {
      const w = window.innerWidth;
      return anime.random(-w / 2, w / 2);
    },
    translateY: function () {
      const h = window.innerHeight;
      return anime.random(-h / 2, h / 2);
    },
    scale: function () {
      return anime.random(1.5);
    },
    duration: 2000.delay: function (el, i) {
      return i * 50;
    }
  }).finished;
Copy the code

With anime JavaScript animation, everything is easy.

Achieve photo album

In fact, we tried for a long time. I tried to make the interaction better, but I always felt bad at the end, so I ended up using the demo on Codepen.

This is done by copying in the code, where each animation appears in turn, using the animo.js timeline;

// Create a default timeline
var tl = anime.timeline({
  easing: 'easeOutExpo'.duration: 750
});
// Add child elements in turn
tl
.add({
  targets: '.basic-timeline-demo .el.square'.translateX: 250,
})
.add({
  targets: '.basic-timeline-demo .el.circle'.translateX: 250,})Copy the code

The photo layout above uses a CSS Grid grid layout and uses grid-area: 1/1/7/5; Arrange the photos in a nice way. If you haven’t written CSS for a long time, you can look at this demo

Have a problem

Seven NiuYun, at first we want to use as my photo albums storing, but in the process of development of grease monkey script, found that baidu outside the chain is not allowed in the picture, must want to upload photos baidu domain, at this time, don’t know what to do, then I found a moment in baidu network location photo album, and then chose a few photos in a hurry.

summary

Everyone has his be fond of, the effect is certainly not the best, she may not necessarily like, mainly to open selected pictures online is a big problem, this paper provides a train of thought, in view of the readers some single, can expand their own associations, or to codepen find a relatively good effect, can use the tips, You might be able to make a confession.

That’s all the content of this article. I hope this article is helpful to you. You can also refer to my previous articles or share your thoughts and experiences in the comments section.