【jQuery】背景画像にパララックス効果Parallax background

Parallax backgroundはパララックス背景用の最適化されたjQueryプラグイン。

Manual

<script src="parallax-background.js"></script>

Example

<div class="example">
<div class="img"></div>
</div>
$('.example').parallaxBackground({
'image': '.img'
});

Styling

$parallax-space: 20%; // Example, can be anything
.example {
height: $element-height;
overflow: hidden;
position: relative;
.img {
background-image: url('image.jpg');
background-position: 50%;
background-size: cover;
display: none; /* 1 */
height: 100% + $parallax-space;
position: absolute; /* 2 */
top: -($parallax-space / 2);
width: 100%; // Example, can be anything
}
}

MITライセンス

 
Parallax Background

【jQuery】背景画像にパララックス効果Parallax background

  • LATEST
  • RELATED
  • POPULAR