CSSでカスタマイズする縦方向のパララックス風スライダー【コピペで簡単自作】

2019年9月8日
CODING
スライダー
2552view

swiper.jsやslick.jsなどスライダー系プラグインは沢山ありますが、どうも望み通りのスライダーにカスタマイズ出来なかったので、、CSSメインでカスタマイズできるスライダーを作りました。ポイントは、下から上のvertical（縦）方向にスライドして、画像がスルスルと滑らかにパララックス風に動くことです。プラグインを使わずに自作でスライダーを作りたい方は参考にどうぞ！

1 自作した縦スライダーのデモ
2 HTMLコード
- 2.1 HTMLの解説
3 CSSコード
- 3.1 CSSコードの解説
4 Javascriptコード
- 4.1 Javascriptコードの解説
5 参考にさせていただいたサイト
6 まとめ

自作した縦スライダーのデモ

今回の自作スライダーのデモです。トップのキービジュアルとかに使えそうな。ページネーションもどきが表示されますが、これはクリックしても変わりません。パララックスって少し今更感がありますが、気にしません〜！一応レスポンシブにもなっていて、CSSのメディアクエリで背景を切り替える形にしてます。

デモ

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stylish Vertical Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Header</header>
<main>
  <div class="slider__wrap">
    <div class="slider__text"><p>Any Texts</p></div>
    <div class="slider">
      <div class="slider__slide active-default"><div class="slider__slide-img"></div></div>
      <div class="slider__slide"><div class="slider__slide-img"></div></div>
      <div class="slider__slide"><div class="slider__slide-img"></div></div>
      <div class="slider__pagination">
        <span class="active"></span><span></span><span></span>
      </div>
    </div>
  </div>
</main>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Stylish Vertical Slider</title>

</head>

<body>

<header>Header</header>

<main>

<div class="slider__text"><p>Any Texts</p></div>

</div>

</main>

</body>

</html>

HTMLの解説

そんなに解説する箇所もないですが、、
<div class=”slider__text”>の中にキャッチフレーズなどを入れる想定。スライダーに入れたい画像の数だけ、<div class=”slider__slide”><div class=”slider__slide-img”></div></div>を追加します。

最初に表示させておきたい画像の<div class=”slider__slide”>にはactive-defaultのクラスを入れます。

<div class=”slider__pagination”>の<span></span>も画像の数と同じ数にしてください。slider__slide-imgの背景画像のパスをCSSで指定します。

CSSコード

@charset "UTF-8";

/* Base settings
---------------------------------------------------------------- */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  background: #fff;
  color: #333;
  font-size: 16px;
  font-weight: normal;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "平成ゴシック", "メイリオ", "Meiryo", Helvetica, Arial, Verdana, "ＭＳ Ｐゴシック", "MS UI Gothic", sans-serif;
  line-height: 1.5;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
