teratail
回答率
85.29%
質問するログイン新規登録
トップCSS3に関する質問横からフェードインを実装したらトップ画面が横にずれてしまうのを直したい

Q&A

解決済

2回答

1943閲覧

横からフェードインを実装したらトップ画面が横にずれてしまうのを直したい

eripakaxxx
eripakaxxx

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/06/23 06:19

編集2023/06/26 06:24

0

0

jQueryでフェードインを実装時にトップの位置がずれてしまうのを直したい

  • jQueryで横からのフェードイン（スライドイン？）を実装したい。
  • 実装自体は出来ているが、更新時にトップが横にずれてしまうので直したい。
  • 横にずれたままスクロールすると、その位置でスライドが収まり、すべて本来の元の位置に戻り、実現したい形にはなっていますが、また更新を押すと横にトップ部分がずれた状態で表示される。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>HP</title>
7  <link rel="stylesheet" href="css/style.css">
8  <link rel="preconnect" href="https://fonts.googleapis.com">
9  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
11<link rel="stylesheet" href="./css/animsition.min.css">
12</head>
13<body>
14  <div class="animsition container">
15 <header class="item">
16    <div class="menu">
17    <div class="logo">
18      <a href="#"><h1><img src="./img/w.png" alt="ロゴ"></h1></a>
19    </div>
20  <nav class="nav-list">
21    <ul>
22      <li>
23        <a href="#news">お知らせ</a>
24    </li>
25      <li>
26        <a href="#product-01">商品のご紹介</a>
27    </li>
28      <li>
29        <a href="#map">店舗のご案内</a>
30    </li>
31    </ul>
32  </nav>
33</div>
34<div class="store">
35 <a href="">オンラインストア</a>
36</div>
37  </header>
38  <main>
39      <section id="news" class="wrapper item">
40        <h2 class="cmn-title">
41          <span>お知らせ</span>
42        </h2>
43        <dl class="news-list">
44          <dt>2021.01.01</dt>
45          <dd>タイトルタイトルタイトルタイトル</dd>
46          <dt>2021.01.01</dt>
47          <dd>タイトルタイトルタイトルタイトル</dd>
48          <dt>2021.01.01</dt>
49          <dd>タイトルタイトルタイトルタイトル</dd>
50          <dt>2021.01.01</dt>
51          <dd>タイトルタイトルタイトルタイトル</dd>
52          <dt>2021.01.01</dt>
53          <dd>タイトルタイトルタイトルタイトル</dd>
54        </dl>
55      </section>
56      <section id="product-01" class="wrapper  inview_re fadeIn_right">
57        <h2 class="cmn-title">
58          <span>タイトル</span>
59        </h2>
60        <div class="pro-img">
61        <img src="./img/w_m.jpg" alt="">
62        <p>テキストテキストテキストテキスト</p>
63      </div>
64    </section>
65      <section id="product-02" class="wrapper inview_re fadeIn_left">
66        <h2 class="cmn-title">
67          <span>タイトル</span>
68        </h2>
69        <div class="pro-img">
70        <img src="./img/w03.jpg" alt="">
71        <p>テキストテキストテキストテキスト</p>
72      </div>
73    </section>
74    <div id="map" class="map">
75      <iframe src="https://www.google.com"></iframe>
76    </div>
77  </main>
78  <footer class="item">
79    <div class="flex">
80    <div class="right">
81      <div class="logo">
82      <img src="./img/W.png" alt="ロゴ">
83      </div>
84      <p class="info">
85        ...
86      </p>
87        <nav class="nav-list">
88          <ul>
89            <li><a href="#news">お知らせ</a></li>
90            <li><a href="#product-01">商品のご紹介</a></li>
91            <li><a href="#map">店舗のご案内</a></li>
92          </ul>
93        </nav>
94</div>
95<div class="left">
96  <p>
97    <a href="" target="_blank">オンラインストアを見る</a>｜
98    <a href="">お問い合わせ</a>
99  </p>
100</div>
101</div>
102<div class="copylight">
103  <p>&copy;</p>
104</div>
105
106  </footer>
107</div>
108  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
109  <script src="./js/animsition.min.js"></script>
110  <script src="./js/jquery.inview.min.js"></script>
111  <script src="./js/main.js"></script>
112
113</body>
114</html>
115
CSS
1*{
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body{
8  font-family: 'Noto Serif JP', serif;
9  background-color: #e6e2d7;
10}
11
12body a{
13  text-decoration: none;
14  color: white;
15}
16
17body li{
18  list-style: none;
19}
20
21.wrapper{
22  width: 100%;
23  max-width: 1024px;
24  margin: 0 auto;
25  padding: 0 20px;
26}
27
28.item{
29  opacity: 0;
30}
31.show{
32  transition: all 2s;
33  opacity: 1;
34}
35
36
37/* header */
38
39header{
40  width: 100%;
41  height: 100vh;
42  background-color: black;
43  background-image: url(../img/w.jpg);
44  background-position: center top;
45  background-size: cover;
46  writing-mode: vertical-rl;
47  padding: 60px 80px;
48  position: relative;
49  margin-bottom: 180px;
50}
51
52.logo{
53  margin-left: 60px;
54}
55.logo img{
56  width: 120px;
57}
58
59.nav-list li{
60  margin-left: 20px;
61}
62
63.store{
64  display: flex;
65  background-color: #7df48b33;
66  align-items: center; position: absolute;
67  left: 40px;
68  bottom: 20px;
69}
70.store a{
71  display: inline-block;
72  border: #ccc 1px solid;
73  padding: 40px 20px;
74  margin: 0.5rem;
75}
76
77@media(max-width:768px){
78  .wrapper{
79    max-width: 100%;
80  }
81  header{
82    padding: 20px 20px;
83    margin-bottom: 60px;
84  }
85   .logo{
86    margin-left: 0;
87  }
88  .logo img{
89    width: 100px;
90  }
91 
92  .store{
93    left: 20px;
94  }
95}
96
97
98
99/* main */
100
101.cmn-title{
102  display: flex;
103  flex-direction: column;
104}
105
106/* news */
107#news{
108  writing-mode: vertical-rl;
109  margin-bottom: 150px;
110}
111
112.news-list{
113  margin: 120px 80px 0 0;
114}
115
116.news-list dt{
117  border-right: 1px black solid;
118  padding-right: 30px;
119}
120.news-list dd{
121  padding-left: 30px;
122}
123.news-list dd:last-child{
124  border-left: 1px black solid;
125}
126
127@media(max-width:768px){
128  #news{
129    margin-bottom: 60px;
130  }
131  .news-list{
132    margin: 40px 20px 0 0;
133  }
134  .news-list dt{
135    padding-right: 10px;
136  }
137  .news-list dt:nth-of-type(n+4){
138    display: none;
139  }
140  .news-list dd{
141    padding-left: 10px;
142  }
143  .news-list dd:nth-of-type(n+4){
144    display: none;
145  }
146  .news-list dd:nth-of-type(3){
147    border-left: 1px black solid;
148  }
149}
150
151
152
153/* product */
154
155.fadeIn_right {
156  opacity: 0;
157  visibility: hidden;
158  transform: translateX(100%);
159  transition: opacity 2s, transform 2s;
160}
161
162
163.fadeIn_right.is-show {
164  opacity: 1;
165  visibility: visible;
166  transform: translateX(0%);
167}
168
169.fadeIn_left {
170  opacity: 0;
171  visibility: hidden;
172  transform: translateX(-100%);
173  transition: opacity 2s, transform 2s;
174}
175
176.fadeIn_left.is-show {
177  opacity: 1;
178  visibility: visible;
179  transform: translateX(0%);
180}
181
182#product-01,#product-02{
183  writing-mode: vertical-rl;
184  margin-bottom: 150px;
185}
186
187#product-01 .cmn-title{
188  flex-direction: row;
189}
190
191.pro-img {
192  width: 65%;
193  position: relative;
194}
195#product-01 .pro-img img{
196  width: 100%;
197  margin: 80px 20px 0 0;
198}
199#product-01 .pro-img p{
200  writing-mode: horizontal-tb;
201  background-color: #6df58da7;
202  box-shadow: #484848 8px 8px 20px;
203  color: #fff;
204  padding: 50px 120px;
205  position: absolute;
206  left: -40px;
207  bottom: -20px;
208}
209
210@media(max-width:768px){
211  #product-01,#product-02{
212    margin-bottom: 80px;
213  }
214
215  .pro-img {
216    width: 90%;
217  }
218  #product-01 .pro-img img{
219    width: 100%;
220    margin: 80px 10px 0 10px;
221  }
222  #product-01 .pro-img p{
223    font-size: 0.8em;
224    text-align: center;
225    padding: 30px 40px;
226    position: absolute;
227    left: -20px;
228    bottom: -10px;
229  }
230  
231}
232
233#product-02{
234  writing-mode: vertical-lr;
235}
236
237#product-02 .cmn-title{
238  flex-direction: row;
239}
240
241
242#product-02 .pro-img img{
243  width: 100%;
244  margin: 80px 0 0 20px;
245}
246
247#product-02 .pro-img p{
248  writing-mode: horizontal-tb;
249  background-color: #ef453f99;
250  box-shadow: #484848 8px 8px 20px;
251  color: #fff;
252  padding: 50px 120px;
253  position: absolute;
254  right: -40px;
255  bottom: -20px;
256}
257
258@media(max-width:768px){
259
260  #product-02 .pro-img img{
261    width: 100%;
262    margin: 80px 0 0 10px;
263  }
264
265
266  #product-02 .pro-img p{
267    font-size: 0.8em;
268    text-align: center;
269    padding: 30px 40px;
270    position: absolute;
271    right: -20px;
272    bottom: -10px;
273  }
274}
275
276.map iframe{
277  width: 100%;
278}
279
280/* footer */
281footer{
282  width: 100%;
283  background-color: black;
284  color: white;
285  padding: 80px 80px 30px 30px;
286}
287.flex{
288  writing-mode: vertical-rl;
289  width: 100%;
290  display: flex;
291  justify-content: space-between;
292  flex-direction: column;
293  margin-bottom: 30px;
294}
295.right .info{
296  line-height: 2;
297  margin-left: 60px;
298  font-size: 0.9rem;
299}
300.left{
301  font-size: 0.9rem;
302}
303.copylight{
304  writing-mode: horizontal-tb;
305  text-align: center;
306  font-size: 0.5em;
307}
308
309@media(max-width:768px){
310  footer{
311    padding: 30px 20px 20px;
312  }
313  footer .flex .right .logo{
314    margin-left: 0;
315  }
316  .right .info{
317    margin-left: 30px;
318  }
319  footer .nav-list li{
320    margin-left: 10px;
321    font-size: 0.9em;
322  }
323
324}
325
js
1$(function(){
2  $(".animsition").animsition({
3    inClass: 'fade-in',
4    outClass: 'fade-out',
5    linkElement: '.animsition-link',
6    loading: true
7  });
8});
9
10$(function(){
11  $(".item").on("inview",function(event,view){
12    if(view){
13      $(this).addClass("show")
14    }else{
15      $(this).removeClass("show")
16    }
17  })
18})
19
20$(function () {
21  $(window).scroll(function () {
22    const windowHeight = $(window).height();
23    const scroll = $(window).scrollTop();
24
25    $('.inview_re').each(function () {
26      const targetPosition = $(this).offset().top;
27      if (scroll > targetPosition - windowHeight + 100) {
28        $(this).addClass("is-show");
29      }else{
30        $(this).removeClass("is-show");
31      }
32    });
33  });
34});

