jQuery (triggerのみ)とcss3で実装するscroll switchアニメーション

2014-01-24の勉強会でやった事を現在製作中の自分のサイトにやってみました。

質問1
1つだけならうまくいきますが、2つ設置するとうまくいきません。(同時に作動してしまう。)

質問2
jQuery本体ですが、index.htmlにしゅるしゅるスムーススクロールをやる為に、
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”
で本体を読み込んでいました。

しかし今回のアニメーションをやるにはversionが古すぎるようで、動きませんでした。
なので、最新の本体をダウンロードしてサイト内に設置しました。そしたらアニメーションは
動きましたが、しゅるしゅるスクロールが動作しません。

こういう場合の対処法については、どうしたらいいでしょうか?
新しいのに対応しているスムーススクロールを見つけるのがいいのかなあ。

製作中のサイトです。トップページにアニメーションあります。あと、何度もいいますが制作途中です。w
manakaa.com

先生が作ったサンプルサイト
ringo20140124
※ダウンロードしてjQ本体をリンクして下さい。

カテゴリー: 勉強会 | タグ: , , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

jQuery (triggerのみ)とcss3で実装するscroll switchアニメーション」への1件のフィードバック

  1. タカハシ先生タカハシ先生

    var sec1Top = $(“#sec3 .box”).offset().top;
    var sec1Top = $(“#sec4 .box2”).offset().top;

    同じ変数名「sec1Top」を使ってはだめです。変数が上書きされてしまいます。
    別の値を入れておくために、別の変数を宣言して使いましょう。

    ※もう少し汎用的に使えるような改造は次回の勉強会でやります。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.