質問編集履歴
1
HTML、jQueryのコード追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,7 +10,29 @@
|
|
|
10
10
|
|
|
11
11
|
### 該当のソースコード
|
|
12
12
|
HTML
|
|
13
|
+
``` <header id="home">
|
|
14
|
+
<div class="container">
|
|
15
|
+
<div class="header-menu">
|
|
16
|
+
<div class="header-left">
|
|
17
|
+
<h1>Hiroto Morita</h1>
|
|
18
|
+
<!-- <i class="fas fa-bars fa-lg menu-icon"></i> -->
|
|
19
|
+
<div class="hamburger">
|
|
20
|
+
<span></span>
|
|
21
|
+
<span></span>
|
|
22
|
+
<span></span>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<nav class="header-right">
|
|
26
|
+
<ul class="nav-list">
|
|
27
|
+
<li><a href="#home">Home</a></li>
|
|
28
|
+
<li><a href="#about">About</a></li>
|
|
29
|
+
<li><a href="#service">Service</a></li>
|
|
30
|
+
<li><a href="#contact">Contact</a></li>
|
|
13
|
-
|
|
31
|
+
</ul>
|
|
32
|
+
</nav>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</header>
|
|
14
36
|
コード
|
|
15
37
|
```
|
|
16
38
|
CSS
|
|
@@ -105,7 +127,22 @@
|
|
|
105
127
|
コード
|
|
106
128
|
```
|
|
107
129
|
jQuery
|
|
130
|
+
```$(function () {
|
|
131
|
+
|
|
132
|
+
$(window).scroll(function () {
|
|
133
|
+
$(".slide").each(function () {
|
|
134
|
+
var imgPos = $(this).offset().top;
|
|
135
|
+
var scroll = $(window).scrollTop();
|
|
136
|
+
var windowHeight = $(window).height();
|
|
137
|
+
if (scroll > imgPos - windowHeight + windowHeight / 4) {
|
|
138
|
+
$(this).addClass("effect-scroll");
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
jQuery(window).scroll();
|
|
143
|
+
|
|
144
|
+
/* ハンバーガーメニュー */
|
|
108
|
-
|
|
145
|
+
$('.hamburger').click(function () {
|
|
109
146
|
$(this).toggleClass('active');
|
|
110
147
|
|
|
111
148
|
if ($(this).hasClass('active')) {
|
|
@@ -114,6 +151,7 @@
|
|
|
114
151
|
$('.header-right').removeClass('active');
|
|
115
152
|
}
|
|
116
153
|
});
|
|
154
|
+
});
|
|
117
155
|
コード
|
|
118
156
|
```
|
|
119
157
|
|