![](/img/trans.png)
[英]How to use useInvertedScale with the latest framer motion version in react js?
[英]How to use framer motion animation with swiper.js (React)?
因此動畫僅在初始頁面重新加載期間發生。 我希望每次向下滾動到另一個頁面時都執行動畫。 我如何將 react-router 與 swiper 和 framer 一起使用,或者還有其他方法可以做到這一點。 這是我的 app.js
import React, { useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Home from "./Home";
import Works from "./Works";
import "./styles.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Navbar from "./Navbar";
import SwiperCore, {
Mousewheel,
Keyboard,
Pagination,
Navigation,
} from "swiper";
// install Swiper modules
SwiperCore.use([Mousewheel, Pagination]);
export default function App() {
let i = 0;
return (
<>
<Swiper
onScroll={() => {
//console.log("Scrolled");
localStorage.setItem("scrolled", (i = i + 1));
console.log(localStorage.getItem("scrolled"));
}}
direction={"vertical"}
slidesPerView={1}
spaceBetween={30}
mousewheel={true}
className="mySwiper"
>
<SwiperSlide>
<Home />
</SwiperSlide>
<SwiperSlide>
<Works />
</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
<SwiperSlide>Slide 5</SwiperSlide>
<SwiperSlide>Slide 6</SwiperSlide>
<SwiperSlide>Slide 7</SwiperSlide>
<SwiperSlide>Slide 8</SwiperSlide>
<SwiperSlide>Slide 9</SwiperSlide>
</Swiper>
</>
);
}
這是我的組件之一 Home.js
import React, { useEffect, useState } from "react";
import "./App.css";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import "./mainpage.css";
import cloud1 from "./images/cloud1.svg";
import cloud02 from "./images/cloud02.svg";
import cloud2 from "./images/cloud2.svg";
import moon from "./images/moon.svg";
import cloud3 from "./images/cloud3.svg";
import cloud01 from "./images/cloud01.svg";
import { useNavigate } from "react-router-dom";
import {
MouseParallaxChild,
MouseParallaxContainer,
} from "react-parallax-mouse";
import Navbar from "./Navbar";
import { motion, useViewportScroll, useTransform } from "framer-motion";
function Home() {
const fadeLeft = {
hidden: { opacity: 0, x: -100 },
visible: { opacity: 1, x: 0 },
};
const fadeRight = {
hidden: { opacity: 0, x: 100 },
visible: { opacity: 1, x: 0 },
};
const [loading, setloading] = useState(false);
useEffect(() => {
setloading(true);
setTimeout(() => {
setloading(false);
}, 1000);
}, []);
return (
<MouseParallaxContainer className="App">
{loading ? (
<ClimbingBoxLoader size={20} color={"#F37A24"} loading={loading} />
) : (
<MouseParallaxContainer
className="main-page"
containerStyles={{
width: "100%",
overflow: "none",
}}
>
<Navbar />
<motion.h1
variants={fadeLeft}
initial="hidden"
animate="visible"
transition={{ duration: 0.5 }}
className="heading"
>
SASWATA
</motion.h1>
<motion.h1
variants={fadeLeft}
initial="hidden"
animate="visible"
transition={{ duration: 0.5 }}
className="heading2"
>
GHOSH
</motion.h1>
<motion.span
variants={fadeLeft}
initial="hidden"
animate="visible"
transition={{ duration: 0.7 }}
className="bar1"
></motion.span>
<motion.span
variants={fadeLeft}
initial="hidden"
animate="visible"
transition={{ duration: 0.85 }}
className="bar2"
></motion.span>
<motion.p
variants={fadeLeft}
initial="hidden"
animate="visible"
transition={{ duration: 1 }}
className="para"
>
web developer
</motion.p>
<p className="scrolldown">SCROLL DOWN</p>
<span className="verticaline"></span>
<MouseParallaxContainer
className="moon"
containerStyles={{
width: "100%",
overflow: "none",
}}
>
<MouseParallaxChild
className="moon_text"
factorX={0.01}
factorY={0.01}
>
<motion.p
variants={fadeRight}
initial="hidden"
animate="visible"
transition={{ duration: 0.5 }}
>
PORTFOLIO
</motion.p>
</MouseParallaxChild>
<MouseParallaxChild
className="moon_img"
factorX={0.03}
factorY={0.05}
>
<motion.img
variants={fadeRight}
initial="hidden"
animate="visible"
transition={{ duration: 0.7 }}
src={moon}
alt=""
/>
</MouseParallaxChild>
<MouseParallaxChild
className="cloud01"
factorX={0.04}
factorY={0.06}
>
<motion.img
variants={fadeRight}
initial="hidden"
animate="visible"
transition={{ duration: 0.8 }}
src={cloud01}
alt=""
/>
</MouseParallaxChild>
<MouseParallaxChild
className="cloud02"
factorX={0.03}
factorY={0.05}
>
<motion.img
variants={fadeRight}
initial="hidden"
animate="visible"
transition={{ duration: 0.5 }}
src={cloud02}
alt=""
/>
</MouseParallaxChild>
<MouseParallaxChild
className="cloud_front1"
factorX={0.04}
factorY={0.07}
>
<motion.img
variants={fadeRight}
initial="hidden"
animate="visible"
transition={{ duration: 0.7 }}
src={cloud1}
alt="cloud1"
/>
</MouseParallaxChild>
<MouseParallaxChild
className="cloud3"
factorX={0.03}
factorY={0.05}
>
<motion.img
variants={fadeRight}
initial="hidden"
animate="visible"
transition={{ duration: 0.5 }}
src={cloud3}
alt=""
/>
</MouseParallaxChild>
<MouseParallaxChild
className="cloud2"
factorX={0.06}
factorY={0.05}
>
<motion.img
variants={fadeRight}
initial="hidden"
animate="visible"
transition={{ duration: 0.5 }}
src={cloud2}
alt="cloud2"
/>
</MouseParallaxChild>
</MouseParallaxContainer>
<div className="nav-left">
<span style={{ width: "40px" }} className="span1"></span>
<span style={{ width: "25px" }} className="span2"></span>
<span style={{ width: "25px" }} className="span3"></span>
<span style={{ width: "25px" }} className="span4"></span>
</div>
</MouseParallaxContainer>
)}
</MouseParallaxContainer>
);
}
export default Home;
在瀏覽了幾個視頻和文檔后,我無法弄清楚。
你的 SwiperSlide 組件可以訪問 isActive 渲染 function。
<Swiper>
<SwiperSlide>First Slide without animation</SwiperSlide>
<SwiperSlide>
{({ isActive }) => (
<motion.div initial={{ opacity: 0, scale: 0.5 }}
animate={{
opacity: isActive ? 1 : 0,
scale: isActive ? 1 : 0.5, }}
>This is animated Second Slide
</motion.div>
)}
</SwiperSlide>
</Swiper>
不要在 SwiperSlide 組件內的渲染 function 之外放置任何內容,否則不會渲染任何內容。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.