我在以下结构中有一个下游项目:
.
├── media
│ └── img.jpg
├── package.json
├── package-lock.json
├── 页: 1
├── src
│ ├── components
│ │ └── AnimatedCharacters.js
│ ├── pages
│ │ ├── _app.js
│ │ ├── index.js
│ │ └── index_.js
│ └── styles
│ └── global.css
└── tailwind.config.js
The content of the files is as follows:
package.json
{
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
"eslint": "^8.54.0",
"framer-motion": "^10.16.5",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"engines": {
"node": ">=18"
},
"devDependencies": {
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5"
}
}
页: 1
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
/** @type {import( tailwindcss ).Config} */
const { fontfamily } = require("tailwindcss/defaultTheme");
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
theme: {
extend: {
fontFamily: {
poppins: ["var(--font-poppins)"],
},
colors: {
dark: "#1b1b1b",
light: "#f5f5f5",
primary: "#B63E96", // 240,86,199
primaryDark: "#58E6D9", // 80,230,217
white: "#fff",
light_purple: "#8490ff",
light_white: "#f9f9ff",
text_color: "#777777",
},
},
borderWidth: {
1: "1px",
2: "2px",
},
},
plugins: [],
};
弧/型/全球
@tailwind base;
@tailwind components;
@tailwind utilities;
src/pages/_app.js
import Head from "next/head";
import "../styles/global.css";
import { Poppins } from "next/font/google";
const poppins = Poppins({
subsets: ["latin"],
variable: "--font-poppins",
weight: ["100", "200", "400", "300", "500", "600", "700"],
});
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={`${poppins.variable} font-poppins`}>
<Component {...pageProps} />
</main>
</>
);
}
src/pages/index.js
import Head from "next/head";
import Image from "next/image";
import profilepicture from "../../media/img.jpg";
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-auto pl-14 pr-14 flex bg-light_white text-black">
<div className="flex items-center justify-between w-full pt-20 pb-20">
<div className="flex-1 pr-14">
<p className="text-text_color mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p className="text-text_color mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p className="text-text_color mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div className="w-80 h-80">
<Image
src={profilepicture}
alt="bird"
className="w-full h-full object-cover rounded-full"
/>
</div>
</div>
</main>
</div>
);
}
When running npm run dev, this works as expected; the text takes the space left after the image is well placed.
此外,当我转播窗口时,案文也适应空间。
然而,当我添加<条码>AnimatedCharacters.js部分时,案文的利害关系与空间的需要一样大,在我转播时,空间甚至超过了屏幕的宽度。
Here the code:
src/components/AnimatedCharacters.js
import React from "react";
import { motion } from "framer-motion";
export default function AnimatedCharacters({
text,
className = "",
reverse = false,
}) {
// splitting text into letters
const letters = Array.from(text);
// Variants for Container
const container = {
hidden: { opacity: 0 },
visible: (i = 1) => ({
opacity: 1,
transition: {
staggerChildren: 0.02,
delayChildren: 0.03 * i,
staggerDirection: reverse ? -1 : 1, // Adjust staggerDirection based on reverse prop
},
}),
};
// Variants for each letter
const child = {
visible: {
opacity: 1,
x: 0,
y: 0,
transition: {
type: "spring",
damping: 12,
stiffness: 100,
},
},
hidden: {
opacity: 0,
x: reverse ? 20 : -20, // Adjust initial x position based on reverse prop
y: 10,
transition: {
type: "spring",
damping: 12,
stiffness: 100,
},
},
};
return (
<motion.div
className={className}
variants={container}
initial="hidden"
animate="visible"
>
{letters.map((letter, index) => (
<motion.span variants={child} key={index}>
{letter === " " ? "u00A0" : letter}
</motion.span>
))}
</motion.div>
);
}
And this is how index.js looks like after adding the new component:
import Head from "next/head";
import Image from "next/image";
import profilepicture from "../../media/img.jpg";
import AnimatedCharacters from "../components/AnimatedCharacters";
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
</Head>
<main className="w-full h-auto pl-14 pr-14 flex bg-light_white text-black">
<div className="flex items-center justify-between w-full pt-20 pb-20">
<div className="pr-14">
<AnimatedCharacters
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua."
className="text-text_color mb-2 overflow-hidden flex"
/>
<AnimatedCharacters
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua."
reverse
className="text-text_color mb-2 overflow-hidden flex"
/>
<AnimatedCharacters
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua."
className="text-text_color mb-2 overflow-hidden flex"
/>
</div>
<div className="w-80 h-80">
<Image
src={profilepicture}
alt="bird"
className="w-full h-full object-cover rounded-full"
/>
</div>
</div>
</main>
</div>
);
}
Here is a link to a video record I just made.
是否有办法使案文适合图像形成后留下的任何空间,并按行文对格式案文行文(即从左边看,N+1线从右边看)适用该动议的效力?
I am using Tailwind CSS and framer-motion