javascript - Fullpage js模糊水平幻灯片之间的过渡

Question

有谁知道如何编辑下面的代码，使水平幻灯片之间的过渡更像模糊而不是淡入淡出？当你在水平幻灯片之间滚动时，我试图让它感觉你正在离开一个“房间”并进入另一个“房间”，所以模糊效果或任何类似的效果比淡入效果更好。参见 this代码笔。

var SCROLLING_SPEED = 200;

$(document).ready(function() {
    $('#fullpage').fullpage({
        verticalCentered: false,
        anchors:['section1'],
      
        // fullPage.js settings for fading-in slides insead of scrolling them.
        // Disable or nullify scrolling of slides
   
        
        // Hide the slides container before the next slide loads
        onSlideLeave: function(anchorLink, index, slideIndex, direction) {
            $.fn.fullpage.setScrollingSpeed(0);
            $('.fp-section').find('.fp-slidesContainer').hide();
        },
      
        // Display the slides container by fading it in after the next slide has been loaded.
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
            $('.fp-section').find('.fp-slidesContainer').fadeIn(800);
            $.fn.fullpage.setScrollingSpeed(SCROLLING_SPEED);
        }
        
     });
});

$(document).ready(function(){

      $(".button1").click(function() {
      $.fn.fullpage.moveTo('section1', 1); 
      $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
    });
    
    $(".button2").click(function() {
      $.fn.fullpage.moveTo('section1', 2);
      $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
    });
    
    $(".button3").click(function() {
      $.fn.fullpage.moveTo('section1', 3);
      $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
    });


});

    /* Style for our header texts
    * --------------------------------------- */
    h1{
        font-size: 5em;
        font-family: arial,helvetica;
        color: #fff;
        margin:0;
        padding:0;
    }

    /* Centered texts in each section
    * --------------------------------------- */
    .section{
        text-align:center;
    }


    /* Backgrounds will cover all the section
    * --------------------------------------- */
    .section{
        background-size: cover;
    }

    .slide{
        background-size: cover;
    }


    /*Adding background for the slides
    * --------------------------------------- */
    #slide1{
        background-image: url(https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/bg2.jpg);
        padding: 6% 0 0 0;
    }
    #slide2, #slide3, #slide4{
        background-image: url(https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/bg5.jpg);
        padding: 6% 0 0 0;
    }


    /* Bottom menu
    * --------------------------------------- */
    #infoMenu li a {
        color: #fff;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="fullpage">
    <div class="section" id="section1">
        <div class="slide" id="slide1">
        <h1>Index</h1>
        <button class="button1">
          Slide 1
        </button>
        <button class="button2">
          Slide 2
        </button>
        <button class="button3">
          Slide 3
        </button>
       </div>
        <div class="slide" id="slide2"><h1>First Slide</h1></div>
      <div class="slide" id="slide3"><h1>Second Slide</h1></div>
      <div class="slide" id="slide4"><h1>Third Slide</h1></div>
    </div>
</div>

Answer 1

你可以试试SVG filter沿横轴

在幻灯片 div 之前添加此 SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters">
  <defs>
    <filter id="blur">  <-- id is blur
      <feGaussianBlur in="SourceGraphic" stdDeviation="15,0" />
      <!-- 1st param is how much spread you need along the on X axis  -->
    </filter>
  </defs>
</svg>

<div class="slide" id="slide2"><h1>First Slide</h1></div>
<!-- others hidden -->

阅读更多关于 <feGaussianBlur> 的信息在 here

和脚本

onSlideLeave: function(anchorLink, index, slideIndex, direction) {
    $('.slide').css({
        webkitFilter:'url(#blur)', //blur is id of SVG filter elment
        filter:'url(#blur)'
    });
},


afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
  setTimeout(function(){
    $('.slide').css({
        webkitFilter:'none', //removes the filter
        filter:'none'
      })
  }, 200);
}