.content-wrapper {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
header {
  width: 100%;
  height: 70px;
  padding: 20px 30px;
  font-size: 18px;
}

/* Slider
---------------------------------------------------------------- */
.slider__wrap {
  position: relative;
  overflow: hidden; 
  width: 100%;
  max-width: 100%;
  height: 420px;
}
.slider__text {
  position: absolute;
  top: 45%;
  left: 30%;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  z-index: 100;
}
.slider__pagination {
  position: absolute;
  bottom: 30px;
  left: 30px;
  padding: 0 8px 2px;
  border-radius: 25px;
  background-color: #fff;
  opacity: .9;
  z-index: 100;
}
.slider__pagination span {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #777;
}
.slider__pagination span.active::after {
  content: "";
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  top: -2px;
  left: -2px;
  background-color: skyblue;
  border-radius: 50%; 
  animation-name: fadein;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  z-index: -1;
}
.slider {
  backface-visibility: hidden;
}
.slider__slide {
  position: absolute;
  overflow: hidden;
  top: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.slider__slide-img {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.slider__slide.active {
  top: 0;
  animation-duration: 600ms;
  animation-name: slide-in;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: 50;  
}
.slider__slide.active > .slider__slide-img {
  animation-duration: 600ms;
  animation-name: img-in;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.slider__slide.inactive {
  top: 0;
  animation-duration: 600ms;
  animation-name: slide-out;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: 0;
}
.slider__slide.inactive > .slider__slide-img {
  animation-duration: 600ms;
  animation-name: img-out;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.slider__slide.active-default {
  top: 0;
}
@keyframes slide-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes img-in {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes img-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50%);
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slider__slide:nth-child(1) .slider__slide-img {
  background-image: url("images/slide01-img.jpg");
}
.slider__slide:nth-child(2) .slider__slide-img {
  background-image: url("images/slide02-img.jpg");
}
.slider__slide:nth-child(3) .slider__slide-img {
  background-image: url("images/slide03-img.jpg");
}

@media screen and (max-width: 640px) {
  .slider__wrap {
    height: 340px;
  }
  .slider__slide:nth-child(1) .slider__slide-img {
    background-image: url("images/slide01-img-sp.jpg");
  }
  .slider__slide:nth-child(2) .slider__slide-img {
    background-image: url("images/slide02-img-sp.jpg");
  }
  .slider__slide:nth-child(3) .slider__slide-img {
    background-image: url("images/slide03-img-sp.jpg");
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

@charset "UTF-8";

/* Base settings

---------------------------------------------------------------- */

*::after,

*::before {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

width: 100%;

background: #fff;

color: #333;

font-size: 16px;

font-weight: normal;

font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "平成ゴシック", "メイリオ", "Meiryo", Helvetica, Arial, Verdana, "ＭＳＰゴシック", "MS UI Gothic", sans-serif;

line-height: 1.5;

}

img {

max-width: 100%;

vertical-align: middle;

}

.content-wrapper {

width: 100%;

margin-right: auto;

margin-left: auto;

}

header {

width: 100%;

height: 70px;

padding: 20px 30px;

font-size: 18px;

}

/* Slider

---------------------------------------------------------------- */

.slider__wrap {

position: relative;

overflow: hidden;

width: 100%;

max-width: 100%;

height: 420px;

}

.slider__text {

position: absolute;

top: 45%;

left: 30%;

color: #fff;

font-size: 28px;

font-weight: bold;

text-align: center;

z-index: 100;

}

.slider__pagination {

position: absolute;

bottom: 30px;

left: 30px;

padding: 0 8px 2px;

border-radius: 25px;

background-color: #fff;

opacity: .9;

z-index: 100;

}

.slider__pagination span {

position: relative;

display: inline-block;

width: 8px;

height: 8px;

margin: 0 5px;

border-radius: 50%;

background-color: #777;

}

.slider__pagination span.active::after {

content: "";

display: block;

position: absolute;

width: 12px;

height: 12px;

top: -2px;

left: -2px;

background-color: skyblue;

border-radius: 50%;

animation-name: fadein;

animation-duration: 600ms;

animation-fill-mode: forwards;

z-index: -1;

}

.slider {

backface-visibility: hidden;

}

.slider__slide {

position: absolute;

overflow: hidden;

top: 100%;

bottom: 0;

left: 0;

right: 0;

padding: 0;

margin: 0;

width: 100%;

height: 100%;

z-index: 0;

}

.slider__slide-img {

width: 100%;

height: 100%;

background-size: 100%;

background-position: 50% 50%;

background-repeat: no-repeat;

}

.slider__slide.active {

top: 0;

animation-duration: 600ms;

animation-name: slide-in;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

z-index: 50;

}

.slider__slide.active > .slider__slide-img {

animation-duration: 600ms;

animation-name: img-in;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

.slider__slide.inactive {

top: 0;

animation-duration: 600ms;

animation-name: slide-out;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

z-index: 0;

}

.slider__slide.inactive > .slider__slide-img {

animation-duration: 600ms;

animation-name: img-out;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

.slider__slide.active-default {

top: 0;

}

@keyframes slide-in {

0% {

transform: translateY(100%);

}

100% {

transform: translateY(0);

}

@keyframes img-in {

0% {

transform: translateY(-50%);

}

100% {

transform: translateY(0);

}

@keyframes slide-out {

0% {

transform: translateY(0);

}

100% {

transform: translateY(-100%);

}

@keyframes img-out {

0% {

transform: translateY(0);

}

100% {

transform: translateY(50%);

}

@keyframes fadein {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

.slider__slide:nth-child(1) .slider__slide-img {

}

.slider__slide:nth-child(2) .slider__slide-img {

}

.slider__slide:nth-child(3) .slider__slide-img {

}

@media screen and (max-width: 640px) {

.slider__wrap {

height: 340px;

}

.slider__slide:nth-child(1) .slider__slide-img {

}

.slider__slide:nth-child(2) .slider__slide-img {

}

.slider__slide:nth-child(3) .slider__slide-img {

}

CSSコードの解説

113行目の.slider__slide.activeで指定されているアニメーションで表示スピードやeasingなど自由に調整できます。144〜175行目のslide-in, img-in, slide-out, img-outという名前のアニメーションが、このスライダーのメインとなる部分ですね。transform: translateY(50%); のパーセンテージを調整すると、背景画像が動く範囲を調整できます。あとはアニメーションにopacityとか入れればフェードイン&フェードアウトにもできるし、zoomとか入れてもかっこいいと思います！

Javascriptコード

jQuery(function($){
    $('.slider').each(function(){
    var $slides = $(this).find('.slider__slide');
    var $pagination = $(this).find('.slider__pagination > span');
    var numSlides = $slides.length - 1;
    var i = 0;
   
    var rotate = function(){
    $slides.removeClass('active inactive active-default');
    $pagination.removeClass('active');
    $slides.eq(i).addClass('inactive');
    if(i == numSlides){
        i = -1;
    }
    $slides.eq(++i).addClass('active');
    $pagination.eq(i).addClass('active');
    var timer = window.setTimeout(rotate, 5000);
    };
    setTimeout(rotate, 5000);
    });
});

jQuery(function($){

$('.slider').each(function(){

var $slides = $(this).find('.slider__slide');

var $pagination = $(this).find('.slider__pagination > span');

var numSlides = $slides.length - 1;

var i = 0;

var rotate = function(){

$slides.removeClass('active inactive active-default');

$pagination.removeClass('active');

$slides.eq(i).addClass('inactive');

if(i == numSlides){

i = -1;

}

$slides.eq(++i).addClass('active');

$pagination.eq(i).addClass('active');

var timer = window.setTimeout(rotate, 5000);

};

setTimeout(rotate, 5000);

});

Javascriptコードの解説

Javascriptのコードもそんなに難しくないですね。slider__slideに順番に”active”と”inactive”のクラスを付与する関数（rotate）を、setTimeoutで5秒ごとに回してるだけという単純なもの！なるほど〜と思いました。

参考にさせていただいたサイト

今回のスライダーは下記ので紹介されているコードをベースに、スライダーを縦方向にしたりページネーションをつけたりと手を加えてみました。ありがとうございました！

背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

まとめ

背景画像がスルスルと動きながら縦にスライドするスライダーの自作コードでした。これを作っていて思ったのですが、画像が動く時のスルスル感は、transformだけ使うと綺麗にできますね。変にbackground-positionとか、position: absoluteで画像を動かそうとするとカクカクしちゃいました。スクロールの背景パララックス作るときもtransform使うのがいいのかな。

CSSでカスタマイズする縦方向のパララックス風スライダー【コピペで簡単自作】

自作した縦スライダーのデモ

HTMLコード

HTMLの解説

CSSコード

CSSコードの解説

Javascriptコード

Javascriptコードの解説

参考にさせていただいたサイト

まとめ

【All in One SEO Pack】SNSでシェアする画像や要約を簡単に設定する。

【Contact Form 7】カスタマイズ済みフォームテンプレート[2]のデモ