yuri memo

コーディングとかのメモ帳

GitとGitHub初心者が最初にメモしたこと

f:id:yurixxx8:20170918234801j:plain

初心者の気持ちを忘れる前に一旦メモっ。

Gitとは

一言で雑に言うとバージョン管理システムです。
変更を記録してくれて、その変更履歴を管理できます。
変更の記録・管理ができると「この前の状態に戻したい」という事が簡単にできたり、「どれが最新のファイル・・?」といった事が減ります。
誰が・いつ・どのファイルの・どこを・どのように変更したかが分かります。

GitHubとは

GitHubとは、Gitをさらに便利に使うためのwebサービスの1つです。
私は最初GitとGitHubの違いってなんなの?となったのですが、最終的に「リモートリポジトリの置き場+プルリクエスト(PR)やIssuesが使える便利なやつ」という解釈をしました。

これに関しては検索すると記事がいろいろ出てきますが、まだ触った事ない人は実際にやってみると更に理解できるかと思います。

参考:
エンジニア必須の知識! GitとGitHubの違いとは? | Webデザイン・Webデザイナースクール

GUIでもCUIでも使える

Gitを使うときは主にコマンドラインツール、いわゆる黒い画面を使います。
が、SourceTreeなどを使ってマウスでポチポチすることもできます。
コマンドラインツールを使うと勉強にもなりますが、普段から触っていないと敷居が高く感じられるかもしれません。
私も最初はSourceTreeを使っていました。
(最近になってコマンドラインから操作し始めました)

よく使うワード一覧

GitやGitHubを使い始めると以下のワードがよく出てきます。
一度に全部理解するのは無理なので、最初のうちは「そういうのがある」くらいに思ってました。

[ branch ]
履歴を枝分かれさせて記録する機能

[ clone ]
リモートリポジトリの複製を自分のPCにダウンロードし、ローカルリポジトリとする

[ Hunk ]
編集個所の一つのこと

[ fetch ]
リモートリポジトリに関する情報を更新

[ merge ]
ローカルの状態を、取得した最新のリモートリポジトリの状態に合わせる(統合)

[ pull ]
fetchとmergeを合わせた操作

[ origin ]
リモートリポジトリの場所(URL)の別名

[ master ]
リモートリポジトリのブランチの名前

[ checkout ]
作業対象となるブランチ(コミット)を切り替える

参考:
Gitが、おもしろいほどわかる基本の使い方33

複数人での開発

複数人での開発時に気をつけるポイントを上げてみました。

  • 作業開始時点で必ずプルするように習慣づける
  • プッシュする前にもプルする

この2つは主にコンフリクトの発生率を下げるために気をつけています。
コンフリクトについては後述します。

  • マージ済みや、不要になったブランチは削除する

作業が完了してマージしているにもかかわらず、そのブランチを削除せずにそのまま置いておくのはあまりよくありません。
削除せずにブランチが増え続けると、全体の見通しが悪くなり、混乱の元となります。

コンフリクトについてざっくり話すと

  • Aさんがmain.jsの28行目を変更し、コミット→プル→プッシュまで完了
  • Bさんもほぼ同時に作業しており、Aさんと同じくmain.jsの28行目を変更
  • Bさんがコミットしプルしようとしますが、エラーが起きてしまう

同じファイル(main.js)の同じ行(28行目)を修正しているため、どちらの変更が正しい変更なのかGitでは判断できず、コンフリクト(変更の衝突)が起こります。
コンフリクトが発生した場合は手動で修正する必要があります。

極力コンフリクトを回避するために、作業開始時にプル→作業→コミット→プル→プッシュを心がけています。

参考:
git mergeでの競合(コンフリクト)の解決方法のまとめ。 | WWWクリエイターズ

プルリクエス

プルリクエスト(PR、プルリクとも言います)とは、自分の行った変更について他の作業者(レビュワー)に、
「コードをこのように変更しました。コードレビューをお願いします。」というリクエストを出すことです。
他の作業者にコードレビューをしてもらうことで、見落としていたミスを修正できたり、「こういう書き方もできるけど、どうかな?」とアドバイスをもらえたりします。
このようなコミュニケーションが、ソースコードのクオリティアップに繋がります。

参考:
GitHubでのプルリクエスト活用方法まとめ - ICS MEDIA

