2012年の始めに【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法という記事を書きました。この記事で書いたのは、ヘッダーバーとフッターバーを対象にスクロール位置による要素を固定/解除する方法でした。当時はまだサイドバーを固定させるUIというのは主流ではありませんでしたが、昨年の後半から今年にかけていろんな所で見るようになってきました。 先日、1年前の記事でサイドバーを固定/解除させる方法についての質問もいただきましたので、その実装方法についてまとめてみたいと思います。このブログでも「サイドバーを固定/解除させている」ので、このブログを例に説明していきます。 ポイントは、以下の3つの値をどう取得するかということになります。この値さえ取得できてしまえば、あとはその値によってサイドバーを固定/解除するような命令を与るだけとなります。 スクロールトップの位置を

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

スマフォやタブレットのように、下に引っ張るとページをリフレッシュするjQueryのプラグインを紹介します。 Hook.js 最上部に戻ってからの上方向スクロールでもリフレッシュするようです。 普通のページではリフレッシュするシーンがあまりないですが、何かに使いたいな、、、 Hook.jsの使い方 実装は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <link rel="stylesheet" href="hook/hook.css" type="text/css" /> <script src="hook/hook.js"

Collaboration made easy. Add real time collaboration features to your website today! Get Started TogetherJS is a free, open source JavaScript library by Mozilla that adds collaboration features and tools to your website. By adding TogetherJS to your site, your users can help each other out on a website in real time!

表示サイズに合わせて、スライドショー自体のサイズやサムネイルなどを最適な状態で提供するスライドショーを実装するjQueryのプラグインを紹介します。 もうすぐ始まるIEの自動アップデートのIE8にも対応しています。 Camera | a free jQuery slideshow by Pixedelic [ad#ad-2] Cameraのデモ Cameraの使い方 Cameraのデモ デモは上記のトップにあるものと、他に3種類のスライドショーがあります。 トップのものが一番シンプルで、Cameraの基本性能を楽しめます。 画像の切り替えには、美しいアニメーションが採用されています。 デモ：Fullscreen フルスクリーンタイプのスライドショー。 Cameraの使い方 Cameraで使用する基本的なHTMLの構造から。 HTML div要素にHTML5の独自属性で「data-src」を

当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の

HTML 画像とキャプションのテキストをfigure要素で配置し、divで内包します。 <div class="flip-3d"> <figure> <img src="yacht.jpg" alt=""> <figcaption>Yacht</figcaption> </figure> </div> <div class="flip-3d"> <figure> <img src="bee.jpg" alt=""> <figcaption>Bee</figcaption> </figure> </div> シャドウ用の余分なマークアップは、必要ありません。 CSS まずはfigure要素を3Dにし、各画像をfloatで配置します。 div.flip-3d { perspective: 1200px; width: 30%; float: left; } div.flip-3d figure

Web Design Recipesのたかはしのりさんが、「WordPress のよくあるカスタマイズコード functions.php 多め」という記事で、 テンプレートタグ wp_list_categories に、スラッグ名のクラス付ける方法あったら、教えていただけると嬉しいです！ とおっしゃっていたので、いつものように？チャレンジしてみたのでした。 wp_list_pagesでは、page_css_classという出力されるclassへのフックがあって簡単に追加・削除が可能なのですが、wp_list_categoriesは、出力される全HTMLソースに対する wp_list_categories というフックがあるのみで、ちょっと難度があがります。 方針としては、「WordPressのカレンダーのthにclassを追加するコード（日本語限定）」と同様の方法で、正規表現でのパターン抽

画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated profile cards 実装とデモ アニメーションは4種類あり、まずは共通のHTML/CSSから。 HTML 各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切替時のテキストのパネルはリスト要素です。 「EFFECT」には、それぞれのエフェクトを入れます。 <ul id="&#91;EFFECT&#93;" class="profiles"> <li> <img class="pic" src="images/&#91;PIC&#93;.jpg" /> <ul class="info"> <li><a href="&#91;URL&#93;">[NAME

How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about posi

An image slider is an image slider, and they're all roughly the same, correct? Not so quickly. What are the primary criteria for selecting any kind of web component? Compatibility, simplicity of setup, great performance, and an attractive design and feel. With our Slider we've tried to create the perfect html slider that covers all these needs and even more: Compatibility with the widest feasible