１枚の画像を縦横比を維持したまま左右に分割

Question

一枚の画像から自動ドアアニメ－ションを作りたいのですが、以下のリンクでは画像を２枚用意していますが、１枚の画像からCSSで二枚用意しているように見せか実装したいのですが可能でしょうか？
なお、真ん中は画像の切れ目がわからないようにし、画像のサイズはウィンドウサイズの縦に合わせアスペクト比を維持したまま拡大します。この時、画像の両端が見切れてもOKです。

[https://www.kipure.com/article/214/]

Answer 1

<div class="demo_door">
  <div class="door left"></div>
  <div class="door right"></div>
</div>

body {
  margin: 0;
}
.demo_door {
  position: relative;
  background: gray;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.door {
  position: absolute;
  transition: all 1500ms 0s ease;
  width: 100vh; /* 計算値 */
  height: 100vh;
  top: 0;
  background-image: url(https://placehold.jp/3d4070/ffffff/2000x1000.png?text=あいうえお);
  background-size: auto 100%;
}
.door.left {
  right: 50%;
}
.door.right {
  left: 50%;
  background-position: right;
}
.demo_door.open .left {
  right: 100%;
}
.demo_door.open .right {
  left: 100%;
}

$(".demo_door").on("click",function(){
  $(this).toggleClass('open');
});

width: 100vh; /* 計算値 */ の計算方は、
画像の幅が高さの2倍なら、100vh * 2 * 0.5 と計算します。
画像の幅が高さの3倍なら、100vh * 3 * 0.5 です。

CodePenサンプル

Comments

[UpaZiro]

サンプルまでつけていただきありがとうございます！
おかげさまでやりたいことが実現しました！
助かりました！！

Answer 2

普通にクローンして２枚でやればいいだけですけど・・・
SVGとかでアニメーションまで指定してしまえばよいだけでは？