どうも！LSSです！！
今回は、ちょっと役にたつかも知れない？？CSSを組んでみました。
最近ちょこちょこやってた事の合わせ技みたいな感じです。
横長の写真を横スクロールするスイッチ
↓の画像の左上にある「←→」をクリックしてみてください^^
ある夏の日のポートタワー
コード
<style><!--
#bgscr{background-position:0px 0px;transition:10s linear 0s;}
#cgscr:checked~#bgscr{background-position:-900px 0px;}
--></style>
<div>
<input id="cgscr" style="display: none;" type="checkbox" />
<div id="bgscr" style="width: 300px; height: 638px; background-image: url('画像ファイルのURL');">
<label style="background-color: #00000080; border-radius: 15px; padding: 5px; margin: 5px; color: white; position: -webkit-sticky;position: sticky; top: 170px;" for="cgscr"> ← → </label>
<br />
<span style="font-weight: bold; text-shadow: 1px 1px 0px white, -1px -1px 0px white; font-size: 20px;">
ある夏の日のポートタワー
</span>
</div>
</div>
赤文字部分は「変更要 または 変更推奨」箇所です。
画像ファイルのURLは置きたい画像ファイルのURLに書き換える必要があります。
-900px の部分は、画像の横幅にあわせて調整します。
638px の部分は、画像の高さにあわせて調整します。
170px の部分は、スイッチが画面スクロール後にとどまる高さです。
よく分からない場合、0pxにするといいかと思います。
スイッチになる部分
<label style="background-color: #00000080; border-radius: 15px; padding: 5px; margin: 5px; color: white; position: -webkit-sticky;position: sticky; top: 170px;" for="cgscr"> ← → </label>
この部分がスイッチになります。
装飾をかけているため、長くなっていますが、最低限必要なのは、
<label for="cgscr">文字</label>
だけだったりします。
また、このサンプルでは画像上にスイッチを配置していますが、同じページ（記事）上であればどこに置いても動作します^^
スクロール速度
スクロールの速さを決めているのは、コード中２行目の
#bgscr{background-position:0px 0px;transition:10s linear 0s;}
この「10s」の部分です。
これがスクロール完了までにかける時間をあらわしており、この例では「10秒」と指定している事になります。
不要な文言
<style><!--
#bgscr{background-position:0px 0px;transition:10s linear 0s;}
#cgscr:checked~#bgscr{background-position:-900px 0px;}
--></style>
<div>
<input id="cgscr" style="display: none;" type="checkbox" />
<div id="bgscr" style="width: 300px; height: 638px; background-image: url('画像ファイルのURL');">
<label style="background-color: #00000080; border-radius: 15px; padding: 5px; margin: 5px; color: white; position: -webkit-sticky;position: sticky; top: 170px;" for="cgscr"> ← → </label>
<br />
<span style="font-weight: bold; text-shadow: 1px 1px 0px white, -1px -1px 0px white; font-size: 20px;">
ある夏の日のポートタワー
</span>
</div>
</div>
青文字部分はサンプル文章で、好きに変更してもいいですし、バッサリ削除してもいいですｗ
オレンジの部分はスイッチとなる部分で、先に書いたように違うところに書いてもOKです。
シンプルにしたコード
装飾や不要な文言をカットし、スイッチを外に出したシンプルなコードも載せておきます。
<style><!--
#bgscr{background-position:0px 0px;transition:10s linear 0s;}
#cgscr:checked~#bgscr{background-position:-900px 0px;}
--></style>
<div>
<input id="cgscr" style="display: none;" type="checkbox" />
<div id="bgscr" style="width: 300px; height: 638px; background-image: url('画像ファイルのURL');">
</div>
</div>
<label for="cgscr"> ← → </label>
2021/1/15追記！面白い使い方を考えていただきました
カメさん (id:tn198403s)さんが このスクロールスイッチを使った面白い試みを記事にしてくださいました。
なるほど、こんな使い方が！
アイデア次第で予想外の使い方ができるんですね^^
カメさん様、ありがとうございます！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
