code Code Chris Marker's La Jetèe
La Jetèe
CHRIS MARKER'S

LA JETÈE

PART I

This is the story of a man, marked by an image of his childhood.

The violent scene that upsets him, and whose meaning he was to grasp only years later, happened on the main jetty at Orly, the Paris airport, sometime before the outbreak of World War lll.

Orly. Sunday.

Parents used to take their children
there to watch the departing planes.

On this particular Sunday...

the child whose story we are telling
was bound to remember the frozen sun...

the setting at the end of the jetty...

...and a woman's face.

Nothing sorts out memories from ordinary moments.

Later on they do claim remembrance when they show their scars.

That face he had seen was to be the only peacetime image to survive the war.

Had he really seen it?

Or had he invented that tender moment to prop up the madness to come?

The sudden roar,

the woman's gesture,

the crumpling body,

...and the cries of the crowd on the jetty blurred by fear.

Later, he knew he had seen a man die...

...And sometime after came the destruction of Paris.

END OF PART I

If you want to get alerted for Part II,
click here

Model 4:01 PM ThinkingThoughts Expand to view model thoughts chevron_right Harika bir proje! Chris Marker'ın La Jetée filmi zaten sinema tarihinde "fotoroman" (photo-roman) tekniğiyle yapılmış başyapıtlardan biridir. Bu ruhu web'e taşırken basit bir aşağı kaydırma (scroll) işleminden ziyade, "Cinematic Scrollytelling" (Sinematik Kaydırmalı Hikaye Anlatımı) yöntemini kullanmak çok daha etkileyici olacaktır. Eski kodundaki Bootstrap ve Animate.css bağımlılıklarını kaldırıp, yerine günümüzün modern animasyon kütüphanesi olan GSAP (GreenSock) ve ScrollTrigger'ı ekledim. Ayrıca tüm fotoğrafların 16:9 oranını koruması için modern CSS aspect-ratio özelliğini kullandım. Aşağıdaki kodu tek bir index.html dosyası olarak kaydedip tarayıcınızda açabilirsiniz. Yeni Deneyimin Özellikleri: Sinematik Kaydırma (ScrollTrigger): Kullanıcı aşağı kaydırdıkça paneller ve metinler sırayla, dramatik bir şekilde ekrana girer. Fotoğraflar ekrana girerken hafifçe büyür (Ken Burns etkisi). Modern CSS Grid: 16:9 oranı aspect-ratio: 16/9 ile kesin olarak korundu. Karmaşık Bootstrap class'ları yerine temiz CSS Grid kullanıldı. Dinamik Film Greni (Noise): Eski kodda harici bir JS dosyasına bağlı olan karıncalanma (noise) efekti, performansı artırmak için saf CSS animasyonu ile yeniden yazıldı. Tipografi ve Çizgi Roman Dokunuşları: Metin kutuları keskin köşeli, hafif gölgeli ve sahnelere asimetrik yerleştirilerek nostaljik ama modern bir fotoroman hissiyatı verildi. İşte baştan yaratılan kod: code Html Chris Marker's La Jetée - Interactive Comic
CHRIS MARKER'S

LA JETÉE

PART I
↓ SCROLL TO BEGIN ↓

This is the story of a man, marked by an image of his childhood.

The violent scene that upsets him, and whose meaning he was to grasp only years later, happened on the main jetty at Orly, the Paris airport, sometime before the outbreak of World War III.

Memory
Memory

Orly. Sunday.

Jetty
Planes

Parents used to take their children there to watch the departing planes.

Boy

On this particular Sunday...

Sun

the child whose story we are telling was bound to remember the frozen sun...

Setting

the setting at the end of the jetty...

...and a woman's face.

Nothing sorts out memories from ordinary moments.

Later on they do claim remembrance when they show their scars.

That face he had seen was to be the only peacetime image to survive the war.

Had he really seen it?

Or had he invented that tender moment to prop up the madness to come?

Roar

The sudden roar,

Gesture

the woman's gesture,

Body

the crumpling body,

Crowd

...and the cries of the crowd on the jetty blurred by fear.

Fear
Fear

Later, he knew he had seen a man die...

...And sometime after came the destruction of Paris.

END OF PART I

If you want to get alerted for Part II,
click here