Dokumen ini dibuat untuk membantu pengguna domestik yang mempelajari FramerFramer, yang mengalami kesulitan karena kurangnya materi dalam bahasa Korea, dengan menerjemahkan konten blog resmi ke dalam bahasa Korea serta menambahkan informasi bermanfaat untuk praktik. Semoga ini dapat membantu Anda yang menggunakan FramerFramer.

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.

Remix →

Konten ini adalah terjemahan dan adaptasi dari artikel di blog resmi FramerFramer berjudul ‘Incorporating dynamic scribbles into your website’.