使用ScrollMagic停止带背景的文本滚动
ScrollMagic是一个JavaScript库，用于在网页上创建滚动动画效果。它可以帮助开发人员实现各种各样的滚动交互效果，包括停止带背景的文本滚动。
ScrollMagic的主要特点包括：
- 简单易用：ScrollMagic提供了简洁的API，使开发人员能够轻松地创建滚动动画效果。
- 强大的控制能力：ScrollMagic允许开发人员根据滚动位置、滚动方向等条件来触发动画效果，从而实现更加精细的控制。
- 兼容性良好：ScrollMagic支持主流浏览器，并且提供了移动设备的支持，确保在各种设备上都能正常运行。
使用ScrollMagic停止带背景的文本滚动的步骤如下：
- 引入ScrollMagic库：在HTML文件中引入ScrollMagic的JavaScript文件。
- 创建ScrollMagic控制器：使用ScrollMagic.Controller()函数创建一个控制器对象。
- 定义滚动场景：使用ScrollMagic.Scene()函数创建一个滚动场景对象，并设置触发条件和动画效果。
- 将滚动场景添加到控制器：使用控制器对象的addScene()方法将滚动场景添加到控制器中。
- 初始化控制器：使用控制器对象的init()方法初始化控制器。
- 监听滚动事件：使用控制器对象的update()方法监听滚动事件，并触发相应的动画效果。
ScrollMagic的应用场景包括但不限于：
- 网页滚动动画：可以通过ScrollMagic实现网页滚动时元素的动态效果，提升用户体验。
- 视差滚动效果：可以通过ScrollMagic实现视差滚动效果，使页面更加生动有趣。
- 页面导航：可以通过ScrollMagic实现滚动到指定位置时，自动触发页面导航的效果。
- 图片懒加载：可以通过ScrollMagic实现滚动到指定位置时，动态加载图片，提升页面加载速度。
腾讯云相关产品中，与ScrollMagic类似的是腾讯云的ScrollReveal，它是一款基于JavaScript的滚动动画库，可以帮助开发人员实现滚动动画效果。您可以通过腾讯云的官方文档了解更多关于ScrollReveal的信息：ScrollReveal产品介绍。
相关·内容
1回答
我需要达到一个视差效果，当各种东西是“背景”层，如视频，画布或其他互动的东西，而墙文本滚动，当这些文本“结束”，我需要能够滚动到下一个幻灯片，再次持有任何数量的东西作为它的‘背景’。请参阅获得一个简单的参考(笑脸=交互式内容，矩形=墙的文本)。
这就是我能用纯CSS做的事情吗？或者，为了达到这个效果，我是否需要求助于像ScrollMagic这样的库？
浏览 2提问于2016-12-16得票数 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
回答已采纳
嘿，所有我想把我的头围绕着这一切，玩了一整天。我想要实现的是，当用户向下滚动时，让背景图像放大(并最终通过不透明度变得透明)。我已经有一半的期望效果工作，但它似乎不想工作在用户滚动，它只是自动执行。
这一定是很简单的事情，但我对此很陌生。
这是我写的代码
var tween = TweenMax.to('#regular', 0.5, {
scale: 2
});
// Init Controller
var controller = new ScrollMagic.Controller();
// Create the S
浏览 9提问于2015-06-03得票数 1
回答已采纳
例子滚动魔术模块，但它也发生在其他人。我怀疑这是为了巴贝尔但不确定。
我们怎样才能复制这个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回答
我正在使用JS库: Jan的ScrollMagic.io和GSAP。
Scrollmagic.io允许我在滚动时触发一些CSS更改，一旦到达特定的触发器元素，JS脚本如下所示：
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger1"
})
浏览 2提问于2017-03-19得票数 0
1回答
我将要创建一个像happn.com这样的滚动函数。我希望设备和背景冻结和一些不同的文本部分滚动。设备内部的应用程序屏幕截图也应该改变。我已经尝试过ScrollMagic教程，但是我想不出如何在已经存在的元素中使用它。
我整个星期都在为此而苦苦挣扎。有没有人知道我可以使用的框架或教程？
谢谢!
示例：
浏览 0提问于2016-11-12得票数 1
2回答
转换透明文本的背景？
、、、、
好的，我在一个页面上有一个很大的标题，它有一个图像作为文本的背景：
.big-heading {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url('https://images.pexels.com/photos/169789/pexels-photo-169789.jpeg?dl&fit=crop&w=640&h=426');
-webkit-background-size: cover;
bac
浏览 0提问于2017-03-25得票数 1
我在我的页面上使用ScrollMagic。下面是HTML：
<div class="container">
<div class="before-trigger">
</div>
<div class="trigger" id="trigger">
</div>
<div class="pin-area" id="pin-area">
This is a pinned area.
<
浏览 5提问于2017-10-17得票数 0
回答已采纳
我试图在滚动上创建简单的视差动画，一切都正常，但我想添加延迟，例如用户向下滚动，动画应该赶上他，换句话说，如果他向下滚动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
回答已采纳
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
回答已采纳
1回答
我正在处理的站点使用滚动魔法将活动div的颜色(每组设置为屏幕大小)从滚动到下滚动时从回退到白色。我让它改变div的颜色以及身体的颜色，以实现更无缝的过渡。由于某些原因，前两个场景的背景颜色并没有改变，但在最后2个场景上。我已经包括了一个说明这个问题的代码。当你向下滚动并触发最后2个场景，由#blog和#contact触发时，身体颜色就会被正确设置。但不是前两个触发器- #about和#portfolio。
有什么建议吗？
HTML：
</div>
<div id ="about" class="container frame">
&
浏览 0提问于2015-09-15得票数 0
回答已采纳
我已经创建了一个网站，它使用Scrollmagic来加载网站的一部分(即，改变他们的不透明度，使他们向上移动)，因为用户滚动通过它。它在我电脑上的HTML文件上运行得很好，但由于某种原因，一旦我把它上传到我的主机服务器上，并在直播网站上，它就停止工作了。url是https://liudzi.com/。有多个部分会像这样加载，但我已经包含了代码的一部分作为示例： <!--SCROLLMAGIC-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.
浏览 60提问于2021-04-19得票数 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
回答已采纳
1回答
我看着，注意到当用户滚动时，背景图像看起来是如何移动和动画的。在查看源代码时，它表明这是通过在用户滚动时更改背景图像来实现的。本质上，它跳过许多帧的图像，提供了一个动画的错觉。
实现这一目标的最快和最简单的方法是什么？如果这样做更容易的话，我将使用ScrollMagic库。
浏览 2提问于2014-05-13得票数 0
回答已采纳
3回答
我试图动画元素，同时滚动基于元素的进展，通过现场。我遇到了浏览器返回断续滚动位置的问题，这使得在启动和停止元素动画时很难精确。
最起码的例子：
小提琴
const tweens = document.querySelectorAll('.tween');
const trigger = document.querySelector('.start');
const triggerRect = trigger.getBoundingClientRect();
let yScroll = window.scrollY;
let yCurrent = yScro
浏览 4提问于2020-02-14得票数 3
回答已采纳
1回答
我正在使用ScrollMagic的分区擦拭在滚动上淡出一个面板到下一个面板，这工作得很完美，但我想知道是否有可能在滚动时捕捉到下一个面板(现在如果你停止滚动，你就会在两个面板之间淡入一半)。 我知道我可以使用fullpage.js，因为它们提供了确切的效果，但我不想在我已经加载了大量javascript的网站上添加另一个库，我想知道我是否可以用ScrollMagic获得同样的效果。 var controller = new ScrollMagic.Controller();
var wipeAnimation1 = new TimelineMax()
.fromTo(".pan
浏览 18提问于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做视差部分滚动，跟随这个。我有它的视觉工作，但现在该页已停止滚动时，使用鼠标轮或轨道垫。它滚动的唯一方法是拖动右边的滚动条。
main.css
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
index.html
<head>
...
<script src="//ajax.g
浏览 3提问于2015-11-19得票数 1
回答已采纳
3回答
我想在用户向下滚动页面时隐藏我的站点标题(在ScrollMagic中很容易做到)-但我不确定是否也可以使用ScrollMagic来检测用户是否向上滚动，如果是的话，是否可以再次显示标题。
最重要的是，对于最初的滚动，我可以为主站点包装器设置一个简单的偏移量，但对于在页面滚动过程中随时可能发生的乱码，我不确定如何使用ScrollMagic的事件来实现这一点？
感谢您的帮助。
丹
浏览 1提问于2015-11-27得票数 2
1回答
如何更新进度
、、、
当您向下滚动页面时，您将看到带有#pin的元素是粘性的，并且currentPercentage将不断更新，直到currentPercentage的值为1，然后不再粘稠。
问题是，在滚动到某个值后，我单击update progress to 0.5。currentPercentage的值将变为0.5，但如果我然后滚动。该值将跳转到以前的值。
例如，如果我滚动并在0.33处停止，然后单击按钮，currentPercentage的值将变为0.5。
如果我现在向下滚动，这个值将从0.33增加到0.5，这主要是问题所在。
怎么修呢？
App.js
import "./styles.cs
浏览 2提问于2022-01-11得票数 2
回答已采纳
1回答
我正在使用scrollMagic JS为我的web应用程序添加一些功能。尝试使用 JS检测滚动方向。Scrolldirection有三种状态:暂停、前进和倒退，但我只有在上下滚动时才会暂停
下面是我的代码片段，供您审阅。
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({triggerElement: "#c-story-header__scrolltrigger", triggerHook: 0.5, duration: '100%'})
.on("enter&#
浏览 2提问于2020-05-29得票数 0
1回答
我正尝试在我的网站上使用ScrollMagic.js来显示文本段落。我的脚本已经可以淡出文本，但是我想创建一些东西，比如在文本淡入时暂停，一旦效果完成，滚动就会继续。在官方上也有类似的东西。在标题上的效果通过后，整个页面向下滚动。
有没有人能帮我重写一下，这样滚动就可以等到整个动画结束了？我打算做更多的动画，效果会更好。
(function($) {
$(function() {
if (document.documentElement.clientWidth > 768) {
// init controller
var controller
浏览 4提问于2018-10-04得票数 0
我想让服务工作者在我的角度供电的网站，但它不注册自己，如果使用滚动魔术。如果我禁用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
回答已采纳
由于WebpackError: ReferenceError: window is not defined，我的Gatsby站点无法部署到Netlify
我试过：
包装返回语句在if(window !== undefined)检查中没有工作在my index.js：if (typeof window !== 'undefined') { require('scrollmagic') require('scrollmagic-plugin-gsap') }中放置了一个require语句，它没有工作
我注意到导入语句import Scrollmagi
浏览 0提问于2020-04-02得票数 1
回答已采纳
1回答
我注意到有几个网站的背景图像放大，在，并移动基于滚动。我很熟悉视差滚动，但这似乎有点不同，因为背景图像实际上并没有改变。
我所指的一些例子(其中也有一些视差)是和。当它转向现实生活时，特别是在结束时，弗拉特夫斯现实主义就有了它。
因为我确信这是非常复杂的，不能单独完成，所以我想知道是否有任何JavaScript库可以工作。我对ScrollMagic很熟悉，但似乎它的功能并没有扩展到这个程度。
浏览 3提问于2014-04-30得票数 0
回答已采纳
如何将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回答
我正在使用滚动魔术滚动内容和别针的一部分内容。下面是HTML：
<div class="container">
<div class="header">
<div style="height:400px;">
</div>
<div id="trigger1" style="min-height: 1px"></div>
<div id="pin" style="font-siz
浏览 1提问于2017-10-07得票数 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
回答已采纳
因此，我一直将ScrollMagic.js与GSAP.js结合使用，并在向下滚动时使用.setClassToggle作为侧导航活动状态。
它添加'active‘类，但不删除前一个类，直到您再次向上滚动，然后它删除它。但是这个演示展示了两种方式的切换。这是我的密码：
$(function () {
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({triggerElement: "#Home"})
.setClassToggle(".s
浏览 1提问于2016-09-17得票数 3
回答已采纳
我有一个具有以下组件的nextjs项目：
import React, { PureComponent } from "react";
import { Power3, TimelineMax } from "gsap";
import ScrollMagic from "scrollmagic";
export default class TextFade extends PureComponent {
constructor(props) {
super(props);
浏览 3提问于2019-12-19得票数 0
回答已采纳
我正在尝试集成魔幻插件与角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
回答已采纳
我想知道，当你向下滚动时，动画只播放一次，而当你向上滚动时，没有动画。
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
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
1回答
我使用一个Lottie动画作为我的网站的背景(由普通的超文本标记语言/CSS/JS组成)，通过滚动ScrollMagic来控制。但是，在显示其余内容后，动画大约需要1秒才能加载。它最初要长得多，但我能够减小文件大小并提高压缩率。我试图在Lottie加载时添加一个淡入动画，这样它就不会像突然出现的那样不那么刺耳。我当前用来呈现/加载Lottie的代码是 var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: false,
rendererSettings: {
浏览 30提问于2021-01-29得票数 0
我正在使用ScrollMagic和Greensock构建一个侧点导航(有四个点)。一切正常，直到我滚动到页面底部。然后，当我向上滚动时，我的点被弄乱了，它们不能正常工作(当我正好在页面底部上方时，第一个点被突出显示)，直到我到达页面顶部，然后再次开始向下滚动。
此外，无论我是从页面底部还是从页面顶部滚动，setClassToggle在所有位置都能完美工作。
$(document).ready(function(){
var controller = new ScrollMagic.Controller();
var timeline = new TimelineLite();
浏览 14提问于2019-08-17得票数 0
回答已采纳
我试图在react中使用ScrollMagic & gsap库，一切都很好，直到我尝试构建我的代码，我尝试了我可以在网络上找到的所有导入解决方案，但它的行为似乎不一样。
我创建了一个卡片列表，当到达某个部分时，它水平滚动，在dev版本上，它的行为完全是这样的，但是当我在生产版本(构建后)时，它以对角线方式滚动。
下面是我的一些代码，以及我如何安装库：
安装gsap：
npm i gsap
安装滚动魔法：
npm i scrollmagic
反应中的我的代码：
import React, { Component } from 'react';
import ReactDO
浏览 2提问于2020-03-07得票数 0
回答已采纳
3回答
我在一个需要显示进度条的站点上使用scrollMagic库。该栏将在页面上显示用户的位置。当用户向上或向下滚动时，进度条的宽度将会简单地改变。我似乎不能让它与scrollMagic库一起工作。这是我在其他事情中尝试的。谢谢!
var controller = new ScrollMagic.Controller();
$(function progressBar() {
var tween = TweenMax.fromTo("#progress", 1, {
width: "0%"
}, {
width: "100%"
浏览 0提问于2015-06-30得票数 1
我使用的是ScrollMagic，下面的代码：
var scene = new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i])
.addIndicators()
.addTo(controller)
.triggerHook(0.10)
.on('enter', function(e){
panel = $(e.target.triggerElement()).prop('id');
浏览 0提问于2016-10-21得票数 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
回答已采纳
1回答
角2与滚动魔法
、、
我正在尝试在我的角2应用程序中实现滚动魔法，但到目前为止我一直没有成功。我看了很多教程，但他们都帮不了我。我正在寻找一个人，谁可以清楚地向我解释，我如何能够获得角2与滚动魔术工作。我试过这样做：
我在我的组件中添加了这个：
import { TweenLite, TimelineMax, TweenMax } from "gsap";
import { Component, NgZone, AfterViewInit} from '@angular/core';
declare let ScrollMagic: any;
@Component({
selec
浏览 13提问于2017-12-29得票数 1
1回答
我在实验视差和滚动魔法。在来自的视差示例中，我试图在第一个视差部分制作动画内容。
这是。
我无法让letter A在#box上移动我想要的东西。我曾经尝试添加一个边界框，并将其用作triggerElement，但这不起作用。
在向下滚动时，它应该向下移动150 On并淡出。现在，它正在使用"#parallax1"作为它的triggerElement，当它到达该部分的底部时，它就会逐渐消失。我要它在那部分的底部之前消失。我怎么才能让它这么做？
我做错了什么？
//////////////////////////////////////////////////////
//////
浏览 2提问于2015-06-14得票数 3
回答已采纳
1回答
我试着找出如何使用ScrollMagic阻止文本与背景图像一起滚动。但我一直没有成功。这是。我已经试了几天了，但是没有成功。所以基本上我想让文本做它通常会做的事情，如果没有ScrollMagic，当用户滚动页面时，它应该像通常那样滚动，如果背景图像上没有动画。也许可以停止内部div的动画？
$(document).ready(function() {
var controller = new ScrollMagic.Controller();
var galleryScene = new ScrollMagic.Scene({
triggerElement: &#
浏览 17提问于2017-06-28得票数 0
回答已采纳
2回答
卷轴魔法在JS反应中的应用
、、、、
我有一个有反应js的页面，我想使用滚动魔法来制作一个瀑布动画，当你向下滚动时，瓶子会旋转。
像这样：
但是我找不到任何关于如何使用滚动魔法在react中使用的文档，我所能找到的最多的是一个像我这样的人不起作用的例子。
这是我的代码但什么都没发生。请帮帮我，我不知道该怎么做
import React, { Component } from 'react';
import logo from './logo.svg';
import ScrollMagic from 'scrollmagic';
import $ from 'jquery&#
浏览 0提问于2018-08-26得票数 2
回答已采纳
我正试图在我的网站上结合两个不同的动作，而且由于我是javascript和滚动魔术的初学者，我一直在努力使所有这些操作一起工作。我成功地使每一套行动都能各自发挥作用。我的代码是基于Jan的教程编写的。下面是指向我正在处理的页面的链接：
当你向下滚动时，第一组动作是向左和向右之间。
第二组操作仅仅是能够从第二个导航链接(页面导航)到它们的部分(#标记)拥有一个scrollTo操作。
在排除故障时，我注意到使其中一种或另一种完全工作的东西是，如果我包括
<script type="text/javascript" src="js/scrollmagi
浏览 0提问于2015-03-31得票数 0
2回答
滚动元素的交叉溶解转变
、、、
我正在创建一个长的单页网站，并使用 v1.3.0来触发事件，并使一些元素变得粘稠。我想创建各种其他过渡效果，因为一个滚动到页面。
复制我的站点水平滚动的。
scrollControl = new ScrollMagic({
vertical: false,
});
var myScrollScene = new ScrollScene({
triggerHook: 0,
offset: 0,
triggerElement: '#shot-0-1',
duration: '100vw',
pushFollowers
浏览 0提问于2015-03-17得票数 0
回答已采纳
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
感谢Gray Ghost的scrollmagic示例：
paneling
anchor nav
有人愿意解释一下面板在scrollmagic中的用途吗？它与锚点导航有什么不同。还有，有没有办法在鼠标滚轮的基础上创建一个非滚动条，比如使用iscroll？
浏览 2提问于2015-10-26得票数 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
回答已采纳
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
6回答
我使用pygments在静态HTML页面上显示CSS样式的代码，但是遇到了一个奇怪的错误，在Safari中错误地呈现了<pre>标记。正如您在这个中看到的，当您在表中向右滚动时，炭背景(设置在<pre>上)在文本停止之前停止，文本的其余部分也不太容易读。
一些意见：
这在Chrome中很好
如果我删除<pre></pre>中的空行，一切都按预期工作。
删除<span class="s"></span>也同样有效。
将overflow: auto添加到<pre>给了我两个相互独立滚
浏览 8提问于2016-04-05得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
