2012/05/25
要素の拡大縮小を使って、ロールオーバーアクションを作ってみた。
ロールオーバーアクション、シンプルシリーズ。今回はただただ単純に拡大縮小です。
動作は単純だが、チョコチョコ問題もありますので、そこらへんをメモします。
Sample
サンプル見ると分かりますが、3種作ってます。いまどき風にcssのみでレイアウトするものはいい感じですね。
角丸も表現できないようなヤツ（IEのお古さん）は、ほっときたいのですが、まだまだたくさんいらっしゃるので、それ
...end more
2012/05/25
メニューに使えるロールオーバーアクション。上下左右のバリエーションを作ってみた。
アニメーションはシンプルに「ビヨーン」ってでてきます。
まあ、上下左右のバリエーションを作ってみたのですが、右からってどうなんですかね。。。。
あと、今回は今までのjQueryの書き方とは別の書き方で書いてみました。
jQuery
[javascript]
$(document).ready(function(){
var SELECTOR = '.menuSampl
...end more
2012/04/19
ブロック要素内にコンテンツを追加、もしくは入れ替え。
記事を羅列するとき見出しや一部の文章だけ表示しておいて、クリックで詳細情報を表示・非表示したい。
図で書くと、
さくっとできそうなので、やってみた。
コンテンツ追加の場合
Sample
ん？なんか動きがぎこちない。。。。調べてみた。。。なにやら、表示するボックスの高さが正確に取得できていないようで、アニメーションの目標値が高さより小さいので、ビューンズバッって感じで表示しちゃってます
...end more
2012/03/30
スクロールについてくる要素とその可動範囲の指定。あれ？この場合ついていかない要素ってことになるのかな？
長いページをスクロールしているとサイドメニューなどが見えなくなるときがありますよね。その場合、他のページに移動するにはヘッダーもしくはフッダー、サイドメニューの見える位置までスクロールしないといけません。結構、嫌になるときがありますよね。。。それを解消するには、ページのどの位置にいてもメニューが見えていればいいのです。簡単ですね。そう、お気づきのとおり「 position: fixed 」です。た
...end more
2012/03/29
ページ内スクロール。アンカーのように”id”を指定するだけです。
前回のメモ、「ページ上部にスクロールしながら戻る。」の拡張版です。
ページ内のアンカーへの移動は、一瞬で位置が切り替わることもあり迷子になる可能性がありました。なので、あまり好んで使用はしてこなかったのですが、スクロールしながら指定位置（アンカー）まで移動ができるのであれば迷子も少なくなるのではないかと思い調べてみました。
先にサンプルを見た方が早いので説明はその後にどうぞ。
Sampl
...end more
2012/03/27
ページ上部にスクロールしながら戻る。
ページの上部に戻る処理を、ちょっとおしゃれにする方法をメモる。このサイトの右下に出てくる「Back to Top」も、この方法で実装しています。
html - head内
[html]
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?v
...end more