yuri memo

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

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

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

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

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くらいの画像用意すれば回避できるけど根本的な解決になっていない)

はじめてのさくらVPS。はじめてのサーバー構築で大変だったところ。

以前から気になっていたVPSに先日手を出しました。
メモリ 1GB・SSD 30GBで月972円ですよ〜〜〜。

その時の初期設定メモです。
基本はさくらの公式設定ガイド通り。
さくらの初期設定ガイドそこそこ分かりやすくてよかっです。
【さくらのVPS】サーバの初期設定ガイド – さくらのサポート情報

ちなみに、サーバーの知識はほぼないです。
レンタルサーバーでたまにDNS切り替えとかドメイン移管とかそんなくらいで。
コマンドがしがし叩いてサーバー立てるなんてほんとにもう・・・。

〈ちょっと迷ったところ〉 SSH接続の設定変更方法

さくらの公式設定ガイドには以下のようにありますが。

TeraTermを利用して、ログイン方法をパスワード認証から公開鍵認証へ変更する方法です。 

えー、めんどくさい。。。と思い別な方法で。(やったことないくせに)
以下の記事を参考にしました。
Linuxコマンド【 ssh-keygen 】認証用の鍵を生成 - Linux入門 - Webkaru

rootでログインして、

# ssh-keygen

するといろいろ聞かれます。

Enter file in which to save the key (/home/user/.ssh/id_rsa): ← キーの保存先です。Enterぽち
Created directory '/home/user/.ssh'. ← ~/.ssh がない場合ディレクトリを作成
Enter passphrase (empty for no passphrase): ← パスフレーズを入力
Enter same passphrase again: ← もう一度入力
Your identification has been saved in /home/user/.ssh/id_rsa. ← ここにつくったよ
Your public key has been saved in /home/user/.ssh/id_rsa.pub. ←公開鍵これだよ

カギを無事につくれたら、ssh接続をするユーザでサーバへログイン。
公開鍵をサーバに登録します。
ここは以下の記事を参考にしました。
さくらのVPS初期設定

$ mkdir .ssh
$ chmod 700 .ssh
$ vi .ssh/authorized_keys

これそのままコマンドに打ってくです。
で、作った公開鍵(.ssh/id_rsa.pub)の内容をコピペして保存し、
以下のコマンドでパーミッションの変更。

$ chmod 600 .ssh/authorized_keys

これでSSHログインできるようになります。
直後にさっそくログインしようと思ったら、なぜかタイムアウトしてしまう現象にハマって・・
よくみたら起動していたはずのサーバーが停止してました。てへ。起動したらログインできた。

〈詰んだところ〉ポート番号変えたらログインできなくなった

さくらの公式設定ガイドや他の方の記事にもあるように以下の設定をします。

  • 攻撃を回避するために、SSH接続のポートを22番から変更する
  • rootユーザでのログインを無効にする
  • パスワード認証を無効にする
$ su -
Password: ← rootのパスワードでログイン
# vi /etc/ssh/sshd_config
#Port22 
→Port65228
49152番〜65535番の間で

#PermitRootLogin yes 
→PermitRootLogin no
rootユーザでのログインを無効

PasswordAuthentication yes 
→PasswordAuthentication no
パスワード認証を無効

設定変更したら、設定ファイルの変更読み込みして終了でし。

# service sshd restart

いざログイン。

# ssh admin@xxx-222-12345.vs.sakura.ne.jp -p 65228 -i ./.ssh/id_rsa

※admin@xxx-222-12345.vs.sakura.ne.jpのところはVPSのコンパネに書いてあったよ!

で、ログインできない。何回やってもできない・・・。
ポートを22に戻すとログインできる。いみわかんない(´;ω;`)

調べた結果、
☑️ 変更後のポートをリッスンしているか確認
→ リッスンしていれば正常にポート番号の変更がされてるのでファイアウォールが原因かも
☑️ ファイアウォールの停止をしてログインできるか確認
→ ログインできたらファイアウォールの影響なので指定したポートを解放する
とのことで、まさにファイアウォールが原因でした。

●リッスンしているポートの確認

# netstat -tanp | grep LISTEN

ファイアウォールの停止方法

# /etc/rc.d/init.d/iptables stop 
iptables: Setting chains to policy ACCEPT: filter [  OK  ]
iptables: Flushing firewall rules: [  OK  ]
iptables: Unloading modules: [  OK  ]

ポートを解放するためにiptablesを編集します。
サーバの利用用途に合わせて許可するポート番号を設定する

# iptables -A INPUT -p tcp -m tcp --dport 65228 -j ACCEPT
# iptables -A INPUT -p tcp -m tcp --dport 80 -j ACCEPT
# iptables -A INPUT -p tcp -m tcp --dport 443 -j ACCEPT

※ 80 HTTP / 443 HTTPS

iptablesを再起動して変更を適用します。

$ service iptables restart

これで無事SSHログインできました。

順番が逆になっちゃったけど最後にOSのアップデートで終了。

# yum update

途中で[y/n]が表示されたら「y」を選択。
Complete!が表示されればOK。

ポート番号変更してログインできなくなった時は心折れそうでしたが
無事にサーバー立てられてよかったです。
せっかくサーバー契約したので真面目に使っていく所存♡

yuriについて。この仕事が好き。

一昨日、念願のMacBookProが届きました。わーい。

さて今回は、わたしの普段の仕事や日頃思っていることや考えていることをながながと書こうと思います。
あらかじめお伝えいたしますが3,000文字くらいあります。

  • 1.わたしについて
  • 2.なんでweb業界に入ったか
  • 3.普段の業務
  • 4.最近知ったこと・やってみたこと
    • 2016年7月以降に知った存在
    • 最近やったこと
    • お気に入り
  • 5.これからについて
  • おわりに
続きを読む