teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

コードにコメント追加

2020/10/17 14:55

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -39,7 +39,7 @@
39
39
  }
40
40
  .scrollcontents {
41
41
  position: relative;
42
- z-index: 1;
42
+ z-index: 1; /* .pageendより前面に配置 */
43
43
  background-color: #fff;
44
44
  width: 100%;
45
45
  }
@@ -54,7 +54,7 @@
54
54
  }
55
55
 
56
56
  .pageend {
57
- z-index: 0;
57
+ z-index: 0; /* .scrollcontentsより背面に配置 */
58
58
  height: 480px
59
59
  }
60
60
 

2

サンプルリンク追加

2020/10/17 14:55

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -90,4 +90,6 @@
90
90
  font-size: 18px;
91
91
  color: #fff;
92
92
  }
93
- ```
93
+ ```
94
+
95
+ [CodePenサンプル](https://codepen.io/hatena19/pen/GRqZPpW)

1

コード追記

2020/10/17 14:09

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -7,4 +7,87 @@
7
7
 
8
8
  [プラグイン不要の基本的なパララックス効果をサイトに実装する | オウンドメディア ](https://designsupply-web.com/media/knowledgeside/2286/)
9
9
 
10
- [【jQuery】パララックスデザインの作り方 - 株式会社ネディア │ネットワークの明日を創る。](https://www.nedia.ne.jp/blog/tech/2016/04/19/7248)
10
+ [【jQuery】パララックスデザインの作り方 - 株式会社ネディア │ネットワークの明日を創る。](https://www.nedia.ne.jp/blog/tech/2016/04/19/7248)
11
+
12
+
13
+ ---
14
+ [リンク先](https://rinn.co.jp/)のページの最後までスクロールしたときに、ページエンドに固定したブロック(MADE FOR CATS,DESIGNED FOR YOU.の部分)が現れるサンプル。
15
+
16
+ コメントで軽く解説しておきましたので参考にしてください。
17
+
18
+ ```html
19
+ <div class="scrollcontents">
20
+ <div class="contents">
21
+ <h1>下にスクロールしてください。</h1>
22
+ </div>
23
+ </div>
24
+
25
+ <div class="pageend">
26
+ <div class="pageend-body">
27
+ <div class="pageend-inner">
28
+ <p>Made for Cats,<br>Designed for You.</p>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ ```
33
+
34
+ ```css
35
+ * {
36
+ outline: none;
37
+ box-sizing: border-box;
38
+ margin: 0;
39
+ }
40
+ .scrollcontents {
41
+ position: relative;
42
+ z-index: 1;
43
+ background-color: #fff;
44
+ width: 100%;
45
+ }
46
+ .contents {
47
+ /* スクロールさせるために適当に高さを設定
48
+   本来はいろいろコンテンツが入ります。 */
49
+ overflow: hidden;
50
+ height: 3000px;
51
+ }
52
+ .contents h1 {
53
+ margin-top: 100px;
54
+ }
55
+
56
+ .pageend {
57
+ z-index: 0;
58
+ height: 480px
59
+ }
60
+
61
+ .pageend-body {
62
+ /* ページエンドブロックを画面サイズと同じにして
63
+   画面に固定表示 */
64
+ position: fixed;
65
+ left: 0;
66
+ bottom: 0;
67
+ width: 100%;
68
+ overflow: hidden;
69
+ height: 100vh;
70
+ background: #222;
71
+ color: #fff;
72
+ display: flex;
73
+ align-items: flex-end; /* 子要素を下揃え */
74
+ }
75
+
76
+ .pageend-inner {
77
+ width: 100%;
78
+ height: 480px
79
+ }
80
+
81
+ .pageend-inner { /* 子要素の上下左右中央寄せ */
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ text-align: center;
86
+ }
87
+
88
+ .pageend p {
89
+ letter-spacing: 3px;
90
+ font-size: 18px;
91
+ color: #fff;
92
+ }
93
+ ```