jquery.cookie.jsの使い方と簡単なサンプルを紹介します

今さらな感じもしますが、使う機会があったので忘れないように記事にしておきます。以前使ったことがあるのですが、そのときの記憶がほとんどなかったので、こういうのは残しておいたら自分のためにもなりますね。

jquery-cookie2.png

レスポンシブなサイトに!jQueryでオンマウスでもクリックでも開くボタン

クリックして内容が表示されるボタンと、マウスを乗せて内容が表示されるボタンがあるとします。私はクリックよりマウスを乗せる方が気軽におこなえると思います。クリックはひと手間多いですし、クリックして別のページに移動したら面倒だと思うと躊躇してしまいます。

ですので、自分でサイトを作る場合、できるだけマウスを乗せて開くようにしています。しかし、タッチデバイスの場合、マウスを乗せるという動作がないのでクリックで開くようにしないと仕方ありません。

hover-click-button.png

jQueryとCSS3で作るページの上までスクロールするボタン

wordpressはプラグインがたくさんあって便利です。しかし、個人的には安易にプラグインを使うのではなく、自作できるものは自作できるよう心がけています。

今回紹介するのは前からよく使われている方法ですが、プラグインで実装している人も多いようなので紹介します。自分で作った方が自由ですし、無駄に大きなファイルにならないのでいいかと思います。

scroll-top-tittle1.png

jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる

最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。

scroll-tittle.png

jQueryを使った一定以上スクロールすると上に固定される横メニュー

最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。

fixedmenu_20130304065252.png

CSSのcounter-incrementを使ってリスト以外に番号を付ける方法

あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介します。

counter0.png

スペースを有効に、jQueryでスクロールすれば現れるコンテンツ

このブログのように2カラムのレイアウトでメインコンテンツが長いと、スクロールしたときにサイドのスペースがなくなってしまいもったいないですよね。

サイドのコンテンツが終わった時点で固定されたコンテンツが現れたら無駄なくスペースを使えるのではないでしょうか。

jQuery-fixedbox.png

ページ上部までスクロールするAnimated Scroll to Top

ページを下に進むと現れて、クリックするとページ上部までスクロールするスクリプトを紹介します。結構ありがちですが、さりげなくCSS3を使っているところや、現れるタイミングやスクロールの早さなどカスタマイズしやすそうなところがおすすめポイントです。

position: fixed;でサイドに固定してjQueryでスライドして現れるメニュー

先日このブログの右サイドに設置したオンマウスでスライドして現れるメニューの設置方法を紹介します。サンプルもダウンロードできますのでぜひご活用ください。

ページ内をスムーズに移動する超軽量スクリプト

ページ内をスムーズに移動するスクリプトはいくつもありますが、個人的にはこれが一番軽くて簡単なのかなと思います。以前使っていたのですがあらためて使うと便利だったので紹介します。
Recent Entry
Popular Entry