标签: scrollmagic
Next.js(React)和ScrollMagic
我想实现一个动画来淡化部分,就像在这个例子中一样,淡入我的应用程序.因此我看了一下fullPage.js.
但是,因为我需要将它集成到具有服务器端呈现的Next.js React应用程序中,所以我不能使用它,因为它在jQuery上进行中继,它不支持SSR.因此,我已经尝试过使用ScrollMagic,它不会在jQuery上转发.但它也不支持SSR(需求window),因此我已经在componentDidMount()方法中对其进行了初始化,甚至将其加载到那里(就像这里推荐的那样).
它目前最初工作,但是一旦你更改页面并完成一个AJAX请求并且Next.js替换了页面,就会抛出一个错误(见下文):
找不到节点
我试图在AJAX请求之前销毁ScrollMagic componentWillUnmount(),但没有运气.我无法弄清楚什么是错的,不幸的是,我找不到任何关于使用React或Next.js的ScrollMagic的文档.
这是我的整个组成部分:
import React from 'react';
import PropTypes from 'prop-types';
class VerticalSlider extends React.Component {
constructor(props) {
super(props);
this.ScrollMagic = null;
this.controller = null;
this.scenes = [];
this.container = React.createRef();
}
componentDidMount() {
if (this.container.current) {
// Why "require" here?
// https://github.com/zeit/next.js/issues/219#issuecomment-393939863
// We can't render the component server-side, but we will still render
// the HTML
// eslint-disable-next-line global-require
this.ScrollMagic = …推荐指数
解决办法
查看次数
如何在GSAP和Webpack中使用ScrollMagic
要将ScrollMagic与GSAP一起使用,您需要加载animation.gsap.js插件.使用Webpack,您可以执行以下操作(假设您使用CommonJS语法并使用npm安装所有内容):
var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');
要确保这实际上有效,您必须为Webpack配置添加别名,以便Webpack知道插件的位置.
resolve: {
alias: {
'ScrollMagicGSAP': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'
}
}
不幸的是,当您使用此配置和上面的CommonJS语法时,ScrollMagic会继续抛出错误.
(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js
推荐指数
解决办法
查看次数
每张幻灯片的水平ScrollMagic容器中的视差内容卡顿
我有一个固定的滑块，当您通过更新X内部包装的值到达它时，它会水平移动。这部分效果很好。
但是，对于每个单独的幻灯片，我希望对文本产生视差效果（滚动浏览时会相对于当前幻灯片变慢）。
这是我设置的一个小（简化）测试用例：https : //codepen.io/michaelpumo/pen/EJgWgd
不幸的是，由于某种原因，文本似乎错开了，动画也不流畅。这可能是因为我误解了ScrollMagic的API（对我来说这是新的）。
我有2个控制器，因为我可以获得“视差”部分的唯一方法是将控制器设置vertical: false为第二个。也许这与此有关？
非常感谢帮助！
的JavaScript
const ease = window.Power4.easeInOut
const el = document.querySelector('#el')
const wrapper = document.querySelector('#wrapper')
const slides = el.querySelectorAll('.El__slide')
const amount = slides.length
const controller = new window.ScrollMagic.Controller()
const horizontalMovement = new window.TimelineMax()
const controller2 = new window.ScrollMagic.Controller({
vertical: false
})
horizontalMovement
.add([
window.TweenMax.to(wrapper, 1, {
x: `-${(100 / amount) * (amount - 1)}%`
})
])
new window.ScrollMagic.Scene({
triggerElement: el,
triggerHook: 'onLeave',
duration: `${amount * 100}%`
})
.setPin(el) …推荐指数
解决办法
查看次数
测量svg路径的长度？
我正在玩Scrollmagic,想在这里使用效果:http://scrollmagic.io/examples/advanced/svg_drawing.html
我创建了一个squiggle svg来测试它,需要将路径的长度插入到stroke-dasharray:2000px; stroke-dashoffset:2000px;
如何找到路径的长度？
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength);
$el.css("stroke-dashoffset", lineLength);
}
var $word = $("path#word");
var $dot = $("path#dot");
// prepare SVG
pathPrepare($word);
// init controller
var controller = new ScrollMagic.Controller();
// build tween
var tween = new TimelineMax()
.add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9
.add(TweenMax.to("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0); // change color during the whole thing
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", …推荐指数
解决办法
查看次数
使用相同的类使用scrollmagic为视图设置动画
我对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,
triggerElement: ".animate",
triggerHook: "onCenter",
})
.setTween(tween5)
.addTo(controller);
scene5.addIndicators();
});
推荐指数
解决办法
查看次数
动画滚动脚本可防止从外部链接访问本地锚点位置
我有一个onepager网站,我使用scrollmagic加上所有必要的插件/库(和jQuery)用于不同的效果,其中动画,钉扎,淡入淡出过程等由滚动位置触发.
我还使用它来动画滚动到页面上的锚点(从菜单和其他本地链接) - 请参阅下面脚本的相应部分.
问题是,当单击本地链接时,此脚本会抑制直接"跳转"到锚点的默认行为,显然也是当通过直接链接或带有附加到URL的锚点的书签从外部访问页面时(例如http://www.example.com/index.php#part3).单击本地链接时需要这种行为,这显然会阻止浏览器在从其他位置链接锚点时显示锚点位置.
当点击上面例子中的链接时,有没有办法让浏览器直接显示该锚位置？
var sm_controller_1 = new ScrollMagic.Controller();
sm_controller_1.scrollTo(function(anchor_id) {
TweenMax.to(window, 2.0, {
scrollTo: {
y: anchor_id
autoKill: true
},
ease: Cubic.easeInOut
});
});
jQuery(document).on("click", "a[href^=#]", function(e) {
var id = jQuery(this).attr('href');
if(jQuery(id).length > 0) {
e.preventDefault();
sm_controller_1.scrollTo(id);
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
}
});
(创建小提琴/编码器是没有意义的,因为问题在于从外部源调用原始URL).
推荐指数
解决办法
查看次数
Meteor.js + ScrollMagic TweenMax.to
试图获得Meteor 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.to($('#animation'), 0.5,
{
backgroundColor: 'rgb(255, 39, 46)',
scale: 5,
rotation: 360
})
}
});
})}
Pkg Dependency hipstersmoothie:scrollmagic 0.0.9
这是基于scotch.io的教程.和代码的第一部分codepen
试图在流星中重现魔力.如果有人能看看这些代码,我将不胜感激.
谢谢.
-------------------------------------------------- -----------------------------
通过引用使用带有流星的greensocks找到了另一种解决方案
if (Meteor.isClient) {
Meteor.startup(function () {
scrollMagicController = new ScrollMagic();
$(document).ready(function () {
// Create Animation for 0.5s
var tween = $(".animation");
TweenMax.to(tween, 0.5,
{ …推荐指数
解决办法
查看次数
scrollmagic没有响应触发器元素
我有ScrollMagic的问题.它根本没有对触发元素做出响应.下面我将提供代码:
CSS:
.container {
height: 3000px;
}
#trigger {
position: relative;
top: 300px;
}
.katrori {
opacity: 0;
position:relative;
top:300px;
background-color:#eee;
height:400px;
padding:25px;
font-family:Arial, Sans-serif;
font-weight:bold;
}
和JS:
$(document).ready(function($)) {
var controller = new ScrollMagic();
var tween = TweenMax.to(".katrori", 0.5, {opacity: 1, backgroundColor: "#1d1d1d"})
var scene = new ScrollScene({triggerElement: "#trigger"})
.setTween(tween)
.addTo(controller);
});
我错过了什么？
推荐指数
解决办法
查看次数
Scrollmagic TimelineMax没有动画
我试图弄清楚如何将TimelineMax与Scrollmagic一起使用。这个问题很容易解释。
我有类似的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 = new ScrollMagic.Scene({
triggerElement: ".wrapper",
duration: 1000
});
scene.setTween(tween);
scene.addTo(controller);
});
第二种实现是“不工作”（使用时间轴）
var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
timeline.to($(this), 1, { y: -200, ease: Linear.easeNone });
});
var scene = new ScrollMagic.Scene({
triggerElement: ".wrapper",
duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);
我想使时间表生效，但是元素没有动画。他们移动，但时机为零。
谢谢你的帮助 …
推荐指数
解决办法
查看次数
ScrollMagic 在调整大小时更新触发位置
在我的网站上，ScrollMagic 场景触发器挂钩位置存储在一个数组中slideOffsets = []，该数组在初始化时使用
var scene;
for (var i=0; i<slides.length; i++) {
//Get offsets
if(i != 1) {
scene = new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i])
.addIndicators() // INDICATORS FROM PLUGINS
.addTo(controller);
} else {
scene = new ScrollMagic.Scene({
triggerElement: slides[i], duration: "10%"
})
.setPin(slides[i])
.addIndicators() // INDICATORS FROM PLUGINS
.addTo(controller);
}
slideOffsets.push(Math.ceil(scene.triggerPosition()));
scenes.push(scene);
}
然后附加到每个<a>元素的函数滚动到相应的位置。这一切都完美无缺，但是在调整窗口大小后这不起作用。我将场景存储在一个数组中，以便我可以访问它们，但是即使在遍历它们并在调整大小后重新存储钩子位置之后，返回的位置也不能反映钩子在页面上的真正位置，即使在尝试采取离开/也添加场景的持续时间。
$(window).on("resize", function() {
slideOffsets = [];
for (var i=0; i<slides.length; i++) {
slideOffsets.push(Math.ceil(scenes[i].triggerPosition() - scenes[i].duration()));
}
console.log("regathering done");
});
（顺便说一句，我知道这会在用户调整窗口大小时不断运行，但是我想先解决这个问题） …
推荐指数
解决办法
查看次数