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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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オブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1030閲覧

CSS/JS animationの画像のスライドイン開始位置を変更したい

Nogeira

総合スコア9

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クリップ

投稿2020/02/25 14:42

前提・実現したいこと

CSSのanimationとkeyframesで、画像と文章をスライドイン表示後に
マスクがスライドアウトするアニメーションを作っております。
画像の方も既にあるh2の文章のように、
スライドイン開始がその場から始まっているように
表示させたいと思っております。

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

画像はその場からではなく、左端からスライドインして表示されてしまいます。 JSファイルはスクロールイベントに使っているだけで、エラーメッセージ等は特にでておりません。

該当のソースコード

HTML

1<head> 2 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 3</head> 4 5<section class="moji"> 6 <div class="moji-image"> 7 <img src="https://d1f5hsy4d47upe.cloudfront.net/c2/c2e580c9bbd01a22c501b7be2a1fb4a1_w.jpg"> 8 </div> 9 <div class="moji-container"> 10 <h2>スライドアニメーション</h2> 11 </div> 12 </section>

CSS

1 .moji { 2 max-width: 50vw; 3 margin: 5% auto 25% auto; 4 text-align: center; 5 position: relative; 6 } 7 8 .moji-image { 9 visibility: hidden; 10 overflow: hidden; 11 display: inline-block; 12 } 13 14 15 .moji-container { 16 position: absolute; 17 top: 200px; 18 left: -130px; 19 display: inline-block; 20 overflow: hidden; 21 visibility: hidden; 22 } 23 24 .moji-container h2 { 25 font-size: 2vw; 26 color: #fff; 27 background: rgba(0,0,0,0.4); 28 padding: 30px; 29 } 30 31 32 @keyframes moji-anime { 33 from { 34 transform: translateX(-100%); 35 } 36 37 to { 38 transform: translateX(0); 39 } 40 } 41 42 43 @keyframes moji-mask { 44 from { 45 transform: translateX(0); 46 } 47 48 to { 49 transform: translateX(100%); 50 } 51 } 52 53 .moji-start { 54 animation-name: moji-anime; 55 animation-duration: .5s; 56 animation-fill-mode: forwards; 57 animation-timing-function: cubic-bezier(.42, 0, 1, 1); 58 position: relative; 59 visibility: visible !important; 60 } 61 62 .moji-start::before { 63 animation-name: moji-mask; 64 animation-duration: .5s; 65 animation-delay: 1s; 66 animation-fill-mode: forwards; 67 animation-timing-function: cubic-bezier(.42, 0, 1, 1); 68 position: absolute; 69 content: ''; 70 top: 0; 71 left: 0; 72 z-index: 1; 73 width: 100%; 74 height: 100%; 75 background: #000000; 76 } 77 78 .moji-image-start { 79 animation-name: moji-anime; 80 animation-duration: .5s; 81 animation-fill-mode: forwards; 82 animation-timing-function: ease; 83 position: relative; 84 visibility: visible !important; 85 } 86 87 .moji-image-start::before { 88 animation-name: moji-mask; 89 animation-duration: .5s; 90 animation-delay: .5s; 91 animation-fill-mode: forwards; 92 animation-timing-function: ease; 93 position: absolute; 94 content: ''; 95 top: 0; 96 left: 0; 97 z-index: 1; 98 width: 100%; 99 height: 100%; 100 background: #666; 101 } 102

Javascript

1 $(window).on('scroll', function() { 2 3 var elem = $('.moji-container h2'); 4 5 elem.each(function() { 6 7 var mojistart = 'moji-start'; 8 var elemOffset = $(this).offset().top; 9 var scrollPos = $(window).scrollTop() + (window.innerHeight/2); 10 if(scrollPos > elemOffset) { 11 $(this).addClass(mojistart); 12 } 13 }); 14 }); 15 16 $(window).on('scroll', function() { 17 18 var elem = $('.moji-image'); 19 20 elem.each(function() { 21 22 var mojistart = 'moji-image-start'; 23 var elemOffset = $(this).offset().top; 24 var scrollPos = $(window).scrollTop() + (window.innerHeight/2); 25 if(scrollPos > elemOffset) { 26 $(this).addClass(mojistart); 27 } 28 }); 29 });

試したこと

h2は親要素にinline-block、overflow: hidden;を当てる事で内包されましたが、画像は上手くいきません。

補足情報(FW/ツールのバージョンなど)

OS:windows10 64bit
ブラウザ:Chrome

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

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

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

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

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

guest

回答2

0

ベストアンサー

HTMLを変更してよければ、以下はいかがでしょうか。

js

1 <div class="moji-image"> 2 <img src="https://d1f5hsy4d47upe.cloudfront.net/c2/c2e580c9bbd01a22c501b7be2a1fb4a1_w.jpg"> 3 </div>

js

1 <div class="moji-container"> 2 <div class="moji-image"> 3 <img src="https://d1f5hsy4d47upe.cloudfront.net/c2/c2e580c9bbd01a22c501b7be2a1fb4a1_w.jpg"> 4 </div> 5 </div>

投稿2020/02/26 02:00

Lhankor_Mhy

総合スコア35865

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

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

Nogeira

2020/02/26 03:23

Lhankor_Mhy様 毎度ありがとうございます。 仰るようにHTMLに新たに親要素を増やし、inline-block,overflow:hiddenを付与することで思った通りの動きになりました。 更に質問で恐縮なのですが、 h2と違い、インライン要素の場合はブロック要素の器が2つ必要なのでしょうか? なんとか親要素を増やさずできないかとJS部分を var elem = $('.moji-image img'); で試しましたが、アニメーション部分の .moji-image-start::before { background: #666; } が付与されておらず、画像のままスライドインしてきます。
Nogeira

2020/02/26 04:42 編集

ご返答ありがとうございます。 成程、仕様上の問題だったのですね。 通りでimgにblockを付与しても解決しなかったわけです。 imgに限らず置換要素はしっかり把握しておく必要はあります。 今後に役立つ情報、ありがとうございました。
hatena19

2020/02/26 04:54

> なんとか親要素を増やさずできないか・・・ 親要素を増やさずに実現するコードを回答してますので、ご参考に。
Nogeira

2020/02/26 06:37

hatena19様 申し訳ございません、ご回答に気付きませんでした。 ご回答ありがとうございます。 コードを試してみました。 今回の質問の意図には沿ってますので、私の説明不足だった事を先にお詫び申し上げます。 確かにblock要素を広げるアニメーションでも表現は可能ですね。 今回は子要素の画像サイズに合わせて.moji-image-startを発火させたかった(ここの記載がありませんでした)ので、 親要素を足し、inline-blockが一番近い形となりました。 親要素の幅に合せるか子要素に合わせるかは、 デザイン的にはどちらも頻出するアニメーションだとは思うので、 より深く学ぶ事ができました、ありがとうございました。
Lhankor_Mhy

2020/02/26 07:13

> 子要素の画像サイズに合わせて to { width: min-content; } とすればいいかもしれないですね。(IE11非対応)
guest

0

下記のようなことでしょうか。

Codepen動作サンプル

修正点

css

1 .moji-image { 2 visibility: hidden; 3 overflow: hidden; 4 display: block; /* inline-blockから修正 */ 5 } 6 7 8/* 追加 ここから*/ 9 @keyframes img-anime { 10 from { 11 width: 0; 12 } 13 14 to { 15 width: 100%; 16 } 17 } 18/* ここまで */ 19 20 21 .moji-image-start { 22 animation-name: img-anime; /* moji-animeから修正 */ 23 animation-duration: .5s; 24 animation-fill-mode: forwards; 25 animation-timing-function: ease; 26 position: relative; 27 visibility: visible !important; 28 }

投稿2020/02/26 04:07

hatena19

総合スコア33620

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問