くらし情報『スマホ時代の流行・"縦スクロールサイト"に挑戦! - Adobe Muse体験記(13)』

2014年11月25日 18:31

スマホ時代の流行・"縦スクロールサイト"に挑戦! - Adobe Muse体験記(13)

リンクを貼りたいアイコン画像をクリックし、【ハイパーリンク】のプルダウンを開くと【スマートフォン】のくくりの中に、先ほど打ったアンカーのリンクも追加されているのが分かる。この中から、各アイコンのリンク先に適応するものを選べば作業は完了だ。ハイパーリンクの基本編は、第6回をチェックしてほしい。

○スマホからプレビューしてみよう!

これで「シングルページ」のデザインが完成した。ドキドキしながら、パブリッシュしてiPhoneから動作確認をしてみると……イメージ通りにリンク先へとスクロールされるようになっている!

この滑らかな動き、目指したセクションの手前でスッと止まる感触。そう、これが欲しかった!と思わず小躍りする筆者であった。ぜひ実際の動作などはこちらのデモサイトにて確認してみてほしい。(シングルページデザインで閲覧できるのはスマホからのアクセスのみ)

○さらなるステップアップには「パララックススクロール」を

今回の筆者のWebサイトでは使用していないが、アンカーリンクの応用編として最後に紹介しておきたいのが「パララックススクロール」の機能だ。
1枚もののWebサイトでは、スクロールをするに従って背景写真やアイコンが動いたり、文字が現れたりする「モーション」

新着くらしまとめ
もっと見る
記事配信社一覧
facebook
Facebook
Instagram
Instagram
X
X
YouTube
YouTube
上へ戻る
エキサイトのおすすめサービス

Copyright © 1997-2024 Excite Japan Co., LTD. All Rights Reserved.