プログラミング学習開始5ヶ月目に作成開始しました。
私はWebページにおいてTOP画面をスクロールしない仕様にできないかを模索しています。スクロールして下に行ったときには上に書いてあったことを忘れているからです。
パッとみて全体を把握できる仕様にしたくてこのような形にしました。
一般的なWebページの形式ではないのでまだ直感的に操作しにくいかと思いますが、この形式が一般的になれば、Webページがより見やすいものになると信じています。
HTML CSS JQuery S3
オープニングアニメーションが流れた後、メイン画面がフェードインします。左に7つのメニューがありhoverする（カーソル矢印を上にのせる）とが回転してメニュー内容が登場します。
それぞれの中身で記事が長いようでしたらスクロールできるようになっています。スクロールできる場合のみ自動で（読み込んだパソコンのウインドウサイズによって変わるので自動でないとならない）、スクロールできますよの矢印が表示されます。スクロールし始めると消えます。
大きな左の丸の周りに7つのメニューの内容をあらかじめ均等に配置していますが、これを正確に行うために三角関数を用いています。
隣のメニュー内容に移るのに、360度の7分の1の四捨五入の51.43度回転するようにしているのですが、四捨五入しているので一周ごとに0.01度ずつずれていきます。
もし私のこのサイトが大好きな人がメニューを100周させたとしても1度もずれなので問題ないのですが、ものは試しと修正して何周しても問題ないようにしました。
その過程で浮動小数点演算誤差（コンピュータ内では2進法で計算されているがために小数点を扱った時に起こる計算のずれ）も修正しました。
オープニングや今この画面でも文字が流れて残った文字の色と文字自体が入れ替わっていると思いますが、これらはランダムです。ランダムなのでいつでも綺麗なバランスになるように調整するのは工夫が必要ですが、一度出来れば楽しくかつコードが短くなります。いちいち一個一個位置などを指定しなくてもいいからです。
このページ作成は処理の重さとの戦いでした。より効率的な処理を心がけましたが、それでも泣く泣く諦めた機能が数多くあります。JQueryのみで作成する限界点まできたのかもしれません。次の道具立てを模索します。
デザインについてはなんとなくやっているので説明ができません。全ての基本色に対して灰色を混合させていくことによってアダルトな雰囲気にすることは意識しています。