一场ScrollMagic触发多个元素
ScrollMagic是一个JavaScript库，用于在滚动事件中触发多个元素的动画效果。它提供了一种简单而强大的方式来控制页面滚动时元素的动画行为。
ScrollMagic的主要特点包括：
- 触发多个元素：ScrollMagic可以同时触发多个元素的动画效果，这些元素可以是页面上的任何元素，如文本、图像、视频等。
- 自定义触发时机：通过ScrollMagic，可以根据滚动事件的位置、滚动方向、滚动速度等自定义触发动画的时机和条件。这使得开发者可以根据具体需求来控制元素的动画效果。
- 强大的动画效果：ScrollMagic支持各种动画效果，包括淡入淡出、移动、缩放、旋转等。开发者可以根据需要选择合适的动画效果，使页面更加生动有趣。
- 响应式设计：ScrollMagic可以根据不同的设备和屏幕尺寸自动调整动画效果，以适应不同的浏览器和设备。
ScrollMagic的应用场景包括但不限于：
- 网页设计：ScrollMagic可以用于创建各种吸引人的网页设计效果，如滚动动画、视差效果等，提升用户体验。
- 幻灯片展示：ScrollMagic可以用于创建交互式的幻灯片展示，通过滚动触发不同的幻灯片切换效果。
- 教育培训：ScrollMagic可以用于创建交互式的教育培训页面，通过滚动触发不同的教学内容展示。
- 商品展示：ScrollMagic可以用于创建各种商品展示页面，通过滚动触发不同的商品介绍和特效展示。
腾讯云提供了一系列与云计算相关的产品，其中与ScrollMagic相关的产品包括：
- 腾讯云CDN（内容分发网络）：腾讯云CDN可以加速网页的加载速度，提供更好的用户体验，适用于ScrollMagic等滚动触发动画的应用场景。产品介绍链接：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器（CVM）：腾讯云云服务器提供高性能、可扩展的计算资源，适用于部署ScrollMagic等滚动触发动画的应用。产品介绍链接：https://cloud.tencent.com/product/cvm
请注意，以上只是腾讯云提供的一些相关产品，其他云计算品牌商也提供类似的产品和服务。
相关·内容
我是scrollmagic的新手，我希望在页面中多次使用单个类在它进入视图时进行动画处理。这个是可能的吗？
欢迎任何指导者。
$(function() {
controller = new ScrollMagic();
var tween5 = TweenMax.to(".animate", 0.5,{scale: 1.02,
backgroundColor: 'rgb(255, 39, 46)'
});
var scene5 = new ScrollScene({
duration: 200,
浏览 6提问于2015-01-31得票数 6
1回答
我在一个教程的基础上做了一个非常简单的ScrollMagic站点：
如果您查看源代码，那么在最后面，有一行：
triggerElement: "#pinned-trigger1",
duration: 2000,
triggerHook:"onLeave"
我不明白“扳机钩:离开”这句话。
何时触发此onLeave事件？
在过去的两天里，我一直在ScrollMagic文档和参考站点野营，试图弄清楚triggerElement和Hook是如何工作的，以及onLeave、onEnter、onCenter等事件是什么时候打来的.
Tks！
var controll
浏览 1提问于2015-10-21得票数 0
1回答
我在实验视差和滚动魔法。在来自的视差示例中，我试图在第一个视差部分制作动画内容。
这是。
我无法让letter A在#box上移动我想要的东西。我曾经尝试添加一个边界框，并将其用作triggerElement，但这不起作用。
在向下滚动时，它应该向下移动150 On并淡出。现在，它正在使用"#parallax1"作为它的triggerElement，当它到达该部分的底部时，它就会逐渐消失。我要它在那部分的底部之前消失。我怎么才能让它这么做？
我做错了什么？
//////////////////////////////////////////////////////
//////
浏览 2提问于2015-06-14得票数 3
回答已采纳
1回答
运行在TweenMax之前的ScrollMagic
在使用TweenMax和ScrollMagic滚动页面时，我试图使页眉缩小，但是动画不需要等待滚动即可触发。
这是我的代码：
$(document).ready(function(){
var header = $('header')
//init the controller
var controller = new ScrollMagic.Controller();
var tween = TweenMax.to(header ,1 ,{height: 100});
var s
浏览 0提问于2016-07-07得票数 1
回答已采纳
2回答
我有以下代码
<div class="header">
<div class="one_cont">Div one!</div>
</div>
<div class="project" id="trigger1">
<div class="text" id="anim1">Div two!</div>
</div>
<div class="project" id=&
浏览 5提问于2016-06-10得票数 0
回答已采纳
我的scrollMagic插件有一个小问题。我正在尝试制作简单的js，它运行得很好，但是当我跟随到另一个页面时--这里出现了一个错误--我无法理解：
18:27:48:554 (ScrollMagic.Scene) -> ERROR: Element defined in option "triggerElement" was not found: .my-element
我知道在这个页面上插件找不到这个元素，但是它不应该是这样的。我的代码(我也在使用TweenMax)：
var titleParallaxScene = new ScrollMagic.Scene({
浏览 2提问于2019-10-01得票数 0
回答已采纳
我试图将使用jquery获得的DOM元素传递到setClassToggle(element, class)中，但我一直得到这个错误。我在这里错过了什么？
(ScrollMagic.Scene) ->错误调用方法‘setClassToggle()：提供无效元素。
<div class="grid-item" data-parallax="bouble">
<div class="container quote start" id="first">
浏览 4提问于2016-06-21得票数 0
2回答
通过滚动触发CSS关键帧动画
、、、、
假设我有一个带有动画的元素：
#element {
animation: Fade 3s linear 1s forwards;
}
@keyframes Fade {
/* do stuff */
}
如何才能仅在用户向下滚动时触发此动画？Vanilla JS，jQuery，ScrollMagic，GSAP/TweenMax，随便你怎么做。
添加动画属性本身会触发该效果吗？因此，用户滚动到某个点/元素，然后我应用如下内容：$('#element').css('animation', 'Fade 3s linear 1s forwards
浏览 2提问于2016-01-23得票数 4
回答已采纳
通常，如果结帐表单上有错误，WooCommerce会滚动到.form.checkout。我希望它停止，因为它以某种方式干扰了ScrollMagic.js。 如果我没有将ScrollMagic.js排入队列，一切都会正常工作，但是启用了ScrollMagic.js后，页面只会稍微跳到顶部。 我试着使用$(document.body).on('checkout_error', function () { $( 'html, body' ).stop(); }，但它不起作用。 如果我使用 $(document.body).on('checkout_error
浏览 14提问于2019-03-12得票数 3
回答已采纳
我尝试使用scrollmagic的"setPin“方法使元素在某个时刻变得粘滞。我制作了一个截屏视频来向你展示我的问题：，正如你所看到的，我已经在用scrollmagic操作标题部分(调整徽标的大小)。当蓝色条到达粘贴的标题部分时，我希望它也被粘贴，以便蓝色条始终可见。希望大家明白我的意思？！:)默认情况下，scrollmagics setpin方法在元素到达视口中心时触发。但是我想要当元素“接触”我粘贴的标题的下边框时触发。这是我到目前为止的代码：
jQuery(document).ready(function($){
var controller = new ScrollM
浏览 2提问于2017-05-04得票数 1
1回答
我最近已经开始使用ScrollMagic库了。当我尝试在我的程序中使用addIndicators插件时，它没有正常工作。触发指示器由一个非常小的蓝色滴答(与开始和结束指示相同)提供。我的代码如下。
HTML：
<body>
<div id="container">
<section id="landing">
</section>
<
浏览 2提问于2017-01-03得票数 0
回答已采纳
3回答
我想在用户向下滚动页面时隐藏我的站点标题(在ScrollMagic中很容易做到)-但我不确定是否也可以使用ScrollMagic来检测用户是否向上滚动，如果是的话，是否可以再次显示标题。
最重要的是，对于最初的滚动，我可以为主站点包装器设置一个简单的偏移量，但对于在页面滚动过程中随时可能发生的乱码，我不确定如何使用ScrollMagic的事件来实现这一点？
感谢您的帮助。
丹
浏览 1提问于2015-11-27得票数 2
1回答
我很难弄清楚ScrollMagic插件是否有一个不完整的函数。
我想要做的是，现在，当用户输入div“背景”时，它正确地使我左边的固定div透明，但我希望当用户离开时，左div返回，所以基本上，只有当左div在div“背景”中时，它才会有动画化。
--我认为问题在于，我使用Maxtween对其进行动画化，这会将不透明度设置为0，但不会将其更改回。
小提琴：
$(function(){
var theh= $( ".background" ).height();
console.log(theh);
浏览 2提问于2016-03-21得票数 0
我正试图用ScrollMagic在h1标记中动画化几个span元素。
目标是循环遍历每个h1 (第一个除外)，使用.msk类查找跨空间，并向其子类添加另一个类(. is -visible)。
我已经设置了每个循环，但是我不知道如何正确地将$(this)与另一个选择器组合起来。
我的代码如下所示：
$('h1:not(:first)').each(function() {
var msk = $(this).find('.msk span');
console.log(msk);
var h1Scene = new ScrollMagic.Scene({
浏览 0提问于2017-09-08得票数 0
回答已采纳
1回答
我正在尝试使用ScrollMagic库来使用"Section“效果，并且我使用ScrollMagic为每一个div应用一种颜色，但是它似乎不适用于ScrollMagic。所有框都变成白色Html：
<div class="box" data="box-1"></div>
<div class="box" data="box-2"></div>
<div class="box" data="box-3"><
浏览 2提问于2020-04-09得票数 0
回答已采纳
我有9张幻灯片，里面有3个元素，用Greensock和Scrollmagic制作动画。目前，页面非常长，如果我使用setPin()，所有的元素都会变得疯狂。
示例如下：
我想要的是，每当我滚动页面，我希望页面位置是相同的，只有动画应该继续工作。在3个元素被动画后，应该消失，其他3个元素位于相同的位置，并开始相同的动画。
是否可以固定每个容器并将滚动行为保留在页面中？
浏览 30提问于2017-08-22得票数 1
在我的一生中，我不能让一个简单的pin使用ScrollMagic工作。我不知道我做错了什么。我花了几个小时试图弄清楚，但我还是在这里
我的JS代码：
var controller = new ScrollMagic.Controller();
var pinIntroScene = new ScrollMagic.Scene({
triggerElement: '#intro',
triggerHook: 0
})
.setPin('#intro')
.addTo(controller);
我目前被困在一个点上，我所看到的都是介绍div。请帮帮
浏览 0提问于2019-09-28得票数 2
2回答
我是第一次使用ScrollMagic，到目前为止，我知道如何根据开始元素和持续时间来触发动画
不能设置结束触发器而不是持续时间吗？
var smcontroller = new ScrollMagic.Controller();
var smscene1 = new ScrollMagic.Scene({
triggerElement: "#products-box-1",
offset: 200, duration: 1600
})
.setTween(tweencan)
.addIndicators()
.addTo(smcontroller);
浏览 18提问于2016-08-06得票数 4
尝试让流星template.rendered在ScrollMagic上工作，这是我希望它能工作的代码。
if (Meteor.isClient) {
Meteor.startup(function () {
scrollMagicController = new ScrollMagic();
Template.StartAnimation.onRendered({
// Create Animation for 0.5s
animation: function () {
var tween = TweenMax
浏览 1提问于2015-06-16得票数 5
1回答
最近我浏览了ScrollMagic演示网站。它显示了魔杖运动带来的精灵尘埃闪闪发光的效果。
如何使用skrollr插件实现这种效果？
请在这一点上给我指点。
是参考链接
浏览 6提问于2015-05-27得票数 0
1回答
这是我网站的大致结构：
<header>
<section1>
<section2>
<section3>
<footer>
我正在使用一个ScrollMagic场景来钉我的头，直到section2到达窗口的顶部。
为此，我将场景的持续时间设置为标题的高度+ section1高度。
问题是，ScrollMagic在我的标题周围创建了一个div元素，它的填充底部正好是这个持续时间。
但我不想要那个垫子。我希望标题就在section1的顶部，一旦我开始滚动，就好像它是固定的--但直到我到达第2节为止。在第2节到达窗口顶部(减去标题高度)的
浏览 4提问于2015-03-26得票数 4
回答已采纳
2回答
我有一个使用jQuery和ScrollMagic的网站。当用户滚动到特定元素时，ScrollMagic会捕获该元素并使用TweenMax触发动画。
在jQuery中，代码如下所示
var scene = new ScrollScene({
triggerElement: '#animation_start'
}).setTween(TweenMax.from('#demo', 0.5 ,{opacity:0}));
controller.addScene([scene]);
在该网站的新版本中，页面中有一部分包含了更复杂的动画，可以通过AngularJ
浏览 12提问于2015-02-12得票数 0
我试图在react中使用ScrollMagic & gsap库，一切都很好，直到我尝试构建我的代码，我尝试了我可以在网络上找到的所有导入解决方案，但它的行为似乎不一样。
我创建了一个卡片列表，当到达某个部分时，它水平滚动，在dev版本上，它的行为完全是这样的，但是当我在生产版本(构建后)时，它以对角线方式滚动。
下面是我的一些代码，以及我如何安装库：
安装gsap：
npm i gsap
安装滚动魔法：
npm i scrollmagic
反应中的我的代码：
import React, { Component } from 'react';
import ReactDO
浏览 2提问于2020-03-07得票数 0
回答已采纳
因此，我一直将ScrollMagic.js与GSAP.js结合使用，并在向下滚动时使用.setClassToggle作为侧导航活动状态。
它添加'active‘类，但不删除前一个类，直到您再次向上滚动，然后它删除它。但是这个演示展示了两种方式的切换。这是我的密码：
$(function () {
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({triggerElement: "#Home"})
.setClassToggle(".s
浏览 1提问于2016-09-17得票数 3
回答已采纳
我想知道，下面的代码对于以所需的方式使用ScrollMagic是否正确。我试着用这个方法来固定元素，但是它不起作用。
Javascript:
var controller = new ScrollMagic.Controller();
$('.caption, .backcap').each(function(){
var tween= TweenMax.from($(this), 1, {autoAlpha:0,x:'+=30'})
var scene = new ScrollMagic.Scene({
triggerElement:(this
浏览 5提问于2016-06-24得票数 0
回答已采纳
1回答
我正在努力弄清楚如何将TimelineMax与滚动魔法结合使用。这个问题很容易解释。
我有类似的DOM元素，就像粒子必须移动得比滚动的速度慢。
第一个实现正在工作(没有时间)
var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
$particles.each(function() {
var tween = TweenMax.to($(this), 1, { y: -100, ease: Linear.easeNone });
var scene
浏览 4提问于2017-03-31得票数 5
回答已采纳
我有一个简单的问题：
如何正确使用角-cli应用程序，ScrollMagic和Gsap？
我所做的：
npm install ScrollMagic
npm install gsap
中的角-cli.json：
"scripts": [
"../node_modules/gsap/src/uncompressed/tweenmax.js",
"../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
"../node_modules/scrol
浏览 1提问于2017-07-17得票数 4
回答已采纳
我在试着让svgmin在我的档案里工作。这是我当前的配置：
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var minify = require('gulp-minify');
var uglify = require('gulp-uglify');
var pump = r
浏览 0提问于2016-09-29得票数 0
回答已采纳
我正在为一个项目使用ScrollMagic库。
如何在同一触发场景下设置多个setClassToggle？
我的代码：
// move tree 1 to the left
var Waldscene01 = new ScrollMagic.Scene ({
triggerElement: '.scene01-wald',
triggerHook: 0,
offset: 600,
duration: 1000
})
.setClassToggle('.scene01-baum1', 'translateX')
浏览 4提问于2020-04-12得票数 1
我正在用AngularCLI (webpack版)开发一个Angular2应用。我有一个第三方插件(ScrollMagic)，它本身就有自己的一组可选插件。我已经安装了ScrollMagic代码库，它位于node_modules中。我可以使用以下语法将ScrollMagic加载到我的页面中：
let ScrollMagic = require("ScrollMagic");
这似乎可以连接到node_modules并加载ScrollMagic，这样我就可以让第三方插件工作。
ScrollMagic有一个自己的用于调试的插件(ScrollMagic/plugins/debug.a
浏览 12提问于2016-09-21得票数 0
回答已采纳
我需要添加速度插件的scrollMagic到我的npm库。
package.json
{
"name": "library",
"version": "1.0.10",
"description": "blabla",
"main": "index.js",
"dependencies": {
"shortid": "2.x",
"jquery": "2.x&#
浏览 4提问于2016-04-04得票数 2
回答已采纳
我正在尝试让ScrollMagic与ES2015导入和反应一起工作。我得到了这个错误：
ERROR in ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Cannot resolve module 'TimelineMax' in /Users/dillonraphael/Desktop/marbleshark_landingpage/node_modules/scrollmagic/scrollmagic/uncompressed/plugi
浏览 5提问于2016-04-26得票数 3
例子滚动魔术模块，但它也发生在其他人。我怀疑这是为了巴贝尔但不确定。
我们怎样才能复制这个bug?
Git克隆项目名称
安装：
- npm install gsap --save-dev
- bower install scrollmagic --save-dev
添加文本行config.yml：
- "node\_modules/gsap/src/uncompressed/TweenMax.js"
- "bower\_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.
浏览 2提问于2016-10-27得票数 1
1回答
我想在nuxtjs中使用滚动魔法。
我通过npm安装了滚动魔术。
npm install scrollmagic
在我的nuxt.config.js文件中我添加了
build: {
vendor: ['scrollmagic']
},
在我的页面/index.vue文件中，我只是导入了它。
import ScrollMagic from 'scrollmagic'
但这只会导致这个错误。
vue-路由器未能解决异步组件默认值: C:\pathto\node_modules\scrollmagic\scrollmagic\uncompressed\Scr
浏览 4提问于2017-12-16得票数 3
回答已采纳
我正在尝试集成魔幻插件与角CLI。但是，我得到了这个错误：
找不到./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js模块:错误:无法解析'/Users/../project/node_modules/ScrollMagic/scrollmagic/minified/plugins‘中的“TweenMax”
我已经使用npm安装了GSAP和滚动魔法库：
npm install gsap
npm install scrollmagic
.angular-cli.json
"scripts
浏览 2提问于2017-09-11得票数 4
回答已采纳
1回答
我对GSAP非常陌生，我尝试在一个场景中做多条线，但是不知道为什么我最后做了3个这样的场景。
// init controller
var controller = new ScrollMagic.Controller();
// build scene
var scene1 = new ScrollMagic.Scene({
triggerElement: "#trigger1"
})
.setTwe
浏览 1提问于2018-04-20得票数 5
回答已采纳
2回答
-I正在使用react框架。(create-react-app)和ScrollMagic库，我正在尝试在reactjs框架中实现scrollmagic库。我无法导入以下脚本。
我已经导入了scrollmagic，如下
import * as ScrollMagic from 'scrollmagic'
但我无法使用此功能->setTween()，因为他们无法访问。
以下是错误日志。
15:41:01:381 (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'anima
浏览 3提问于2018-06-18得票数 2
1回答
我已经包含了scrollmagic NPM包，从ScrollMagic文档中我得到了这一点；
“要访问这个扩展，请包括plugins/调试器/addIndicators.js。”
如何将指标加载到我的项目中？
这是我的代码：
import ScrollMagic from 'scrollmagic'
var controller = new ScrollMagic.Controller()
var scene = new ScrollMagic.Scene({/*ScrollMagic code inside here*/})
.addIndicators({
浏览 2提问于2016-07-08得票数 2
我在我的网站上使用ScrollMagic，我希望它能像那样工作
我的问题是，在最初的装载后，不同的集装箱是重叠的。在我完全向下滚动并再次向上滚动之后，它工作得很好。
为了理解我的意思，我创建了一个。
这是我的JS：
jQuery(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
.fromTo("sect
浏览 1提问于2017-11-04得票数 1
回答已采纳
我想播放和停止音频时，进入/离开一个场景与ScrollMagic.js。它在Chrome中抛出了“秘密(承诺)DOMException”。有什么问题吗？
我的html结构如下所示。我想在使用ScrollMagic.js输入每一张幻灯片时自动播放音频。
<div class="slide" id="slide-0">
<div class="trigger"></div>
<audio class="audio" src="audio/audio01.mp3"
浏览 1提问于2019-03-24得票数 1
1回答
我刚开始接触ScrollMagic，所以不确定是否有什么明显的东西让我忽略了。
我已经设置了一个，它说明了我想要实现的目标，还有一个，它几乎可以实现我想要的结果，除了一个巨大的差距，我似乎无法消除。
本质上看，有3张幻灯片是堆叠在一起的。当用户滚动时，幻灯片一个接一个地过渡到显示下面的一个.
当滚动通过最后的幻灯片时，页面上的其余内容应该向上滚动，就像它附在最后一张幻灯片的底部一样，并且从那时起应该像普通页面一样在功能上滚动。
目前，包含所有幻灯片的容器透明地与主体内容的其余部分重叠，直到最后一张幻灯片从视口顶部消失，并且是ScrollMagic在这样做。
代码页中的粉红条旨在显示幻灯片容器底
浏览 2提问于2016-04-06得票数 1
我目前正在努力让ScrollMagic在Angular 7上完全工作，我已经安装了GSAP和ScrollMagic，但是为了让ScrollMagic工作，它还需要animation.gsap.js插件。
我已经导入了所有的东西，并且所有的导入都在工作，但是animation.gsap.js仍然找不到GSAP动画库。每次我尝试ng服务时，我得到错误:模块找不到:错误:无法解析'TimelineMax‘和模块找不到:错误:无法解析'TweenMax’。
我读过关于人们遇到的相同问题，但这是在Angular 2中，一些事情发生了变化，我没有得到与那些人相同的结果。
但到目前为止，我已
浏览 0提问于2019-04-11得票数 1
为什么的最新版本在下面给了我这个错误？
未定义的ReferenceError: ScrollScene未定义
这是我遵循这个的测试代码
$(function() {
// Init Controller
var scrollMagicController = new ScrollMagic();
// Create Animation for 0.5s
var tween = TweenMax.to('#animation', 0.5, {
backgroundColor: 'rgb(255, 39, 46)&#
浏览 13提问于2017-02-12得票数 1
回答已采纳
1回答
我对scrollmagic有意见。我希望能够在桌面上按顺序触发所有3个动画，但在较小的视口上，当用户滚动时，会逐个触发它们。
如果同时激活这两组触发器，则会产生一种令人不快的体验，即所有元素都会动画两次
我已经在下面的代码中展示了这个问题是如何出现的：
简而言之，我只希望在桌面视图上发生这种情况
var sceneEntire = new ScrollMagic.Scene({
triggerElement: "#triggerall",
reverse: false
})
.setTween(entire) // trigger a TweenMax.to tween
.a
浏览 8提问于2018-01-07得票数 0
1回答
我正在使用ScrollMagic的分区擦拭在滚动上淡出一个面板到下一个面板，这工作得很完美，但我想知道是否有可能在滚动时捕捉到下一个面板(现在如果你停止滚动，你就会在两个面板之间淡入一半)。 我知道我可以使用fullpage.js，因为它们提供了确切的效果，但我不想在我已经加载了大量javascript的网站上添加另一个库，我想知道我是否可以用ScrollMagic获得同样的效果。 var controller = new ScrollMagic.Controller();
var wipeAnimation1 = new TimelineMax()
.fromTo(".pan
浏览 18提问于2020-01-31得票数 0
我正在使用angular 6和webpack 4，以便从scrollmagic和"TimelineMax"，"TweenMax"，"TweenLite“等所有补丁中动态导入特定的"animation.gsap”。 然而，尽管路径是正确的，但它无法找到它们，我通过并能够找到它们，以及成功地动态导入ScrollMagic。 我是不是漏掉了什么，有没有人能帮我指引一下，看看我是不是漏掉了什么？ 这是我的Webpack配置： config.mode = 'development';
config.target = 'web&
浏览 33提问于2020-07-02得票数 0
回答已采纳
我有一个Angular 5应用程序，我目前正在使用GreenSock.js库和ScrollMagic.js实现滚动动画。一个非常重要的文件，由于某种原因，它不允许我在没有错误的情况下将其包含在项目中，名为
scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js
当我尝试将此文件导入到项目中时，收到一个错误列表-
./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can&#
浏览 0提问于2018-05-04得票数 0
我有一个IntersectionObserver，它观察一个img，当根设置为null (viewport)时，它工作得非常好。但是，当我将根元素设置为另一个img元素时，观察者无法检测到两者之间的交集。经过几个小时的调试，我决定向社区寻求帮助。
代码可以从公共回购中找到。
为了能见度，我要在这里通过它：
<template>
<section
id="scene"
class="flex flex-col content-center justify-center items-center mt-16"
style
浏览 0提问于2019-07-09得票数 3
回答已采纳
我想让服务工作者在我的角度供电的网站，但它不注册自己，如果使用滚动魔术。如果我禁用ScrollMagic控制的动画，它就会注册得很好。
我在角-cli.json中导入了GSAP，ScrollMagic：
"scripts": [
"../node_modules/gsap/src/uncompressed/TweenMax.js",
"../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
"../node_module
浏览 1提问于2018-04-25得票数 0
回答已采纳
1回答
滚动容器高度设置为小于窗口高度
、、、、
我试着用Dennis Gaebel的这个奇妙的例子来使用sprites和ScrollMagic来制作动画。我的问题是如何使场景(动画发生在滚动上)达到一定的高度，而不是屏幕的100%？如果我将场景设置为高度: 50%；例如，我在场景下面得到一个很大的空白区域。任何帮助都将不胜感激。
// @explanation
// define the pin once in the target scene, but
// don't attach animation within same scene; instead
// create a scene for every class a
浏览 11提问于2020-02-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
