JavaScript implementation of star navigation bar

Explain

There is not much code to share the effect of a full sky star navigation bar, but the effect is pretty good. First look at the effect picture.

explain

To achieve this effect, you don't need a lot of knowledge. You know simple CSS, can get elements with JS, and can bind events is basically enough.
OK, let's take a look at the code directly. The comments have been written in detail. I don't want to see the ones with comments. Click Here.

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
body {
  background-color: #000;
  /* Prevent left and right scrollbars */
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 100%;
  height: 100px;
}
.wrapper .nav {
  list-style: none;
  width: 800px;
  height: 100px;
  padding: 0;
  margin: 0 auto;
}
.wrapper .nav li {
  width: 25%;
  height: 50px;
  float: left;
  margin-top: 25px;
}
.wrapper .nav li a {
  text-decoration: none;
  color: #fff;
  text-align: center;
  line-height: 50px;
  display: block;
  font-size: 20px;
  font-family: "KaiTi";
}

/* The basic pattern of twinkling stars */
.star {
  width: 5px;
  height: 5px;
  background: #fff;
  position: absolute;
  z-index: -1;
}

/*  Blink animation, change transparency  */
@keyframes blink {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
</style>
 </head>
 <body>
        <div class="wrapper">
            <ul class="nav">
                <li><a href="#">Navigation 1</a></li>
                <li><a href="#">Navigation 2</a></li>
                <li><a href="#">Navigation 3</a></li>
                <li><a href="#">Navigation 4</a></li>
            </ul>
        </div>
<script>

// Define a starrySky object
var starrySky = {
  // Number of stars
  starNum: 100,

  // The size of the star, return a random number of 2 to 12
  starSize () { return 2 + Math.trunc(Math.random() * 10) },

  // The color of the stars 
  starColor: "#fff",

  // The color of the line. When the mouse enters the navigation area, the stars will form a line
  lineColor: "#fff",

  // Line height
  lineHeight: "3px",

  // The time when the stars line up
  changeTime: "1s",

  // Initialize the method, generate the required stars, and call the required method
  init () {
    var html = "";
    // Cycle to star
    for (var i = 0; i < this.starNum; i++) {
      html += "<div class='star' id='star" + i + "'></div>";
    }
    // Splicing into element wrapper
    document.querySelector(".wrapper").innerHTML += html;

    // Call star scatter method
    this.disperse();

    // Call the method of star aggregation and connection 
    this.combine();
  },
  disperse () {
    // This one is a starrySky object
    var that = this;

    // Get the width of the element wrapper
    var width = document.querySelector('.wrapper').offsetWidth;
    // Get the height of the element wrapper
    var height = document.querySelector('.wrapper').offsetHeight;
    // The loop starts to generate a specified number of stars in the wrapper area of the element,
    for (var i = 0; i < that.starNum; i++) {
      // top value of the star, 0 ~ random number of the height of the element wrapper
      var top = Math.trunc(height * Math.random());
      // left value of star, 0 ~ random number of element wrapper width
      var left = Math.trunc(width * Math.random());
      // Star size, call starSize() method of starrySky object
      var size = that.starSize();
      // Set the style of each star when dispersing
      document.querySelector("#star" + i).style.cssText += `
                        top:${top}px;
                        left:${left}px;
                        width:${size}px;
                        height:${size}px;
                        background:${that.starColor};
                        opacity:${Math.random()};
                        border-radius:50%;
                        animation:blink 1s ${Math.random() * 2}s infinite alternate;
                    `;
    }
  },
  combine () {
    // This one is a starrySky object
    var that = this;
    // Find all a elements in the navigation bar, traverse them, and bind mouse in and mouse out events to each
    document.querySelectorAll(".nav li a").forEach(function (item) {
      item.addEventListener("mouseover", function (e) {
        // this is the current node object that triggers the event, which is the a element when the mouse enters
        // Width of current a element / number of stars = width of stars when the last line is connected
        var width = this.offsetWidth / that.starNum;
        // Traverse, change the style for each star, start connecting
        for (var i = 0; i < that.starNum; i++) {
          // The top value of a star is the distance between the current a element and the top + the height of the current a element
          var top = this.offsetTop + this.offsetHeight;
          // The left value of the star is the value of the distance from the current a element to the left boundary + the ith STAR * the width of the star
          var left = this.offsetLeft + i * width
          //  Set the style when each star is connected into a line
          document.querySelector("#star" + i).style.cssText += `
                                    width:${width}px;
                                    top:${top}px;
                                    left:${left}px;
                                    height:${that.lineHeight};
                                    background:${that.lineColor};
                                    opacity:1;
                                    border-radius:0;
                                    transition:${that.changeTime};
                                    animation:blink 1s infinite alternate;
                                `;
        }
      });
      // Move the mouse out and call the method of star scattering
      item.addEventListener("mouseout", function () {
        that.disperse();
      });
    }
    );
  },

}
// Call init method of starrySky object to achieve the effect of all over the sky
starrySky.init();
</script>
 </body>
</html>

Note: if you need to modify the style, do not locate the NAV element and the li element in NAV, because the location of the last line is based on the offsetHeight and offsetLeft of the a element. If the NAV element and the li element in nav are located, the offsetParent element of the a element will be changed, and the location will be wrong.
Points not understood by offsetHeight, offsetLeft and offsetParent Here

summary

To achieve this effect, we have made a starrySky object and defined some necessary properties, mainly relying on the methods of disse() and combine(). When the stars need to be scattered, we call disse(), when the stars need to be connected into a line, we call combine(). That's all.

This article is reproduced in: http://blog.csdn.net/FE_dev/article/details/79447494

Added by suresh_m76 on Thu, 02 Apr 2020 07:49:47 +0300

Programming VIP

JavaScript implementation of star navigation bar

Explain

explain

summary

Popular Keywords