Paralaks, Inspirasi Desain Web dari Kajian Astronomi

Paralaks atau parallax dalam dunia desain web bukan hal asing bagi banyak orang, terutama bagi para desainer web dan pemrogram front-end. Dulu sempat mengetren selama beberapa tahun. Pada Januari 2014, frekuensi penelusuran kata kunci parallax design di Google sempat meraih puncak.

Meskipun sudah mengalami penurunan tren secara signifikan, kita masih bisa menemukan beberapa situs web, templat situs web, dan portofolio yang masih relatif baru bertebaran di berbagai platform. Seperti banyak tren lainnya yang tidak begitu mudah untuk hilang/mati, ketertarikan masyarakat pada desain paralaks ini mulai memasuki fase kestabilan persisnya sejak akhir 2020 atau awal 2021.

Google Books Ngram Viewer membenarkan tren tersebut sekaligus membantah situasi belakangan, namun juga memberikan tambahan wawasan. Istilah parallax design sendiri ternyata sudah sempat muncul jauh sebelum internet pertama kali bisa diakses oleh publik. Muncul lagi pada pertengahan 1980-an, meningkat secara signifikan mulai 1999—bersamaan dengan terjadinya fenomena dot-com bubble—, dan mencapai puncaknya pada 2002. Kemudian turun kembali secara drastis mulai 2014.

Apa yang menyebabkan tren desain paralaks mengalami penurunan? Mengutip dari IEEE Spectrum, pendanaan ventura kepada perusahaan rintisan di Amerika pada 2014 mencetak angka tertinggi dalam sejarah sejak peristiwa dot-com crash. Melalui 4.356 transaksi, kapitalis ventura menggelontorkan dana sebesar 48,3 miliar dolar atau sekitar 814,5 triliun rupiah. Meskipun belum jelas korelasinya, saya pikir titik ini bisa menjadi awalan yang bagus untuk eksplorasi ke depannya.

Sementara kata parallax sendiri pertama kali diketahui kemunculannya pada 1625 menurut Google Books Ngram Viewer. Pada akhirnya rasa penasaran kita tergelitik; paralaks itu sebenarnya apa? Cambridge Advanced Learner's Dictionary & Thesaurus berusaha memberikan definisi kata tersebut:

The effect by which the position of an object seems to change when it is looked at from different positions.

Sementara Britannica sembari merujuk pada astronomi memberikan penjelasan arti sebagai the difference in direction of a celestial object as seen by an observer from two widely separated points.

Dengan cukup memasukkan kata kunci parallax, kita bisa menemukan berbagai penjelasan tambahan secara visual yang relatif mudah dipahami sekalipun untuk kalangan awam seperti saya.

Pada kesempatan ini, kita akan menjelajahi beberapa inspirasi desain web yang sedikit banyak dipengaruhi oleh fenomena paralaks yang terjadi di luar angkasa. Dilanjutkan dengan beberapa eksperimen dalam upaya mempelajari teknik-teknik dasar implementasinya ke dalam desain web berdasarkan contoh-contoh yang berhasil kita observasi di internet.

Dalam artikel ini:

• Mengobservasi Dunia
• Melakukan Pertunjukan

Mengobservasi Dunia

Cara paling mudah untuk mendapatkan inspirasi desain yang mengadopsi paralaks adalah dengan mengetikkan kata kunci parallax ke dalam bilah input pencarian di Dribbble. Di bawah ini merupakan contoh implementasi yang sempat menjadi paling populer di fase awal kepopuleran desain paralaks berdasarkan pengamatan saya.

Variasi pertama ini sebenarnya lebih agresif ketimbang kebanyakan desain yang lebih umum saya temui dalam rentang waktu yang sama. Di bawah ini contoh variasi yang lebih umum yang saya maksud.

Saya bisa melihat mengapa pendekatan terakhir di atas kemungkinan lebih banyak diapresiasi daripada yang sebelumnya. Animasi paralaks pada halaman web yang ini tidak terlalu menggangu kemampuan pengunjung untuk membaca dan menemukan kembali informasi, meskipun mungkin dipandang kurang dalam memberikan pengalaman yang immersive.

