トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
jQueryのサイドバー固定サブメニュー実装パターン
jQueryのサイドバー固定サブメニュー実装パターン 最近はモニターのサイズがワイドなってきていることもありサイドバーを固定する機会が増えてきましたね。 そこでjQueryを使用したサイドバー固定にしたときのサブメニューの動きをいくつかご紹介します。 投稿日2018年04月27日 更新日2019年09月19日 基本構造 navの子要素にulでマークアップします。 サブメニューはliの子要素のさらに子要素にulを入れ込みます。 HTML <aside id="sidebar"> <h1 id="brand-logo">Logo</h1> <nav id="global-nav"> <ul> <li><a href="#">Home</a></li> <li class="sub-menu"> <a href="#">About</a> <ul class="sub-menu-nav"> <l
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac7ae56c20fc639b9d7e08f7f0da2fec804f6625/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
stickyMojo contained fixed position sticky sidebar jquery plugin
stickyMojo.jsFinally, a contained fixed positioned sticky sidebar jQuery plugin. Brought to you by Introduction stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE. Background After looking around for a contained fixed position s
スクロールしたときにサイドバーのパーツをjQueryで止める方法
スクロールしたときにサイドバーのパーツを止める方法についてご質問を頂きましたの、で本エントリーで紹介します。 似たような記事を、以前「jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン」で紹介しましたが、サイドバーのパーツを止める場合の説明が不足していたので、改めて本エントリーで解説します。 １．サンプル 追記：サンプル復旧しました。 下にサンプルを用意しました。 サンプル このサンプルは、スクロールしたときに、ページ右下にある「MT5」というMovable Typeのクレジットバナーを止めるようにしています。 動作はFirefoxとGoogle Chromeで確認しています。 ２．設定方法 １項のサンプルを用いて解説します。 まず、本ブログで配布しているjQueryプラグイン「PersistentHeaders」のv0.0.2をダウンロード
汎用的で軽量なツールチップ実装jQueryプラグイン・Tooltipster
使い勝手の良さそうなプラグイン だったので備忘録的にご紹介。 ツールチップを実装するjQuery のプラグインです。マウス追従、 不動タイプの選択が可能、デザ インもCSSのみで作ります。 各ブラウザにも対応、HTMLタグも利用可能、マウス追従の有無の選択、軽量、などの特徴が有ります。 Sample動作サンプルです。 マウス追従への変更も可能です。圧縮版で5KBほどとなかなか軽量です。 コード<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.tooltipster.min.js"></script>本体とプラグインを読み込み。 $('
【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
Facebookページのタイムラインの先頭に特定の投稿を固定表示する
Facebookページのタイムラインの先頭に、特定の投稿を固定表示する方法を紹介します。 下のスクリーンショットは当ブログのFacebookページ「小粋空間」で、サーバ故障を知らせる投稿（赤枠部分）をページトップに固定したときの例です。 この投稿は「固定投稿」と呼ばれるようで、Facebookページのタイムラインの左上に一定期間表示されます。投稿の右上には固定投稿を示すフラグが表示されます。また、中央にあるタイムラインの線からも切り離されます。 Facebookページのトップで何かをお知らせしたいときなどに使えそうです。 ということで、以下設定方法です。 １．記事を固定する 記事を固定するには、該当記事の右上にあるアイコンをクリックして「トップに固定」をクリックするだけです。 ２．記事の固定を解除する 記事を固定するには、固定した記事の右上にあるアイコンをクリックして「トップ固定を解除」を
jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン
jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグインを公開します。 このプラグインは、下記のサイトで紹介されているサンプルをプラグイン化し、機能を追加したものです。 PersistentHeaders １．サンプル サンプルを用意しました。スクロールすると各コンテンツのヘッダー部分がページ上部に固定されます。また、ヘッダーを含んだコンテンツがページから消えると固定されていたヘッダーも消えます。 サンプル ２．プラグインのダウンロード 以下のリンクからプラグインをダウンロードして、ファイル名を「jquery.persistentheaders.js」にリネームしてください。 jquery.persistentheaders_0.0.1.js jquery.persistentheaders_0.0.2.js 以下、設定方法です。 ３．HTML H
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
jQueryでスクロールすると上部に固定されるナビゲーション
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
ヘッダーとフッターを固定
CSSだけでヘッダーとフッターの位置を固定する方法をご紹介いたします。 ヘッダーとフッターは3行目の「position: fixed;」でスクロールしても位置が固定するようにし、4行目の「top: 0;」、18行目の「bottom: 0;」でそれぞれ上下に表示しています。中央表示は「width: 100%;」プロパティで実現させています。 コンテンツは「overflow: auto;」でヘッダーとフッター以外のスクロール制御をするようにし、「padding: 150px 0 150px;」でスペースを取って、通常時にヘッダーとフッターの後に潜り込まないようにしています。 問題はIE6です。IE6は「position: fixed;」に対応していないで、IE6用のプロパティを用意します。25行目の「_height: 100%;」で一度、画面全体の高さをいっぱいにしてフッターまでを表示させてい
WordPressの固定ページでコメントフォームを非表示にする方法
WordPressの固定ページ（あるいは記事ページ）でコメントフォームを非表示にする方法をまとめました。 変更前後のイメージを掲載しておきます。 コメントフォームが表示された状態の固定ページ コメントフォームを非表示にした状態の固定ページ 以下、設定方法です。説明の中で使っている管理画面のスクリーンショットはWordPress 3.2.1です。 １．記事単位でコメントフォームの表示・非表示を制御する 記事単位でコメントフォームの表示・非表示を制御するには、投稿画面右上にある表示オプションをクリック。 「ディスカッション」をチェック（チェックされていれば次に進んでください）。 「コメントの投稿を許可する。」のチェックをはずす。 これで投稿すれば固定ページのコメントフォームが非表示になります。 ２．一括で制御する 一括でコメントフォームの表示・非表示を制御するには、ナビゲーションの「設定」→「
スクロール制御系のjqueryプラグイン「Jquery Waypoints」 | バニデザノート
主要な動きは４つ。 ・[ Infinite Scroll ] 永遠にスクロールしてくれる （先頭の要素をもう一度読み込んでくるくる回転しているようにみえる） ・[ Sticky Elements ] 一部のエレメントだけ、スクロールしても動かなくする ・[ Scroll Analytics ] スクロールした任意のポイントで、ページビューカウント ・[ Dial Controls ] ダイアル状の要素をスクロールさせると、他の要素が変化する ダウンロード＆解説はこちら Jquery Waypoints ご参考にどうぞ。 関連記事 やさしい時間と音楽の流れるサイト「hanging up the moon」 2011/11/09 完成度の高いフリーのアイコンセット「iconSweets2」 2011/11/08 可変グリッドで斜めなアイデアが素敵なサイト「ARNAUD BEEN」 2011/1
[JS]ページ上部にアニメーションでスライド表示するパネルを手軽に実装できるスクリプト -Notification
2秒後に自動で閉じるデモ [ad#ad-2] Notificationの実装 外部ファイル 「jquery.js」と当スクリプト、パネル用のスタイルシートを外部ファイルとして指定します。 <script src="jquery.js"></script> <script src="js/jquery_notification_v.1.js"></script> <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/> JavaScript showNotification(params); 「params」には「message：表示するメッセージ」「type：パネルのタイプ」を記述します。 showNotification({ message: "This is a sample Success
画像の縦横比を固定して縮小する方法。 « wondering-mug
26 5月 2011 - by cat_anywhere Jqueryを使って、画像の縦横比を固定したい時に、便利なスクリプトです。 簡単なイベントハンドラと、if構文を使えば、数行のスクリプトで実現できます。 HTMLの例 <table> <tbody> <tr> <td><img id="imgtf" src="photo1.jpg" alt="" /></td> <td><img id="imgtf" src="photo2.jpg" alt="" /></td> <td><img id="imgtf" src="photo3.jpg" alt="" /></td> <td><img id="imgtf" src="photo4.jpg" alt="" /></td> <td><img id="imgtf" src="photo5.jpg" alt="" /></td> </tr>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページスラッグからIDの取得について
WordPressをCMSとして利用する際、固定ページの親ページと子ページに共通のナビゲーションを作るTips
GitHub - stefangabos/Zebra_Image: A single-file lightweight PHP library designed for efficient image manipulation featuring methods for modifying images and applying filters
