Webデザイン最新トレンド ~イマドキUIのつくりかた
第9回 ページ内リンクをスムーズにスクロールさせるには
ease系のJavaScriptプラグインで気持ちいい動きを演出
1ページの中に複数のページ要素を配置し,
最近では,
実装にはMITライセンスのscrollto.
従来のページ内リンクだと面白みがないですが,
通常,
jQuery・プラグインをダウンロードする
今回は,
完成イメージは以下のとおりです。
まず,
現在はバージョンが1.
次に,
サイト自体のライセンスがCreative Commons Attribution-ShareAlike 2.
次に,
jQuery Easing Plugin
ファイル構成図は以下のようになります。
ファイルを読み込みリンク先を指定する
それでは実装方法を見ていきましょう。
まずは上記で説明した3つのJavaScriptファイルを読み込み,
XHTMLソース
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.smoothscroll.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
とてもシンプルですね。
続いてリンク先を指定する部分です。
XHTMLソース
<div id="menu"><a class="current" href="#wrap">トップ</a><a href="#content01">コンテンツ01</a><a href="#content02">コンテンツ02</a><a href="#content03">コンテンツ03</a><a href="#content04">コンテンツ04</a><a class="lastChild" href="#content05">コンテンツ05</a> </div>
<div id="pic"><img src="img/pic.jpg" alt="pic" width="800" height="500" /></div>
<div class="content">
<div id="content01" class="menu"><a href="#wrap">トップ</a><a class="current" href="#content01">コンテンツ01</a><a href="#content02">コンテンツ02</a><a href="#content03">コンテンツ03</a><a href="#content04">コンテンツ04</a><a class="lastChild" href="#content05">コンテンツ05</a> </div>
<p>テキストが入りますテキストが入ります...</p>
実装方法は通常のページ内リンクと変わりません。以下のようにするだけです。
- リンク先にはIDを指定する
- リンク元のアンカーのhrefには
「# + リンク先ID名」 を指定する
ここではナビゲーションとして使うため,
動きがもっと自然になるようカスタマイズする
Learning jQueryで解説されているソースでは,
.animate({scrollTop: targetOffset}, 1000, 'easeInOutExpo');
上記で,
遅いとユーザーを待たせてしまうのでUIとしてはよくないですし,
スタート・
逆に,
上記では
なお,
今回解説したサンプルファイルがダウンロードできます。
バックナンバー
Webデザイン最新トレンド ~イマドキUIのつくりかた
関連記事
- 2021年12月第1週号 1位は,WebデザインとUIのトレンドまとめ,気になるネタは,動画プラットフォーム「LINE VOOM」,Androidで提供開始
- 2021年11月第2週号 1位は,認知心理学がユーザーインターフェイス設計に重要な理由,気になるネタは,バルミューダ,開発中の5Gスマホの外観をチラ見せ 11月16日に発表へ
- 2021年10月第3週号 1位は,プロトタイプによってユーザーエクスペリエンスを最適化するヒント,気になるネタは,情報共有ツール「notion」日本語対応 日本ユーザー急増で
- 2021年9月第4週号 1位は,UIデザインにアイコンを使うときに守るべき10のルール,気になるネタは,音楽機器のズーム社,商標権侵害でWeb会議「Zoom」提供のNECグループ会社を提訴
- 2021年8月第1週号 1位は,UI/UXのちょっとしたテクニックいろいろ,気になるネタは,ザッカーバーグ氏は110兆円規模のフェイスブックを「メタバース」企業にすると投資家に語る