GGR/1 #gatsbyjs, gsap, React — сложные анимации и вёрстка
В этом туториале мы рассмотрим, как создать сложные анимации и вёрстку на сайте, используя технологии GatsbyJS, gsap и React. Мы также будем использовать новый компонент StaticImage из Gatsby для оптимизации загрузки изображений. В конце мы создадим шаблон сайта с меню и красивыми анимациями.
-
Установка GatsbyJS и создание проекта:
Для начала установите Gatsby CLI, если его у вас еще нет:npm install -g gatsby-cli
Затем создайте новый проект с помощью команды:
gatsby new my-gatsby-project
Перейдите в папку проекта:
cd my-gatsby-project
- Создание компонента для анимации:
Создайте новый компонент с помощью команды:gatsby new component AnimationComponent
Откройте файл AnimationComponent.js и добавьте следующий код:
import React, { useEffect, useRef } from 'react'; import { gsap } from 'gsap';
const AnimationComponent = () => {
const elementRef = useRef(null);
useEffect(() => {
gsap.from(elementRef.current, { duration: 1, x: 100, opacity: 0 });
}, []);
return
;
};
export default AnimationComponent;
3. Использование компонента StaticImage:
Gatsby 3.0 ввел новый компонент StaticImage для оптимизации загрузки изображений:
```jsx
import { StaticImage } from 'gatsby-plugin-image';
const Header = () => (
<header>
<StaticImage
src="../images/header.jpg"
alt="Header"
/>
</header>
);
-
Создание шаблона сайта:
Создайте компонент Layout.js для размещения всех страниц сайта:const Layout = ({ children }) => ( <> <header> Меню </header> {children} <footer> © 2022 My Company </footer> </> );
- Использование компонентов:
Импортируйте компоненты в файл index.js и используйте их:import Layout from './Layout'; import AnimationComponent from './AnimationComponent';
const IndexPage = () => (
Добро пожаловать!
);
export default IndexPage;
6. Запуск проекта:
Запустите проект с помощью команды:
```bash
gatsby develop
Откройте браузер и перейдите на http://localhost:8000/, чтобы увидеть результат.
Теперь у вас есть сайт с красивыми анимациями и оптимизированными изображениями, созданный с использованием GatsbyJS, gsap и React. Вы можете дальше расширить функционал сайта и добавить новые компоненты и анимации.