スクロールに合わせて、ヘッダー画像がぼやける効果を与えるスクリプト

スクロールに合わせて、ヘッダー画像がぼやける効果を与える
このエントリーをはてなブックマークに追加
PR

スクロールに合わせてヘッダーの画像にブラー効果を掛けるスクリプト

どこかで、ヘッダー画像がスクロールに合わせてぼやけていく効果があるウェブサイトを見て。作ってみようと思っていたもので、今回作ってみました

CSSのfilterを使いますので、filterが使えるブラウザのみ対応となります。

DEMO 表示

 

解説

HTMLとCSSとjQueryを使って作っています

スクロールに合わせて、ボカシ効果が出るように jQuery でスクロールをトリガーにその都度現在のスクロール位置を取得して、そこからブラー効果をどの程度掛けるか調整しています。

ブラー効果は10段階で見えなくなるところで 10に達するようにします。

 

headerの高さの取得

jQueryで height() を使ってheaderの高さを取得します

var header = $(‘header’).height();

 

 

現在のスクロールトップの取得

現在どの程度スクロールされているかを取得します

var scrollnow = $(window).scrollTop();

 

 

ブラー効果の計算をする

計算式は適当にこのようにしました

var scrollblur = 10*scrollnow/header;

var blur = Math.floor(scrollblur);

 

ブラー効果の最大値を変更したい場合は 10のところを好きな数字にすればOKです。

整数になるように、Math.floor()で小数点は切り捨ててます

 

 

cssに反映する

最後に、計算した数値をCSSに反映させます

$(‘header’).css(‘-webkit-filter’,’blur(‘+blur+’px)’);

$(‘header’).css(‘filter’,’blur(‘+blur+’px)’);

 

プレフィックス付きのものと、そうでないもの両方作っておきます。

CSSのコード全体は参考程度にしてください。

javascriptのところで、指定するセレクタだけ変えればそれぞれに使えます。

 

 

コード全体

HTML

<body>
 <header></header>
 <div class="div">
 <h2>1st</h2>
 </div>
 <div>
 <h2>2nd</h2>
 </div>
</body>

 

javascript

<script>
 $(window).on('scroll load',function(e) {
 var header = $('header').height();
 var scrollnow = $(window).scrollTop();
 var scrollblur = (header+10*scrollnow)/header-1;
 var blur = Math.floor(scrollblur);
 $('h2').text( blur+'PX' );
 $('header').css('-webkit-filter','blur('+blur+'px)');
 $('header').css('filter','blur('+blur+'px)');
 });
</script>

 

 

CSS(SCSS)

html,body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

header {
 position: relative;
 width: 100%;
 height: 100%;
 background: url(coffee-498806.jpg);
 background-position: center center;
 background-attachment: fixed;
 background-size: cover;
 filter: blur(0px);
}

div {
 position: relative;
 background: #a6d9ff;
 width: 100%;
 height: 100%;
}

.div {
 position: absolute;
 background: none;
 top: 0;
 left: 0;
}

h2 {
 font-family: impact;
 font-weight: normal;
 font-size: 10vw;
 text-align: center;
 color: #fff;
 position: absolute;
 width: 100%;
 top: 50%;
 left: 0;
 margin: 0;
 padding: 0;
 transform: translateY(-50%);
 text-shadow: 10px 10px 2px rgba(0, 0, 0, 0.37) ;
}

 

 

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)