CSSだけでOne page scrollなWebサイト
Result 昔iPhone 5Sのプロダクト紹介ページにあったレイアウトを真似たスクリプト（One page scroll）をCSSだけで実装する、みたいなの。最近あんまり見かけませんので需要は少なそうですが。CSSスライダーと同じ方法で実装出来ます。 cssinput[type='radio'] {/*ページスクロール用のボタン。input要素は非表示にしておく*/ display: none; } input[type='radio']#section1:checked ~ nav > label[for='section1'] {/*実際のボタン。チェックが入ったら背景色を変更*/ background-color: white; } /*以下、各セクションのスタイルセッティング*/ input[type='radio']#section1:checked ~ section:nt
[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu
デフォルトのスクロールバーも表示 ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head> <body> ... コンテンツ ... <script src="jquery.js"></script> <script src="scrollmenu.js"></script> </body> Step 2: HTML 各コンテンツは、section要素で実装します。 <section class="section" id="section1"> <div class="content"
![[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b654e6fe9828430f6845fd3dd07466d833a3033/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052903-01.png)
[JS]縦長1ページのスクロール時にさまざまなインタラクションを加えるスクリプト -ScrollStory
ティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。 Scroll Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。 ScrollStory -GitHub ScrollStoryの特長 ScrollStoryのデモ ScrollStoryの使い方 ScrollStoryの特長 ScrollStoryは、スクロールベースのページとインタラクションをシンプルな実装で作成できます。 スタイルにとらわれない、自由なスクロールベースのページを作成可能。 既存コンテンツの流用だけでなく、新たにオブジェクトを配列で生成することにも対応。 jQuery UIの16種類のイベント・コールバックが利用できます。 アクテ
jQuery.fullContent
複数のコンテンツをそれぞれブラウザの枠いっぱいに表示し、それらを水平・垂直のマトリックス状に配置し、ダイナミックなアニメーションで切り替えるjQueryのプラグインを紹介します。 jQuery.fullContent jQuery.fullContent -GitHub jQuery.fullContentの特徴 jQuery.fullContentのデモ jQuery.fullContentの使い方 jQuery.fullContentの特徴 ウインドウのサイズいっぱいのコンテンツを水平・垂直のアニメーションで切り替えます。 各コンテンツは、碁盤のように水平・垂直に配置可能。 コンテンツ間の移動はアニメーション。 ハッシュリンクでの直接アクセス対応。 ハッシュリンクでの履歴にも対応。 IE8+をサポート。 jQuery.fullContentのデモ デモはモダンブラウザ、IE8+でご覧く
Flippy : flip effect jQuery Plugin | Guilhem Marty
Flippy is a cross-browser flip effect plugin for jQuery and allows you to flip whatever html element you want.What is Flippy ? Flippy is a cross-browser flip effect plugin for jQuery which allows you to flip whatever html element you want. Download flippy v1.0.1 Options color_target : The targeted background color. (ex.: ‘aliceblue’ or ‘#f0f8ff’ | default: ‘white’) content : The content to show af
[JS]スライドを縦横斜めのダイナミックなスクロールで表示するスクリプト -Ascensor.js
デモページ ページ中央の「Demo and how to use」をクリックします。 操作は、左上の「prev, next」、右下の「ナビゲーション」、キーボードの「矢印キー」です。 [ad#ad-2] Ascensorを実際に使用しているサイトも紹介します。 Reverse Buro Ascensorの使い方 外部ファイル 「jquery.js」と「scrollTo.js」、そして当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.scrollTo.js" type="text/javascript"></script> <script src="js/jquery.ascensor.js" type="text/java
空白のスペースはNGの元！？縦に長すぎるサイトは要注意！｜Yahoo! ビジネスエクスプレス 掲載審査の落とし穴
今回は着物の通販サイトがNGとなった事例をご紹介します。 このサイトは、ページが左メニュー、真ん中、右メニューと3分割されており、そのうちの右メニューに「新着商品」をたくさん表示されていたため、右メニューだけが2倍ほど縦に伸びてしまっていました。 そのため、ページ全体を確認しようとすると、何度もスクロールしなければならず、右メニュー以外の部分には空白のスペースが広く空いてしまっていました。 Yahoo!さんからは、下記のようなご連絡を頂きました。 お客様のサイトのトップページですが、縦に長く、右側の「新着商品」以外 の箇所が空白となっている部分が多く見受けられるなど、サイトが閲覧しに くくなっております。 つきましては、サイトの構成、ナビゲーションをご改善くださいますよう、お願いいたします。 縦に長すぎて何回もスクロールしないとページ全体が見れないサイトだけでなく、今回のように
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
