わたしのとってもとっても大好きなcodropsさんからです。
タイトルで”様々な”と書いていますが、流動的に形(クラス)を変化させているので、そのような表現にしました。
なにはともあれ、デモを。
ON SCROLL HEADER EFFECTS

※ IE以外の最新のブラウザにてデモをご覧ください。
要素によってアニメーションが変化していきます。
伸びたり縮んだり、回ったり。。します。
デモに関して
デモでは、jQuery WaypointsというjQueryプラグインが使用されています。
記事中にもヒントが!!
記事の中で最近のcoolな固定ヘッダーについても触れられています。
以下にまとめ。
コードなどの詳細は、上記のサイトへ行かれまして、じっくりじっくり穴があくほどご堪能ください。
本当に穴があいてはいけないので、ほどほどのところでダウンロードをすることをオススメします。
まとめ
まとめというか、感想というものです。
固定ヘッダーに対する思い込み
わたしは、このデモをスクロールしながらぉおおおっとなりました。
何に対してそんな気持ちになったのかどこに感動したのか。。と、ふと思ったのです。
マウスをくるくるしながら考えてみました。
いろいろ考えてみたところ
かたちがいろいろと変化しているからだっ!!
という小学生のような思考結果になったわけです。
が、そこはもう少し考えてみると、たぶん固定ヘッダーという概念が、わたしの中であんなにくるくると変化することなく、アニメーションは1度きりきりくらいで、あとは、固定されているという凝り固まったものがあったからだと思います。
柔軟な発想をといつも思ってはいるのですけどね。
そんないろいろなことを考え、感じさせてくれる『ON SCROLL HEADER EFFECTS』でした。