スクロールイベント：要素出現滋賀県守山市のホームページ制作

★スクロールイベント：要素出現
HTML

<nav id="globalNav">
        <ul>
            <li><a href="#content01">ホーム</a></li>
            <li><a href="#content02">会社案内</a></li>
            <li><a href="#content03">事業案内</a></li>
            <li><a href="#content01">導入事例</a></li>
            <li><a href="#content02">採用情報</a></li>
            <li><a href="#content03">お知らせ</a></li>
            <li><a href="#content01">お問い合わせ</a></li>
        </ul>
</nav>
<!-- /ID globalNav -->

<div id="content01" class="itemPic01" style="background:#ffc">
	<img class="delay-10s" src="img/scroll/mocarock01.png" alt="モカロック01">
</div>

<div id="content02"  class="itemPic02" style="background:#cff">
	<img class="delay-05s" src="img/scroll/mocarock02.png" alt="モカロック02">
</div>

<div id="content03"  class="itemPic03" style="background:#fcf">
	<img class="delay-05s" src="img/scroll/mocarock03.png" alt="モカロック03">
</div>

CSS

#globalNav {
    display: block;
    margin: 0;
    padding: 0;
    height: 67px;
    clear: both;
}
 
#globalNav ul {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
 
#globalNav li {
    display: inline;
}
 
#globalNav li a {
    display: block;
    margin: 0;
    padding: 30px 0;
    width: 14%;
    float: left;
    text-align: center;
    list-style: none;
    background: #EEE;
    border-right: 2px solid #FFF;
    color: #333;
    letter-spacing: 0.1em;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

#globalNav li a:hover {
	background: #063;
	color: #FFF;
}

/* ブロック */

#content01,
#content02,
#content03 {
    display: block;
    margin: 0;
    padding: 0;
	 width: 100%;
	 height: 1000px;
	 text-align: center;
}

.itemPic01,
.itemPic02,
.itemPic03 {
	margin: 0;
	padding: 0;
	display: block;
	text-align: center;
}

.itemPic01 img,
.itemPic02 img,
.itemPic03 img {
	margin: 200px auto;
}

/* アニメ */

.fadeItem {
    -webkit-animation: fadeItem 1s cubic-bezier(.55,0,.1,1) both;
    -moz-animation: fadeItem 1s cubic-bezier(.55,0,.1,1) both;
    animation: fadeItem 1s cubic-bezier(.55,0,.1,1) both;
}
@-webkit-keyframes fadeItem { from{ opacity: 0; -webkit-transform: translateX(-600px); transform: translateX(-600px); }}
@keyframes fadeItem { from{ opacity: 0; -webkit-transform: translateX(-600px); transform: translateX(-600px); }}

/* 時間差 */

.delay-05s {
	 -webkit-animation-delay: 0.5s;
	 -moz-animation-delay: 0.5s;
	 animation-delay: 0.5s;
}

.delay-10s {
	 -webkit-animation-delay: 1s;
	 -moz-animation-delay: 1s;
	 animation-delay: 1s;
}

JS:waypoints

<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script>
$(function(){
    $('#content01').waypoint(function(){
        $('.itemPic01 img').addClass('fadeItem');
    },{
        offset : '95%'
    });
});
</script>

<script>
$(function(){
    $('#content02').waypoint(function(){
        $('.itemPic02 img').addClass('fadeItem');
    },{
        offset : '95%'
    });
});
</script>

<script>
$(function(){
    $('#content03').waypoint(function(){
        $('.itemPic03 img').addClass('fadeItem');
    },{
        offset : '95%'
    });
});
</script>

サンプル