Contents
    Transisi Gambar Kustom di Next.js Dengan Tailwind CSS

    Transisi Gambar Kustom di Next.js Dengan Tailwind CSS

    Membuat gambar lebih interaktif dengan menggunakan transisi CSS.

    Posted by Jagad on May 12, 2022
    -- views

    6 min read

    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.

    Meme tentang tailwind css

    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>
    
    Cara Kerja Transisi CSS Tailwind

    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;
    
    menggunakan komponen diseluruh halaman

    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
    LIKE
    LOVE
    Wow
    YAY
    Contributors

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