あけましておめでとうございます。
本年もよろしくお願いいたします。
どうも!LSSです!!
あけましておめでとうございます^^
2022年最初の記事となります。
旧年中は大変お世話になりました。
本年もよろしくお願いいたします^^
ページを開いた時に出る垂れ幕
今年の正月ネタは、全画面を覆う垂れ幕(スクロールするとすぐ引っ込む)でした。
と同様、JavaScriptでスクロール量を判定し、スクロールイベントに応じて表示位置にマイナス値を指定しています。
コード
<style>
#maku{
position:absolute;
width:100%;height:100%;
top:0%;left:0%;
z-index:999;
background-image:repeating-linear-gradient(90deg,#ffffff 0% 12%,#ff0000 12% 24%);
}
#moji{
position:relative;
margin:0 auto;
padding:2em;
-ms-writing-mode: tb-rl;
writing-mode:vertical-rl;
font-size:180%;
font-family: serif;
font-weight:bold;
color:black;
text-shadow:0px 0px 1px black,0px 0px 5px white,0px 0px 5px white;
}
</style>
<div id="maku">
<div id="moji">謹賀新年<br />あけましておめでとうございます。<br />本年もよろしくお願いいたします。</div>
</div>
<p>
<script>
document.addEventListener('scroll',()=>{
maku.style.top=-window.scrollY*2+'%';
},false);
</script>
</p>
※はてなブログで コピペ使用される場合は、ある程度記事を作成後(特に冒頭部分)にコピペされる事をオススメします。
と、コードを貼り付けてはいますが、少々難点が…。
はてなブログの編集画面の仕様による難点ですが、はてなブログの「編集 見たまま」画面は「ページ内CSSは影響するが、JavaScriptは動作しない」という仕様になっています。
つまりどうなるかというと、編集画面が
↑こんな状態になり、記事冒頭部分の編集が困難になるんですね^^;
一応、他に、
width:100%;height:100%;
この「100%」を一時的に0%に書き換えて、後でまた100%に戻す、という方法もあります。
恒例のアレ
今年もまた、おみくじを用意しました!
去年のに少しだけ手を加えたもので、何度でも引けます^^
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^