3

I'm using the solution proposed here jQuery scrollTo - Center Div in Window Vertically and it works, when I hit some link on my webpage, I immediately see smooth scrolling that stops when my header is in the middle of the screen. However, I have several other components above and below, so I thought about bluring them until the user scrolls up or down - is that even possible in jquery or css?

I prepared small jsfiddle with the code so far, I just have trouble with attaching jquery library itself, so the smooth scroll might now be visible there... But all in all I'm using the following script:

$('#borders a').on('click', function(e) { 
  var el = $( e.target.getAttribute('href') );
  var elOffset = el.offset().top;
  var elHeight = el.height();
  var windowHeight = $(window).height();
  var offset;

  if (elHeight < windowHeight) {
    offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
  }
  else {
    offset = elOffset;
  }

  $.smoothScroll({ speed: 700 }, offset);
  return false;
});

EDIT:: I marked this quesion as solved since the correct answer was given below, however it appeard to me later on that it doesn't work in my case. That's why I've decided to ask another question here

Community
  • 1
  • 1
randomuser1
  • 2,733
  • 6
  • 32
  • 68
  • 1
    I just saw your jsFiddle - you were put Javascript code in CSS panle !!. it should place it in Jvascript Code Panle. – prog1011 Apr 16 '15 at 12:40
  • There's the CSS blur filter, but not supported by IE (http://caniuse.com/#feat=css-filters). You could try using a semi-transparent PNG as a foreground to "blurred" elements. As for applying the efect itself a CSS class on those elements should be enough. – Sergiu Paraschiv Apr 16 '15 at 12:43

3 Answers3

2

Yes you can.

You can use SmoothScroll’s beforeScroll event to blur all elements except the one you’re scrolling to.

$.smoothScroll({
    afterScroll: function() {
        $('.el').not(target).animate({ opacity: 0.25 });
    }
});

Then, remove opacity when you’re scrolling.

$(window).on('scroll', function() {
    $('.el').animate({ opacity: 1 });
});

To prevent animations being triggered on every scroll, check out the edited fiddle.

Instead of applying CSS directly, you can use add and remove classes to keep styling exclusively in your CSS files.

https://jsfiddle.net/ea67uqd6/4/

Tim S.
  • 13,597
  • 7
  • 46
  • 72
  • I've tried to test your solution on my case and it unfortunately didn't work... I've created a new question for it here http://stackoverflow.com/questions/29678607/blurring-other-components-in-javascript-and-css-does-not-work-after-scrolling Could you step by for a while and help me with that issue? Thanks! – randomuser1 Apr 16 '15 at 15:07
0

Yes, there is a very simple filter property in CSS3 you can apply to all other elements if you wish to do so.

filter: blur(5px);
-webkit-filter: blur(5px);

Do note this is not supported in IE. IE had an older property that worked up to IE8, but it doesn't work from IE9+

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
David Mulder
  • 26,123
  • 9
  • 51
  • 114
-2

I tried below Demo: Working Demo

Using JQuery:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});
Vikrant
  • 4,920
  • 17
  • 48
  • 72