バージョン４の公開に伴い、マニュアルを移転しましした。
radix.shoalwave.net

javascript

web ページを作成する際に、基本的にどのようなページにもあって損はない機能を、ひとまとめにして実行するスクリプトです。

スライドショーなどのリッチコンテンツを制作することは含まれていません。追加でスクリプトを書いたり、別の専用スクリプトを一緒に組み込むなどして制作することを考えられています。（例としては、私が作っている rdx-filter.js 等のように）。

使い方

radix.js を head 内の script 要素で読み込ませてください。その後、script で以下の初期化スクリプトを実行してください（雛形では、 index.js として分けられてそれを読み込む形になっています）。各種機能をカスタマイズするには、この初期化スクリプト内の指定の場所にオプションを追加します。

window.addEventListener('DOMContentLoaded', () => {
let myRadix = new radix({
        // オプションをここに書く
    });
    myRadix.init();
});

イージング関数について - イージングセレクタ

BSD License である Robert Penner’s Easing Functionsを利用しています。イージングセレクタには linear, easeIn, easeOut, easeInOut の4種類があり、linear 以外には変化の強度に6段階あります。（イージングの例一覧）

緩やかな方から順に、

Sine
Quad
Cubic
Quart
Quint
Expo

があり、 easeInQuart のように表記します。
それ以外にも特殊なイージングとして

Circ : Expo に似ているが加速・減速時間が緩やか
Back : 少し行き過ぎてから戻る
Elastic : バネのように振動する
Bounce : ボールを投げたように放物線運動で跳ね返る

という設定があり、それぞれ In, Out, InOut が利用できます。

'ease-in', 'ease-out', 'ease-in-out' のように css イージング名での指定も可能であり、その場合は Quad として適用されます。

機能説明、オプション設定

radix.js で提供される機能と、それを実行するのに必要なオプションを説明します。全てのオプションには active プロパティがあり、これの真偽型で機能の実行を判断します。

radix インスタンスで提供される API についてはこのページのコンソールに出力しているので、そちらを確認してください。

スムーススクロール付与
外部リンクへの target blank 付与
ナビゲーションの開閉機能
svgの挿入機能
ドラッグスクロール
css による flex layout の補正機能
モーダルウィンドウ
スクロール表示
プリロード画面

スムーススクロール付与

smoothScroll: {
    active: true,  // 機能のオン、オフ（boolean）
    duration: 800,  // スクロール終了までの時間（ミリ秒）
    easing: 'easeInOutExpo' // スクロールのイージング（イージングセレクタ）
}

同一ページ内へのアンカーのリンクをクリック時、自動で目標までスクロールするようにします。
条件としては、a タグのうち、href属性値が # から始まるものについて、本来のページ遷移をキャンセルして対象 ID のエレメントまでスクロールするイベントを追加します。
# から始まるもののみが対象である為、 index.html#hoge のように、ファイル名や http:// から始まっている場合は機能しません。

アニメーションの指定にはイージングセレクタが利用できます。

リンク要素に個別に rdx-smooth-scroll-easing, rdx-smooth-scroll-durationを設定することで、全体設定の他に各要素に個別の設定ができます。

スムーススクロールの場合、URLは変わりません。直遷移の場合URLが変わります。

外部リンクへの target blank 付与

autoTargetBlank: {
    active: true  // 機能のオン、オフ（boolean）
}

そのままですが、外部リンクや pdf ファイルへのリンクとなっている a タグに target="_blank" を直接追加し、別窓で強制的に開くようにします。

ナビゲーションの開閉機能

toggleNav: {
    active: false  // 機能のオン、オフ（boolean）
    trigger: '',  // 開閉ボタン（CSSセレクタ）
    target: ''  // 対象のメニュー（CSSセレクタ）
    class: 'opened',  // 追加するクラス（string）
    preventScroll: false  // ナビゲーション展開時、ページ全体のスクロールを制限するか（boolean）
}

スマートフォンサイトでよくある、タップ（クリック）することでメニューが開き、もう一度タップすることで閉じるというボタンを実装します。
querySelector で指定する為、cssセレクタの記法でクラスでも ID でも指定できます。

preventScroll を true にすることで、ナビゲーションが開いている状態のときに body に overflow-y: hiddenを追加し、ページ全体のスクロールをしないようにします。

