jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。

jquery-scroll-effect2.png

プレゼン資料のデザインに役立つスライド、サイト、記事と私が感じたこと

今年になって仕事でPowePointを使う機会が増えまして、今までまったく使ったことがないので、どのようにすれば見栄えがよくなるのか色々と調べてみました。

久々の投稿なのにブログの本筋から外れた内容になりますが、調べるなかで役に立ったものと、個人的な感じることを書いてみます。

presentation-inspire2.png

jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー

最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。

scroll-up-down.png

ゴーストボタンにマウスを乗せたときの動きいろいろ16個

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。

ghost-btn.png

画面サイズに合わせて高さを指定する3つの方法

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。

height-max.png

マウスを乗せたときと外したときでtransitionの内容を変える方法

CSS3で追加されたtransitionはホバー時の変化に動きを付けてくれるプロパティですが、マウスを乗せたときと外したときで変化の仕方を変えることができます。

trantion-hover-tittle.png

背景に使えるCSSグラデーション作成ツール4選とその使い方

画面全体やヘッダーの背景色をグラデーションにするときに役立つWebツールを4つ紹介します。画像ではなくCSSで実装することができますので手軽に導入できると思います。

gradient-generator.jpg

CSSで作ったドロップダウンメニューのドロップの動きいろいろ

CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。

dropdown-effect.png

3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる

CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。

3line-bar-intro.png

Webギャラリーサイト「samprary」を作ってみました

最近、ブログの更新ペースが落ちていたわけですが、何となくWebギャラリーサイトを作っていたからでした。競合も多いので今さらと思いましたが、ついつい作っちゃいました。

samprary-open.png
Recent Entry
Popular Entry