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使用

トップに戻る