マスクを使用せず、画像サイズを0%から100%へ表示させたい。

お世話になっております。

https://ringo-applepie.com/
このサイトの ABOUT RINGO や SHOP の項のように、画像を左から右に表示させたいとき、
どのようにすれば良いのでしょうか。
背景を隠したくないので、マスクは使わずに画像幅だけを変えたいのです。

上記サイトではTweenMaxを使用しており、ソースを見て同じ動作をするものは作れたのですが、jQueryとCSSでもっとシンプルにできないのかなと試したのですがうまくいかず、質問させていただきました。

以下、試したものです。
codepenはこちらです

１： imgタグにobject fitを使用
→ 画像が0から100%になる途中、画像自体も一緒に左から右へ移動してしまうのでだめ

２：　background-imageを使用
→ 画像が0から100%になる途中、画像自体も一緒に左から右へ移動してしまうのでだめ

３:　background-imageを使用して、background-size/positionを使用しない
→　この場合は画像が0から100%になる途中も画像が動くことがなく理想に近いのですが、画像そのものが原寸表示になっていて枠内ぴったりや中央表示の指定ができない。(指定すると、２と同じになってしまう)

固定された画像幅を0から100%にして、サイズ感なども調整するにはどのようにすればいいのでしょうか。
何卒よろしくお願いいたします。

html
1<body>
2 
3  <div class="wrap">
4    <p>１：imgタグにobject fit</p>
5    <div class="box box1">
6      <img src="https://mutimutisan.com/wp/wp-content/uploads/2020/09/sea.jpg">
7    </div>
8    
9    <p>２：background-image cover使用</p>
10    <div class="box box2">
11      <div style="background-image:url('https://mutimutisan.com/wp/wp-content/uploads/2020/09/sea.jpg')"></div>
12    </div>
13    <p>３：backgroundimage指定 background-position/size不使用</p>
14    <div class="box box3">
15      <div style="background-image:url('https://mutimutisan.com/wp/wp-content/uploads/2020/09/sea.jpg')"></div>
16    </div>
17      
18  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
19</body>

CSS
1.box {
2  width: 50%;
3  height: 300px;
4  margin-bottom: 50px;
5  overflow: hidden;
6  position: relative;
7}
8
9.box.scroll_img {
10  & > img {
11    width: 100%;
12  }
13  & > div {
14     width: 100%;
15  }
16}
17
18.box1 {
19  & > img {
20    width: 0%;
21    height: 100%;
22    object-fit: cover;
23    object-position: 50% 50%;
24    transition: width 3s;
25  }
26}
27.box2 {
28  & > div {
29     background-repeat: no-repeat;
30     background-position: center;
31     background-size: cover;
32     width: 0;
33     height: 100%;
34     transition: width 3s;
35  }
36}
37.box3 {
38  & > div {
39    position: absolute;
40    top: 50%;
41    transform: translateY( -50% );
42    width: 0%;
43    height: 100%;
44    transition: width 3s;
45  }
46}
47
48
49.wrap {
50  padding: 300px 50px;
51}
52p {
53  background: #fff;
54  font-size: 18px;
55}
56body {
57 background-image: url(https://mutimutisan.com/wp/wp-content/uploads/2019/09/arab_tile.png);
58}

jQuery
1jQuery(function ($) {
2  
3    scroll_img();
4  
5    $(window).scroll(function () {
6    scroll_img();
7    });
8  
9  function scroll_img() {
10    $('.box').each(function () {
11      var POS = $(this).offset().top;
12      var scroll =        $(window).scrollTop();
13      var windowHeight = $(window).height();
14
15      if (scroll > POS - windowHeight) {
16        $(this).addClass('scroll_img');
17      } else {
18        $(this).removeClass('scroll_img');
19      }
20    });
21  }
22
23});

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

回答2件

ベストアンサー

下記でどうですか。

css
1.box1 {
2  & > img {
3    width: 0%;
4    height: 100%;
5    object-fit: cover;
6    object-position: 0% 50%; /*修正*/
7    transition: width 3s;
8  }
9}
10.box2 {
11  & > div {
12     background-repeat: no-repeat;
13     background-position: left; /*修正*/
14     background-size: cover;
15     width: 0;
16     height: 100%;
17     transition: width 3s;
18  }
19}
20.box3 {
21  & > div {
22    position: absolute;
23    top: 50%;
24    transform: translateY( -50% );
25    background-size: cover; /* 追加 */
26    width: 0%;
27    height: 100%;
28    transition: width 3s;
29  }
30}

投稿2020/09/08 06:36

編集2020/09/08 06:40

hatena19

総合スコア34075

uni..

2020/09/08 10:46

ご回答ありがとうございます！いただいたコードで試してみましたところ、画像が出てくる最初のところは理想通りになりました！ですが、後半画像幅が100に近くときに全体がふわーっとクローズアップするような動きはそのままなのです。。何か良い方法がありましたら、よろしくお願いいたしますm(__)m

hatena19

2020/09/08 12:39

アニメーション後の縦横比が画像の縦横比より横長な場合に余白ででないようにそうなります。アニメーション後の縦横比と同じかそれより横長な画像を用意すれば解決します。あるいは、下記のようにすればいいでしょう。ただし、画像の縦横比よりは広がりません。 .box2 { & > div { background-repeat: no-repeat; background-position: left; background-size: auto 100%; width: 0; height: 100%; transition: width 3s; } } .box3 { & > div { position: absolute; top: 50%; transform: translateY( -50% ); background-repeat: no-repeat; background-size: auto 100%; width: 0%; height: 100%; transition: width 3s; } }

uni..

2020/09/08 23:31

再度のご回答、本当にありがとうございます。 >アニメーション後の縦横比が画像の縦横比より横長な場合に余白ででないようにそうなります。 >アニメーション後の縦横比と同じかそれより横長な画像を用意すれば解決します。おっしゃるように、表示エリアの縦横比を変更したら理想の表示になりました！！また、background-size: auto 100%;も教えていただいてありがとうございますm(__)m

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