Modified 2014-04-16 更新情報 動きがもたついたり元の位置に戻らないことがあったのでコードを大幅に書き換えました。 画面をスクロールしてもついてくるサイドバーのレイアウトをよく見かけます。応用として、特定要素の中だけサイドバーを追随させたいという場合もあるかと思います。海外のサイトですが、そのパターンのチュートリアルが公開されていたので参考にさせて頂きサンプル(IE7まで動作確認済みです)を作ってみました。作成の手順とコードのメモなどです。 作ったサンプルデモ main要素内だけ追随するのがわかりやすいようヘッダーとフッターがやたら大きいです。 #main要素内だけ追随するサイドボックスのデモ|memocarilog 作成の手順 HTML このサンプルでは#main要素内でのみ可動するようにする為、#main要素内に可動部分の#side要素を置きます。 <div id="
ページを下に進むと現れて、クリックするとページ上部までスクロールするスクリプトを紹介します。結構ありがちですが、さりげなくCSS3を使っているところや、現れるタイミングやスクロールの早さなどカスタマイズしやすそうなところがおすすめポイントです。 Animated Scroll to Top - web designer wall ソースもダウンロードできるようになっているので、カスタマイズできそうなところを簡単に説明していきます。 次にjavascriptのところを。jQueryをGoogleから読み込んで、以下の部分を記述しています。 <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(win
数行のコードをコピペするだけで、テトリスをWebページに簡単に設置できるjQueryのプラグインを紹介します。 テトリスは実際にプレイすることが可能で、スコア機能もついています。しかもレスポンシブ対応! デモ:Try 操作は、キーボードのz, xで回転、矢印キーで移動です。 左右の矢印をクリックすると、テーマが変わります。 テーマはVim風、ゲームボーイ風、レトロ風など、いろいろ揃っています。 Blockrain.jsの使い方 Step 1: HTML テトリス用の空divを配置します。 <div class="game" style="width:250px; height:500px;"></div> Step 2: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="jquery.js">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く