├── README.md
├── blureffect.js
├── images
├── autumn-blur.jpg
└── autumn.jpg
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Blur-effec-on-scroll
2 |
3 |
4 | スクロールすると背景画像がボケていくMedium風のエフェクト。
5 |
6 | [DEMO](http://codepen.io/harayu/pen/VvNKJB) (Codepen)
7 |
8 | 
9 |
--------------------------------------------------------------------------------
/blureffect.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'user strict';
3 | var hello = document.getElementById('hello'),
4 | blur = document.getElementById('overlay'),
5 | windowHeight = window.innerHeight,
6 | isScroll = false;
7 |
8 | var latestScroll = 0;
9 | var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
10 | window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
11 |
12 | window.requestAnimationFrame = requestAnimationFrame;
13 |
14 | var init = function() {
15 | window.addEventListener('scroll', function(){
16 | latestScroll = window.scrollY;
17 | checkScroll();
18 | }, false);
19 | }
20 |
21 | var checkScroll = function() {
22 | if(!isScroll) {
23 | window.requestAnimationFrame(update);
24 | }
25 | isScroll = true;
26 | }
27 |
28 | var update = function() {
29 | currentScroll = latestScroll;
30 | isScroll = false;
31 | var helloScroll = currentScroll / 4,
32 | blurScroll = currentScroll * 2;
33 |
34 | hello.style.transform = 'translate3d(0, ' + helloScroll + 'px, 0)';
35 | blur.style.opacity = (blurScroll / windowHeight - .1).toFixed(2);
36 | if(blur.style.opacity >= 1) {
37 | blur.style.opacity = 1;
38 | }
39 | }
40 |
41 | init();
42 | })();
--------------------------------------------------------------------------------
/images/autumn-blur.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harayu/Blur-effect-on-scroll/20d96746f61a344ee509029c6d1e9afb3a7e0a23/images/autumn-blur.jpg
--------------------------------------------------------------------------------
/images/autumn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harayu/Blur-effect-on-scroll/20d96746f61a344ee509029c6d1e9afb3a7e0a23/images/autumn.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Blur effect on scroll
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Blur effect
13 | Modern Life Is Rubbish
14 |
15 |