開閉動作は js コードから呼び出せます。作成した radix インスタンスから toggleNav(mode) メソッドを呼び出すことで開閉を行います。引数 mode は省略すると現在の状態に応じて開閉を行います。 false または 'open' で展開、 true または 'close' で縮小です。
現在の開閉状態は navOpen を読むことで取得できます。詳しい例は当マニュアルに実行されている index.js の 32 行目からのスクリプトです。

svgの挿入機能

svg: {
    active: true,  // 機能のオン、オフ（boolean）
    hamburger: '.rsi-hamburger',  // ハンバーガーメニュー
    cross: '.rsi-cross',  // ×印
    arrowLR: '.rsi-arrowLR',  // 左右矢印
    arrowTB: '.rsi-arrowTB',  // 上下矢印
    angleTop: '.rsi-angleTop',  // 上向き角
    angleRight: '.rsi-angleRight',  // 右向き角
    angleBottom: '.rsi-angleBottom',  // 下向き角
    angleLeft: '.rsi-angleLeft'  // 左向き角
}

svg で作成されたアイコンを挿入します。 img タグによる埋め込みでなく、svg のコードをそのまま埋め込む形なので、css や他の js コードでパーツごとに自由に動かせたりします。
基本的に、rsi-(アイコン名) というクラス名の要素を対象に SVG に置き換えます。javascript の init 時にセレクタを変更することができ、クラス名の衝突対策や自由宣言ができます。

アイコンの一覧：（ホバーでアイコン名が表示されます）

ドラッグスクロール

dragScroll: {
    active: true,  // 機能のオン、オフ（boolean）
    selector: '.rdx-drag-scroll',  // 領域を作る場所（CSSセレクタ）
    hint: true  // ヒントを表示するか（boolean）
}

スマホの画面などでは横の幅が少なく、コードやテーブルを表示する際にはみ出してしまうことがあります。
これは、このクラスをつけたブロックの内部をドラッグすることでスクロールできるようにするものです。
hint を true にしておくことで、スクロールのインジケータが表示されるようになります。
テーブル等、狭い横幅表示の際にブレークできない要素をスクロールさせることができます（スマホでは元々フリックでスクロールができるのでインジケータを表示することが主目的になりますが、パソコンの場合にもマウスによるドラッグスクロールを可能にします）。

例↓

	月	火	水	木	金
1時間目	国語	算数	体育	国語	図工
2時間目	算数	生活	国語	音楽	図工
3時間目	生活	国語	算数	算数	国語
4時間目	体育	道徳	読書	生活	体育
昼休み	きゅうしょく・そうじ
5時間目		音楽	書写	学活	数学

css による flex layout の補正機能

flexFix: {
    active: true  // 機能のオン、オフ（boolean）
    selector: '.rdx-flex-fix',  // 対象とする場所（CSSセレクタ）
    inherit: false,  // 内部要素もコピーするか（boolean）
    min: 0  // ダミーの最小個数
}

少し説明がめんどくさいので画像で。

このように、 flex box の横幅が変わったときに、内部の要素を整列する際に text-align: justifyのように要素を並べ、よりキレイなレイアウトを可能にします。

具体的には、並べられる要素をコピーして追加することにより疑似的に整列させる為、横幅を再現できる要素をコピーする必要があります。

動作の軽量化の為、初期設定では inherit が false となっており子要素を継承しません。うまく動作しないときはこれを true にすることで期待された動作になることがあります。

modal: {
    active: true  // 機能のオン、オフ（boolean）
    resizeSpeed: 300,  // 拡縮アニメーション速度（ミリ秒）
    resizeEasing: 'easeInOutBack',  // 拡縮アニメーションのイージング（イージングセレクタ）
    fit: true,  // 表示時の倍率を画面一杯になるようにするか（boolean）
    enlargeText: '拡大',  // 拡大ボタンのテキスト（string）
    shrinkText: '縮小'  // 縮小ボタンのテキスト（string）
}

モーダルウィンドウで画像などを開きます。

アニメーションの指定にはイージングセレクタが利用できます。

rdx-modal-target に対象としたい要素のセレクタを入力した要素をクリックすることで、モーダルウィンドウが開きます。
rdx-modal-self 属性を持たせた要素をクリックすると、それ自体をモーダルウィンドウで開きます。
rdx-modal-resize 属性を持たせると、拡大・縮小ボタンが表示され、モーダルウィンドウ内で拡大縮小ができるようになります。

