I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

Mid-Autumn Festival, did you receive the moon cake 🥮, ha ha ha, first of all I wish everyone a happy Mid-Autumn Festival, biubiubiu ~Copy the code

I didn’t go home for the Mid-Autumn Festival, so I made a rotatable picture web page related to the Mid-Autumn Festival.

One, prepare materials for Mid-Autumn Festival

The main material used is pictures, borrowed some pictures of b station spending a happy Moon meeting to promote the web page and Baidu pictures. As an aside, I personally feel that many promotional web pages of B station are very good-looking, with different styles, including ancient style and animation, but it does not use many front-end special effects, most of which are pictures, so I admire the artists and designers of B station very much. 👍

Second, web layout

The layout of the web page consists of three parts: the fixed background, the rotation chart related to the Mid-Autumn Festival custom and the Mid-Autumn Festival blessing.

(a) fixed background

1. Set the background

Set the background image for the body and set background-attachment to fixed so that the background is fixed when the page scrolls.

//css
body {
  margin: 0;
  padding: 0;

  width: 100vw;
  height: 100vh;
  background-image: url(./imgs/bg.png);
  background-size: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
Copy the code

2. Set the mask

Personally, adding a mask looks better, which is equivalent to covering a layer of gauze on the background image. The way to achieve this is to add a mask div and set the opacity of its background color to a little lower.

//html
 <div class="mask"></div>
Copy the code

//css
.mask {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: rgba(100.100.100.0.3);
}
Copy the code

(2) The rotation chart related to the Mid-Autumn Festival custom

1. Page layout

For this part, I used an elastic layout and placed the wheel map in the center of the page. Using the feature of absolute positioning, the previous, next and Mid-Autumn festival custom title are placed in the designated position in the rotation chart. The font used for Mid-Autumn Festival custom titles and Mid-Autumn Festival blessings is STXingkai in Chinese

//html
 <div id="cus-item">
        <div id="imgs">
          <img class="img-item" src="imgs/1.png" alt="" />
          <img class="img-item" src="imgs/2.png" alt="" />
          <img class="img-item" src="imgs/3.png" alt="" />
          <img class="img-item" src="imgs/4.png" alt="" />
          <img class="img-item" src="imgs/5.png" alt="" />
        </div>
        <div class="arrow">
          <div id="pre"></div>
          <div id="next"></div>
        </div>
        <div id="title"></div>
      </div>
Copy the code

//css
#custom #cus-item {
  position: relative;
  width: 490px;
  height: 295px;
  margin-top: 65px;
}
#custom #cus-item #imgs {
  width: 490px;
  height: 295px;
}
#custom #cus-item #imgs img {
  position: absolute;
  width: 490px;
  height: 295px;
  display: none;
  border: rgba(248.222.26.0.8) solid 2px;
}
#custom #cus-item #imgs img:first-child {
  display: block;
}
#custom #cus-item .arrow {
  position: absolute;
  width: 15px;
  height: 62px;
  top: 50%;
  margin-top: -31px;
  background-size: 100%;
  cursor: pointer;
}
#custom #cus-item #pre {
  position: absolute;
  width: 15px;
  height: 62px;
  background-image: url(imgs/pre.png);
  background-size: 100%;
  left: 5px;
}
#custom #cus-item #next {
  position: absolute;
  width: 15px;
  height: 62px;
  background-image: url(imgs/next.png);
  background-size: 100%;
  left: 470px;
}
#custom #cus-item #title {
  position: absolute;
  width: 36px;
  top: 20%;
  right: 80px;
  font-family: "STXingkai";
  font-size: 30px;
  color: rgba(248.222.26.0.8);
}
Copy the code

2. Round-cast diagram encapsulation

Considering the reusability of the multicast graph, I encapsulate the multicast graph.Copy the code

(1) Instantiation parameters

The parameters passed to create a carpetgraph instance are: the outermost div tag wrap, carpetgraph image tag array IMGS, previous and next TAB array Paging, Mid-Autumn Festival custom title tag title, and corresponding custom title array titles