試したこと

色々とネットで調べてみたのですが分からず、こちらでも調べたのですがあまり同じような質問の方がいなかったので質問させて頂きました。まだ初心者なのですがどうがご教授頂けたらと思います。宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

yambejp
yambejp

2023/06/23 08:01

まず、いまのままコピペするとvisibilityとopacityでなにも表示されません 最低限挙動がわかるソースをご提示ください
Lhankor_Mhy
Lhankor_Mhy

2023/06/24 00:56 編集

jQuery のバニラなコードではないです。プラグインを使ってないですか？ https://git.blivesta.com/animsition/ https://remysharp.com/2009/01/26/element-in-view-event-plugin/ なお、これらのプラグインを使って試しても、『更新時にトップが横にずれてしまう』という問題は再現しませんでした。 おそらく、ここに書かれていない部分のコードの問題ですので、質問を見直してください。
guest

回答2件

0

この回答はGPT-4による自動生成回答です

お使いのコードを確認したところ、CSSのvisibilityプロパティが原因でトップがずれている可能性があります。visibility: hidden;は要素を非表示にするものの、要素のスペースはそのまま残ります。これが原因で、ページの更新時にトップがずれていると考えられます。

解決策として、visibilityプロパティを使用せず、displayプロパティを使用して要素を非表示にすることをお勧めします。以下のようにCSSを変更してみてください。

