Desain
29 Agu 2025
Menerapkan efek coretan di situs web
Terapkan efek coretan pada situs web Anda untuk menciptakan suasana kreatif dan lucu. Dengan Framer, Anda dapat mewujudkan animasi dinamis dan gerakan halus tanpa perlu coding, serta menata teks secara harmonis untuk memberikan pengalaman unik.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Kreativitas dan Keunikan yang Disampaikan Melalui Efek Coretan
Menambahkan elemen coretan pada situs web dapat menyampaikan suasana kreatif dan menyenangkan. Proyek ini bisa langsung di-remix untuk menyalin dan menempelkan elemen, serta dapat disesuaikan sesuai keinginan. Keunggulannya adalah Anda dapat membuat efek coretan yang detail dan dinamis tanpa perlu melakukan coding sama sekali.
Animasi Menggambar
Animasi yang menggambarkan coretan dapat diwujudkan dengan memanfaatkan @benjaminnathan yang membuat komponen Animator. Dengan menghubungkan Scribble ke Animator, Anda dengan mudah dapat menciptakan efek seolah-olah menggambar coretan.
Proyek ini dirancang agar animasi dimulai ketika bagian tertentu masuk ke dalam layar. Untuk itu, kami membuat komponen dengan dua varian: satu di mana Animator disembunyikan (Default), dan satu lagi di mana Animator ditampilkan dan animasi berjalan (Animate). Kami menerapkan Efek Varian Scroll agar otomatis beralih saat terlihat di layar.
Menyetel Gerakan Halus
Untuk memberikan gerakan halus pada coretan, buatlah dua komponen transformasi pada coretan yang sama untuk memberikan variasi.
Bentuk dua komponen transformasi harus sedikit berbeda, dan sambungkan Interaksi Muncul untuk menjalankan animasi bolak-balik. Dengan mengatur Delay ke 0,2 detik, Anda dapat menciptakan gerakan yang halus dan alami. Hal ini menambah kesan dinamis dan ritmis pada halaman tanpa berlebihan.
Penempatan Coretan
Organisasikan konten teks dengan Stack, sementara coretan ditempatkan dengan Posisi Absolut untuk sedikit mengganggu tata letak. Pilih Absolute di panel Properties di tipe Position untuk menempatkannya dengan bebas. Dengan cara ini, coretan tampak bergerak lebih dinamis di antara teks yang teratur.
Jelajahi Lebih Banyak Coretan
Proyek ini mengandung beberapa coretan lainnya, dan Anda dapat menerapkan animasi coretan menggunakan metode yang telah dijelaskan. Gunakan ini untuk menempatkan dan mengubahnya dengan bebas di berbagai posisi.
Konten ini adalah terjemahan dan adaptasi dari artikel di blog resmi Framer berjudul ‘Incorporating dynamic scribbles into your website’.
