我正在尝试使用ScrollMagic和gsap库进行响应,直到尝试构建代码之前,一切都很好,我尝试了所有可以在Web上找到的导入解决方案,但其行为似乎并不相同。
[我创建了一张卡片列表,当到达某个部分时,它会水平滚动,在开发版本上,它的行为完全相同,但是在生产版本(构建后)中,它会以对角线的方式滚动。
这是我的一些代码以及如何安装这些库:
正在安装gsap:
npm i gsap
正在安装scrollmagic:
npm i scrollmagic
我的代码在react:] >>
import React, { Component } from 'react'; import ReactDOM from 'react-dom' import { TweenMax, TimelineLite, TimelineMax, TweenLite, Linear } from "gsap/all"; // Also works with TweenLite and TimelineLite import * as ScrollMagic from "scrollmagic/scrollmagic/uncompressed/ScrollMagic"; // Or use scrollmagic-with-ssr to avoid server rendering problems import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap"; import './listCardsH.css'; import Image from '../images/Image'; import Titles from '../titles/Titles'; ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineLite); class ListCardsH extends Component { componentDidMount (){ TweenLite.defaultEase = Linear.easeNone; var titles = ReactDOM .findDOMNode(this.refs['title1']) .getBoundingClientRect() console.log(titles) var controller = new ScrollMagic.Controller(); // var tl = new TimelineLite(); // tl.to("#js-slideContainer", 1, {x:'-100%'}) var tl = new TimelineMax() .add(TweenMax.to('#js-slideContainer', 1, {x: '-70%'})) new ScrollMagic.Scene({ triggerElement: '#bigTrigger', triggerHook: 0, duration: '100%' }) .setPin("#titleId", {pushFollowers: false}) .addTo(controller); new ScrollMagic.Scene({ triggerElement: "#bigTrigger", triggerHook: 0 , duration: "100%" }) .setPin("#js-slideContainer") .setTween(tl) .addTo(controller); } render() { return ( <div className="containerWrapper" id="bigTrigger"> <div className='bigTitle' id='titleId'> <Titles></Titles> </div> <div className="wrapper" id="js-wrapper" > <div className="sections " id="js-slideContainer"> <div className='childCardH section' ref='title1'> <div className='sectionTitle'> <Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image> </div> </div> <div className='childCardH section' ref='title1'> <div className='sectionTitle'> <Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image> </div> </div> <div className='childCardH section' ref='title1'> <div className='sectionTitle'> <Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image> </div> </div> </div> </div> </div> ); } } export default ListCardsH;
CSS
.wrapper {
width: 130%;
height: 100%;
perspective: 1000;
-webkit-perspective: 1000;
perspective-origin: 0;
-webkit-perspective-origin: 0;
overflow: hidden;
}
.section {
height: 120%;
width: calc( 100% / 3);
float: left;
position: relative;
}
.sections {
width: 100%;
height: 50vh;
/* Change this height to move the images up and down */
}
.sectionTitle {
position: absolute;
width: 40vw;
top: 50%;
left: 120%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 30px;
color: #fff;
}
.bigTitle {
width: 100vw;
text-align:center;
padding-right: 10vw;
}
我正在尝试使用ScrollMagic和gsap库进行反应,直到尝试构建代码,都尝试了可以在网络上找到的所有导入解决方案,但它似乎都没有表现出一切,但是一切都很好...] >
导致不想要的行为的问题是css上的perspective
元素,使用3d动画时必须添加透视图,但是在这种情况下,由于动画只是2d滚动,因此不应使用该透视图垂直滚动到水平滚动,花了我几天的时间才解决,我希望它将希望其他人能够制作出如此出色的动画。我的代码还存在其他一些问题,但我已修复所有问题并希望与大家分享,以便可以作为任何想做类似事情的人的参考。
请在CodePen上通过实时演示找到我的代码的最终版本: