Can Smooth Scroll To A Component Cause Other Components To Blur In Jquery/css?

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 sto

Solution 1:

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/

Solution 2:

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'); 

Solution 3:

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;
            }
        }
    });
});