anime.min.js
anime.js:anime.js 公式
smooth-scroll:smooth-scroll 公式
smooth-scroll:smooth-scroll 使い方ヒント
クリックしてもハッシュタグつかない
固定ヘッダー要素に隠れないようにする
別ページリンクはクエリ(?id="")でスムーススクロール
クエリ(?id="")は自動削除(課題:ie11でこの部分がサポート対象外)
クエリ(?id="")リンクが現URLの場合は#に自動置換(課題:vanillaに置き換え)
$.fn.navACTは、ハッシュやQueryリンクでも現在のURLと識別するようにしているので ハッシュでリンクスクロールするタイプのリンクではactiveが複数出てしまう。
ハッシュリンクナビの場合は、$.fn.navACTを使わない。
smooth-scrollのオプションで指定すると、スクロール時のメニュー切り替えが自動化しない。
HINT:getQuery
function getQueryString() {
var key = false, res = {}, itm = null;
// get the query string without the ?
var qs = location.search.substring(1);
// check for the key as an argument
if (arguments.length > 0 && arguments[0].length > 1)
key = arguments[0];
// make a regex pattern to grab key/value
var pattern = /([^&=]+)=([^&]*)/g;
// loop the items in the query string, either
// find a match to the argument, or build an object
// with key/value pairs
while (itm = pattern.exec(qs)) {
if (key !== false && decodeURIComponent(itm[1]) === key)
return decodeURIComponent(itm[2]);
else if (key === false)
res[decodeURIComponent(itm[1])] = decodeURIComponent(itm[2]);
}
return key === false ? res : null;
}
タグ1ポイント
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。
タグ2ポイント
トップに戻るは、animate.js使用
トップに戻る