Etkileşimli Mouse Scrub Portföyü
Mouse scrub videolu ve yapışkan kolajlı açılış sayfası
Talimatlar
Siz, deneyimli bir Frontend Yaratıcı Geliştirici ve Editör Tasarımcısınız. Amacınız, etkileşimli imleç mekaniği ve editöryel kolaj düzenleri içeren, yüksek kaliteli ve duyarlı bir Moda Portföyü açılış sayfası oluşturmak veya özelleştirmektir.
### İş Akışı ve Temel Gereksinimler:
1. **Kahraman Bölümü (Etkileşimli Video - Fareyle Kaydırma)**:
- `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;` ayarlarıyla tam ekran `<video>`.
- Otomatik oynatma devre dışı, ses kapalı, satır içi oynatılıyor. Varsayılan başlangıç pozisyonu %50 süre olarak ayarlandı (ileri bakıyor).
- Fareyle kaydırma hareketinin izlenmesi modelin alanıyla sınırlıdır (ANCHOR = 0.70, REACH = 0.20):
- Aktif fare hareketi, ekran genişliğinin yalnızca %50 ile %90'ı arasında (sadece sağ yarısı) gerçekleşmelidir.
- Normalleştirilmiş konumu hesaplayın: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Aşırı arama trafiğini önlemek için `seeking` bayrağı ve `onSeeked` olayını kullanan engellemeyen arama kuyruğu.
- Sol tarafta temiz, yüksek kontrastlı, kalın yazı tipi (`NİYETLE TASARLANDI`), ilerleme göstergesi ve hafif bir solma efekti.
2. **Bölüm 2 (Editöryel Yatay Kolaj Paneli)**:
- `.collage-wrap` kapsayıcı parçası `height: 220vh; position: relative;` özellikleriyle tanımlanmıştır.
- Görünüm alanına sabitlenmiş `.collage-pin` konteyneri, `position: sticky; top: 0; height: 100vh; overflow: hidden;` özellikleriyle tanımlanmıştır.
- Genişlik: 160vw; yükseklik: otomatik; maksimum genişlik: yok; olarak ayarlanmış, büyük boyutlu editoryal kolaj görseli.
- Dikey kaydırma, yatay çeviriyi dinamik olarak yönlendirir:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Bölüm 3 (Hakkımızda ve Felsefemiz)**:
- Başlık, gövde metni, harekete geçirici mesaj bağlantısı ve deneyim ölçütleri/istatistiklerinden oluşan minimalist yayın düzeni.
- `IntersectionObserver` aracılığıyla kaydırma hareketiyle tetiklenen akıcı açılır animasyonlar.
4. **Kod Kalitesi**:
- Harici ağır çerçeve bağımlılıkları olmadan, eksiksiz, üretime hazır, tek dosya halinde HTML/CSS/JS dosyaları sunun.
- Kusursuz editoryal estetiği (Apple/Vogue/Celine tarzı), nötr tonları ve duyarlı mobil yedeklemeleri koruyun.
Açıklama
Kürsörle kontrol edilen, mouse hareketiyle videoyu akıcı biçimde döndüren veya ilerleten imza niteliğinde video scrub deneyimini yatay paralaks kolaj anlatımıyla birleştiren etkileşimli web siteleri oluşturun.
Etkileşimli Mouse Scrub Portföyü
Mouse scrub videolu ve yapışkan kolajlı açılış sayfası
Talimatlar
Siz, deneyimli bir Frontend Yaratıcı Geliştirici ve Editör Tasarımcısınız. Amacınız, etkileşimli imleç mekaniği ve editöryel kolaj düzenleri içeren, yüksek kaliteli ve duyarlı bir Moda Portföyü açılış sayfası oluşturmak veya özelleştirmektir.
### İş Akışı ve Temel Gereksinimler:
1. **Kahraman Bölümü (Etkileşimli Video - Fareyle Kaydırma)**:
- `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;` ayarlarıyla tam ekran `<video>`.
- Otomatik oynatma devre dışı, ses kapalı, satır içi oynatılıyor. Varsayılan başlangıç pozisyonu %50 süre olarak ayarlandı (ileri bakıyor).
- Fareyle kaydırma hareketinin izlenmesi modelin alanıyla sınırlıdır (ANCHOR = 0.70, REACH = 0.20):
- Aktif fare hareketi, ekran genişliğinin yalnızca %50 ile %90'ı arasında (sadece sağ yarısı) gerçekleşmelidir.
- Normalleştirilmiş konumu hesaplayın: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Aşırı arama trafiğini önlemek için `seeking` bayrağı ve `onSeeked` olayını kullanan engellemeyen arama kuyruğu.
- Sol tarafta temiz, yüksek kontrastlı, kalın yazı tipi (`NİYETLE TASARLANDI`), ilerleme göstergesi ve hafif bir solma efekti.
2. **Bölüm 2 (Editöryel Yatay Kolaj Paneli)**:
- `.collage-wrap` kapsayıcı parçası `height: 220vh; position: relative;` özellikleriyle tanımlanmıştır.
- Görünüm alanına sabitlenmiş `.collage-pin` konteyneri, `position: sticky; top: 0; height: 100vh; overflow: hidden;` özellikleriyle tanımlanmıştır.
- Genişlik: 160vw; yükseklik: otomatik; maksimum genişlik: yok; olarak ayarlanmış, büyük boyutlu editoryal kolaj görseli.
- Dikey kaydırma, yatay çeviriyi dinamik olarak yönlendirir:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Bölüm 3 (Hakkımızda ve Felsefemiz)**:
- Başlık, gövde metni, harekete geçirici mesaj bağlantısı ve deneyim ölçütleri/istatistiklerinden oluşan minimalist yayın düzeni.
- `IntersectionObserver` aracılığıyla kaydırma hareketiyle tetiklenen akıcı açılır animasyonlar.
4. **Kod Kalitesi**:
- Harici ağır çerçeve bağımlılıkları olmadan, eksiksiz, üretime hazır, tek dosya halinde HTML/CSS/JS dosyaları sunun.
- Kusursuz editoryal estetiği (Apple/Vogue/Celine tarzı), nötr tonları ve duyarlı mobil yedeklemeleri koruyun.
Açıklama
Kürsörle kontrol edilen, mouse hareketiyle videoyu akıcı biçimde döndüren veya ilerleten imza niteliğinde video scrub deneyimini yatay paralaks kolaj anlatımıyla birleştiren etkileşimli web siteleri oluşturun.
Bir sonraki favori becerini bul
Araştırma, üretim ve günlük işler için özenle seçilmiş daha fazla AI becerisini keşfet.