アニメーションを起動するトリガーは、AOSのスクロール連動方式が簡単で秀逸だ。このページでは、自問自答形式の流れの中で、スクロールしていくと、自答が出現するようにした。
以下文言は哲学者マルクス・ガブリエル氏のものを利用した。全ての段落とイメージはスクロールのトリガーで発火するように作られている。ではご覧あれ。
2001年の同時多発テロ、2008年の国際金融危機（リーマンショック）へとつながっていくことで、人類がよって立つ、資本主義と自由民主主義という世界を支える二つの概念が大きく揺さぶられる中で生まれたのが、ガブリエルが主導する新実在論である。
実存主義にせよ、構造主義にせよ、ポスト構造主義（ポストモダニズム）にせよ、
その根底にあるのは、社会構造というのは人々が共同行為によって作り上げている夢のようなものである。
そこには当初から意味を持った現実など何もないという理解である。こうした前提に基づいて、人々は1960年代から1980年代にかけて、第二次世界大戦やベトナム戦争のような社会を抑圧する大惨事から逃れた。
皆が自由になるために社会をどのように変えられるだろうかと構想したのである。そして、こうしたポスト構造主義（ポストモダニズム）の思想が経済体制として結実したのが、今のネオリベラリズム（新自由主義）である。
更に、この社会的現実など何もないのだというポストモダニズム的な思考を、政治の世界に持ち込んで大成功したのが、
第45代アメリカ合衆国大統領ドナルド・トランプなのである。
ガブリエルの新実在論のポイントは、
「本質主義（essentialism）」（個別の事物は必ずその本質を有し、それによりその内実を規定されているという考え方）対
「相対主義（relativism）」（認識や価値はその他の見方と相対的関係にあるという考え方）という対立の図式から抜け出す第三の道を開くことである。
カントにとって道徳と自由は同じなのです｡他者を手段として扱う行為は他者の自由を否定すること｡
自らが自由な存在であるためには他者も自由な存在として扱わねばならない｡カントは それぞれの目的を尊重し合う社会を｢目的の王国｣と呼んだ｡正義の理念は互いの意志を調整し確立させることです｡
マルクス・ガブリエル（Markus Gabriel）は渋谷のスクランブル交差点を前にして語る。ここは、まるで資本主義の心臓のようだ。人は皆、自由への感覚や自由意志を持っています。しかし現代の哲学や化学、テクノロジー、経済が人間の自由に、影響を及ぼした結果、
人間は欲望の奴隷と化した。
まるで自ら志願して奴隷になったようにすら思えます。しかし人間は自由だ。不自由の呪縛から解き放たれなければならない。
相対主義というのは、「ものごとの事実などないと論じる」ものである。
これを道徳に当てはめてみると、現代の人々の多くは、世界には様々な道徳観があるという「道徳的相対主義」が正しいと考えている。道徳的相対主義者は、西欧には西欧の、ロシアにはロシアの、日本には日本の道徳観があり、「これらの道徳観の善悪を決する基準などない」と思っている。
しかしながら、もしそれが真実なら、「正義などなく、あるのは征服だけである」ということになる。
僕らは、今こそ、本当の事実を見つけ出すため、人類全体として力を合わせはじめなければならない。経済的事実、宇宙に関する事実、そして道徳的事実。
もし僕らが、何が事実か、何が明らかな事実かを知りさえもしなければ、民主主義の出番など絶対にないだろう。
なぜなら、民主主義とは、乱暴に要約すれば、僕が「明白な事実の政治」と呼ぶものに基づくべきものだからだ。それこそが守るべき価値だ。
民主主義は人々が実際に知っていることを集め、僕らが実際に知っている点と点を結び、現実の系統的解釈を考え出す。
そして現実の系統的解釈の上にのみ、つまり特に「現実がどのようなものかを知ることなどできない」という幻想を乗り越える解釈、この基礎の上にのみ、僕らの時代における大いなる疑問に答えはじめることができる。
目指すは「slick.js」で動くようなスライダーである。タッチデバイスではスワイプでスライドを捲ることができる。これをCSSのみを使って以下のポイントで実現する。
親要素にscroll-snap-typeプロパティを、その内側の子要素にscroll-snap-alignプロパティを定義することでスワイプ・スライダーは完成する。後はscroll-behavior: smooth を使用してページ内リンクをスムーズスクロールに変え、最後にスクロールバーを非表示の設定にする。
<body>
<div class="swipe-content">
<section id="a">
<div style="height: 1rem;"></div> <a href="#b"><span class="next"><i class="fas fa-angle-right fa-lg"></i></span><span class="next">swipe / tap / click</span></a>
<div style="height: 100vh; background: whitesmoke;"></div>
</section>
<section id="b">
<div style="height: 1rem;"></div> <a href="#c"><span class="next"><i class="fas fa-angle-right fa-lg"></i></span><span class="next">swipe / tap / click</span></a>
<div style="height: 100vh; background: lightsteelblue;"></div>
</section>
<section id="c">
<div style="height: 1rem; "></div> <a href="#a"><span class="next"><i class="fas fa-angle-right fa-lg"></i></span><span class="next">swipe / tap / click</span></a>
<div style="height: 100vh; background: darkseagreen;"></div>
</section>
</div>
</body>
<style>
.swipe-content {
overflow-x: auto;
overflow: scroll;
/* auto or scroll */
overflow-y: hidden;
display: flex;
/* 横並び */
width: 100%;
height: 100%;
margin: 0 auto;
scroll-snap-type: mandatory;
/* Edge 18以前,Firefox 67以前,Safari 10以前 */
scroll-snap-points-x: repeat(100%);
/* Edge 18以前,Firefox 67以前,Safari 10以前 */
-ms-scroll-snap-type: mandatory;
-ms-scroll-snap-points-x: repeat(100%);
-webkit-scroll-snap-type: mandatory;
/* ※x方向のスクロールを厳密にスナップさせる※ */
-webkit-scroll-snap-points-x: repeat(100%);
scroll-snap-type: x mandatory;
/* スクロールコンテナーは水平軸のみで、スナップ位置に合わせられる */
/* smooth / behavior 動作 */
-webkit-scroll-behavior: smooth;
scroll-behavior: smooth;
}
.swipe-content>section {
min-width: 100%;
height: auto;
scroll-snap-align: center;
/* ※どの位置にスナップするか※ */
margin: 0 auto;
padding: 1rem;
box-sizing: border-box;
}
/* scrollbar 非表示 */
.swipe-content::-webkit-scrollbar {
/* Chrome,Safari */
display: none;
}
.swipe-content {
scrollbar-width: none;
/* firefox */
-ms-overflow-style;
none;
/* IE,Esge */
}
/* //scrollbar 非表示 */
a {
text-decoration: none;
}
@media (orientation: portrait) and (min-width:320px) {
body {
width: 100%;
margin: 0 auto;
font-size: 100%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
}
}
@media (orientation: landscape) and (min-width:568px) {
body {
width: 100%;
margin: 0 auto;
font-size: 100%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
}
}
@media (orientation: portrait) and (min-width:720px) {
body {
width: 100%;
margin: 0 auto;
font-size: 100%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
}
}
@media (orientation: landscape) and (min-width:1024px) {
body {
width: 50%;
margin: 0 auto;
font-size: 100%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
}
}
</style>
CSS Swipe Slider demonstration（上記のhtmlとcss）
※Reference : CSS Swipe Slider type-B demonstration
※Reference : CSS click Slider type-B demonstration（ラジオボタンを使ったスライドショー）
ontouchstart="this.classList.toggle('hover');"
ontouchstart=""
タッチデバイスで擬似クラスの「hover」をタップすると、他の要素をタップするまで、デザインが反映され続ける。
この「hover」の記述方法で便利な書き方がある。
対象に付ける上に提示する属性はほぼ同義である。上は、.hoverというクラスが含まれていれば削除、含まれていなければ追加する。その下の属性は、「:hover」を指定する。つまりCSSは例えば以下のような書き方になる。
.hover , :hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* Y軸の軸を中心にして180度回転させる */
下の例は、「data-aos="flip-left"」のAOSを追加して、スクロールで作動させたものを更に、オンマウスで上記属性の内容を作動する連続ワザを施したもの。
It's now or never,
come hold me tight
Kiss me my darling,
be mine tonight
Tomorrow will be too late,
it's now or never
My love won't wait.