Home > Design > サクッとできるparallax(パララックス)エフェクト4つ
Home > Html & Css > サクッとできるparallax(パララックス)エフェクト4つ
Home > Javascript > サクッとできるparallax(パララックス)エフェクト4つ

サクッとできるparallax(パララックス)エフェクト4つ

css jQuery parallax

公開日: 2017/07/31

最終更新日: 2017/8/1

簡単に出来るパララックス効果をまとめてみました。
CSSや短いjQueryで出来るものです。
パララックスって、やりたいな～とは思うけど、コンバージョン考えると使えるサイト少ないですよね。

よくあるやつ

CSSのcoverで作る、よくあるやつです。

Demo

デモはこちら

Html

<div id="para1">
	<div class="first"><p><i>Parallax demo1</i></p></div>
	<div class="a">a</div>
	<div class="b">b</div>
	<div class="c">c</div>
	<div class="d">d</div>
</div>

<div class="first"><p><i>Parallax demo1</i></p></div>

</div>

css

backgroundに画像をcoverで全面に配置してfixedで動くようにしてます。
エリアは100vhでブラウザの高さになるようにしてます。
vh超便利
ちなみに
メディアスクリーンでスマホ用画像です。
background-attachment: fixed;が効かないのでposition:fixed;でやってます。

.first,
.b {
    height: 100vh;
    background-image: url("images/pao.jpg");
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat
}
.first p,
.b p {
    text-align: center;
    padding-top: 10vh;
    font-family: 'Gulim';
    font-size: 3rem;
    color: #13B3A1;
    text-shadow: 0 0 10px #fff
}
@media screen and (max-width: 768px) {
    .first,
    .b {
        background-image: none
    }
    .first::before,
    .b::before {
        content: "";
        display: block;
        min-width: 100vw;
        min-height: 100vh;
        background-image: url("images/paosp.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1
    }
}
.a {
    height: 100vh;
    background-color: aquamarine
}
.c {
    height: 100vh;
    background-color: aqua
}

.first,

.b {

height: 100vh;

background-position: center center;

background-attachment: fixed;

background-size: cover;

background-repeat: no-repeat

}

.first p,

.b p {

text-align: center;

padding-top: 10vh;

font-family: 'Gulim';

font-size: 3rem;

color: #13B3A1;

text-shadow: 0 0 10px #fff

}

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

.first,

.b {

}

.first::before,

.b::before {

content: "";

display: block;

min-width: 100vw;

min-height: 100vh;

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

position: fixed;

top: 0;

left: 0;

z-index: -1

}

.a {

height: 100vh;

background-color: aquamarine

}

.c {

height: 100vh;

background-color: aqua

}

よくあるやつの動画バージョン

上でやったの動画バージョンです。
背景にしけないので、z-indexで背景ぽく使ってます。
縦長動画もあるなら、media=”screen and (max-width: 768px)”とかで分けてやればいいと思います。

Demo

デモはこちら

html

動画を自動再生・ミュート・ループ再生で設定してます。
デモなので、mp4だけですが、ブラウザによって入れてあげてください。

<div id="a">
    <p><i>Parallax demo2</i></p>
    <video autoplay muted loop>
        <source src="images/MIKAHFW13HDmp4.mp4">
        <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
    </video>
</div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

<p><i>Parallax demo2</i></p>

<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>

</video>

</div>

css

min-width: 100vw;min-height: 100vh;でブラウザサイズをカバーするように設定して、
videoタグにposition:fixed;を付けてブラウザの真ん中に固定してます。
z-indexで後ろにくるようにしてますので、あとの#bと#dの後ろにきます。

#a,
#b,
#c,
#d {
    font-size: 100px;
    width: 100%;
    height: 100vh
}
#a p {
    margin-top: 1em;
    margin-left: 1em;
    font-family: 'Century Gothic';
    font-size: 3rem;
    color: #222;
    text-shadow: 0 0 10px #fff
}
#b,
#d {
    background-color: aquamarine
}
#c {
    background: trasparent
}
video {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
    z-index: -100
}

#a,

#b,

#c,

#d {

font-size: 100px;

width: 100%;

height: 100vh

}

#a p {

margin-top: 1em;

margin-left: 1em;

font-family: 'Century Gothic';

font-size: 3rem;

color: #222;

text-shadow: 0 0 10px #fff

}

#b,

#d {

background-color: aquamarine

}

#c {

background: trasparent

}

video {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

min-width: 100vw;

min-height: 100vh;

width: auto;

height: auto;

z-index: -100

}

