質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2439閲覧

スライドインした後にマスクがスライドイン、その後画像がフェードインするアニメーションをつくりたい

onakapecomaru

総合スコア10

HTML5

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

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/02/19 07:06

編集2021/02/23 05:25

前提・実現したいこと

ページを下にスクロールしていくと、ボックスがスライドインで表示されその後、
グラデーションの要素がスライドアウトしてコンテンツが表示されるようにしています。

ボックスがスライドインで表示された後、重なり要素(マスク)がスライドアウトするアニメーションが完了た後、
画像を上からフェードインさせたいです。
ご教授いただければ幸いです。

参考ページ
https://into-the-program.com/slidein/

発生している問題・エラーメッセージ

Scrollreveal.jsを使い、上からフェードインするアニメーションを追加してみたところ
スライドインと同じタイミングでスライドイン
また、フェードインしない場合がある。

該当のソースコード

HTML

1<section id="home-itemList"> 2 <section class="itemList-01"> 3 <div class="itemListInner"> 4 <div class="itemBox"> 5 <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure> 6 <div class="itemnameBox"> 7 <h2 class="category">タイトル1</h2> 8 <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p> 9 </div> 10 </div> 11 </div> 12 </section> 13<section class="itemList-02"> 14 <div class="itemListInner"> 15 <div class="itemBox"> 16 <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure> 17 <div class="itemnameBox"> 18 <h2 class="category">タイトル2</h2> 19 <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p> 20 </div> 21 </div> 22 </div> 23 </section> 24<section class="itemList-03"> 25 <div class="itemListInner"> 26 <div class="itemBox"> 27 <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure> 28 <div class="itemnameBox"> 29 <h2 class="category">タイトル3</h2> 30 <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p> 31 </div> 32 </div> 33 </div> 34 </section> 35</section>

CSS

1@charset "UTF-8"; 2 3//itemListInnerをスライドインする 4@keyframes play { 5 from { 6 transform: translateX(-100%); 7 } 8 to { 9 transform: translateX(0); 10 } 11} 12 13 14//マスク要素をスライドアウト 15@keyframes maskOut { 16 from { 17 transform: translateX(0); 18 } 19 to { 20 transform: translateX(100%); 21 } 22} 23.isPlay { 24 animation-name: play; 25 animation-duration: 0.5s; 26 animation-fill-mode: forwards; 27 animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); 28 position: relative; 29 opacity: 1 !important; 30} 31 32.isPlay:before { 33 animation-name: maskOut; 34 animation-duration: 0.5s; 35 animation-delay: 0.5s; 36 animation-fill-mode: forwards; 37 animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); 38 content: ""; 39 position: absolute; 40 top: 0; 41 left: 0; 42 z-index: 1; 43 width: 100%; 44 height: 100%; 45 background-image: linear-gradient(109.6deg, #f5e7d6 11.2%, #ffdca2 91.1%); 46} 47 48 49#home-itemList { 50 width: 100%; 51 height: auto; 52} 53#home-itemList .itemList-01 { 54 width: 100%; 55 height: 480px; 56 margin-bottom: 10%; 57} 58#home-itemList .itemList-01 .itemListInner { 59 width: inherit; 60 height: inherit; 61 background: #F5E7D6; 62 opacity: 0; 63} 64#home-itemList .itemList-01 .itemListInner .itemBox { 65 width: 100%; 66 display: flex; 67 justify-content: center; 68} 69#home-itemList .itemList-01 .itemListInner .itemBox .itemImage { 70 position: relative; 71 overflow: hidden; 72 top: -100px; 73 opacity: 0; 74 transition: 1s; 75} 76#home-itemList .itemList-01 .itemListInner .itemBox .itemImage.active { 77 opacity: 1; 78} 79#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox { 80 height: 480px; 81 display: flex; 82 flex-direction: column; 83 justify-content: center; 84 align-items: flex-start; 85} 86#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox .category { 87 font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif; 88 color: #515151; 89 font-size: 4rem; 90 text-align: left; 91 margin: 0; 92 opacity: 0; 93} 94#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox .category span { 95 opacity: 0; 96} 97#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox p { 98 font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif; 99 color: #515151; 100 font-size: 1.6rem; 101 line-height: 1.9; 102} 103

JavaScript

1$(function() { 2 3 $('.itemListInner').on('inview', function() { 4 var elem = $('.itemListInner'); 5 6 elem.each(function() { 7 8 var isPlay = 'isPlay'; 9 var elemOffset = $(this).offset().top; 10 var scrollPos = $(window).scrollTop(); 11 var wh = $(window).height(); 12 13 if (scrollPos > elemOffset - wh + (wh / 4)) { 14 $(this).addClass(isPlay); 15 } 16 }); 17 }); 18 19 $('.itemListInner').on('animationend', (e) => { 20 if (e.originalEvent.animationName === 'maskOut') { 21 $('.itemImage', this).addClass('active'); 22 }; 23 }); 24 25});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/02/19 07:17

