HOME > >

jQuery bgScroll

シンプルな背景アニメーション用のjQueryプラグイン。

使い方

jQuery本体とbgscroll.jsが必要となります。

HTML

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2. <script type="text/javascript" src="jquery.bgscroll.js"></script>

オプション

scrollSpeed スクロールスピード。デフォルトは70
direction スクロール方向を指定します。
v:縦方向
h:横方向
d:斜め
デフォルトはh

サンプル

サンプル

実行結果

Javascript

  1. $(function(){
  2.     $('.scrollErea').bgscroll();
  3. });

HTML

  1.  
  2. <div class="scrollErea">
  3.  
  4. </div>
  5.  

CSS

  1.  
  2. .scrollErea {
  3.     height: 300px;
  4.     background: url('/storage/samples/bg/photoxpress_1371137.jpg');
  5. }
  6.  

サンプル

実行結果

Javascript

  1. $(function(){
  2.     $('.scrollErea2').bgscroll({
  3.         scrollSpeed:10,
  4.         direction:'d'
  5.     });
  6. });

HTML

  1.  
  2. <div class="scrollErea2">
  3.  
  4. </div>
  5.  

CSS

  1.  
  2. .scrollErea2 {
  3.     height: 300px;
  4.     background: url('/storage/samples/bg/photoxpress_3405047.jpg');
  5. }
  6.  

サンプル

実行結果

Javascript

  1. $(function(){
  2.     $('.scrollErea3').bgscroll({
  3.         scrollSpeed: 30,
  4.         direction:'v'
  5.     });
  6. });

HTML

  1.  
  2. <div class="scrollErea3">
  3.  
  4. </div>
  5.  

CSS

  1.  
  2. .scrollErea3 {
  3.     height: 300px;
  4.     background: url('/storage/samples/bg/photoxpress_3651315.jpg');
  5. }
  6.  

参照サイト