コミットするときのポイント

これは私が実際にいただいたアドバイスですが、

コミットログの並びを見るだけで、ある程度環境構築の手順を再現できる(もしくはかつて何をやっていたかが分かる)

ということを意識してコミットすると、cherry-pickでコミットの流用がしやすくなったり、他の作業者はもちろん、自分で後から見返した時にも分かりやすくなります。

cherry-pickとは、他ブランチの特定コミットのみを反映することができるコマンドです。

例えば、ちょっと雑な例ですがこんな感じでしょうか。

  • 環境構築に必要なファイルの追加

↓ 前述のことを意識してコミットすると

  • node-version の指定
  • .gitignore の作成
  • package.json の作成
  • css-loader, node-sass の追加

”環境構築に必要なファイル” だけでは、どこまでの環境構築?なにが入れてあるの?となってしまいますが、分けてコミットすることで、ある程度何が行われたかが分かります。

ソースコードはもちろん、コミットログも自分や他の作業者が理解しやすいよう心がける事が大切だと学びました。

Gitを使い始めた頃はいまいちピンとこなくて、記事をたくさん読んだり本を買ったりしましたが、使えば使うほど便利だなぁと感じています。
これから入門するのであれば、[わかばちゃんと学ぶ Git使い方入門]や[Gitが、おもしろいほどわかる基本の使い方33]などがいいかもしれません。
どちらも書籍です。

またメモが溜まったらブログにまとめます。

JavaScriptでToDoアプリを作る (1)

f:id:yurixxx8:20170607232026j:plain
最近Todoアプリを作るのにはまって(?)ます。
写経するなら絶対ToDoって感じで。実用的だもん。
だいぶ前にVue.jsで書いたり最近はReact.jsで書いたりもしたのですが、いずれにしてもよくわからないので
もうとりあえず素のJSで書こうよって思い、完成するまで書き続けるメモです。
今だったらVue.jsちょっと分かるかもしれないとか思ったけどひとまず置いとこ。

実装したい機能(今のところ)

・登録した日時を表示
・終わったToDoにチェックできる
・削除ボタン

今回やったこと

・追加されたtodoの値を取得してtodoItemとする
todoItemを配列todoItemsに追加していく
・追加されたtodoをli要素として#todoListに表示させる

とりあえず、思いつく範囲で単純なのを書きましたが後から絶対変わりますね・・。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>todo list</h1>
  <div>
    <input type="text" id="item">
    <button type="button" onClick="submitItem();">Add</button>
  </div>
  <ul id="todoList"></ul>
  <script src="js/todo.js"></script>
</body>
</html>
function submitItem() {
  var todoItems = [];
  var todoItem = document.getElementById('item').value;
  todoItems.push(todoItem);
  for (var i =0; i < todoItems.length; i++) {
    var li = document.createElement('li');
    li.textContent = todoItems[i]
    document.getElementById('todoList').appendChild(li);
  }
}

所感 & 次回

document.getElementById('item').value;
値を取得するパターンがいくつかあって少し迷いました。
nameを使って取得するパターンもありましたが、とりあえずidを使うことに。
今はinputの中身が空でもなんでも通っちゃうので次回対応したいですね。

ストレングス・ファインダーをやってみました

f:id:yurixxx8:20170424214023j:plain

ストレングス・ファインダーは
34の強みの中から、5つ自分の強みを教えてくれる自己分析みたいなやつです。

わたしはこの5つでした。

  • 規律性 Discipline
  • 個別化 Individualization
  • 調和性 Harmony
  • 内省 Intellection
  • 分析思考 Analytical
続きを読む

anyenvを使ってNode.jsのバージョン管理をすることにした

f:id:yurixxx8:20170422140054p:plain

MBPがきた時にnodebrewやらgulpやらもろもろ環境構築したのですが
教えてもらいつつ記事見ながらやったくせに全く記憶に残っておらず、、、
ちょっとやばいと思って環境構築やりなおしたい!って思ってました。
その時に「anyenvいいよ〜」と教えていただいたのでメモです。

ちなみに、anyenvとは複数のバージョンをインストール&管理できる賢い子らしいです。
Node.jsの他にもRubyPHPPythonなども管理できます。

インストール

% git clone https://github.com/riywo/anyenv ~/.anyenv

PATHを通す

% echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
% echo 'eval "$(anyenv init - zsh)"' >> ~/.zshrc

シェルを再起動してanyenvの設定を反映させる

% exec $SHELL -l

確認する

% anyenv

anyenv-updateのインストール

anyenvやrbenvのpluginsの更新などをしやすくするプラグインを作った - @znz blog

% mkdir -p $(anyenv root)/plugins
% git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
% anyenv update

anyenv-gitのインストール

anyenvでGitのコマンドを実行できるようにするためのプラグイン
https://github.com/znz/anyenv-git

% git clone https://github.com/znz/anyenv-git.git $(anyenv root)/plugins/anyenv-git

ndenvのインストール

% anyenv install ndenv
% exec $SHELL -l
% ndenv -v
  ndenv 0.4.0-4-ga339097

インストール可能なバージョンの確認

% ndenv install -l

Node.jsのインストール

% ndenv install 6.10.1

グローバルで使用するバージョン

% ndenv global 6.10.1

インストールされているバージョンの一覧を確認

% anyenv versions
ndenv:
  system
* 6.10.1 (set by /Users/***/.anyenv/envs/ndenv/version)
  7.8.0


こんなこともできるみたいです(*´-`)
qiita.com

CSSで画像のアスペクト比を保持したままいい感じにトリミングする(レスポンシブ対応)

f:id:yurixxx8:20170408172723j:plain

レスポンシブサイトでサムネイルなどを一覧表示させたいときに
写真のサイズがバラバラだとなかなかうまくいかず困ってました。

以前、background-sizeがいいかも!と記事を書きましたが
object-fitのポリフィルが使えるようになり、これは!!と思いました。
object-fitについては以下の記事を参考に。
参考:1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

で、さっそくやってみたのですが
widthとheightをきちんと指定すればうまくいきます。
IEだってばっちりです。

ですが、heightを指定すると可変するときにいい感じにならない、、
f:id:yurixxx8:20170408164227p:plain
指定しなければ縦長の画像が、、
f:id:yurixxx8:20170408164238p:plain
(いい方法ご存知の方おりましたら教えてくださいm(_ _)m)

わたしの実装したいことはobject-fitだとうまくいかなそうと諦め、
フォロワーさんに助けを求め、記事を読み漁った結果、完成形はこちら。
http://yurixxx8.com/demo/20170408/photo_trimming.html

画像のアスペクト比も保持しつつ、縦長画像もいい感じにおさまります。

今回は画像の中心でトリミングしてます。
画像トリミングに関する箇所のみ抜粋してコードを載せていきますね。

<div class="cardItem">
  <div class="trimming">
    <img class="photo" src="images/sample_photo_01.jpg" alt="Green leaves">
  </div>
  <div class="body">
    <p class="text">Green leaves</p>
  </div>
</div>
.trimming {
  overflow: hidden;
  position: relative;
  padding-top: 65%;
  margin-bottom: 5px;
}
.photo {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.trimming
トリミングする外側のクラスです。
position: relative;を指定します。
overflow: hidden;ではみ出した分をカットします。
padding-top: 65%;で高さをとっています。
これによって、heightを指定せずともアスペクト比を保持したまま画像の高さがだせます。
参考:CSSだけでアスペクト比を固定するテク - Qiita

.photo
position: absolute;を指定します。
画像の中心でトリミングしたいので以下のように指定します。

top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

参考:CSSだけで画像トリミングできたよ | Tips Note by TAM

ざっとこんな感じです!
サムネイル画像をbackground-imageとして扱うことがどうしてももやもやだったので
imgタグで実装できてとてもすっきりです٩( 'ω' )و

スマホでフルスクリーンになるレスポンシブメニュー

今回は以下のようなレスポンシブメニューを実装しました。
・モバイル時に、メニューをフルスクリーンで表示
・メニュー開閉アニメーションはフェードイン/フェードアウト
jQueryのfadeToggleなどは使わずに、classの付け外しをjQueryで行う

デモはこちらです。

yuri memo - レスポンシブメニュー DEMO
 デモは、以下のような構成になっています。
HTML
[ fade_menu.html ]
CSS
[ css/style.css ]
jQuery
[ js/jquery-2.0.0.min.js ]
[ js/script.js ]

HTML

順番にコードを載せていきます。

<body>
  <header>
    <h1 class="logo">yuri memo</h1>
    <!-- ハンバーガーメニュー部分 -->
    <div id="toggle">
      <div class="trigger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <!-- フルスクリーン部分 -->
    <div class="toggleWrap">
      <!-- メニュー部分 -->
      <ul class="mainNav">
        <li><a class="navItem" href="#">Home</a></li>
        <li><a class="navItem" href="#">About</a></li>
        <li><a class="navItem" href="#">Product</a></li>
        <li><a class="navItem" href="#">Contact</a></li>
        <li><a class="navItem" href="#">Nyaaan</a></li>
      </ul>
    </div>
  </header>

  <main>
    <h2>レスポンシブメニューのデモです。</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </main>

  <!-- jsファイルの読み込み -->
  <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</body>

#toggleがクリックされた時に、
.toggleWrapに対して、開閉のクラスやアニメーションのクラスをつけていきます。

CSS

※メニューに関するCSSのみ抜粋しています。
CSSの全コードはデモから確認できます。

/* スマホでメニューを開いた際に背景色が画面全体にかかるようにと
フルスクリーンで固定したいので、position: fixed; top: 0; left: 0; を指定 */
.toggleWrap {
  background: rgba(234, 234, 234, 0.95);
  padding: 50px 15px 10px 15px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mainNav li {
  list-style-type: none;
}
.navItem {
  display: block;
  text-decoration: none;
  color: #3e3e3e;
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
  text-align: center;
  font-size: 2rem;
}

/* メニューを閉じる時のスタイル
display:none; を使用せず、opacityを使うとfadeっぽくなる */
.hide {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

/* アニメーションはメニューの開閉時のみでいいので
.toggleWrapに書かず、別にclassを用意 */
.animation {
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

/* メニューオープン時のみ、メニューの後ろのコンテンツをスクロールさせない
iOS safariには別途対応が必要(jQueryに記述)*/
.no-scroll {
  overflow: hidden;
}

/* 768px以上に適応するスタイル */
@media screen and (min-width: 768px) {
  #toggle {
    display: none;
  }
  .toggleWrap {
    background: none;
    height: auto;
    position: static;
    padding: 0;
    margin-bottom: 20px;
  }
  .mainNav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 670px;
    margin: 0 auto;
  }
  .navItem {
    padding: 5px 15px;
  }
  .navItem:hover {
    border-color: #3696da;
  }
  .animation {
  -webkit-transition: none;
          transition: none;
  }

 /* 非表示にしていたメニューを表示させる */
  .hide {
    opacity: 1;
    visibility: visible;
  }
}

jQuery

$(function(){
  fade('.toggleWrap');
});

function fade(elm){
  var $fade = $(elm),
      $body = $('body');
  // .toggleWrapを非表示にしておく
  $fade.addClass('hide');

  // #toggleがクリックされた時に、.hideの付け外しで .toggleWrapの表示・非表示を切り替え
  // .addClass('animation');でアニメーションのCSSを適応
  $('#toggle').on('click', function(){
    $fade.toggleClass('hide').addClass('animation');
    $('.trigger').toggleClass('active');

    // スクロールの制御
    // .hideを持っている状態はメニューが閉じている状態で、このときは.no-scrollは不要
    if ($fade.hasClass('hide')) {
      $body.removeClass('no-scroll').off('.noScroll');
    } else {
      // メニューが開いている時に、bodyに.no-scrollを追加してスクロールさせない
      $body.addClass('no-scroll').on('touchmove.noScroll', function(e){
        e.preventDefault();
      });
    }
  });
}
$body.on('touchmove.noScroll', function(e){
  e.preventDefault();
});

上記の部分はiOSでは、overflow: hidden;だけでスクロールを無効にできないため追記しています。
こちらの記事が参考になりました。
qiita.com

fadeToggleを使わない理由

jQueryでslideToggleとかfadeIn,fadeOutとか楽なのは事実なんですが
fadeOutは最終的にdisplay: none;の状態になります。
CSSでdisplay: block;とか書いてても
style属性にdisplay: none;が適応されているので
リロードしないとその状態が保持されたままなんですよね(._.)
こんな感じです。ブレイクポイントを過ぎてもメニューが表示されませんね。
http://yurixxx8.com/demo/20170305/2017-03-05.gif
ブレイクポイントによってはスマホの縦横切り替えでこの現象が起きるかも?
なので今回はクラスの付け外しでやってみました!

以上ですにゃ。

プラグインなしで拡大しながらフェードで切り替わるスライド

拡大しながらフェードインするスライドを実装したのでめもめも。
さらっと言ってますけど、ほんと分からなくて泣きそうになりながら実装したんだよ・・・ぐすん。

とりあえず、デモをのせますね。

1. フルスクリーン背景バージョン
2. 通常スライドバージョン

フルスクリーンか通常のかはHTMLとCSSで変更し、jsは全く同じものです。

$(window).load(function(){
var slide = $('.slideshow');
var i = 0;
// ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン
slide.find('.item').eq(i).fadeIn(2000).addClass('in');
// スライドの枚数を調べて変数に格納
var total = $('.slideshow .item').length -1;
// 処理を繰り返す
setInterval(function(){
  if(i < total){
  slide.find('.item').eq(i).addClass('out');
  slide.find('.item').eq(i).removeClass('in');
    j = i;
    i++;
    setTimeout(function(){
      // 1000ミリ秒後に3500ミリ秒かけてフェードインする
      slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
    },1000);
    // 4500ミリ秒かけてフェードアウトする
    slide.find('.item').eq(j).fadeOut(4500);
  } else if(i == total){
  slide.find('.item').eq(i).addClass('out');
  slide.find('.item').eq(i).removeClass('in');
    j = i;
    i = 0;
    setTimeout(function(){
      slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
    },1000);
    slide.find('.item').eq(j).fadeOut(4500);
  };
// この値を変更すると、処理の間隔を遅くしたり早くしたりできる
},4500);
});

setTimeout(function(){
 slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
 },1000);
 slide.find('.item').eq(j).fadeOut(4500);
}
フェードにかかる秒数を変更する場合は、fadeOutの引数を青色の箇所の合計とあわせるようにします。

setInterval(function(){
 // ここに書いた処理が4500ミリ秒ごとに繰り返される
},4500);

今回のデモで言うと、値を6000などにすると画像の停滞時間が長くなります。

1. フルスクリーン背景バージョン[slide sample-01]

<div class="wrap">
  <h1 class="title">slide sample-01</h1>
  <div class="slideshow">
    <div class="item" style="background-image: url(images/slide01.jpg)"></div>
    <div class="item" style="background-image: url(images/slide02.jpg)"></div>
    <div class="item" style="background-image: url(images/slide03.jpg)"></div>
  </div>
</div>
.slideshow {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.slideshow .item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  background-size: cover;
  background-position: center center;
}
.in {
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 2; 
}
.out {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: 4s;
  transition: 4s;
  z-index: 1;
}
.wrap {
  position: relative;
}
.title {
  position: absolute;
  transform: translate(calc(50vw - 50%),calc(50vh - 50%));
  z-index: 10;
  color: rgba(102, 102, 102, 0.70);
}

2. 通常スライドバージョン[slide sample-02]

<div class="slideshow">
  <img class="item" src="images/slide2-01.jpg" alt="">
  <img class="item" src="images/slide2-02.jpg" alt="">
  <img class="item" src="images/slide2-03.jpg" alt="">
</div>
.slideshow {
  position: relative;
  width: 80%;
  padding-top: 35%;
  overflow: hidden;
  margin: 0 auto;
}
.slideshow .item {
  width: 100%;
  position: absolute;
  top: 0;
  display: none;
}
.in {
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 2;
}
.out {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: 4s;
  transition: 4s;
  z-index: 1;
 }
.title {
  text-align: center;
  color: rgba(102, 102, 102, 0.70);
  margin: 20px 0 15px 0;
}

えっと・・・こんな感じです・・・。
一応GitHubにもあげてみました。ぷるぷる。
GitHub - yurixxx8/zoom-fade-slide: It is a slide that switches with fade while expanding.

ちなみに、高解像度ディスプレイのFirefoxでみると挙動が怪しいです。
scaleで拡大される時になんだか問題ありそうです・・・。
他の方が作られた近いような感じのプラグインでも、同じ現象が起きたのでFirefox固有の何かなのでしょうかね、、、。
解決策探し中なので解決できたらまた書きます。
(5000pxくらいの画像用意すれば回避できるけど根本的な解決になっていない)