背景だけ横に流れるエフェクト

要素は縦スクロール、背景は横スクロールです。

Demo

デモはこちら

html

<div id="para1">
	<div class="first"></div>
	<div class="a">a</div>
	<div class="b">b</div>
	<div class="c">c</div>
	<div class="d">d</div>
</div>

</div>

css

#para1に横スクロールさしたい画像を設定して、coverで全画面、repeat-xで画像を繰り返し、fixedでブラウザに固定させてます。
メディアスクリーンでスマホ用画像です。

#para1 {
    background-image: url("images/para3back.png");
    background-position: top left;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: repeat-x
}
@media screen and (max-width: 768px) {
    #para1 {
        background-image: url(images/para3backsp.png)
    }
}
.first,
.a,
.b,
.c,
.d,
.e {
    text-align: center;
    vertical-align: middle;
    font-family: 'Gulim';
    font-size: 400px;
    color: #13B3A1;
    width: 100%;
    height: 100vh
}

#para1 {

background-position: top left;

background-attachment: fixed;

background-size: cover;

background-repeat: repeat-x

}

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

#para1 {

}

.first,

.a,

.b,

.c,

.d,

.e {

text-align: center;

vertical-align: middle;

font-family: 'Gulim';

font-size: 400px;

color: #13B3A1;

width: 100%;

height: 100vh

}

jQuery

スクロール値を取得して、background-position-xにスクロール値をマイナス値で設定して動かしてます。

(function ($) {
    
	'use strict';
    
    let scrollPosi = 0;
	$(window).scroll(function () {
		scrollPosi = $(document).scrollTop();
        $('#para1').css('background-position-x', -scrollPosi + 'px');
	});

})(jQuery);

(function ($) {

'use strict';

let scrollPosi = 0;

$(window).scroll(function () {

scrollPosi = $(document).scrollTop();

$('#para1').css('background-position-x', -scrollPosi + 'px');

});

})(jQuery);

背景がスクロールより、ゆっくり動くエフェクト

そのまんまなのですが、微妙に分かりづらいので、とりあえず下のデモ見て頂くと分かると思います。
画像は縦長の画像を使うのがオススメです。

Demo

デモはこちら

html

動画のやつ以外htmlは、ほぼ一緒です。

<section id="para1">
	<div class="a">a</div>
	<div class="b">b</div>
	<div class="c">c</div>
	<div class="d">d</div>
</section>

</section>

css

背景を全画面でfixedにしときます。

#para1 {
    background-image: url("images/husky-2485629_1920.jpg");
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat
}
div {
    color: #13B3A1
}
.a,
.c {
    height: 100vh;
    font-size: 40px;
    background-color: aquamarine;
    opacity: 0.4
}
.b,
.d {
    height: 100vh;
    font-size: 40px;
    background-color: coral;
    opacity: 0.4
}

#para1 {

background-position: top center;

background-attachment: fixed;

background-size: cover;

background-repeat: no-repeat

}

div {

color: #13B3A1

}

.a,

.c {

height: 100vh;

font-size: 40px;

background-color: aquamarine;

opacity: 0.4

}

.b,

.d {

height: 100vh;

font-size: 40px;

background-color: coral;

opacity: 0.4

}

jQuery

さっきの横スクロールと同じ感じです。
background-position-yにスクロール値を3で割った数を入れて動かしてます。
animationで100ミリ秒かけてるので、動きがいい感じになります。
いい感じじゃないと思ったら変えてください。

(function ($) {

	'use strict';
    
    let scrollPosi = 0;

	$(window).scroll(function () {
		scrollPosi = $(document).scrollTop();
        
        $('#para1').stop(true, true).animate({
			'background-position-y': -scrollPosi / 3 + 'px'
		}, 100);
	});

})(jQuery);

(function ($) {

'use strict';

let scrollPosi = 0;

$(window).scroll(function () {

scrollPosi = $(document).scrollTop();

$('#para1').stop(true, true).animate({

'background-position-y': -scrollPosi / 3 + 'px'

}, 100);

});

})(jQuery);

Githubにもあげときました。Github

サクッとできるparallax(パララックス)エフェクト4つ

よくあるやつ

Demo

Html

css

よくあるやつの動画バージョン

Demo

html

css

背景だけ横に流れるエフェクト

Demo

html

css

jQuery

背景がスクロールより、ゆっくり動くエフェクト

Demo

html

css

jQuery

関連

よろしければコメントをどうぞコメントをキャンセル

Profile