Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 23, 2016 at 12:07 pm #690637
    DavyE

    So I tried adding a blur effect to the Fullscreen slider when scrolling. It works, but scrolling on the page does not go smooth at all while this is active.

    I was wondering if anyone knew how to optimise it so it can blur and still go smooth. I suppose it has something to do with the extra .js being loaded, perhaps some conflict or too heavy, but what’s the alternative?

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var pxlCount = 0
$(window).on('scroll', function () {
    pxlCount = $(document).scrollTop()/30;
    $(".active-slide").css({"-webkit-filter": "blur("+pxlCount+"px)","-moz-filter": "blur("+pxlCount+"px)","filter": "blur("+pxlCount+"px)" })
});
</script>

    Thanks a lot to anyone knowing a solution!

    September 27, 2016 at 1:04 pm #692206
    Andy

    Hey DavyE,

    not sure what you want to achieve. Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Andy

    September 27, 2016 at 3:40 pm #692294
    DavyE

    Hello Andy,

    This is basically what I mean: https://jsfiddle.net/vduucu87/

    Blurring the background image (from the Fullscreen Slider) when scrolling. The more you scroll, the more it blurs. It gets sharp again when returning to the top.

    September 27, 2016 at 3:42 pm #692297
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately?

    Cheers!
    Yigit

    September 27, 2016 at 3:50 pm #692304
    DavyE

    Sure, thanks. See the details below.

    September 27, 2016 at 3:59 pm #692310
    Yigit

    Hi!

    I edited your slider and gave it a custom CSS class and then added following code to functions.php file in Appearance > Editor 

    function avia_custom_blurry(){
?>
 <script>
jQuery(window).on('scroll', function () {
    var pixs = jQuery(document).scrollTop()
    pixs = pixs / 100;
    jQuery(".blurry-slider li").css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)" })     
});
 </script>
<?php
}
add_action('wp_footer', 'avia_custom_blurry');

    Please review your homepage now :)

    Cheers!
    Yigit

    September 28, 2016 at 9:11 am #692523
    DavyE

    Perfect, this is exactly what I was looking for! Thank you so much!

    I’ll try it out on the live site.

    EDIT: Tried it, works perfectly! Thanks again for your help.

    • This reply was modified 8 years, 2 months ago by DavyE.
    September 28, 2016 at 10:04 am #692539
    DavyE

    I’m back. Was testing something on tablet and noticed a drop in performance and rather undesirable results for this blur effect. Is there a way to disable this for mobile devices?

    September 28, 2016 at 1:05 pm #692575
    Yigit

    Hi,

    Please try changing the code to following one

    function avia_custom_blurry(){
if(!wp_is_mobile()){
?>
 <script>
jQuery(window).on('scroll', function () {
    var pixs = jQuery(document).scrollTop()
    pixs = pixs / 100;
    jQuery(".blurry-slider li").css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)" })     
});
 </script>
<?php
}
}
add_action('wp_footer', 'avia_custom_blurry');

    Best regards,
    Yigit

    September 28, 2016 at 1:26 pm #692597
    DavyE

    Supertastic and big thanks once more! :)

    September 28, 2016 at 1:29 pm #692601
    Yigit

    Hi!

    You are welcome :)
    Let us know if you have any other questions or issues!

    Regards,
    Yigit

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Fullscreen slider blur on scroll’ is closed to new replies.