SPORT in Life~
Metaversus
ankle0614@gmail.com
relativeを付けないとテキストが全面にこない
<div className="flex justify-center items-center flex-col relative z-10">
<motion.div
variants={staggerContainer}
initial="hidden"
whileInView="show"
viewport={{ once: false, amount: 0.25 }}
className={`${styles.innerWidth} mx-auto ${styles.flexCenter} flex-col`}
>
initial | 初期値 |
whileInView | |
viewport |
設定項目
initial
whileInView
viewport
CustomTexts.jsx
TypingText
{Array.from(title).map((letter, index) => (
<motion.span variants={textVariant2} key={index}>
{letter === ' ' ? '\u00A0' : letter}
</motion.span>
))}
TitleText
idがworld-2のものをactiveに設定
const [active, setActive] = useState("world-2");
activeがtrueの時はflex-[10]、activeがfalseの時はflex-[2]に設定することでworld-2の画像の横幅を広げることができます。
<motion.div
variants={fadeIn('right', 'spring', index * 0.5, 0.75)}
className={`relative ${
active === id ? 'lg:flex-[3.5] flex-[10]' : 'lg:flex-[0.5] flex-[2]'
} flex items-center justify-center min-w-[170px] h-[700px] transition-[flex] duration-[0.7s] ease-out-flex cursor-pointer`}
onClick={() => handleClick(id)}
>
indexの値が10より小さいときは0を表示。それ以外は何も表示しない。
{startingFeatures.map((feature, index) => (
<StartSteps
key={feature}
number={`${index < 10 ? '0' : ''} ${index + 1}`}
text={feature}
/>
))}
ABOUT ME