Home Web Front-end JS Tutorial Starry navigation bar special effects

Starry navigation bar special effects

Mar 17, 2018 am 09:57 AM
navigation special effects

This time I will bring you the special effect of the starry sky navigation bar. What are the precautions to achieve the starry navigation bar special effect? ​​The following is a practical case, let’s take a look.

Instructions

Share the effect of a starry navigation bar. There is not much code, but the effect is very beautiful. Let’s take a look at the rendering first.

Explanation

To achieve this effect, you don’t need a lot of knowledge. You know simple CSS and can use JS to get elements. It is basically enough to be able to bind events.
Okay, let’s look at the code directly. The comments have been written in great detail. If you don’t want to see the comments, click here to preview.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

<!doctype html>

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <style>

body {

 background-color: #000;

 /* 防止出现左右的滚动条 */

 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";

}

/* 闪烁的星星 的基本样式 */

.star {

 width: 5px;

 height: 5px;

 background: #fff;

 position: absolute;

 z-index: -1;

}

/* 闪烁动画,改变透明度 */

@keyframes blink {

 from {

 opacity: 0.2;

 }

 to {

 opacity: 1;

 }

}

</style>

 </head>

 <body>

 <p class="wrapper">

  <ul class="nav">

  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航1</a></li>

  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航2</a></li>

  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航3</a></li>

  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航4</a></li>

  </ul>

 </p>

<script>

// 定义一个 starrySky 对象

