UXPUB

UXPUB - спільнота з 4,755 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Кастомные эффекты для изображений в Next.js с помощью Tailwind CSS
Саша Федорова
Саша Федорова

Опубліковано

Кастомные эффекты для изображений в Next.js с помощью Tailwind CSS

Вступление

Одним из наиболее важных аспектов веб-сайта являются его изображения. Изображения теперь могут стать более интерактивными с использованием 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>
Войти в полноэкранный режим Выход из полноэкранного режима

Tailwind CSS button

с кода понятно, что с помощью класса transition мы можем изменить цвет фона с bg-teal-600 на bg-indigo-500 с длительностью 300 мс duration-300.

Элементы перехода, включая свойства перехода, продолжительность перехода, функцию синхронизации перехода, задержку перехода и анимацию, можно найти в документации 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)