function Banner(wrap, imgs, paging, title, titles) {
  this.wrap = wrap;
  this.imgs = imgs;
  this.paging = paging;
  this.title = title;
  this.titles = titles;
  this.timer = 0;
  this.index = 0;
  this.init();
}
Copy the code

(2) Encapsulate member functions

1. Initialization functioninitThis function is used to initialize the instance object and is called in the constructor.
2. Disallow drag functionsnotDragThis function is used to block the default event from being dragged.
3. Automatic rotation functionauto: When the mouse is not in the rotation map, the picture automatically rotation.
4. Picture switching functionpagingClick: Click the previous one or the next one to switch the picture.

init: function () {
    this.title.innerHTML = this.titles[this.index];
    this.imgs[this.index].style.display = "block";
    this.notDrag();
    this.auto();
    this.wrapHover();
    this.pagingClick();
  },
  notDrag: function () {
    for (let i = 0; i < this.imgs.length; i++) {
      this.imgs[i].ondrag = this.imgs[i].onmousedown = function (e) {
        e = e || event;
        e.preventDefault
          ? e.preventDefault()
          : (window.event.returnValue = false); }; }},auto: function () {
    let that = this;
    this.timer = setInterval(function () {
      that.checkOut(function () {
        that.index++;
        that.index = that.index % that.imgs.length;
      });
    }, 1000);
  },
  checkOut: function (callback) {
    this.imgs[this.index].style.display = "none";
    callback && callback();
    this.title.innerHTML = this.titles[this.index];
    console.log(this.title);
    this.imgs[this.index].style.display = "block";
  },
  pagingClick: function () {
    let that = this;
    for (let i = 0; i < this.paging.length; i++) {
      if (i) {
        this.paging[i].onclick = function () {
          that.checkOut(function () {
            that.index++;
            that.index = that.index % that.imgs.length;
          });
        };
      } else {
        this.paging[i].onclick = function () {
          that.checkOut(function () {
            that.index--;
            if (that.index < 0) that.index = that.imgs.length - 1; }); }; }}},wrapHover: function () {
    let that = this;
    this.wrap.onmouseenter = function () {
      clearInterval(that.timer);
    };
    this.wrap.onmouseleave = function () {
      that.auto();
    };
  },
Copy the code

(3) Instantiate the multicast graph object

let wrap = document.getElementById("cus-item");
let imgs = document.getElementById("imgs").getElementsByTagName("img");
let pre = document.getElementById("pre");
let next = document.getElementById("next");
let paging = [pre, next];
let titles = ["Moon"."Eep"."Solve lantern riddles"."Burning tower"."Eat moon cakes"];
let title = document.getElementById("title");
// Create an instance object
let banner = new Banner(wrap, imgs, paging, title, titles);
Copy the code

3. Mid-Autumn Festival wishes

We wish each other a long life so as to share the beauty of this graceful moonlight, even though miles apart.Copy the code

By setting the writing-mode attribute, I arranged the text inside the div vertically. In fact, I could also use Ps to set the Mid-Autumn Festival blessing into a picture. In this way, I could easily add other Mid-Autumn festival elements into the blessing, such as moon, moon cake, jade rabbit, etc., and I could also use CSS + HTML to design the blessing. You can continue to enrich the interest.

  <div class="bless" id="right">Long may man be</div>
  <div class="bless" id="left">Even though miles apart</div>
Copy the code

.bless {
    position: absolute;
    width: 50px;
    height: 300px;
    right: 120px;
    font-family: "STXingkai";
    font-size: 54px;
    color: rgba(248.222.26.0.8);
    writing-mode: tb-rl;
}
#right {
    top: 100px;
}
#left {
    bottom: 100px;
    transform: translateX(-80px);
}

Copy the code

Third, concluding remarks

Happy Mid-Autumn Festival 🥮

Please give me a thumbs-up 👍, hee hee hee