fullpage.js добавить слайдер fadeIn effect

Question

Я никогда не работал с fullpage.js. Я много пробовал с эффектом перехода слайдера. прокрутка в порядке с эффектом слайдера. его перемещение влево-вправо с помощью прокрутки, но не может добавить эффект fadeIn и fadeOut.

сайт Пример: http://www.mi.com/shouhuan/#clock Мой код: http://jewel-mahmud.com/demo-site/index.html

var slideIndex = 1, 
    sliding  = false; 

$(document).ready(function() { 

    $('#fullpage').fullpage({ 

     sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 
     scrollingSpeed:1000, 
     css3: true, 

     onLeave: function(index, nextIndex, direction) { 

      if(index == 2 && !sliding) { 

       if(direction == 'down' && slideIndex < 3) { 

        sliding = true; 
        $.fn.fullpage.moveSlideRight(); 
        slideIndex++; 
        return false; 

       } else if(direction == 'up' && slideIndex > 1) { 
        sliding = true; 
        $.fn.fullpage.moveSlideLeft(); 
        slideIndex--; 
        return false; 
       } 

      } else if(sliding) { 

       return false; 

      } 

     }, 

     afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { 

      sliding = false; 

     } 

    }); 
}); 

Answer 1

Эти страницы говорят о добавлении эффекта замирания:

• Using fade-in effect with fullpage.js slides
• How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery

В основном это вопрос с использованием событий fullpage.js slide для запуска анимации jQuery.

---

This jsfiddle похоже делает, что вы хотите (используя разделы).

Похоже, есть два способа сделать это, и это зависит от того, что вы пытаетесь оживить. fullpage.js имеет два вида встроенных в него видов: .section и .slide, причем слайды являются дочерними разделами, и у них разные обратные вызовы. В примерах используются слайды, но вы используете разделы, поэтому я думаю, что здесь возникает путаница. Преобразование в эффект затухания требует подключения к правильным обратным вызовам и применения правильных анимаций (которые отличаются между разделами и слайдами).

Answer 2

Я использую что-то легкое и более эффективное для меня.

onLeave: function(index, nextIndex, direction) { 
     if(index == 2 && direction == 'down'){ 
      $('#slide1').fadeOut(700); 
      $('#slide2').fadeIn(700); 
     } 

     if(index == 3 && direction == 'down'){ 
      $('#slide2').fadeOut(700); 
      $('#slide3').fadeIn(700); 
     } 
    }, 

    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { 
     sliding = false; 
    }, 

но проблема в том, что я не могу зафиксировать свиток при его скольжении. Я пробовал сэр. Но я не могу настроить его.

Answer 3

взято с this answer. Хотя далеко не идеальный, поскольку определенная скорость прокрутки в fullpage.js не будет действовать здесь, и вы должны определить ее в CSS. Кроме того, он будет работать только для секций, а не для горизонтальных слайдов.

Просто добавьте следующий CSS, чтобы переопределить стили fullpage.js.

.section { 
    text-align: center; 
} 

.fullpage-wrapper { 
    width: 100%!important; 
    transform: none!important; 
} 

.fp-section { 
    width: 100%!important; 
    position: absolute; 
    left: 0; 
    top: 0; 
    visibility: hidden; 
    opacity: 0; 
    z-index: 0; 
    transition: all .7s ease-in-out; 
} 

.fp-section.active { 
    visibility: visible; 
    opacity: 1; 
    z-index: 1; 
} 

Update

Теперь можно сделать это через a fullpage.js extension.