指定した位置までスクロールするとスライドするパネル「ScrollSlide」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した位置までスクロールするとスライドするパネルを実装するプラグイン「ScrollSlide」を紹介します。
jQueryプラグイン「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>
スポンサーリンク