FullPage.js 在桌面上的淡入淡出效果，在较小的设备上禁用并获得默认滚动

Posted 2023-05-09

【中文标题】FullPage.js 在桌面上的淡入淡出效果，在较小的设备上禁用并获得默认滚动

【英文标题】：FullPage.js fade effect on desktop, disable and get default scroll on smaller devices

【发布时间】：2018-04-03 00:41:26

【问题描述】：

我正在使用 SliceJack FullPage.js fade effect code snippet（第一个）在我的网站上获得过渡效果，效果很好，我对它们在桌面上很满意（把它们放到我的主 css 中）。

我想在 Ipad 和移动设备等较小的设备上禁用效果，这样我就可以滚动默认（正常）而没有过渡。

我禁用效果的唯一选择是删除代码 sn-p（第一个），但我也会在桌面上失去这些效果。

我在 jQuery.fullPage.js 脚本中启用了 976 像素的响应宽度。

是否可以在移动设备和 iPad 上清空我在 CSS（用于过渡）中添加的这 3 个类？

/*Fade in effect & one pager*/
.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;

/* Remove transition when website is still loading */
body display:none
body[class*="fp-viewing-"] display:block

【问题讨论】：

此代码在滚动时淡出第一部分，以下部分不会淡入。

【参考方案1】：

如果您正在使用fullPage.js 和fadingEffect extension，那么您可以使用fullPage.js 回调和函数以正确的方式解决这个问题：

$('#fullpage').fullPage(
    responsiveWidth: 976,
    afterResponsive: function(isResponsive)
        if(isResponsive)
            $.fn.fullpage.fadingEffect.turnOff();
        
        else
            $.fn.fullpage.fadingEffect.turnOn();
        
    
);