Вступление
Одним из наиболее важных аспектов веб-сайта являются его изображения. Изображения теперь могут стать более интерактивными с использованием CSS переходов. Итак, в этом уроке мы узнаем, как сделать изображения более интерактивными с помощью Tailwind CSS.
Tailwind CSS — это ориентированная на утилиты CSS-инфраструктура, наполненная классами. Tailwind CSS не поставляется с компонентами, в отличие от других фреймворков CSS, таких как Bootstrap или Chakra UI. С другой стороны, Tailwind CSS работает, предоставляя вам набор классов. С помощью этих классов вы сможете быстро создавать свои собственные проекты.
Начало работы
Если у вас его еще нет, начните с создания нового проекта Next.js. Использование Create Next App является наиболее распространенным методом.
$ npx create-next-app my-project
$ cd my-project
После создания проекта переходим к установке Tailwind.
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p
Добавьте пути ко всем файлам вашего шаблона в tailwind.config.js файле.
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
Добавьте директивы @tailwind в ./styles/globals.css файл.
@tailwind base;
@tailwind components;
@tailwind utilities;
В конце концов, мы можем запустить проект с помощью:
$ yarn dev
# or
$ npm run dev
Как работают переходы Tailwind CSS
Например, мы можем сделать кнопку с переходом при наведении, который меняет цвет фона.
<button className='rounded-full bg-teal-600 px-6 py-3 font-medium text-white transition duration-300 hover:bg-indigo-500'>
Hello Universe!
</button>
с кода понятно, что с помощью класса transition мы можем изменить цвет фона с bg-teal-600 на bg-indigo-500 с длительностью 300 мс duration-300.
Элементы перехода, включая свойства перехода, продолжительность перехода, функцию синхронизации перехода, задержку перехода и анимацию, можно найти в документации Tailwind CSS. Вот все объяснения:
- Свойство перехода — Tailwind CSS
- Продолжительность перехода — Tailwind CSS
- Функция синхронизации перехода — Tailwind CSS
- Задержка перехода — Tailwind CSS
- Анимация — Tailwind CSS
Понимание обратного вызова next/image
onLoadingComplete — это функция обратного вызова, которая вызывается после полной загрузки изображения и удаления заполнителя.
Это означает, что мы можем добавить переход до полной загрузки изображения.
Чтобы увидеть, как в onLoadingComplete работает обратный вызов, мы должны создать состояние, содержащее логическое значение false.
const [isReady, setIsReady] = useState(false);
Затем мы создаем функцию onLoadCallback, которая изменит состояние isReady на true.
const onLoadCallback = () => {
setIsReady(true);
};
После этого мы можем вызвать onLoadCallback функцию в onLoadingComplete свойстве, которая вызовет параметр события, содержащий загруженный файл img.
<NextImage
objectFit='cover'
src={}
width={}
height={}
onLoadingComplete={onLoadCallback} //this is called the callback function
/>
Создание пользовательских компонентов изображений
Теперь, когда мы знаем, как использовать обратный вызов onLoadingComplete , мы можем создавать пользовательские компоненты изображения, создав папку компонентов и поместив в нееimage.js файл.
├── README.md
├── components # This is the folder where we will create our custom images components
│ └── image.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.js
│ ├── index.js
├── postcss.config.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── styles
│ ├── Home.module.css
│ └── globals.css
└── tailwind.config.js
Затем в файл image.js добавьте следующий код:
import React, { useState } from 'react';
import NextImage from 'next/image';
const Image = ({ src, ...props }) => {
const [isReady, setIsReady] = useState(false);
const onLoadCallback = () => {
setIsReady(true);
};
return (
<NextImage
objectFit='cover'
src={src}
{...props}
onLoadingComplete={onLoadCallback}
layout='responsive'
/>
);
};
export default Image;
На самом деле приведенный выше код — это тот же код (полная версия), что и код, который мы изучили в разделе «Обратные вызовы next/image».
Применение эффекта размытия к изображениям
Мы используем эффект размытия, чтобы применить эффект к пользовательским изображениям, которые мы создали ранее. Мы можем сделать это, добавив класс размытия blur-2xl к изображению, когда isReady равно false, и удаляет, когда isReady равно true, добавляя класс blur-0.
Чтобы сделать переход более интерактивным, мы можем добавить класс масштабирования scale-120 к изображению, когда isReady равно false и scale-100 когда isReady равно true.
Мы также добавляем класс transition и duration-1000 к изображению, чтобы применить эффект перехода.
<NextImage
objectFit='cover'
src={src}
className={`bg-gray-400 transition duration-1000 ${
isReady ? 'scale-100 bg-gray-400 blur-0' : 'scale-120 blur-2xl'
}`}
{...props}
onLoadingComplete={onLoadCallback}
layout='responsive'
/>
После этого мы можем импортировать компоненты изображений, которые мы создали ранее, и использовать их во всех изображениях.
//this is the image component we created before
import Image from '../components/image';
const Test = () => {
return (
<main className='flex h-screen w-screen items-center justify-center'>
<div className='w-1/4'>
<Image src={`YOURIMAGESRC`} width={300} height={300} />
</div>
</main>
);
};
export default Test;
Создайте список персонажей Рика и Морти с пользовательским изображением
Чтобы новый проект заработал, нам нужно импортировать компоненты, которые были созданы ранее.
Например, мы будем реализовывать API Рика и Морти.
import Image from '../components/image';
export async function getStaticProps() {
const res = await fetch('https://rickandmortyapi.com/api/character/');
const content = await res.json();
return {
props: {
content,
},
};
}
const Home = ({ content }) => {
return (
<div className='bg-gray-200 p-5 sm:p-16 lg:p-32'>
<div className='grid grid-cols-1 gap-5 sm:grid-cols-2 md:gap-10 lg:grid-cols-3 xl:grid-cols-5'>
{content.results.map((character) => {
const { id, name, image, status, type, gender } = character;
return (
<div key={id} className='rounded-lg bg-white'>
<div className='overflow-hidden rounded-t-lg'>
<Image
src={image}
width={300}
height={300}
layout='responsive'
/>
</div>
<div className='mx-4 my-4'>
<h2 className='text-xl font-bold text-gray-900'>{name}</h2>
<p className='text-md text-gray-600'>Status : {status}</p>
<p className='text-md text-gray-600'>Gender : {gender}</p>
</div>
</div>
);
})}
</div>
</div>
);
};
export default Home;
Вот результат реализации списка персонажей Рика и Морти с пользовательским изображением.
Выводы
Tailwind CSS можно использовать для создания эффекта перехода к пользовательским изображениям, делая их более интерактивными.
Код этого проекта находится по адресу: https://github.com/jagadyudha/custom-image-transition-in-nextjs-with-tailwind-css.
Топ коментарі (0)