Contents

Transisi Gambar Kustom di Next.js Dengan Tailwind CSS

2022-05-12

-- views

Membuat gambar lebih interaktif dengan menggunakan transisi CSS.

Pengantar

Salah satu aspek terpenting dari sebuah situs web adalah gambarnya. Gambar sekarang dapat menjadi lebih interaktif dengan penggunaan transisi CSS. Jadi, dalam tutorial ini, kita akan belajar bagaimana membuat gambar lebih interaktif menggunakan Tailwind CSS.

Tailwind CSS adalah framework CSS utility-first CSS yang dikemas dengan class. Tailwind CSS tidak dilengkapi dengan komponen, tidak seperti framework CSS lainnya seperti Bootstrap atau Chakra UI. Tailwind CSS, di sisi lain, bekerja dengan memberi kita satu set class. Dengan class ini, kita dapat dengan cepat membuat desain kita sendiri.

Memulai

Mulailah dengan membuat proyek Next.js baru. Menggunakan Create Next App adalah metode yang paling umum.

$ npx create-next-app my-project
$ cd my-project

Setelah proyek dibuat, kita akan pindah ke instalasi tailwind.

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Tambahkan path ke file tailwind.config.js.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tambahkan @tailwind ke file ./styles/globals.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Setelah semua selesai, kita dapat mulai menjalankan proyek dengan:

$ yarn dev

# or

$ npm run dev

Cara Kerja Transisi CSS Tailwind

Sebagai contoh, kita dapat membuat tombol dengan transisi hover yang mengubah warna latar belakangnya.

<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>

terlihat bahwa dengan class transition kita dapat mengubah warna background dari bg-teal-600 menjadi bg-indigo-500 dengan durasi 300ms duration-300.

Hal-hal terkait transisi, yang mencakup properti transisi, durasi transisi, fungsi waktu transisi, penundaan transisi, dan animasi, dapat ditemukan di dokumentasi Tailwind CSS. Berikut semua penjelasan untuk itu:

Memahami next/image onLoadingComplete callback

onLoadingComplete adalah fungsi callback yang dipanggil setelah gambar dimuat sepenuhnya dan placeholder telah dihapus. Ini berarti, kita dapat menambahkan transisi sebelum gambar dimuat sepenuhnya.

Untuk melihat cara kerja callback onLoadingComplete, kita harus membuat state yang berisi boolean false.

import React, { useState } from 'react';
import NextImage from 'next/image';

const Image = ({ src, ...props }) => {
  const [isReady, setIsReady] = useState(false);

  return (
    <NextImage objectFit='cover' src={src} {...props} layout='responsive' />
  );
};

export default Image;

Selanjutnya, kita membuat fungsi onLoadCallback yang akan mengubah status isReady menjadi true.

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} layout='responsive' />
  );
};

export default Image;

Setelah itu, kita bisa memanggil fungsi onLoadCallback pada props onLoadingComplete, yang akan memicu parameter event yang berisi img yang dimuat.

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;

Membuat Komponen Gambar Kustom

Sekarang setelah kita mengetahui cara menggunakan callback onLoadingComplete, kita dapat membuat komponen gambar kustom dengan membuat folder komponen dan meletakkan file image.js di dalamnya.

├── README.md
├── components # Ini adalah folder tempat kita akan membuat komponen gambar kustom
│   └── 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

Kemudian, pada file image.js, tambahkan kode berikut:

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;

Sebenarnya kode di atas adalah kode yang sama (full version) dengan kode yang telah kita pelajari di bagian Memahami next/image onLoadingComplete callback.

Menerapkan Efek Blur ke Gambar

Kita akan menggunakan efek blur untuk menerapkan efek pada gambar kustom yang telah kita buat sebelumnya. Kita dapat melakukannya dengan menambahkan class blur dengan blur-2xl ke gambar ketika isReady adalah false dan menghapusnya ketika isReady adalah true dengan blur-0.

Untuk membuat transisi lebih interaktif, kita dapat menambahkan kelas scale dengan scale-120 ke gambar ketika isReady adalah false dan scale-100 ketika isReady adalah true.

Kita juga akan menambahkan kelas transisi dan durasi-1000 ke gambar untuk menerapkan efek transisi.

<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'
/>

Setelah itu, kita dapat mengimpor komponen gambar yang telah kita buat sebelumnya dan menggunakannya di semua gambar.

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;

Membuat Daftar Karakter Rick and Morty Dengan Komponen Gambar Kustom

Untuk menerapkan ke proyek, kita hanya perlu mengimpor komponen yang telah dibuat sebelumnya.

Sebagai contoh, kita akan mengimplementasikan dengan menggunakan Rick and Morty 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;

Berikut adalah hasil implementasi Daftar Karakter Rick and Morty dengan Gambar Kustom.

implementation of the Rick and Morty Character List

Kesimpulan

Tailwind CSS dapat digunakan untuk memberikan efek transisi ke gambar kustom dan membuatnya lebih interaktif.

The code of this project lives at : [https://github.com/jagadyudha/custom-image-transition-in-nextjs-with-tailwind-css](https://github.com/jagadyudha/custom-image-transition-in-nextjs-with-tailwind-css

Post Reactions

LOVE

Wow

YAY

Contributors

The writing on this website may contain errors in grammar, punctuation, etc. Please make a contribution here

Ads