カスタマイズ>追加CSSでも好きな方にコピペしてください。}}各クラスの定義詳細アニメーションエフェクトを定義しています。これらのクラスは初期状態では透明度が0(つまり完全に透明)と定義されています。これらのクラスが適用された要素は初期状態では見えません。これらのクラスは3D回転アニメーションを定義しています。初期状態では要素は-90度回転しています。”on”クラスが追加されると、要素は0度(元の位置)に回転します。これにより要素がフラットから立ち上がるように見えます。このクラスはフェードインと回転アニメーションを定義します。”on”クラスが追加されると、要素は完全に見えるようになり、360度回転します。これらのクラスはスライドインアニメーションを定義します。”on”クラスが追加されると、要素は指定された方向からスライドインします。これらのクラスはフェードインアニメーションを定義します。”on”クラスが追加されると、要素は完全に見えるようになります。これらのクラスはスライドインアニメーションを定義します。要素は指定された方向からスライドインします。このクラスは要素をインラインブロックとして表示します。これらのクラスは境界線アニメーションを定義します。”on”クラスが追加されると、要素の下部に境界線が表示され、左から右へと又は中央から左右に広がります。そのまま貼り付けてください。SWELLのjavascript記述はページごとに読み込ませる方法とカスタマイズ>高度な設定で全体的に読み込ませる方法と2種類あります。先頭と最下部のscriptタグが自動で付加されますのでそれを削ったものをコピペしてください。めんどくさい方はそのままコピペしても良いのですがその際は必ずその下部にあるチェックマークをお忘れなく。一時的にテストもしくはそのページだけしか使わないならこっちいずれにコピペしても正常に動作することを確認してます。updateClass();});updateView();</script>テクニカルに説明このJavaScriptのコードはスクロールアニメーション効果に使われています。クラス名.slideviewがついた要素に適用されます。配列で、それぞれ.slideview要素のバウンディングボックス(要素の位置やサイズ情報)と要素の上辺の位置を格納します。現在のドキュメントの垂直方向のスクロール量(ピクセル単位)を格納します。ウィンドウ(ビューポート)の高さ(ピクセル単位)を格納します。調整用の数値で、スクロール位置が.slideview要素のどの部分に達したらアニメーションを開始するかを決定します。ページ上の全ての.slideview要素を格納したNodeListです。ページがリサイズされるときに発火するイベントリスナーが設定されています。これはウィンドウの高さwinHを更新するためです。関数はページ上の全ての.slideview要素のバウンディングボックスと上辺の位置を更新します。関数はスクロール位置に応じて.slideview要素にonクラスを追加または削除します。スクロール位置が要素の上辺より下で、かつ要素の下辺より上にある場合(つまり要素がビューポート内に入ったとき)、onクラスが追加されます。それ以外の場合はonクラスが削除されます。スクロールするたびに発火するイベントリスナーが設定されています。これはスクロール位置winYを更新し、updateClass関数を呼び出すためです。最後に、ページのロード時にupdateView関数が呼び出されます。このコードを使うと、ユーザーがスクロールして.slideview要素がビューポートに入るたびに、その要素にonクラスが追加されます。これによりCSSアニメーションを発動することができます(例えば、.slideview.onに対して特定のアニメーションを設定するなど)。追加してそのエフェクト仕込んだclassを発動させる的な動作してます。教科書に載っているようなclassに名称追加して新しいclassを参照できるようにしようってやつです。領域から外れると(バックスクロールなど)onを削除するのでまた元classで初期化されて再度領域に達すると同じように繰り返しエフェクトが可能。意味わからなくてもコピペして使えると思います。このjavascriptとcssの定義を応用すればスクロールアクションに対する任意のCSS発火が色々とできると思います。XcontentsMenu/ProfsearchContentstopcontentsTop閉じるcontents閉じる。