紙芝居式スライドショー(過去最難関)

この記事の公開日は2024年2月15日ですが、書いている現在は2023年12月27日です。
私が会社に入ってから17か月が過ぎ、お陰様で、
本当に充実した20代最後を送らせて頂いています。
このまま何事もなく、30歳の誕生日を迎え、新しい春を迎えられればなと思います。

思えば、1994年の日本に生まれた事は、とても恵まれた事だと言え、
100年早く生まれれば、結核などで、30歳まで生きられる可能性が格段に低かったでしょう。
結核の話は、違う機会にしたいと思うのですが、母方の曽祖父も1890年代に生まれ、
1923年に長子となる祖母を産んでいますが、そこから伯父の生まれた戦後に至るまで、
悲劇と動乱の時代が幕を開けます。

当時の価値観では、国家に帰属し、国家に貢献する事を幸福だと信じ、
生まれ持った才能や願望というものに蓋をしていたと想像しています。
当時の一生は短かっただけに、叶えたい夢、実現したい事への渇望も大きかったでしょう。

誰もが自由であるが故、使命を見失っている時代、私にとって、
インターネットやプログラムに関する事が、使命であるように思えます。
分不相応な事を言っていますが、得意になりたい訳ではありません。
何事も、分析すればするほど、奥が深く、どのような学問・分野において、
皆伝するという事は有り得ないと思います。

それは、RPGの敵のように、進めば進むほど、強い敵が出てきて、
より困難に立ち向かわなければいけない場面が増えます。

紙芝居式スライドショーの作り方

今年最後に挑戦したのは、複数枚重なったposition:absoluteの要素を、
紙芝居のように、1→2→3→4→5→1→2→3→4→5…と、
左または右方向にスライドさせ、かつ最終スライドに辿り着いたら、
元に戻りループするという動きです。

これは、感覚的にz-indexを適応し、-1,-2,-3…と設定、
JavaScriptによって、最終スライドのz-indexを0にして、
処理を繰り返すという方法もあります。

今回、私がつくったものは、z-indexを、スライド途中の1、
表に出ている状態の0、後ろに隠れている状態の-1の3通りを使い、
出来るだけCSS主体のものを製作しました。

作ったもの

HTML

<div id="side-slides">
    <div id="slide-1" class="front"><span>1</span></div>
    <div id="slide-2" class="back"><span>2</span></div>
    <div id="slide-3" class="back"><span>3</span></div>
    <div id="slide-4" class="back"><span>4</span></div>
</div>

CSS

#side-slides{
    position: relative;
}

#side-slides > div{
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#side-slides > div > span{
    color: #fff;
    font-size: 10vw;
}

#side-slides > div.front{
    transition-duration: .5s;
    transition-property: transform;
}

#side-slides > div.back{
    z-index: -1;
}

#side-slides > div.front.active{
    transform: translateX(-100%);
	z-index:1;
}

#side-slides #slide-1{
	background-color:lime;
}

#side-slides #slide-2{
	background-color:gold;
}

#side-slides #slide-3{
	background-color:red;
}

#side-slides #slide-4{
	background-color:purple;
}

JavaScript

const side_slides = document.querySelector("#side-slides");
const slides = side_slides.querySelectorAll("div");
const len = slides.length;
let count = 0;

const Interval = setInterval(() =>{
    let num = count % len;
    console.log(num);
	
	slides[num].classList.add("active");

    let next = num + 1;
    if(num == len - 1){next = 0};

    slides[next].classList.add("front");
    slides[next].classList.remove("back");
    
    window.setTimeout(function(){
        slides[num].classList.add("back");
        slides[num].classList.remove("front","active");
    },500);

    count++;
}, 7500);

スライドのsetInterval()メソッドは7.5秒ごとに実行され、
タブやブラウザを切り替えている間でも実行され続けます。
今年最後に、transform,transitionプロパティを用いて、何かを作り、
新課題に向けて理解を深めておきたいと思ったのですが、
思った以上に解法を見付ける為に難航したアレゴリズムでした。
ベーシックに見えて、とても難しいアレゴリズムだったと言えます。