ScrollMagic和GSAP仅在手机上

ScrollMagic and GSAP on mobile only

本文关键字：手机 GSAP ScrollMagic      更新时间：2023-09-26

您可以从我的codepen中看到，我的网站上有一个徽标，当您向下滚动页面时它会淡出，这是在某个触发器被触发后触发的。这是我想要的工作方式，除了我只希望它在移动浏览器和移动屏幕尺寸上启动。

我正在使用scrollmagic.js。

有谁知道如何设置这个效果将只适用于手机和屏幕尺寸<768 px。

我对JS相当陌生，所以我会欣赏婴儿的步骤。

感谢
// When the DOM is ready
$(window).on('load', function() {
  // Init ScrollMagic Controller
  var scrollMagicController = new ScrollMagic();
  // Create Animation for 0.5s
  var tween = TweenMax.to('#animation', 0.5, {
    opacity: 0  
  });
  // Create the Scene and trigger when visible
  var scene = new ScrollScene({
    triggerElement: '.scene',
    offset: 150 /* offset the trigger 150px below #scene's top */  
  })
  .setTween(tween)
  .addTo(scrollMagicController);
  // Add debug indicators fixed on right side
   scene.addIndicators();
});

依赖于我现在拥有的

我会将scrollMagic块包装在if语句上，该语句检查它是否是触摸设备，或者它是否具有最小值，这取决于您感兴趣的行为。

与Modernzr: 

var agent = navigator.userAgent.toLowerCase();
var onlyTaps = Modernizr.touch || 
(agent.match(/(iphone|ipod|ipad)/) ||
agent.match(/(android)/)  || 
agent.match(/(iemobile)/) || 
agent.match(/iphone/i) || 
agent.match(/ipad/i) || 
agent.match(/ipod/i) || 
agent.match(/blackberry/i) || 
agent.match(/bada/i));
if (onlyTaps) {
        //magicScroll block here
    } else {
        //something else here
    }

现在，如果你只对设备宽度感兴趣，那么你可以使用screen.width:

if (screen.width < 480) {
        //magicScroll block here
    } else {
        //something else here
    }

唯一需要注意的是，screen.width在一些高密度设备上可能返回真实像素，也可能不返回。

相关文章：