Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

あけましておめでとうございます!

謹賀新年
あけましておめでとうございます。
本年もよろしくお願いいたします。

 どうも!LSSです!!

 

あけましておめでとうございます^^

2022年最初の記事となります。

旧年中は大変お世話になりました。

 

本年もよろしくお願いいたします^^

 

 

ページを開いた時に出る垂れ幕

今年の正月ネタは、全画面を覆う垂れ幕(スクロールするとすぐ引っ込む)でした。

 

little-strange.hatenablog.com

と同様、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は動作しない」という仕様になっています。

つまりどうなるかというと、編集画面が

f:id:little_strange:20220101211930p:plain

↑こんな状態になり、記事冒頭部分の編集が困難になるんですね^^;

一応、他に、

width:100%;height:100%;

この「100%」を一時的に0%に書き換えて、後でまた100%に戻す、という方法もあります。

 

 

恒例のアレ

おみくじ

今年もまた、おみくじを用意しました!

去年のに少しだけ手を加えたもので、何度でも引けます^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^