面白スクロールトリックの作り方を考えてみた

「ホームページを作る人のネタ帳」で紹介されていたページの作り方を考えてみた。

「up」とか押すと滑らかに画面が移動する。これは、tinyscrolling.jsというJavascriptのファイルを読み込めばあっさり出来るみたい。

<script type="text/javascript" src="tinyscrolling.js"></script>

ページの途中へ移動する方法は以下を参照。以下の記述でname属性が#XYZの箇所へと移動する。

<a href="#XYZ">同じファイル内の特定位置にジャンプ</a>

上記で滑らかに移動するようにできる。

背景画像に虹色のやつが固定されている。これがスクロールすることでいい味をだすって書いてあった。じゃあ、背景画像を固定してみる。

background-attachment : fixed ;

これで固定される。

背景画像の上に透過画像をおいているようだ。ということで、透過画像の作成方法。透過画像の作成はフリーソフトを使えば簡単にできる。

僕はPictBearSEのほうがオススメ。

自分で動かしたわけでもないが、簡単にできそう。なんで、これで感動したのかが良く分からないが、スクロールしてページ内を移動する方法が分かっただけよしとしよう。

何事も勉強です。