// turtle_co/src/App.js
import React, { useEffect, useState } from 'react';
import './App.css';
function App() {
const [scrollPosition, setScrollPosition] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollPosition(window.scrollY);
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
// Calculate the initial transform value to center the text
const initialTransform = `translateX(-${scrollPosition / 2}px)`;
return (
<div className="App">
<header className="App-header">
<h1>App-header</h1>
</header>
<h1 style={{ transform: initialTransform }}>안녕,</h1>
</div>
);
}
export default App;
/* turtle_co/src/App.css */
.App {
text-align: center;
height: 3000px;
}
.App-header {
background-color: #282c34;
padding: 3px;
margin-left: 100px;
margin-right: 100px;
color: white;
font-size: 10px;
}