javascriptとCSSアニメーションを融合させてのスライドショー提供:カップめんリスペクト

～javascriptとCSSアニメーションの融合～

今回はより実践で使えるスライドショーを作っていきたいと思います。

CSSアニメーションとjavascriptをコラボさせてスライドショーを作っていきたいと思います。

レベル1 CSS(スタイルシート)の準備

スライドショーが始まった後のCSSを用意します。

これは私の↓↓↓の記事を参考にしてください。

画像を横にスライドさせるアニメーションを使います。

purechan22.hatenablog.com

CSSはこんな感じになります。

１回ずつ写真を入れ替えるのでanimation-iteration-countを1、また常に順方向にするのでanimation-directionをnormalにしています。

img.picrotate2{
animation-name:picrotation;
animation-duration:3s;
animation-timing-function:ease;
animation-iteration-count:1;
animation-direction: normal;
}

@keyframes picrotation{

0%{
transform: translateX(0px);
}

100%{
transform: translateX(300px);
}

}

レベル2 スライドショースタート写真の準備

記事中には次のように記述します。

<img src="画像のURL” id="startpic">

javascriptを使う時はこのidってのを必ずつけるようにすると便利です。

レベル3 写真のタイトルの準備

スライドショーがはじまると写真のタイトルが次々に入ってくるのでそのための場所の確保です。

記事中には次のように記述します。

<p id="starttitle">さぁ、はじまるよ！</p>

実際には次のように表示されます

さぁ、はじまるよ！

スタートボタンの準備

slideスタート

実際には次のように記述します。

<div class="javawaku" id="start">slideスタート</div>

レベル4 javascriptの準備

ここは前回の記事↓↓↓を参考にしてください

purechan22.hatenablog.com

var picture=[
{src: '画像のURL1', title:'カップめんリスペクト1'},
{src: '画像のURL2', title:'カップめんリスペクト2'},
{src: '画像のURL3', title:'カップめんリスペクト3'},
{src: '画像のURL4', title:'カップめんリスペクト4'},
];
var picturelength=picture.length;
var start=document.getElementById('start');
start.addEventListener('click', function(){

    var count = 0;
    let interval = setInterval(() => {
        if (count == picturelength) {
            clearInterval(interval);
            return false;
        }
document.getElementById('startpic').src =picture[count].src;
document.getElementById('starttitle').innerHTML =picture[count].title;
        count++;
    }, 3000);
});

ここで1回のアニメーションの時間をCSSに合わせて3秒=3000ミリ秒にします。

レベル5 toggleを使ってCSSを切り替える

スライドショーがはじまると同時にtoggleを使ってCSSをimg.picrotate2に切り替えます

まずスタート画像

の要素を取得してtoggleでクラスをpicrotate2に入れ替えます。

var irekae =document.getElementById('startpic');
irekae.classList.toggle('picrotate2');

これをプログラムに追加したら完成となります。

レベル6 全体のプログラムを書く

<script>
var picture=[
{src: '画像のURL1', title:'カップめんリスペクト1'},
{src: '画像のURL2', title:'カップめんリスペクト2'},
{src: '画像のURL3', title:'カップめんリスペクト3'},
{src: '画像のURL4', title:'カップめんリスペクト4'},
];
var picturelength=picture.length;
var start=document.getElementById('start');
start.addEventListener('click', function(){

    var count = 0;
    let interval = setInterval(() => {
        if (count == picturelength) {
            clearInterval(interval);
            return false;
        }
document.getElementById('startpic').src =picture[count].src;
document.getElementById('starttitle').innerHTML =picture[count].title;
        count++;
var irekae =document.getElementById('startpic');
irekae.classList.toggle('picrotate2');
    }, 3000);
});
</script>

レベル7 うまくいかなったので調整しました

var picture=[
{src: '画像のURL1', title:'カップめんリスペクト1'},
{src: '画像のURL2', title:'カップめんリスペクト2'},
{src: '画像のURL3', title:'カップめんリスペクト3'},
{src: '画像のURL4', title:'カップめんリスペクト4'},
];
から
var picture=[
{src: '画像のURL1', title:'カップめんリスペクト1'},
{src: '画像のURL1', title:'カップめんリスペクト1'},
{src: '画像のURL2', title:'カップめんリスペクト2'},
{src: '画像のURL2', title:'カップめんリスペクト2'},
{src: '画像のURL3', title:'カップめんリスペクト3'},
{src: '画像のURL3', title:'カップめんリスペクト3'},
{src: '画像のURL4', title:'カップめんリスペクト4'},
{src: '画像のURL4', title:'カップめんリスペクト4'},
];