にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:24.

ブラウザの1画面単位で大きくスクロールするタイプのページ作成方法

1画面ずつスクロールして進むウェブページを簡単作成ブラウザの画面全体に文字や画像を大きく配置して、「1画面ずつスクロールして見せる」デザインを使ったウェブページを最近よく見かけます。
特に、GoogleとかAppleとかMicrosoftとか、企業の製品紹介サイトなどで頻繁に見かける気がします。
単純に「1画面単位でスクロールしていく」デザインであれば、小さなjQueryスクリプトを用意して、短いCSSソースを記述するだけで、わりと簡単に作成できます。

というわけで、そんな「1画面単位で滑らかにスクロールして画面が切り替わる」デザインのページを作成する方法を、All Aboutで解説しました。

1画面ずつスクロールして進むウェブページを簡単作成(@All About ホームページ作成)

簡単に作れますので、ぜひ試してみて下さい。
記事中でも必要なソースを掲載して解説していますが、シンプルなHTMLソースで作成したサンプルページも用意しています。
ソースの内容を把握しやすいように、極力シンプルにして、コメントも付加したソースにしました。サンプルページのソースも参照しつつ解説を読むと、分かりやすいのではないかと思います。

コメント

ちょっくらコメントの投稿テスト。
さらにテスト。
もうちょっとテストでございます。
もっとテストしますよ。

投稿者 にしし : 2014年06月28日 12:14

コメント数: 1件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---