var starrySky = {

 // 星星的数量

 starNum: 100,

 // 星星的大小,返回一个 2 ~ 12 的随机数

 starSize () { return 2 + Math.trunc(Math.random() * 10) },

 // 星星的颜色 

 starColor: "#fff",

 // 线的颜色,鼠标进入导航区域,星星会连成一条线

 lineColor: "#fff",

 // 线的高度

 lineHeight: "3px",

 // 星星连成线的时间

 changeTime: "1s",

 // 初始化方法,生成需要的星星,并调用需要的方法

 init () {

 var html = "";

 // 循环生成星星

 for (var i = 0; i < this.starNum; i++) {

 html += "<p class=&#39;star&#39; id=&#39;star" + i + "&#39;></p>";

 }

 // 拼接到 元素wrapper 中

 document.querySelector(".wrapper").innerHTML += html;

 // 调用 星星分散 的方法

 this.disperse();

 // 调用 星星聚合连成线 的方法 

 this.combine();

 },

 disperse () {

 // 这个that 保存的是 starrySky 对象

 var that = this;

 // 获取 元素wrapper 的宽度

 var width = document.querySelector('.wrapper').offsetWidth;

 // 获取 元素wrapper 的高度

 var height = document.querySelector('.wrapper').offsetHeight;

 // 循环,开始在元素wrapper 区域内,生成规定数量的 星星,

 for (var i = 0; i < that.starNum; i++) {

 // 星星的 top值,0 ~ 元素wrapper 高度的随机数

 var top = Math.trunc(height * Math.random());

 // 星星的 left值,0 ~ 元素wrapper 宽度的随机数

 var left = Math.trunc(width * Math.random());

 // 星星的大小,调用 starrySky对象的starSize()方法

 var size = that.starSize();

 // 设置分散时每个星星样式

 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 () {

 // 这个that 保存的是 starrySky 对象

 var that = this;

 // 查找导航栏 里所有的 a元素,遍历他们,每个都绑定上 鼠标进入 和 鼠标移出 事件

 document.querySelectorAll(".nav li a").forEach(function (item) {

 item.addEventListener("mouseover", function (e) {

 // 这里的this 是触发事件的当前节点对象,就是鼠标进入时候的 a元素

 // 当前a元素的宽度 / 星星数 = 最后连成线时,星星的宽度

 var width = this.offsetWidth / that.starNum;

 // 遍历,为每个星星修改样式,开始连成线

 for (var i = 0; i < that.starNum; i++) {

  // 星星的top 值就是,当前a元素的距离顶部的值 + 当前a元素的高度

  var top = this.offsetTop + this.offsetHeight;

  // 星星的left 值就是,当前a元素的距离左边界的值 + 第i个星星 * 星星的宽度

  var left = this.offsetLeft + i * width

  // 设置每个星星连成线时的样式

  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;

    `;

 }

 });

 // 鼠标移出 调用 星星分散 的方法

 item.addEventListener("mouseout", function () {

 that.disperse();

 });

 }

 );

 },

}

// 调用 starrySky对象的 init方法,实现满天星效果

starrySky.init();

</script>

 </body>

</html>

Copy after login

Note: If you need to modify the style, do not position the nav element and the li element inside the nav, because the position of the last line is positioned based on the offsetHeight and offsetLeft of the a element. If the nav element and nav If the li element inside is positioned, the offsetParent element of the a element will be changed, and the position will be wrong.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS generates QR code

##String.prototype.formatHow to use string splicing

How to convert JS data types

The above is the detailed content of Starry navigation bar special effects. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use Vue to implement pop-up window effects How to use Vue to implement pop-up window effects Sep 22, 2023 am 09:40 AM

How to use Vue to implement pop-up window effects requires specific code examples. In recent years, with the development of web applications, pop-up window effects have become one of the commonly used interaction methods among developers. As a popular JavaScript framework, Vue provides rich functions and ease of use, and is very suitable for implementing pop-up window effects. This article will introduce how to use Vue to implement pop-up window effects and provide specific code examples. First, we need to create a new Vue project using Vue's CLI tool. open end

How to use Vue to implement full-screen mask effects How to use Vue to implement full-screen mask effects Sep 19, 2023 pm 04:14 PM

How to use Vue to implement full-screen masking effects. In web development, we often encounter scenarios that require full-screen masking, such as displaying a masking layer when loading data to prevent users from performing other operations, or in some special scenarios. Use a mask layer to highlight an element. Vue is a popular JavaScript framework that provides convenient tools and components to achieve various effects. In this article, I will introduce how to use Vue to achieve the effect of full-screen masking, and provide some specific code examples. At first, we

How to use Vue to implement sidebar effects How to use Vue to implement sidebar effects Sep 19, 2023 pm 02:00 PM

How to use Vue to implement sidebar effects Vue is a popular JavaScript framework. Its simplicity, ease of use, and flexibility enable developers to quickly build interactive single-page applications. In this article, we will learn how to use Vue to implement a common sidebar effect, and provide specific code examples to help us understand better. Create a Vue project First, we need to create a Vue project. You can use the VueCLI (command line interface) provided by Vue, which can quickly generate

Implement card flipping effects in WeChat mini programs Implement card flipping effects in WeChat mini programs Nov 21, 2023 am 10:55 AM

Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: &lt;!--index.wxml--&gt;&l

What is the horizontal figure 8 on the navigation map? What is the horizontal figure 8 on the navigation map? Jun 27, 2023 am 11:43 AM

The horizontal figure 8 on the navigation map means haze, moderate is a yellow 8 warning signal, and severe is an orange 8 warning signal.

HTML, CSS and jQuery: Techniques for achieving image folding and expanding effects HTML, CSS and jQuery: Techniques for achieving image folding and expanding effects Oct 24, 2023 am 11:05 AM

HTML, CSS and jQuery: An introduction to techniques for implementing image folding and expanding special effects. In web design and development, we often need to implement some dynamic special effects to increase the attractiveness and interactivity of the page. Among them, the image folding and unfolding effect is a common but interesting technique. Through this special effect, we can make the image fold or expand under the user's operation to show more content or details. This article will introduce how to use HTML, CSS and jQuery to achieve this effect, with specific code examples. realize thoughts

How to use Vue to implement progress bar effects How to use Vue to implement progress bar effects Sep 19, 2023 am 09:22 AM

How to use Vue to implement progress bar effects The progress bar is a common interface element that can be used to display the completion of a task or operation. In the Vue framework, we can implement special effects of the progress bar through some simple code. This article will introduce how to use Vue to implement progress bar effects and provide specific code examples. Create a Vue component First, we need to create a Vue component to implement the progress bar function. In Vue, components are reusable and can be used in multiple places. Create a file called Pro

Baidu Maps App latest version 18.8.0 released, introducing traffic light radar function for the first time and adding real-time parking recommendation function Baidu Maps App latest version 18.8.0 released, introducing traffic light radar function for the first time and adding real-time parking recommendation function Aug 06, 2023 pm 06:05 PM

Both Android and iOS versions of Baidu Map App have released version 18.8.0, which introduces the traffic light radar function for the first time, leading the industry. According to the official introduction, after turning on the traffic light radar, it supports automatic detection of traffic lights while driving without having to enter a destination. Beidou High-Precision can position in real time. , 1 million+ traffic lights across the country automatically trigger green wave reminders. In addition, the new function also provides full silent navigation, making the map area more concise, key information clear at a glance, and no voice broadcast, allowing the driver to focus more on driving. Baidu Maps will launch a traffic light countdown function in October 2020, supporting real-time countdown prediction. Judgment, the navigation will automatically display the remaining seconds of the countdown when approaching a traffic light intersection, allowing users to always grasp the road conditions ahead. Traffic light countdown to December 31, 2022

See all articles