Sayangnya, pertunjukannya tampak kurang bisa diterima oleh banyak pengguna. Mereka tidak terkesan sebagaimana harapan, bahkan pendekatan desain ini dinilai merugikan pengalaman pengguna. Pada fase tren berikutnya, implementasinya bergeser ke arah yang lebih bisa dikendalikan.

Pada dua contoh di atas, animasi pergerakan elemen-elemen dan latar belakangnya terasa lebih halus dan kadang tidak kentara. Fungsi pengaturan waktu animasi tidak lagi linear mengikuti posisi gulir tetikus, melainkan sudah lebih organik dan lebih bisa bercerita. Perubahannya tidak hanya terpaut pada satu variabel—posisi vertikal latar belakang—, namun juga pada perspektif dalam ruang tiga dimensi yang memberikan efek kedalaman yang lebih menarik.

Terutama pada satu contoh tambahan berikut ini, efek kedalaman lebih mudah untuk dinikmati tanpa mengorbankan pengalaman pengguna dalam mendapatkan informasi.

Berikut ini adalah dua contoh alternatif implementasi efek paralaks yang melibatkan lebih dari satu percepatan elemen seperti pada contoh terakhir di atas, yang juga mengenalkan variabel perubahan baru yaitu perbesaran dan perputaran relatif.

Ujung-ujungnya, ketika menghendaki efek paralaks untuk diterapkan pada situs web kita, kita perlu mempertimbangkan banyak hal, khususnya terkait dengan pengalaman pengguna dalam mendapatkan informasi. Jangan malah pengunjung terlena atau bahkan tersakiti sehingga merugikan bisnis kita.

Melakukan Pertunjukan

Mari kita mulai dari implementasi yang paling sederhana.

.viewport {
    height: 50vh;
    color: #111;
    background-color: #FFF;
    overflow: auto;

    .object {
        position: relative;
        box-sizing: border-box;
        padding: 2rem;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.5rem;
        line-height: 3.5rem;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        z-index: 0;

        &:nth-of-type(2) {
            color: #FFF;

            /* Bagian ini yang penting */
            background-image: url("...");
            background-position: center center;
            background-size: cover;
            background-attachment: fixed;

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                backdrop-filter: brightness(35%);
                z-index: -1;
            }
        }

        span {
            content: "";
            position: absolute;
            height: 50%;
            width: auto;
            aspect-ratio: 1;
            z-index: -1;

            /* Bagian ini juga penting */
            background-image: url("...");
            background-position: center center;
            background-size: cover;
            background-attachment: fixed;

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                backdrop-filter: invert(100%);
                z-index: -1;
            }
        }
    }
}

<div class="viewport">
    <div class="object">Please, you tell me</div>
    <div class="object">Why she's so cute</div>
    <div class="object">Know the answer?</div>
    <div class="object">Uh, really?<span></span></div>
    <div class="object">Come on, man.</div>
</div>

Please, someone tell me

Why you're—awesome

Come on, anyone.

.viewport {
    height: 50vh;
    width: 100%;
    color: #111;
    background-color: #FFF;
    overflow-y: auto;
    overflow-x: hidden;

    /* Bagian ini yang penting */
    perspective: 1px;

    .wrapper {
        position: relative;
        width: 100%;
        height: 100%;

        /* Bagian ini juga penting */
        transform-style: preserve-3d;

        img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;

            /* Bagian ini juga penting */
            top: 80%;
            transform: translateZ(-1px) scale(2);
        }

        .object {
            box-sizing: border-box;
            padding: 2rem;
            height: 80%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3.5rem;
            line-height: 3.5rem;
            font-weight: 700;
            text-align: center;
            text-transform: uppercase;

            /* Bagian ini cukup penting */
            background-color: #FFF;

            &:nth-of-type(2) {
                color: #FFF;
                background-color: #000A;
            }
        }
    }
}

