スクロールに合わせて、ヘッダー画像がぼやける効果を与えるスクリプト
スクロールに合わせてヘッダーの画像にブラー効果を掛けるスクリプト
どこかで、ヘッダー画像がスクロールに合わせてぼやけていく効果があるウェブサイトを見て。作ってみようと思っていたもので、今回作ってみました
CSSのfilterを使いますので、filterが使えるブラウザのみ対応となります。
解説
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) ;
}
COMMENT