【jQuery】軽量のパララックス背景プラグイン。EasyParallax

EasyParallaxはパララックス背景を追加するための、軽量で使いやすいjQueryプラグイン。

jQuery

<script src="/path/to/js/files/jquery.js"></script>
<script src="/path/to/js/files/jquery.easyparallax-1.0.0.js"></script>

Simple usage

<div class="container" data-bg="/url/to/bg/image">
Your content
</div>
<script>
$('.container').easyParallax();
</script>

Options

Option name Default value
debug false
alignment ‘center’
effectAmount 400
effectThreshold 0
isReady

Responsive

<div class="container" data-bg="/url/to/bg/image1" data-bg500="/url/to/bg/image2" data-bg1000="/url/to/bg/image3"></div>

Full demonstration

// in .php  or .html file
<html>
<head>
<link rel="stylesheet" type="text/css" rel="/path/to/js/files/animate.css" />
<style>
.container {position:relative; width:100%; height:300px;}
.easyparallax {opacity:0;}
</style>
</head>
<body>
<div class="container" 
data-bg="/path/to/img/image1.jpg" 
data-bg600="/path/to/img/image2.jpg"> 
</div>
<script src="/path/to/js/files/jquery.js"></script>
<script src="/path/to/js/files/jquery.easyparallax-1.0.0.js"></script>
</body>
</html>
// in .js attached file
$('.container').easyParallax({
alignment : 'right',
effectAmount : 280,
effectThreshold : 600,
isReady : function(){
this.addClass('animated fadeIn');
}
});
 
EasyParallax

【jQuery】軽量のパララックス背景プラグイン。EasyParallax

  • LATEST
  • RELATED
  • POPULAR