.modal-visible クラスを持たせると、モーダルウィンドウで開かれているときのみ表示されます。

個別設定として、rdx-modal-resize-speed, rdx-modal-resize-easing,rdx-modal-scale を設定することで全体とは別の設定で開くことができます。（例として、このセクションの pre 部分「modal: &123;~ &125; の部分」をクリックすると、最初から2倍表示で表示されます。）

モーダルウィンドウにおける 1 倍は、その要素が持つ本来の大きさになります。例えば下の Radix のロゴ画像は max-width: 100% がかけられているため、画面幅が狭い時は本来の大きさよりも縮めて表示されています。しかし、モーダルウィンドウで開いた時の大きさはその時の大きさではなく画像の本来の幅である 665px として表示されます。
リサイズボタンによって 5 倍より大きく拡大、 0.2 倍より小さく縮小はできません。

下の画像をクリックすると大きなサイズで表示できます。

スクロール表示

scrollAppear: {
    active: true  // 機能のオン、オフ（boolean）
    selector: '.rdx-scroll-appear',  // スクロール表示する要素（CSSセレクタ）
    delay: 200,  // 表示するまでの遅延（ミリ秒）
    reset: false,  // 一度表示した後非表示にするか（boolean）
    class: 'active'  // 追加するクラス（string）
}

画面が要素の位置までスクロールしたときに要素を表示するようにします。
スクロール時にクラスを追加しているだけなので、どのようにアニメーションするかは css で自由に設定できます。
reset は、要素が画面外に出た際に class を外すかという設定です。上の画像は reset あり、このセクションは reset なしの例です。
rdx-scroll-appear-reset, rdx-scroll-appear-delay,rdx-scroll-appear-class 属性により、全体設定の他に各要素に個別の設定ができます。

また、position: fixed で配置されている要素などへの使用を想定して、個別設定限定のオプションとして rdx-scroll-appear-fixedがあります。これは Pixel 値で設定でき、要素の相対位置ではなく window のスクロール量がその値を超えるかによっての判定に代わります。
当マニュアルのページトップボタンが例です。

プリロード画面

preload: {
    active: false  // 機能のオン、オフ（boolean）
    selector: '',  // プリロード画面の要素（CSSセレクタ）
    minload: 200  // 最小の表示時間（ミリ秒）
}

ページのコンテンツが読み込まれた時点で非表示にする要素を指定できます。非表示にするまでの遅延時間も設定できます。

オプションまとめ

全てのオプションの初期値を入れた宣言は以下です。

機能説明に含まれていない汎用オプションとして、 timeFrame があります。これはスムーススクロール等、 javascript でアニメーション処理をする際のインターバル間隔（ミリ秒）です。

window.addEventListener('DOMContentLoaded', () => {
    let myRadix = new radix({
        timeFrame: 10,
        preload: {
            active: false,
            selector: '',
            minload: 200
        },
        smoothScroll: {
            active: true,
            duration: 800,
            easing: 'easeInOutExpo'
        },
        autoTargetBlank: {
            active: true
        },
        toggleNav: {
            active: false,
            trigger: '',
            target: '',
            class: 'opened',
            preventScroll: false
        },
        svg: {
            active: true,
            hamburger: '.rsi-hamburger',
            cross: '.rsi-cross',
            arrowLR: '.rsi-arrowLR',
            arrowTB: '.rsi-arrowTB',
            angleTop: '.rdx-angleTop',
            angleRight: '.rdx-angleRight',
            angleBottom: '.rdx-angleBottom',
            angleLeft: '.rdx-angleLeft'
        },
        dragScroll: {
            active: true,
            selector: '.rdx-drag-scroll',
            hint: true
        }
        flexFix: {
            active: true,
            selector: '.rdx-flex-fix',
            inherit: false,
            min: 0
        },
        modal: {
            active: true,
            resizeSpeed: 300,
            resizeEasing: 'ease-in-out',
            fit: true,
            enlargeText: '拡大',
            shrinkText: '縮小'
        },
        scrollAppear: {
            active: true
            selector: '.rdx-scroll-appear',
            delay: 200,
            reset: false,
            class: 'active'
        }
    });
    myRadix.init();
});