★うつ病の一人暮らし★外で働かないで生きていく

うつ病で外で働きにくい。そんな中一人暮らしをして、悪戦苦闘して生きていく。生活コストは月2万円。まずはこの2万をなんとか稼ぐ方法を模索していく。貯金は280万。このブログではまず私自身の復習もかねて、ブログに特化したHTML,CSS,スタイルシートのテクニックをわかりやすく紹介していきます。

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

javascriptCSSアニメーションの融合~

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

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

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

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

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

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

purechan22.hatenablog.com

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

1回ずつ写真を入れ替えるので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に切り替えます

まずスタート画像

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

の要素を取得して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'},
];

にするとうまくいきました!


レベル8 実際に動くか確認する

さぁ、はじまるよ!

slideスタート

うまく動きました!

自分のブログでコピーして使おうと思ってうまくいかない場合はコメント頂ければサポートします。

レベル9 提供

purechan22.hatenablog.com

purechan22.hatenablog.com

www.youtube.com