webpack中的Scrollmagic视频动画(BigCommerce)
webpack中的Scrollmagic视频动画是指在使用webpack构建项目时，通过引入Scrollmagic库来实现的视频动画效果。Scrollmagic是一个JavaScript库，用于在滚动页面时触发动画效果。
Scrollmagic的主要特点包括：
- 滚动触发：可以根据页面滚动的位置来触发动画效果，可以实现随着页面滚动而出现、消失或变化的动画效果。
- 多场景支持：可以创建多个场景，每个场景可以设置不同的触发条件和动画效果，可以实现复杂的交互效果。
- 强大的插件支持：Scrollmagic提供了丰富的插件，可以扩展其功能，例如可以使用插件来实现平滑滚动、响应式布局等功能。
- 兼容性良好：Scrollmagic支持主流浏览器，并且提供了移动设备的支持，可以在不同平台上实现一致的动画效果。
Scrollmagic的应用场景包括但不限于：
- 网页滚动动画：可以通过Scrollmagic实现网页滚动时的各种动画效果，例如元素的淡入淡出、移动、旋转等效果。
- 视频背景动画：可以将视频作为背景，并通过Scrollmagic实现视频的播放、暂停、音量控制等动画效果。
- 页面导航效果：可以根据页面滚动的位置来实现导航菜单的高亮切换，提升用户体验。
- 故事板动画：可以通过Scrollmagic实现故事板式的动画效果，让用户逐步浏览内容。
在腾讯云的产品中，可以使用腾讯云的云服务器（CVM）来部署和运行基于webpack和Scrollmagic的视频动画项目。腾讯云云服务器提供了高性能、可扩展的计算资源，可以满足项目的需求。您可以通过以下链接了解腾讯云云服务器的详细信息：腾讯云云服务器产品介绍
同时，腾讯云还提供了丰富的云计算产品和服务，可以满足各种需求，例如对象存储（COS）用于存储和管理视频文件，云数据库（CDB）用于存储和管理相关数据，内容分发网络（CDN）用于加速视频的传输等。您可以根据具体需求选择适合的产品。
相关·内容
为了使用，您需要加载animation.gsap.js插件。对于Webpack，您可以这样做(假设您使用了CommonJS语法并使用npm安装了所有东西)：
var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');
为了确保这确实有效，您必须在Webpack配置中添加一个别名，这样Webpack才能知道插件位于何处。
resolve: {
alias: {
'ScrollMagicG
浏览 1提问于2016-02-21得票数 14
回答已采纳
1回答
我有一个反应项目，我想使用滚动魔术与速度插件。下面是我在终端机上做的事情，我已经建立了一个react项目
npm install scrollmagic
npm install velocity-react
这就是我的src/App.js的样子
import React, { Component } from 'react';
import ScrollMagic from 'scrollmagic';
import Velocity from 'velocity-react';
class App extends Component {
浏览 1提问于2017-11-22得票数 0
1回答
我想创建一个滚动绑定动画，类似于此视频中显示的动画。我想在Javascript/CSS中这样做，这样我就可以在任何网站上实现它。 我一直在考虑使用Scrollmagic.com，但不确定这个库是否可行。 任何想法/线索都将不胜感激。 我正在尝试实现的动画: 1：https://youtu.be/0ITA_pwfzDE?t=15
浏览 14提问于2019-01-17得票数 0
回答已采纳
我正在尝试实现一个滚动魔术的视频动画。
期望的结果是，基于用户滚动位置播放视频。
export default function magic() {
//MAIN
var controller = new ScrollMagic.Controller();
// SceneOne animation
const $video = $('#soVideo');
let sceneOne = new ScrollMagic.Scene({
duration: 9000,
triggerElement: '#trigger1&
浏览 9提问于2020-05-10得票数 1
回答已采纳
我正在使用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
1回答
我想用ScrollMagic与GSAP和TweenMax一起制作基于滚动的动画。我以前在ScrollMagic上有过一些经验，它总是很好的工作。这一次，动画非常慢，debug.Indicators也是如此。
这是我的例子：
这是一个具有光滑动画的外国示例：
我用吐温来制作动画：
var controller = new ScrollMagic.Controller();
var scene1 = new ScrollMagic.Scene({
triggerElement: '.header-section',
duration: "100%"
浏览 5提问于2017-08-17得票数 2
回答已采纳
1回答
我正在使用ScrollMagic库和GreenSock动画平台来创建单页滚动动画。
以下是动画代码的示例：
// Initiate Scroll Magic
var controller = new ScrollMagic.Controller();
// This pins the main container for the duration of the animation
new ScrollMagic.Scene({
triggerElement: "#main", triggerHook: 'onLeave', duration:
浏览 0提问于2015-09-05得票数 1
这是一个代码箱：，我在这里使用React与GSAP和ScrollMagic。但是当我在本地主机上运行代码时，会出现一个错误：
animation.gsap.js:32 Uncaught Error: Cannot find module 'ScrollMagic'
at webpackMissingModule (animation.gsap.js:32)
at animation.gsap.js:32
at Object../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animat
浏览 21提问于2019-11-25得票数 0
2回答
我做一些greensock和scrollmagic动画。我将此动画放在一个名为scrollMgc的函数中。此动画将在窗口宽度大于800px时运行，并在调整窗口大小时停止。这就是我到目前为止写的代码
function scrollMgc(){
// Prepare the stage
TweenMax.set($('.animation-awards'), {y: 70});
// Make scrollmagic controller
var controller = new ScrollMagic.Controller();
//
浏览 0提问于2016-11-11得票数 0
1回答
所以我已经在我的网站上创建了一个平滑的滚动效果，效果很好，但我对Scrollmagic有一个问题。向下滚动时，我正在翻译元素，但它断断续续。很多。当我禁用我的平滑滚动脚本时，一切都恢复正常。 顺便说一句:我使用了Webpack和GSAP来制作动画。 我的猜测是Scrollmagic不知道动画，所以它使用的是结束值，而不是当前值。但是我不知道怎么解决这个问题 这是我的流畅卷轴： import { TweenLite } from 'gsap';
const html = document.documentElement;
const body = document.body;
浏览 49提问于2019-08-27得票数 0
回答已采纳
我正在用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
回答已采纳
我可以为我的React项目安装ScrollMagic和npm install scrollmagic。现在，我需要一种方法来安装以下插件，以使ScrollMagic与GSAP一起工作
plugins/动画.
提前感谢
浏览 0提问于2018-09-07得票数 0
Hey SO members, 我想和卷轴一起来回播放一段HTML5视频。该动画关于滚动量逐帧控制视频。 我用scrollMagic编写了(它是轻量级的，非常简单的)。嵌入的视频也是轻量级的(尝试丑陋/缩小后的视频效果相同)。 我面临的问题是，当你轻轻滚动时，动画看起来几乎不流畅。但当滚动“快速”时，就像许多帧被丢弃一样。例如，如果进度百分比从50%下降到75%，我猜这可能是正常的。但事实并非如此。控制台中显示的百分比显示百分比值平滑更新，某些帧不会绘制，结果是一个截断的动画。我希望它是平滑的，无论用户滚动有多快。有什么想法吗？ https://jsfiddle.net/yumigo/h7g
浏览 49提问于2020-09-21得票数 1
我试图在本地运行一个旧的BigCommerce站点，但是没有一个JavaScript在本地站点上工作。控制台似乎表明了Babel的问题。
这就是错误日志中的内容：
Error: Module build failed: TypeError: /Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/assets/js/theme/global/quick-search.js: Cannot read property 'has' of undefined
at resolvePath (/Users/li
浏览 12提问于2022-05-19得票数 0
回答已采纳
我使用的是带有ScrollMagic v2.0.7的GSAP v3。 我面临的问题是，在动画完成后，我向上滚动( reverse : false)，它正确地注册了我不想再次反向执行动画，但它创建了一个与场景持续时间相等的填充顶部： const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
triggerElement: "#responsive-divider",
duration: "100%",
triggerHook: 0,
浏览 54提问于2020-04-08得票数 0
我想知道，当你向下滚动时，动画只播放一次，而当你向上滚动时，没有动画。
var controller = new ScrollMagic.Controller();
var tween_1 = TweenMax.to('#obj_1', 0.5, {
left: '0%', delay: .1
});
var containerScene = new ScrollMagic.Scene({
triggerElement: '#scene_1',
offset: -100
})
.setTween(tween_1)
.a
浏览 1提问于2015-08-17得票数 3
如何将ScrollMagic的Greensock插件包含在我的ReactJS项目中？
ScrollMagic的作者制作了插件来合并像GreenSock和流速这样的库。当您将它们简单地包含在html文档的头部时，这些功能非常好，如下所示
<script type="text/javascript" src="js/lib/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="scrollmagic/uncompresse
浏览 0提问于2017-11-24得票数 4
回答已采纳
1回答
我使用GreenSock和ScrollMagic创建了一个非常好的动画，但是我不知道如何调整舞台/图形的初始位置(在用户触发动画之前)。目前，我正在调用容器元素上的.setPin方法，类为“stage”。这个stage元素位于一个更大的父容器(#how-it-works)中，它是动画的triggerElement：
var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000}) .setPin(".stage") .addTo(control
浏览 11提问于2016-09-07得票数 1
回答已采纳
TL；博士有没有人能用保龄球安装ScrollMagic + GSAP动画？
我有一个包含完整栈的网站(这意味着我正在使用bower进行前端依赖管理和gulp来构建这个网站。)我试着在上面使用动画。
其中一些动画以绿库为前提。因此，我的bower.json有以下内容：
"dependencies": {
"bootstrap-sass": "3.3.6",
"gsap": "GreenSock-JS#^1.18.2",
"scrollmagic": "2.0.5&#
浏览 4提问于2016-02-03得票数 3
回答已采纳
1回答
我是JS的新手，我正在努力学习更多关于名称空间的知识。
我正在用ES6重写一些动画任务，因为对移动和桌面动画使用不同的动画，所以我决定将移动和桌面动画放在它们自己的名称空间中。
然而，我正在努力在这个名称空间中创建scrollmagic控制器，这样我就可以对所有移动动画使用相同的控制器。
这是我的animation.js
export const controller = new ScrollMagic.Controller();
/**
* Mobile animations
*/
export const mobile = {
servicesHome: {
init
浏览 19提问于2017-07-04得票数 1
回答已采纳
我正在尝试使用ScrollMagic来控制一个TimelineMax，它可以移动乐透动画的播放头。
因此，当用户滚动时，动画相对于滚动的速度和方向播放。我已经很接近了，需要一点帮助才能把效果带回家。
首先，我包含了我的库
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenM
浏览 35提问于2019-10-25得票数 0
回答已采纳
1回答
更改滚动魔术上的HTML元素
、、、、
是滚动动画的一个很好的工具。
CSS，GSAP和速度动画工作伟大。
但是是否有可能改变滚动的HTML文本。
在卷轴上，圆半径在移动，同时也在移动。我想改变一个数字，应该是2和3，而‘年份’应该变成年的2和3的数字。它应该像卷轴上的预加载器。
这是可能的CSS显示和隐藏，但我想这样做与scrollMagic在scrollMagic。只是想知道这有可能。
代码必须在那里与小提琴，这就是为什么要把它。
var controller = new ScrollMagic.Controller();
var yearChange = new TimelineMax()
.fromTo(&
浏览 3提问于2016-11-18得票数 1
回答已采纳
我目前正在努力让ScrollMagic在Angular 7上完全工作，我已经安装了GSAP和ScrollMagic，但是为了让ScrollMagic工作，它还需要animation.gsap.js插件。
我已经导入了所有的东西，并且所有的导入都在工作，但是animation.gsap.js仍然找不到GSAP动画库。每次我尝试ng服务时，我得到错误:模块找不到:错误:无法解析'TimelineMax‘和模块找不到:错误:无法解析'TweenMax’。
我读过关于人们遇到的相同问题，但这是在Angular 2中，一些事情发生了变化，我没有得到与那些人相同的结果。
但到目前为止，我已
浏览 0提问于2019-04-11得票数 1
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
我想让服务工作者在我的角度供电的网站，但它不注册自己，如果使用滚动魔术。如果我禁用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回答
我试图触发我的图像显示动画为每一节滚动，我是这样做的GSAP + ScrollMagic。
问题是，我得到了一个错误，说吐温对象是无效的。
ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject
这就是我想在组件挂载时触发的动画代码：
useEffect(() => {
const scrollControler = new ScrollMagic.Controller();
const imageReveal = CSSRulePlugin.ge
浏览 3提问于2020-03-01得票数 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动画，而不是像这里这样将动画作为一个单独的部分：
应该有文本在那里，但它使这个动画成为一个新的部分，文本在底部。
代码：
gsap.registerPlugin(MotionPathPlugin);
const tween = gsap.timeline();
tween.to(".paper-plane", {
duration: 1,
ease: "power1.inOut",
motionPath: {
path: [
{x: 100, y: 0},
浏览 0提问于2021-01-26得票数 0
回答已采纳
这个 (转到负责/scroll路由的scrollExample文件夹)的目标是在滚动部分触发图像显示效果。
如何做动画：：
首先，我使用GSAP的CSSRulePlugin来获得我想要动画的伪元素。在那之后，我创建了一个时间线来放置吐温并编写动画属性。
现在谈到ScrollMagic，我首先创建了一个控制器，然后创建了一个场景。在场景中，我传递要触发动画的元素选择器以及持续时间(像素数量)。而最重要的部分是设置图层，这将被触发的章节卷轴。
componentDidMount() {
const imageReveal = CSSRulePlugin.getRule("
浏览 10提问于2020-03-06得票数 3
回答已采纳
我有一个ScrollMagic场景，上面有一堆动画。问题是控制器似乎无法识别场景。它滚动到下面的场景中。如何让带动画的场景暂停，直到动画结束？我尝试了持续时间的各种变量，但似乎都不起作用。 html： <div class="screen" id="scene4"><!-- does not pause, scrolls right past-->
<div id="pinned">
<div id="third" class="img">&
浏览 37提问于2020-01-31得票数 0
回答已采纳
使用下面的代码，我能够错开动画位置和淡入文本。但是我想要完成的是移动，淡入，，然后淡出，所有复制都在滚动结束时返回到0。所以搬家很正常。我只是想要相同的<p>标签淡入，然后返回到滚动结束。
// init controller to hold all commands/animations
const controller = new ScrollMagic.Controller({ addIndicators: true });
const tween1 = TweenMax
.staggerTo('#parallax p', 1, {
bottom
浏览 3提问于2017-07-03得票数 0
回答已采纳
1回答
我很难弄清楚ScrollMagic插件是否有一个不完整的函数。
我想要做的是，现在，当用户输入div“背景”时，它正确地使我左边的固定div透明，但我希望当用户离开时，左div返回，所以基本上，只有当左div在div“背景”中时，它才会有动画化。
--我认为问题在于，我使用Maxtween对其进行动画化，这会将不透明度设置为0，但不会将其更改回。
小提琴：
$(function(){
var theh= $( ".background" ).height();
console.log(theh);
浏览 2提问于2016-03-21得票数 0
我是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
我试图在滚动上创建简单的视差动画，一切都正常，但我想添加延迟，例如用户向下滚动，动画应该赶上他，换句话说，如果他向下滚动100px并停止，他应该看到动画如何赶上他。所以我有： <div class="container">
<img src="...">
</div> CSS： .container {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
le
浏览 103提问于2020-01-05得票数 0
回答已采纳
我现在拥有的
我正在使用jQuery和ScrollMagic (用GSAP插件)构建一个HTML/CSS/JS滚动时间线。我有基本的时间线功能工作，时间轴事件动画的页面向下滚动。
我想要添加的
我的问题是关于实现从中心垂直线到每一个时间轴事件的横线的最佳方法。理想情况下，水平线会像从中线上画出一样的动画，但是淡出也能工作。
我知道ScrollMagic有的能力，但我不确定是否有更有效的方法。例如，也许使用HTML5画布或者仅仅使用简单的图像对这个应用程序更有意义。我的目标是保持页面响应，所以这是值得考虑的事情。
如能就这一专题提出任何建议或示范，将不胜感激。
当前的“事件动画”的例子，它利用
浏览 0提问于2016-01-18得票数 0
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
回答已采纳
1回答
我正在尝试使用ScrollMagic的这个特定的动画
但是很难正确地加载文件。我正在尝试包括ScrollMagic、GSAP和GreenSock，但不知何故，ScrollMagic要求我以前加载GSAP，并且GSAP说主模块丢失了，并要求我先加载ScrollMagic。我正在使用jQuery进行异步操作，如下所示
$.getScript( "http://localhost/icons/gsap.js", function( data, textStatus, jqxhr ) {
$.getScript( "http://localhost/icons/scr
浏览 4提问于2015-04-30得票数 2
我有一个带有".imgPanel“类的多个类似部分的页面，我想在每次页面滚动到视图中时将相同的动画应用到每个部分。
我不想为每个动画创建一个新的场景，因为它们都是一样的。我知道有一种方法可以创建一个可变的场景(我希望这是正确的术语)，我希望有人能帮助我。
有人知道我将如何调整下面的代码来实现这一点吗？我确信，如果我在下面的代码中得到一个这样的例子，我将能够理解并再次使用这种技术。
提前谢谢。亚当。
function scrollMagic() {
if (!Modernizr.touch) {
var controller = new ScrollMagic.Controller(
浏览 23提问于2018-01-09得票数 0
通常，如果结帐表单上有错误，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
我正在开发UI，并试图实现scrollmagic和GSAP，我第一次在加载时实现了GSAP动画，对我来说很有魅力，但是当我尝试用Scrollmagic实现GSAP时，我在控制台中得到了这个错误。
未定义的ReferenceError: ScrollMagic未定义
有关更多信息，我在package.json文件中添加了依赖项。
"dependencies": {
"gsap": "^1.20.4",
"scrollmagic": "^2.0.5"
}
然后将其导入ap
浏览 0提问于2018-03-06得票数 0
1回答
我在我的网站上使用ScrollMagic。这是一个只有一页的网站，有7个“部分”。第一个动画很好，我在与动画的多个场景斗争。当用户滚动时，我需要每个部分都是动画。第一个是可以的，但第二个加了场景后只是空白。
(部分)
<section id="slide1" ........>
<div style="text-align: center;">
<img id="racket" src="svg/racket.svg">
</div>
<di
浏览 1提问于2018-10-17得票数 0
1回答
我正试图用ScrollMagic构建一个站点，但我遇到了一个问题:我将反向选项定义为在全局范围内为false，而且我似乎无法在特定的场景中覆盖该选项。
我有几个场景，只需要一个或两个场景有反向动画。在全局上让反向选项为false并为特定场景设置反向动画要容易得多。
这是我的密码：
var controller;
$(document).ready(function($) {
controller = new ScrollMagic({
globalSceneOptions: {
reverse: false
}
});
}
浏览 7提问于2014-08-22得票数 2
回答已采纳
作为文件
triggerElement的值将是定义场景开始的选择器、DOM对象或jQuery对象。如果没有定义，场景将从页面的开头开始(除非设置了偏移量)。
但我觉得这对我的案子是不好的。
我的HTML看起来
....
<section>
<div class="scrollMagic">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
et dolore magna aliqua.
浏览 1提问于2017-08-03得票数 2
1回答
我继承了react，一个我无法初始化的项目。
我最初遇到的问题(运行yarn dev)是：
let vdom = <Desktop />;
在阅读了这篇文章后，我接受了一个答案：
我在webpack.config.js中更改了以下内容：
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: { presets: ["
浏览 8提问于2020-07-27得票数 1
2回答
我条目JS文件中唯一的内容是：
import $ from 'jquery';
jQuery JS文件的大小为来自的29.5kb。我的条目(只包括jQuery，而没有其他内容)的大小为86 of 。
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin
浏览 0提问于2018-04-22得票数 2
回答已采纳
1回答
我正在创建一本书的动画。页面应该快速翻转(就像我在动画中所做的那样)，但我希望它们在滚动到触发器范围之外后回到起始位置。下面是js代码和代码。
$(document).ready(function ($) {
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger1",
offset: 400,
})
// animate
浏览 2提问于2016-02-17得票数 0
使用GSAP，我想创建一个TweenLite或TweenMax对象，它对多个不同的对象执行不同的动画(旨在并行播放)。
这是怎么做到的？，我只看过allTo，它在多个对象的数组上应用了相同的动画。
当我需要把它传递给ScrollMagic的时候，得到一个吐温是很重要的。
我想我也可以使用TimelineLite或TimelineMax来完成这个任务，因为ScrollMagic可以这样做。
var timeline=new TimelineMax();
timeline.to(object1, duration, animation1, 0);
timeline.to(object2, dura
浏览 2提问于2015-12-13得票数 1
我用ScrollMagic设置了一个时间线和场景，50%的时间是在页面加载时触发的，而不是在我设置触发器在特定的div上启动的地方。
我的代码：
jQuery(document).ready(function($){
// init ScrollMagic Controller.
var controller = new ScrollMagic.Controller();
var fadeAnim;
// Animation 1
fadeAnim = function() {
var timeline = new TimelineMax();
浏览 3提问于2016-05-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