CSS
1.fadeIn_right {
2  opacity: 0;
3  display: none;
4  transform: translate(50%, 0);
5  transition: 2s;
6}
7.fadeIn_right.is-show {
8  transform: translate(0, 0);
9  opacity: 1;
10  display: block;
11}
12.fadeIn_left {
13  opacity: 0;
14  display: none;
15  transform: translate(-50%, 0);
16  transition: 2s;
17}
18.fadeIn_left.is-show {
19  transform: translate(0, 0);
20  opacity: 1;
21  display: block;
22}

この変更により、要素が非表示の場合、そのスペースも削除され、ページの更新時にトップがずれなくなるはずです。

投稿2023/06/23 06:19

teratail-ai
teratail-ai

Powered by GPT-4

0

自己解決

js
1$(document).ready(function() {
2  $(".inview_re").addClass("is-show");
3});
4setTimeout(function() {
5  $(".inview_re").removeClass("is-show");
6}, 3000);

こちらを追加することで解決しました。
最初にトップ表示されたときにis-showクラスを付けることで、トップ画面を固定できました。これだけだとスクロール初回時にフェードインされず表示されたままの状態になるので、読み込み３秒後にまたis-showクラスを外すことで、思い通りの処理が出来ました！
慣れない質問の仕方で申し訳ありませんでした。

投稿2023/06/26 05:36

eripakaxxx
eripakaxxx

総合スコア1

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップCSS3に関する質問

横からフェードインを実装したらトップ画面が横にずれてしまうのを直したい