jQueryで拡大・縮小しながらスムーススクロール
「ゴルフ大会」のキャンペーンページを作成した際に使用した、モーション付きのスムーススクロールの方法をメモ。移動前にコンテンツ幅を変化させることで、動きに面白みを追加している。 HTML <header> <nav> <ul> <li><a href="section1">リンクボタン1</a></li> <li><a href="section2">リンクボタン2</a></li> <li><a href="section3">リンクボタン3</a></li> </ul> </nav> </header> <article> <section class="section1"> <h2>見出し1</h2> <p>コンテンツ内容を記載</p> </section> <section class="section2"> <h2>見出し2</h2> <p>コンテンツ内容を記載</p> </section> <section class="section3"> <h2>見出し3</h2> <p>コンテンツ内容を記載</p> </section> </article> CSS body{ overflow-x:hidden; } jQuery $('header nav a').click(function(){ var target = '.'+$(this).attr('href'); var position = $('.'+$(this).attr('href')).offset().top; $('article').animate({'opacity':'0.05', 'padding':'0 5%', 'margin-top':'60px'}, '1000', 'swing', function(){ $('body,html').animate({scrollTop:position}, 'slow', 'swing', function(){ $(target+' h2').nextAll().css({'opacity':'0', 'margin-top':'60px'}); $('article').css({'opacity':'1', 'padding':'0'}).animate({'margin-top':'0'}, '1000', 'swing', function(){ $(target+' h2').nextAll().animate({'opacity':'1', 'margin-top':'0'}, '1000', 'swing'); }); }); }); return false; });