【jQuery】jQueryを使用したパララックス背景プラグインParallaxBackground

jQuery

ParallaxBackground

February 22, 2018

ParallaxBackgroundはjQueryを使用したパララックス背景プラグイン。

INSTALLATION

Include JS

<script src="jquery.min.js"></script>
<script src="parallax_background.js"></script>

Set HTML

<div class="parallax-background">
    <div class="parallax-inner" style="background-image: url('background-image.jpg')">
    </div>
</div>

Call the plugin

$('.parallax-background').parallaxBackground();

Settings

Option Default
event scroll
animation_type shift
zoom 20
rotate_perspective 1400
animate_duration 1

Example:

<section class="parallax-demo-1">
    <div class="parallax-inner"
         style="background-image: url('image.jpg')">
    </div>
</section>

<script>
    $('.parallax-demo-1').parallaxBackground({
        event: 'scroll',
        animation_type: 'shift'
    });
</script>

Browser support

  1. Chrome
  2. Firefox
  3. Opera
  4. IE10/11

Latest Posts

Related Posts