前提・実現したいこと
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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/26 03:23
2020/02/26 03:38
2020/02/26 04:42 編集
2020/02/26 04:54
2020/02/26 06:37
2020/02/26 07:13