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

質問編集履歴

5

解決しました!!!!!!!

2021/01/15 09:50

投稿

nomura02
nomura02

スコア133

title CHANGED
File without changes
body CHANGED
@@ -165,4 +165,96 @@
165
165
  0. このような、プラグインを用いたほうが、現実的でしょうか。([プラグイン例](https://locomotivemtl.github.io/locomotive-scroll/#fixed-elements))
166
166
 
167
167
  お忙しいところ恐縮ですが、何かヒントを頂けましたら幸いです。
168
- 宜しくお願いいたします。
168
+ 宜しくお願いいたします。
169
+
170
+
171
+ ---
172
+ 解決した方法
173
+ ---
174
+ ご回答頂いた、「background-attachment: fixed;」を用いて、
175
+ さらに「position: sticky;」を当てたところ、自分の理想通りになりました!!!!
176
+ ありがとうございます!!!こちら実際のコードです。
177
+ ```HTML
178
+ <section class="introduction"> ←ここの背景をbackground-attachment: fixed;
179
+ <div class="introduction-content">
180
+ <div class="title"> ←ここに上下のpaddingで可視範囲を設定
181
+ <h1>COMMITMENT</h1>
182
+ <p class="subtitle">3 special points</p>
183
+ </div>
184
+
185
+ <div class="introduction-writing"> ←ここがstiky、高さも指定
186
+ <h2>お客様に喜んで頂ける家具を<br>
187
+ お届けするために。</h2>
188
+
189
+ <p>ご購入頂きご自宅に届いたその瞬間から、家具とお客様の生活が始まります。<br>
190
+ お客様との大切な時間を共に過ごす物だからこそ、輸入から、お客様のご自宅にお届けし、家具がお客様のご自宅の一部になり、快適に使って頂けるまでが、私達の仕事です。</p>
191
+ </div>
192
+ <span class="scroll">SCROLL</span>
193
+ </div>
194
+ </section>
195
+ ```
196
+ ```CSS
197
+ .introduction {
198
+ background-image: url(../img/back_commitment.jpg);
199
+ background-size: contain;
200
+ background-repeat: no-repeat;
201
+ background-attachment: fixed;
202
+ }
203
+
204
+ .introduction-content {
205
+ width: 50%;
206
+ }
207
+
208
+ .introduction-content .title {
209
+ padding: 30% 0;
210
+ }
211
+
212
+ .introduction-writing {
213
+ padding: 0 10%;
214
+ height: 150vh;
215
+ position: -webkit-sticky;
216
+ position: sticky;
217
+ top: 0;
218
+ left: 0;
219
+ }
220
+
221
+ .introduction h1 {
222
+ font-size: 7.42188vw;
223
+ font-family: "din-1451-lt-pro-engschrift", sans-serif;
224
+ font-style: normal;
225
+ font-weight: 400;
226
+ color: #eae2db;
227
+ line-height: 1.75em;
228
+ text-align: center;
229
+ }
230
+
231
+ .introduction .subtitle {
232
+ font-size: 30px;
233
+ font-family: "din-1451-lt-pro-engschrift", sans-serif;
234
+ font-style: normal;
235
+ font-weight: 400;
236
+ color: #eae2db;
237
+ line-height: 1.75em;
238
+ text-align: center;
239
+ margin-top: -7%;
240
+ }
241
+
242
+ .introduction h2 {
243
+ font-size: 26px;
244
+ font-family: "ryo-gothic-plusn", sans-serif;
245
+ font-style: normal;
246
+ font-weight: 700;
247
+ color: #eae2db;
248
+ line-height: 1.75em;
249
+ }
250
+
251
+ .introduction .scroll {
252
+ font-size: 20px;
253
+ font-family: "din-1451-lt-pro-engschrift", sans-serif;
254
+ font-style: normal;
255
+ font-weight: 400;
256
+ color: #eae2db;
257
+ line-height: 1.75em;
258
+ }
259
+ ```
260
+ 本当にありがとうございます!!!!!!!!!

4

イメージ説明について、補足させて頂きました。

2021/01/15 09:50

投稿

nomura02
nomura02

スコア133

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,7 @@
1
1
  ### 前提・実現したいこと
2
2
  下記のように、背景を固定にしたまま、文章のスクロールが終わったら、次のセクションへスクロールできるようにしたいです。
3
+ ![イメージ説明](b7d998d40d5104b474300e15e23ce966.jpeg)
3
4
 
4
- ![実現したいこと](ce5fa1d5ae2aad954ffe264d01909125.jpeg)
5
-
6
5
  overflow: hidden と positon: sticky を両立するといったことはできない
7
6
  ということを知ったので、
8
7
  position: sticky;

3

補足事項を付け足しました。

2021/01/15 09:03

投稿

nomura02
nomura02

スコア133

title CHANGED
File without changes
body CHANGED
@@ -11,6 +11,7 @@
11
11
  上記のようなかたちになるかと思ったのですが、うまくいっておりません。
12
12
 
13
13
  ### 試したこと
14
+ ↓こちらのコードは、参考にさせて頂いているコードを抜粋して、試しに今作っているものです。
14
15
  ```HTML
15
16
  <!DOCTYPE html>
16
17
  <html lang="en">

2

内容を具体的に致しました。

2021/01/15 08:56

投稿

nomura02
nomura02

スコア133

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,8 @@
3
3
 
4
4
  ![実現したいこと](ce5fa1d5ae2aad954ffe264d01909125.jpeg)
5
5
 
6
+ overflow: hidden と positon: sticky を両立するといったことはできない
7
+ ということを知ったので、
6
8
  position: sticky;
7
9
  と、
8
10
  clip-pathで四角く切り取れば、
@@ -158,9 +160,9 @@
158
160
  ```
159
161
 
160
162
  ### お聞きしたいこと
163
+ 0. 上記のような考え方で合っている場合、clip-pathで切り取るところまでは、合っていますでしょうか。
161
164
  0. そもそも、CSSでの実装は難しいでしょうか。
162
165
  0. このような、プラグインを用いたほうが、現実的でしょうか。([プラグイン例](https://locomotivemtl.github.io/locomotive-scroll/#fixed-elements))
163
- 0. 上記のような考え方で合っている場合、clip-pathで切り取るところまでは、合っていますでしょうか。
164
166
 
165
167
  お忙しいところ恐縮ですが、何かヒントを頂けましたら幸いです。
166
168
  宜しくお願いいたします。

1

内容を変更しました。

2021/01/15 08:40

投稿

nomura02
nomura02

スコア133

title CHANGED
@@ -1,1 +1,1 @@
1
- 背景固定まま、画面内スクロールをする方法にどのようなものがあるかが知りたいです
1
+ 背景固定にしたまま指定された要素をスクロールさせたいです
body CHANGED
@@ -3,21 +3,164 @@
3
3
 
4
4
  ![実現したいこと](ce5fa1d5ae2aad954ffe264d01909125.jpeg)
5
5
 
6
+ position: sticky;
7
+ と、
8
+ clip-pathで四角く切り取れば、
6
- 初心者ので、ういった検索の方法をしたら出くるか分からず、考え方のヒントを頂きたく質問させて頂きした
9
+ 上記のようかたちになるかと思ったのですが、うまくいっておりせん
7
10
 
11
+ ### 試したこと
8
- ```CSS
12
+ ```HTML
13
+ <!DOCTYPE html>
14
+ <html lang="en">
9
- .introduction{
15
+ <head>
16
+ <meta charset="UTF-8">
17
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
+ <link rel="stylesheet" type="text/css" href="style.css">
19
+
10
- background-image: url(../img/back_commitment.jpg);
20
+ <title>Document</title>
21
+ </head>
22
+ <body>
23
+ <div class="body">
11
- background-size: contain;
24
+ <div class="content">
25
+ <div class="wrapper">
26
+ <div class="sticky"></div>
27
+ <div class="moji">
12
- background-repeat: no-repeat;
28
+ <p>moji</p>
13
- background-attachment: fixed;
29
+ <p>moji</p>
30
+ <p>moji</p>
31
+ <p>moji</p>
32
+ <p>moji</p>
33
+ <p>moji</p>
34
+ <p>moji</p>
35
+ <p>moji</p>
36
+ <p>moji</p>
37
+ <p>moji</p>
38
+ <p>moji</p>
39
+ <p>moji</p>
40
+ <p>moji</p>
41
+ <p>moji</p>
42
+ <p>moji</p>
43
+ <p>moji</p>
44
+ <p>moji</p>
45
+ <p>moji</p>
46
+ <p>moji</p>
47
+ <p>moji</p>
48
+ <p>moji</p>
49
+ <p>moji</p>
50
+ <p>moji</p>
51
+ <p>moji</p>
52
+ <p>moji</p>
53
+ <p>moji</p>
54
+ <p>moji</p>
55
+ <p>moji</p>
56
+ <p>moji</p>
57
+ <p>moji</p>
58
+ <p>moji</p>
59
+ <p>moji</p>
60
+ <p>moji</p>
61
+ <p>moji</p>
62
+ <p>moji</p>
63
+ <p>moji</p>
64
+ <p>moji</p>
65
+ <p>moji</p>
66
+ <p>moji</p>
67
+ <p>moji</p>
68
+ <p>moji</p>
69
+ <p>moji</p>
70
+ <p>moji</p>
71
+ <p>moji</p>
72
+ <p>moji</p>
73
+ <p>moji</p>
74
+ <p>moji</p>
75
+ <p>moji</p>
76
+ <p>moji</p>
77
+ <p>moji</p>
78
+ <p>moji</p>
79
+ <p>moji</p>
80
+ <p>moji</p>
81
+ <p>moji</p>
82
+ <p>moji</p>
83
+ <p>moji</p>
84
+ <p>moji</p>
85
+ <p>moji</p>
86
+ <p>moji</p>
87
+ <p>moji</p>
88
+ <p>moji</p>
89
+ <p>moji</p>
90
+ <p>moji</p>
91
+ <p>moji</p>
92
+ <p>moji</p>
93
+ <p>moji</p>
94
+ <p>moji</p>
95
+ <p>moji</p>
96
+ <p>moji</p>
97
+ <p>moji</p>
98
+ <p>moji</p>
99
+ <p>moji</p>
100
+ <p>moji</p>
101
+ <p>moji</p>
102
+ <p>moji</p>
103
+ <p>moji</p>
104
+ <p>moji</p>
105
+ <p>moji</p>
106
+ <p>moji</p>
107
+ <p>moji</p>
108
+ <p>moji</p>
109
+ <p>moji</p>
110
+ <p>moji</p>
111
+ <p>moji</p>
14
- }
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="tugi"><p>次の要素</p></div>
118
+ </body>
119
+ </html>
15
120
  ```
16
121
 
122
+ ```CSS
17
- ### 試したこと
123
+ .body {
124
+ height: 400vh;
125
+ }
18
126
 
127
+ .content{
19
- ここに問題に対して試したことを記載してください。
128
+ position: relative;
129
+ }
20
130
 
131
+ .moji{
21
- ### 補足情報(FW/ツールのバージョンなど)
132
+ position: absolute;
133
+ top: 0;
134
+ left: 0;
135
+ }
22
136
 
137
+ .wrapper {
138
+ background-color: #ccc;
139
+ height: 100vh;
140
+ width: 100vw;
141
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
142
+ }
143
+
144
+ .sticky {
145
+ background-color: #009688;
146
+ width: 100vw;
147
+ height: 80vh;
148
+ position: -webkit-sticky;
149
+ position: sticky;
150
+ top: 0;
151
+ right: 0;
152
+ }
153
+
154
+ .tugi{
155
+ background-color: #ff9;
156
+ height: 100px;
157
+ }
158
+ ```
159
+
160
+ ### お聞きしたいこと
23
- ここにより詳細な情報を記載てください。
161
+ 0. そもそも、CSSでの実装は難しいでしょうか
162
+ 0. このような、プラグインを用いたほうが、現実的でしょうか。([プラグイン例](https://locomotivemtl.github.io/locomotive-scroll/#fixed-elements))
163
+ 0. 上記のような考え方で合っている場合、clip-pathで切り取るところまでは、合っていますでしょうか。
164
+
165
+ お忙しいところ恐縮ですが、何かヒントを頂けましたら幸いです。
166
+ 宜しくお願いいたします。