Result
画像のビフォーアフターみたいなやつをCSSで、という内容です。
※画像が全く同じ場合は読み込まれてないので右下のrerunを押してリロードしてください
ちょっと力技感あるので実用的かどうか判断できませんが、コード自体はシンプルです
css
.foo {/*親要素且つビフォー画像*/
background-image: url(https://picsum.photos/800/600);
width: 600px;
height: 450px;
border: 20px solid #F0E5AB;
padding: 0;
margin: 1rem auto;
position: relative;
overflow: hidden;
}
.bar {/*アフターの画像。親要素に重ねる形で配置*/
background-image: url(https://picsum.photos/800/510);
height: 450px;
resize: horizontal;
position: absolute;
top: 0; left: 0;
min-width: 0;
max-width: 600px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bar:before {/*疑似要素でスライドバー*/
content: '↔';
background: rgba(0,0,0,.7);
font-size: 18px;
color: white;
top: 0; right: 0px;
hight: 100%;
line-height: 486px;
position: absolute;
}
.charly{ /*textareaを配置して横にリサイズ出来るように設定し、高さを合わせる*/
resize: horizontal;
opacity: 0;
position: relative;
top: 50%;
left: 0px;
margin-right: 0px;
width: 0px; height: 15px;
max-width: 594px; min-width: 15px;
outline: 0 solid transparent;
cursor: move;
cursor: all-scroll;
transform: scaley(35);
transform-origin: center center;
animation: delta 5s 1 normal ease-in-out 1s;
}
@keyframes delta {/*最初のアニメーション。動かせる事を明示*/
30% {width: 500px}
60% {width: 150px}
80% {width: 250px}
}
textareaのresize: horizontal;を利用したトリックです。現状resizeプロパティはtextareaじゃなくても効いたと思いますがこちらの例ではtextareaが用いられています
本来のtextareaの使い方ではないので許せない方は許せないかもしれませんね。気にならない方は一つの手段として。
html
<div class='foo'> <div class='bar'> <textarea readonly cols='0' rows='0' class='charly'></textarea> </div> </div>
textareaはreadonlyにしておく。CSSもHTMLも割と少なくて済みますね
can i use
resizeプロパティのブラウザ対応状況です。割と対応されてない感ありますね
iOSのsafariでresize対応されていないのは意外と思ったけどよく考えたらそもそもスマホ自体がリサイズ出来るデバイスでしたね。用途は違う事もあるでしょうけど、なんとなく非対応に納得してしまいました
因みにPrestoベースの頃のOperaのみtextareaにしか対応していないそうです