.on('inview', というイベントは、Scrollreveal.js で提供されるものですか?
onakapecomaru

2021/02/19 07:29

それはinview.jsで、Scrollreveal.jsとは別になります。 説明が足らず申し訳ないです。
Lhankor_Mhy

2021/02/19 07:41

たぶんですが、jQueryも使っているような気がしますね。他にはありますか?
onakapecomaru

2021/02/19 08:46

jQueryも使用していますすみません。ほかにはございません。
Lhankor_Mhy

2021/02/22 01:42

Scrollreveal.js を使いたくない、ということでいいでしょうか?
onakapecomaru

2021/02/22 02:03

返信いただきありがとうございます。 Scrollreveal.js を使っても良いのですが、検証しているとマスクのアニメーションと同時に Scrollreveal.js の動きが行われることが見られるためそれをなんとか改善したいのです。 もしかするとキャッシュが原因だったりするのでしょうか、、
Lhankor_Mhy

2021/02/22 02:14

問題を把握しました。
guest

回答1

0

ベストアンサー

animationend を使ってみてはどうでしょうか。

animationend イベントは、 CSS アニメーションが完了したときに発生します。

HTMLElement: animationend イベント - Web API | MDN

js

1#home-itemList .itemList-01 .itemListInner .itemBox .itemImage { 2 position: relative; 3 overflow: hidden; 4 top: -100px; 5 opacity: 0; 6 transition: 5s; 7} 8#home-itemList .itemList-01 .itemListInner .itemBox .itemImage.active { 9 opacity: 1; 10}

js

1$('.itemListInner').on('animationend', (e) => { 2 if (e.originalEvent.animationName === 'maskOut') { 3 $('.itemImage').addClass('active'); 4 }; 5});

投稿2021/02/22 02:16

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

onakapecomaru

2021/02/22 05:38

回答ありがとうございます。解決いたしました 勉強不足で、animationendについては初めて知りました。 ですが'itemListInner'を一つ、また二つと下に増やした場合 最初の要素はアニメーションが適用されるのですが、以降の要素には 'active'は付与されるもののフェードインのアニメーションが実行されず困っています…
Lhankor_Mhy

2021/02/22 05:50

CSSを適切に変更することによって対応できると思います。
Lhankor_Mhy

2021/02/22 05:52

あ、いや、違うかもですね。$('.itemImage')を適切に変更した方がいいかもしれません。
onakapecomaru

2021/02/22 06:50

('.itemImage') ではなく、別のclassということでしょうか…
onakapecomaru

2021/02/22 08:00

すみません。ありがとうございます。 何度も聞いてしまい申し訳ないんのですが、コンテキストはどういった使い方になるのでしょうか。 全然きちんとした知識がなく、調べてみたのですがいまいち理解が出来なくて。
Lhankor_Mhy

2021/02/22 08:03

コードで書くなら、$('.itemImage', this)じゃないかと思います。 ただ、アロー式は普通の関数式(functionで始まるやつ)に変更してください。
onakapecomaru

2021/02/22 08:12

お教えいただき大変ありがたいのですが、修正しても以前と変わらずですね…
Lhankor_Mhy

2021/02/22 08:20

そうですか。当方では動作しました。 具体的なことについては、具体的にコードをご提示いただかないと何とも言えないです。
onakapecomaru

2021/02/22 08:24

仰る通りです、申し訳ございません。 もしよろしければコードをお見せいただくことは可能でしょうか
Lhankor_Mhy

2021/02/22 08:26

「修正しても以前と変わらない」コードをご提示ください。
onakapecomaru

2021/02/22 08:37

コード修正いたしました。恐れ入りますがよろしくお願いいたします。
Lhankor_Mhy

2021/02/22 08:45

あと、CSSも間違っているかもです。 それだと、ひとつでも動作しなくないですか?
onakapecomaru

2021/02/23 05:12

CSSをもう一度見直し、仰る通り普通のfunctionの式に修正したところ動作しました!本当にありがとうございます
Lhankor_Mhy

2021/02/24 01:10

ご解決されて何よりです。
onakapecomaru

2021/02/24 01:28

助かりました。ありがとうございました。 あともう一点だけお聞きしたいのですが、'itemList-02' 'itemList-03'と増やした場合に マスクのbackground-imageの色をそれぞれ別の色に変更できればと思うのですが、 良い方法はないでしょうか。 現状'isPlay01' 'isPlay02'というようにclassを分けることで出来ているのですが もう少しスマートな方法はないかと思いまして
Lhankor_Mhy

2021/02/24 02:37

私ならば、 .itemList-01 .isPlay::before{ background-image: ... } .itemList-02 .isPlay::before{ background-image: ... } のようにします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問