どうも！LSSです！！
きっかけとなったリツイート
htmlとcssだけjsなしマリオ！
— さじ (@conasaji) 2021年1月4日
寝なきゃなのについ遊んでしまった。笑 https://t.co/nHcuvrZhQV
いつもお世話になっている、さじさん(id:conasaji)が、HTML+CSSだけで凄い事をされている人のツイートをリツイートされていたものです。
いやもう、凄いというか凄まじいというか…何をどうやったらこんな事になるのか想像もつかず。
作成された根気も凄いですが、JavaScript不使用でここまで…一体どうやって！？全く見当もつかない！…と思ったものです。
コードは見ていないのですが、「もしかしたら、基本はこうやってるのでは？」と思いついた部分があるので、ちょっと試してみる事にしました！
ボタンを押すとスクロールし始める背景
コード
<style><!--
@keyframes migi{
0%{background-position:0px 0px;}
100%{background-position:-400px 0px;}
}
#bg{animation:none;}
#tg01:checked~#bg{animation:migi 5s linear 0s infinite;}
--></style>
<div>
<label style="border: 5px outset #ffcccc; background-color: #ffaaaa; border-radius: 5px; padding: 10px;" for="tg01">
右に進む
</label>
<input id="tg01" style="display: none;" type="checkbox" />
<div id="bg" style="
width: 300px; height: 300px;
background-image: radial-gradient(ellipse 50px 20px at 70% 10%,white,transparent)
,radial-gradient(ellipse 75px 35px at 33% 20%,white,transparent)
,linear-gradient(lightblue 70%,brown 71%);
background-size: 400px 300px;
">
</div>
</div>
今回のコード、以前使ったものの改変です
ちょうど、昨日の論理パズルのヒント部分にも使ったCSSですが、これを使うと
「HTML+CSSだけでON/OFFスイッチ」
が実現できます。
開閉メニューの時は「中身の表示・非表示」を切り替えるスイッチとして使用していましたが、
#bg{animation:none;}
#tg01:checked~#bg{animation:migi 5s linear 1s infinite;}
このように「アニメーションのON/OFF」に役割を変更してやる事で、「クリックしたら動き出す」仕掛けを作る事ができますね。
それにしても…すごい！
自分は「全くどうやってるか見当もつかない」から、ごく一部分だけ「もしかしてこう？」って見当をつけただけですが、元ネタの方は更に色々な技術を駆使されてるんでしょうね。
世の中…思っていた以上に色んな人がいて、面白いのかも！？ って思っちゃいましたｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
