パラドックス効果：CSS+jQuery滋賀県守山市のホームページ制作

★パラドックス効果：CSSのみ
HTML

<section id="block01" class="content">
	<article>
	<h1>トップ</h1>
	<p>
   	ここにテキスト挿入。
   </p>
   	<a href="#block01">トップ</a>
   	<a href="#block02">２番目のブロック</a>
   	<a href="#block03">３番目のブロック</a>
   	<a href="#block04">最後のブロック</a>
	</article>
</section>

<section id="block02" class="content">
	<article>
	<h2>２番目のブロック</h2>
	<p>
   	ここにテキスト挿入。
   </p>
   	<a href="#block01">トップ</a>
   	<a href="#block02">２番目のブロック</a>
   	<a href="#block03">３番目のブロック</a>
   	<a href="#block04">最後のブロック</a>
	</article>
</section>

<section id="block03" class="content">
	<article>
	<h2>３番目のブロック</h2>
	<p>
   	ここにテキスト挿入。
   </p>
   	<a href="#block01">トップ</a>
   	<a href="#block02">２番目のブロック</a>
   	<a href="#block03">３番目のブロック</a>
   	<a href="#block04">最後のブロック</a>
	</article>
</section>

<section id="block04" class="content">
	<article>
	<h2>最後のブロック</h2>
	<p>
   	ここにテキスト挿入。
   </p>
   	<a href="#block01">トップ</a>
   	<a href="#block02">２番目のブロック</a>
   	<a href="#block03">３番目のブロック</a>
   	<a href="#block04">最後のブロック</a>
	</article>
</section>

CSS

body {
	margin: 0;
}

h1,h2 {
	font-size: 24px;
	letter-spacing: 0.1em;
	margin: 25px 0;
	display: block;
}

#block01,
#block02,
#block03,
#block04 {
	height: 1050px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 100%;
}

article {
	background: #fff;
	margin: 200px 30px 0;
	padding: 30px;
	display: block;
	width: 500px;
}

article a {
	display: block;
	float: left;
	padding: 10px;
	margin: 5px;
	color: #FFF;
	background: #666;
}

#block01 {
	background: url(img/paradox/para01.jpg) no-repeat fixed 50% top;
}

#block02 {
	background: url(img/paradox/para02.jpg) no-repeat fixed 50% top;
}

#block03 {
	background: url(img/paradox/para03.jpg) no-repeat fixed 50% top;
}

#block04 {
	background: url(img/paradox/para04.jpg) no-repeat fixed 50% top;
}

article {
	background: #fff;
	margin: 200px 30px 0;
	padding: 30px;
	display: block;
	width: 500px;
}

JS

<script>
    $(function() {
        var $window = $(window);
        $('.content').each(function(index) {
            var $self = $(this);
            var offsetCoords = $self.offset();
            $(window).scroll(function() {
                // If this section is in view
                if (($window.scrollTop() + $window.height()) > offsetCoords.top && ((offsetCoords.top + $self.height()) > $window.scrollTop())) {
                    var yPos = -($window.scrollTop() / 8);
                    if ($self.attr('id') != 'block01') {
                        yPos += 126;
                    }
                    var coords = '50%' + yPos + 'px';
                    $self.css('backgroundPosition', coords);
                }
            });
        });
    });
</script>

サンプル