[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
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プラグインを作ってみました
ノンプログラミングで、スクロールするサイトを作れちゃう！ そんなすばらしいjQueryのプラグイン、jQuery Scrollable Linkを作ってみました。 プラグイン自体は、jQueryが書ける人ならそれほど難しいものではないのですが、jQueryを全く知らない方や、初心者のWebデザイナーさんに使って頂けるとうれしいです！。 デモ こんな感じのサイトがノンプログラミングで作れます。 デモを見る 使い方は簡単！ このプラグインは、ページ内リンクに、scrollableというクラスを設定することで、自動でスクロールアニメーションに変換します。 1) まず、以下の2行をheadタグのの中に入れます。 jquery.scrollablelink.js は、このページからダウンロードして配置してください。 <script src="http://ajax.googleapis.com/aj
クロスブラウザ対応、スクロールに追従するパネルの3つの実装方法
JavaScriptやCSSを使用して、スクロールした際にパネルを追従させるチュートリアルをCSS-Tricksから紹介します。 Scroll/Follow Sidebar, Multiple Techniques demo チュートリアルでは、JavaScriptで実装したアニメーション版、CSSで実装した版２つの計３種類が紹介されています。 サイドバーのリストをクリックすると、追従のパターンを変更できます。 実装はシンプルで、div要素でコンテンツとサイドバーを配置し、サイドバーには「position: fixed;」を指定します。 CSS <textarea name="code" class="css" cols="60" rows="5"> #page-wrap { width: 600px; margin: 15px auto; position: relative; } #s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.tellmedesign.com/lightbox02/