画像だけにアニメーション適用方法について

画像の上にマスクを左から右にスライドイン表示させるアニメーションなのですが
背景100％でアニメーションしてしまいます。
画像の上だけにスライドインさせるアニメーションを考えています。
コーディング初心者なので申し訳ありませんがご教示願いたいと存じ上げます

html
1<section class="cotainer">
2<div class="box">
3<div class="boxInner">
4<img src="https://placehold.jp/1000x350.png" alt="">
5</div>
6</div>
7</section>

css
1.container {
2width: 100%;
3max-width: 700px;
4height: auto;
5margin: 0 auto;
6padding: 40px 0;
7}
8.box {
9width: 100%;
10height: 350px;
11margin: 0 0 2% 0;
12overflow: hidden;
13}
14
15.box .boxInner {
16width: inherit;
17height: inherit;
18line-height: 200px;
19font-size: 1.5em;
20text-align: center;
21color: #555;
22background-color: #fff;
23opacity: 0;
24}
25@keyframes play {
26from {
27transform: translateX(-100%);
28}
29
30to {
31transform: translateX(0);
32}
33}
34
35@keyframes maskOut {
36from {
37transform: translateX(0);
38}
39
40to {
41transform: translateX(100%);
42}
43}
44.isPlay {
45animation-name: play;
46animation-duration: .5s;
47animation-fill-mode: forwards;
48animation-timing-function: cubic-bezier(.8,0,.5,1);
49position: relative;
50opacity: 1 !important;
51}
52
53.isPlay:before {
54animation-name: maskOut;
55animation-duration: .5s;
56animation-delay: .5s;
57animation-fill-mode: forwards;
58animation-timing-function: cubic-bezier(.8,0,.5,1);
59content: '';
60position: absolute;
61top: 0;
62left: 0;
63z-index: 1;
64width: 100%;
65height: 100%;
66background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,161,72,1) 100%);
67}

javascript
1<script>
2$(window).on('load scroll', function(){
3
4var elem = $('.boxInner');
5
6elem.each(function () {
7
8var isPlay = 'isPlay';
9var elemOffset = $(this).offset().top;
10var scrollPos = $(window).scrollTop();
11var wh = $(window).height();
12
13if(scrollPos > elemOffset - wh + (wh / 4)){
14$(this).addClass(isPlay);
15}
16});
17});
18</script>

yambejp

2019/12/12 00:18

画像の上に何をスライドインさせるのでしょうか？

Gotou0600

2019/12/12 00:59

色付きのマスクを一回左から右にスライドインさせてから画像をスライドインさせようと考えています

行動規範の内容に同意します

回答1件

ベストアンサー

ご希望の動作は下記のような感じでしょうか。

CSSの.box .boxInner { のブロックを下記のように修正

css
1.boxInner {      /* .box 削除 */
2  width: 1000px; /* 画像の幅に変更 */
3  height: inherit;
4  line-height: 200px;
5  font-size: 1.5em;
6  text-align: center;
7  color: #555;
8  background-color: #fff;
9  opacity: 0;
10  margin: 0 auto; /* 追加 中央寄せ */
11  overflow: hidden; /* 追加 */
12}