今日の人気記事

  1. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
  2. 動画のポップアップLightbox「Video Lightning」
  3. 指定した要素を上下左右にスクロール「Marquee」
  4. テーブルやリストから文字列を検索「QuickSearch」
  5. アニメ効果付きの円グラフを作成「Circliful」

指定した位置までスクロールするとスライドするパネル「ScrollSlide」

スポンサーリンク

指定した位置までスクロールするとスライドするパネルを実装するプラグイン「ScrollSlide」を紹介します。

jQueryプラグイン「ScrollSlide」

このプラグインを使えば、ページを指定した位置までくるくるとスクロールすると左や右からアニメ効果でスライドしながら登場するパネルを実装することができます。

  • スライドする方向
  • スライドするスピード
  • スライドする位置
  • スライドバックのオン・オフ
スポンサーリンク

それではデモページをスクロールしてみてください。

「ScrollSlide」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="ScrollSlide のデモでーす。">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ScrollSlide - jQueryプラグイン</title>
<link rel='stylesheet' href='css/style.css' type='text/css'>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="js/jquery.scrollslide.js"></script>
<script>
$(document).ready(function(){
  $('.slide-left-1').scrollSlide({
    direction   : 'left',
    scrollstart : 200,
    slideback   : true
  });
  $('.slide-right-1').scrollSlide({
    direction   : 'right',
    scrollstart : 200,
    slideback   : true
  });
  $('.slide-left-2').scrollSlide({
    direction   : 'left',
    scrollstart : 400,
    slideback   : true
  });
  $('.slide-right-2').scrollSlide({
    direction   : 'right',
    scrollstart : 400,
    slideback   : true
  });
  $('.slide-left-3').scrollSlide({
    direction   : 'left',
    scrollstart : 1200,
    slideback   : true
  });
  $('.slide-right-3').scrollSlide({
    direction   : 'right',
    scrollstart : 1200,
    slideback   : true
  });
  $('.slide-left-4').scrollSlide({
    direction   : 'left',
    scrollstart : 1400,
    slideback   : true
  });
  $('.slide-right-4').scrollSlide({
    direction   : 'right',
    scrollstart : 1400,
    slideback   : true
  });
  $('.slide-left-5').scrollSlide({
    direction   : 'left',
    scrollstart : 2100,
    slideback   : true
  });
  $('.slide-right-5').scrollSlide({
    direction   : 'right',
    scrollstart : 2100,
    slideback   : true
  });
  $('.slide-left-6').scrollSlide({
    direction   : 'left',
    scrollstart : 2300,
    slideback   : true
  });
  $('.slide-right-6').scrollSlide({
    direction   : 'right',
    scrollstart : 2300,
    slideback   : true
  });
  $('.slide-left-7').scrollSlide({
    direction   : 'left',
    scrollstart : 3000,
    slideback   : true
  });
  $('.slide-right-7').scrollSlide({
    direction   : 'right',
    scrollstart : 3000,
    slideback   : true
  });
});
</script>
</head>
<body>

<section class="showcase">
  <div class="container">
    <h1>ScrollSlide のデモです。</h1>
    <p>ページをスクロールしてみてください。</p>
  </div>
</section>

<section>
  <div class="container">
    <div class="section-left">
      <div class="slide-left-1">
        <h2>赤</h2>
        <p>赤色だよ。</p>
      </div>
    </div>
    <div class="section-right">
      <div class="slide-right-1">
        <img src="img/01-red.png">
      </div>
    </div>
  </div>
</section>

<section class="dark">
  <div class="container">
    <div class="section-left">
      <div class="slide-left-2">
        <img src="img/02-orange.png">
      </div>
    </div>
    <div class="section-right">
      <div class="slide-right-2">
        <h2>橙</h2>
        <p>橙色だよ。</p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="section-left">
      <div class="slide-left-3">
        <h2>黄</h2>
        <p>黄色だよ。</p>
      </div>
    </div>
    <div class="section-right">
      <div class="slide-right-3">
        <img src="img/03-yellow.png">
      </div>
    </div>
  </div>
</section>

<section class="dark">
  <div class="container">
    <div class="section-left">
      <div class="slide-left-4">
        <img src="img/04-green.png">
      </div>
    </div>
    <div class="section-right">
      <div class="slide-right-4">
        <h2>緑</h2>
        <p>緑色だよ。</p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="section-left">
      <div class="slide-left-5">
        <h2>青</h2>
        <p>青色だよ。</p>
      </div>
    </div>
    <div class="section-right">
      <div class="slide-right-5">
        <img src="img/05-blue.png">
      </div>
    </div>
  </div>
</section>

<section class="dark">
  <div class="container">
    <div class="section-left">
      <div class="slide-left-6">
        <img src="img/06-indigo.png">
      </div>
    </div>
    <div class="section-right">
      <div class="slide-right-6">
        <h2>藍</h2>
        <p>藍色だよ。</p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="section-left">
      <div class="slide-left-7">
        <h2>紫</h2>
        <p>紫色だよ。</p>
      </div>
    </div>
    <div class="section-right">
      <div class="slide-right-7">
        <img src="img/07-purple.png">
      </div>
    </div>
  </div>
</section>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)