Box Sash Window, Inspirasi Desain Web dari Desain Interior

Series: CSS Multiverse—Part 2

Author: Naufan Rusyda Faikar

Bagi orang-orang yang lahir dan besar di kota besar yang gemerlapan, juga bagi saya sekalipun yang tinggal di kota industri yang cukup sempit, jendela yang terbukanya ke atas sudah merupakan suatu mainan yang aneh. Apalagi jika mekanismenya masih menggandalkan tali, sangat tidak umum. Seakan-akan kita sedang menonton film abad pertengahan Eropa. Perhatikan potret-potret di bawah ini.

Potret bangunan bergaya Eropa kuno dengan jendela selempang oleh Gunnar Ridderström yang dipublikasikan pada 16 Juli 2019 di Unsplash.
Potret bangunan bergaya Eropa tua dengan jendela selempang oleh Frank yang dipublikasikan pada 23 Maret 2025 di Unsplash.
Potret jendela selempang pada bangunan kuno oleh Roger Starnes yang dipublikasikan pada 12 Januari 2024 di Unsplash.
Potret jendela selempang pada bangunan modern oleh Thanos Pal yang dipublikasikan pada 9 Desember 2018 di Unsplash.

Menurut sejarah, referensi paling awal jendela geser ini dibuat oleh seorang tukang kayu, Thomas Kinward, pada 1669 saat bekerja di Istana Whitehall di London. Pengaruhnya kemudian menyebar ke koloni-koloni Amerika, terutama di New England, Atlantik Tengah dan Selatan.

Sementara karakter yang mirip dalam bentuk yang lebih lazim kita jumpai dalam keseharian dibawakan oleh rolling door pada bangunan toko serta warung makanan seperti yang terlihat pada gambar-gambar berikut ini.

Potret pintu gulung pada bangunan toko oleh Ross Sneddon yang dipublikasikan pada 15 Juli 2020 di Unsplash.
Potret pintu gulung pada warung makanan oleh Oleksandr Kuzmin yang dipublikasikan pada 4 September 2022 di Unsplash.

Bagaimana para artis desain web terinspirasi oleh citra yang ditimbulkan dari box sash window atau juga dikenal dengan sebutan sliding window? Yuk kita cari tahu!

Dalam artikel ini:

Baru pertama kali mampir? Baca artikel pertama dalam serial ini: Paralaks, Inspirasi Desain Web dari Kajian Astronomi.

Mengobservasi Dunia

Seperti banyak agensi kreatif lainnya, Awd Agency juga memberikan sentuhan modern kepada situs webnya sendiri. Salah satu yang paling kuat dan termasuk di antara yang paling pertama bisa dinikmati oleh pengguna adalah gerakan mengungkapkan gambar-gambar tangkapan layar dari proyek-proyek unggulan mereka di halaman awal seperti yang terlihat dalam rekaman di bawah ini.

Sebagai catatan, ada elemen animasi yang hilang sewaktu mengakses situs webnya melalui perangkat seluler. Untungnya bukan sesuatu yang mendasar. Bagaimanapun kita akan mengacu kepada versi desktopnya dalam artikel ini. Sementara video yang muncul di bawah ini tetap akan menyesuaikan dengan jenis perangkat yang kalian sedang gunakan.

Landing page milik sebuah agensi kreatif di Italia bernama Awd Agency.

Terlepas dari kesan yang berusaha mereka bangun, kita bisa dengan mudah menyetujui bahwa animasi semacam ini cukup keren untuk dipertontonkan. Detail yang memadai untuk muncul berbeda dari situs web orang lain.

Tidak cukup mudah memang menemukan contoh-contoh gerakan menggeser ke atas seperti di atas. Pada lebih banyak situs web, gerakannya dari kanan ke kiri atau sebaliknya, sebagaimana ada lebih banyak pintu geser dan tirai yang membuka dan menutup secara horizontal ketimbang yang bergerak secara vertikal. Alih-alih menghabiskan waktu terlalu banyak untuk menemukan contoh-contoh lain, kita langsung coba ekskusi yuk.

Melakukan Pertunjukan

Ada beberapa hal yang perlu diperhatikan supaya bisa lebih presisi dalam menirukan animasinya, yakni perubahan pada perbesaran gambar, posisi kontainer gambar, posisi gulir halaman, fungsi pengaturan waktu animasi, dan durasi animasinya. Supaya contohnya lebih sederhana, kali ini kita abaikan saja posisi gulirnya, ya. 

@property --wrapper-top {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --image-top {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@keyframes animate-wrapper {
    0% {
        --wrapper-top: 100%;
        transform: translateY(4rem);
    }
    80%, 100% {
        --wrapper-top: 0%;
        transform: translateY(0);
    }
}

@keyframes animate-image {
    10% {
        --image-top: 100%;
        scale: 1.3;
    }
    100% {
        --image-top: 0%;
        scale: 1.0;
    }
}

.viewport {
    height: 50vh;
    width: 100%;
    display: grid;
    place-items: center;
    background-color: #FFF;
    overflow: hidden;

    .wrapper {
        background-color: greenyellow;
        clip-path: polygon(0% var(--wrapper-top), 100% var(--wrapper-top), 100% 100%, 0% 100%);
        animation: animate-wrapper .8s ease-in-out forwards;

        img {
            display: block;
            width: min(20rem, 45vh);
            height: auto;
            aspect-ratio: 1;
            object-fit: cover;
            clip-path: polygon(0% var(--image-top), 100% var(--image-top), 100% 100%, 0% 100%);
            animation: animate-image .8s ease-in-out forwards;
        }
    }
}
<div class="viewport">
    <div class="wrapper">
        <img src="...">
    </div>
</div>

Selamat bereksperimen!