<div class="viewport">
    <div class="wrapper">
        <img src="...">
        <div class="object">Please, someone tell me</div>
        <div class="object">Why you're&mdash;awesome</div>
        <div class="object">Come on, anyone.</div>
    </div>
</div>

Sebagai catatan, variasi implementasi terakhir di atas nampaknya agak berliku-liku. Saya beberapa kali menghadapi situasi di mana efeknya bekerja pada Firefox, namun tidak bekerja pada Chrome. Juga sebaliknya. Penggunaan properti seperti backdrop-filter tidak mesti konsisten antar peramban dalam konteks ini. Sehingga diperlukan upaya lebih untuk memastikan kodenya berjalan pada semua peramban utama.

Yang tidak kalah penting bahkan lebih penting adalah bagaimana cara mengoptimasi penerapannya sehingga tidak menggangu keseluruhan performa halaman web. Coba perhatikan seberapa mahal potensi biaya komputasi yang dibutuhkan untuk menghasilkan efek paralaks sekalipun model yang paling sederhana.

Pada dasarnya, paralaks hanya bisa tercipta pada lingkungan yang berlapis, di mana satu objek atau kumpulan objek memiliki kedalaman yang berbeda dari yang lainnya relatif terhadap jendela pandang pengguna. Lapisan-lapisan ini digambar sendiri-sendiri menjadi bitmap, diunggah ke GPU sebagai tekstur, dan kemudian digabung menjadi satu gambar utuh untuk ditampilkan ke layar komputer. Secara umum proses komposisi memerlukan biaya komputasi yang relatif murah. Namun jumlah lapisan grafis yang terlampau banyak bisa meningkatkan biayanya, terutama jika ada objek atau lapisan yang perlu digambar berulang kali.

Salah satu cara yang paling simpel yaitu dengan mengumpulkan semua elemen .object ke dalam satu wadah seperti dalam contoh kode berikut ini.

<div class="viewport">
    <div class="wrapper">
        <img src="...">
        <div style="width: 100%; height: 100%;">
            <div class="object">Please, someone tell me</div>
            <div class="object">Why you're&mdash;awesome</div>
            <div class="object">Come on, anyone.</div>
        </div>
    </div>
</div>

Sehingga tiap elemen .object berikut simpul teks di dalamnya tidak lagi dipromosikan menjadi lapisan grafis yang terpisah.

Sekarang mari kita lihat contoh variasi terakhir dengan menambahkan sedikit kode JavaScript.

Hey, now I have no doubt

You're absolutely a winner!

Let's celebrate together.

.viewport {
    --distance: 1.0;

    ...

    .wrapper {
        ...

        .object {
            ...

            &.target {
                color: #FFF;
                background-color: rgba(0, 0, 0, calc(0.60 + 0.30 * var(--distance, 1.0)));
            }
        }
    }
}

<div class="viewport">
    <div class="wrapper">
        ...
        <div class="object target">You're absolutely a winner!</div>
        ...
    </div>
</div>

let viewport = document.querySelector(".viewport");
let target = viewport.querySelector(".target");
viewport.addEventListener("scroll", () => {
    const vBBox = viewport.getBoundingClientRect();
    const tBBox = target.getBoundingClientRect();
    const vCenter = vBBox.top + vBBox.height / 2;
    const tRCenter = tBBox.top + tBBox.height / 2;
    const distance = Math.abs(vCenter - tRCenter);
    viewport.style.setProperty("--distance", Math.min(distance / (vBBox.height / 2), 1.0));
});

Kita bisa melanjutkan eksperimen menggunakan berbagai web API lainnya seperti MouseEvent, AnimationTimeline, Intersection Observer API, Resize Observer API, dan/atau bahkan WebGL/WebGPU. Sebagai­mana kata pepatah,

The only limit is your imagination.

Jangan berhenti untuk terus berkarya! Jika kamu memiliki ide untuk artikel berikutnya dalam serial ini, jangan ragu untuk menghubungi saya melalui WhatsApp atau surel. Siapa tahu kita bisa berkolaborasi ke depannya :)