2014年1月6日月曜日

お正月もあっという間にすぎちゃいますね、色ピエロです。

今日は最近よく見かけるパララックスページのメモ。

今回は横スクロールの『jinvertscroll』の使い方について。

まずは『jinvertscroll』ページにあるjinvertscroll.zipをダウンロードします。
jinvertscrollのページ

解凍して、その中のexampleフォルダを参考にすれば私の解説なんか見なくても、
すぐにできると思います。

解説はexampleを少しいじった感じで書いていきます。

まずはhtmlファイルにスクリプトの呼び出し記述します。

この2つの呼び出しは必須みたいです。

あと以下のjavascriptも記述します。

これはexampleのまんまですが、コメントだけ自分で変えてます。

htmlはこんな感じです。

時間差で動いて欲しい背景画像の数だけ、<div>を増やしてください。

一番前に来る<div>(ここでは.front)には文章等を記述していきます。
.frontの中身はsectionなどでテキストページを分けとくいいと思います。

次にCSS

前半

ポイントはpositionとz-indexですかね？
図で説明するとこうなってる感じです。

後半はこう

positionはabsoluteにしてください。
これは図で説明するとこんな感じです。

4ページもleftの数値だけ変更してあるのみです。
私自身まだ使いこなせてないので、更に勉強しなくては・・・

2014年1月2日木曜日

あけましておめでとうございます、色ピエロです。

昨日のカウントダウン時はT-squareのライブに行ってました！
t-squareライブに行くのが初めてだったのと、
ライブ自体に行くのが久しぶりだったので、
だいぶ興奮して聞いてきました！

知らない人はこちらを聞くとすぐわかるかと↓

【T-SQUARE TRUTH1991(PV)】

ちなみに私の好きなT-squareのアルバム
【spirits】

興味のある方は是非！聞いてください。

今日は
jQueryを使って固定した上部メニューバーを
スクロールに合わせて透明にするメモです

html

html5で記述してます。

css

[nav]
heightは適当な値にする。(ul liと合わせる)
position:fixed top:0で上部固定
z-indexは重なり順を整数で指定するタグ。値が高い程上部表示される。

javascript(jQuery)

$(window).scrollTop()はスクロールの上の上部位置を取得する
cleartimeで色が透ける速度を指定します。大きい程ゆっくりに。
stop().animateにすることで途中でマウスを外すなどをすると、処理も中断される。

まだまだ勉強しなきゃ駄目ですね