仅限移动设备上的 ScrollMagic 和 GSAP

Question

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

我也在使用 scrollmagic.js。

有谁知道如何设置这个效果只适用于移动设备和

我对 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();

});

Codepen of what I currently have

Answer 1

我会将 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 在某些高密度设备上可能会返回真实像素，也可能不返回。它可以在 iPhone 和配备视网膜显示屏的 Macbook Pro 上正常运行。