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

jQuery

Parallax Background

July 16, 2016

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ライセンス

Latest Posts

Related Posts