Chris Marker's La Jet\u00e8e<\/title>\r\n <\/head>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css?family=Rajdhani:300,400,500,600,700|Rubik:300,400,500,700&display=swap&subset=latin-ext');\r\n\r\n:root {\r\n --col1: #2c2c2c;\r\n --col2: #fff;\r\n --fon1: 'Rajdhani', sans-serif;\r\n --fon2: 'Rubik', sans-serif;\r\n}\r\n\r\nhtml {\r\n font-size: 1vw;\r\n}\r\n\r\n\/** NAV **\/\r\n\/*\r\n.custom-navigation {\r\n color: white;\r\n font-family: baskerville-display-pt, serif;\r\n width: 100%;\r\n position: absolute;\r\n z-index: 5;\r\n}\r\n\r\nimg.logo {\r\n transform: rotate(-6deg);\r\n margin-top: -1rem;\r\n margin-left: -0.6rem;\r\n height: 4rem;\r\n}\r\n\r\nimg.logo-motion {\r\n transform: rotate(-6deg);\r\n margin-top: -1rem;\r\n margin-left: -0.6rem;\r\n height: 4rem;\r\n}\r\n\r\n.title {\r\n position: absolute;\r\n right: 5vw;\r\n text-align: center;\r\n top: 33vh;\r\n}\r\n\r\n.title p {\r\n color: white;\r\n font-size: 1vw;\r\n letter-spacing: 6px;\r\n}\r\n\r\n.custom-navigation a {\r\n background-image: inherit;\r\n background-size: inherit;\r\n background-position: inherit;\r\n transition: inherit;\r\n font-weight: inherit;\r\n color: inherit;\r\n text-decoration: inherit;\r\n}\r\n\r\n.horizontal-line {\r\n height: 1px;\r\n background-color: white;\r\n display: block; \r\n}\r\n\r\n.custom-navigation img.logo-motion {\r\n display: none;\r\n}\r\n\r\n.custom-navigation .hover-logo:hover img.logo-motion {\r\n display: inherit;\r\n}\r\n\r\n.custom-navigation .hover-logo:hover img.logo {\r\n display: none;\r\n}\r\n\r\n*\/\r\n\r\n\/** NAV **\/\r\n\r\nbody {\r\n font-family: var(--fon1);\r\n font-size: 1.2rem;\r\n\/* background-image: url('..\/darknoise.png');*\/\r\n background-repeat: repeat;\r\n color: var(--col2);\r\n background-color: #3e3e3e;\r\n}\r\n\r\nh1, h2, h3, h4 {\r\n font-family: var(--fon2);\r\n font-weight: 500;\r\n}\r\n\r\na {\r\n background-image: linear-gradient(120deg, #da532c 0%, #da532c 100%);\r\n background-repeat: no-repeat;\r\n background-size: 100% 0.4em;\r\n background-position: 0 80%;\r\n transition: background-size 0.25s ease-in;\r\n font-weight: inherit;\r\n color: inherit;\r\n text-decoration: inherit;\r\n}\r\n\r\na:hover {\r\n background-size: 100% 90%;\r\n color: inherit;\r\n text-decoration: inherit;\r\n}\r\n\r\nh1 {\r\n font-size: 8rem;\r\n font-family: var(--fon2);\r\n line-height: 1;\r\n letter-spacing: 2vw;\r\n}\r\n\r\nspan.spot {\r\n font-size: 1.5rem;\r\n letter-spacing: 0.75vw;\r\n margin-bottom: 1rem;\r\n}\r\n\r\np {\r\n font-weight: 300;\r\n}\r\n\r\n\r\n\r\n\r\n\/*** Helper ***\/\r\n.big-separator {\r\n margin: 10vh 0;\r\n}\r\n\r\n.big-separator-bottom {\r\n margin-bottom: 10vh;\r\n}\r\n\r\n.noise-overlay {\r\n position: fixed;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url(\"..\/noise3.png\");\r\n background-repeat: repeat;\r\n z-index: 100;\r\n top: 0;\r\n left: 0;\r\n}\r\n\r\n.big-font {\r\n font-size: 150%;\r\n}\r\n\r\n.vh-75 {\r\n height: 75vh !important;\r\n}\r\n\r\n\/*** Page ***\/\r\n.mb-4 {\r\n margin-bottom: 2rem !important;\r\n}\r\n\r\n.down-arrow img {\r\n width: 3vw;\r\n height: auto;\r\n position: absolute;\r\n bottom: 10vh;\r\n left: 50%;\r\n margin-left: -1.5vw;\r\n}\r\n\r\n.img-fluid {\r\n border: 3px solid black;\r\n}\r\n\r\n\/** Comic **\/\r\n\r\n.container-fluid {\r\n max-width: 90%;\r\n}\r\n\r\n.comic {\r\n display:flex;\r\n flex-wrap:wrap;\r\n font-family: var(--fon1);\r\n padding:1vmin;\r\n}\r\n\r\n.panel {\r\n background-color: var(--col2);\r\n border: solid 2px var(--col1);\r\n box-shadow: 0 6px 6px -6px var(--col1);\r\n display: inline-block;\r\n flex: 1 1;\r\n height: 50vh;\r\n margin: 1vmin;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.text {\r\n background-color: var(--col2);\r\n border: 3px solid black;\r\n margin: 0;\r\n color: var(--col1);\r\n font-size: 1.2rem;\r\n line-height: 1.3;\r\n box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;\r\n}\r\n\r\n.text.top-left {\r\n padding: 0.5rem 1rem;\r\n}\r\n\r\n.text.bottom-left {\r\n padding: 0.5rem 1.5rem;\r\n}\r\n\r\n.text.top-right {\r\n padding: 0.5rem 1.5rem;\r\n}\r\n\r\n.text.bottom-right {\r\n padding: 0.5rem 1.5rem;\r\n}\r\n\r\n.top-left {\r\n position:absolute;\r\n transform:skew(-15deg);\r\n top: -1rem;\r\n left: 0.5rem;\r\n}\r\n\r\n.top-right {\r\n position: absolute;\r\n transform:skew(-15deg);\r\n top: -1rem;\r\n right: 0.5rem;\r\n}\r\n\r\n.bottom-right {\r\n position: absolute;\r\n transform:skew(-15deg);\r\n bottom: -1rem;\r\n right: 0.5rem;\r\n}\r\n\r\n.bottom-left {\r\n position: absolute;\r\n transform:skew(-15deg);\r\n bottom: -1rem;\r\n left: 0.5rem;\r\n}\r\n\r\n.speech {\r\n background-color:var(--col1);\r\n border:solid 2px var(--col1);\r\n border-radius:12px;\r\n display:inline-block;\r\n margin:.5em;\r\n padding:.5em 1em;\r\n position:relative;\r\n}\r\n\r\n.speech:before {\r\n border:solid 12px transparent;\r\n border-left:solid 12px var(--col2);\r\n border-top:solid 12px var(--col2);\r\n bottom:-24px;\r\n content:\"\";\r\n height:0;\r\n left:24px;\r\n position:absolute;\r\n transform:skew(-15deg);\r\n width:0;\r\n}\r\n\r\n.speech:after {\r\n border:solid 10px transparent;\r\n border-left:solid 10px var(--col1);\r\n border-top:solid 10px var(--col1);\r\n bottom:-19px;\r\n content:\"\";\r\n height:0;\r\n left:27px;\r\n position:absolute;\r\n transform:skew(-15deg);\r\n width:0;\r\n}\r\n\r\n.skew p {\r\n transform: skew(-15deg);\r\n padding: 0.5rem 1rem;\r\n margin-left: -3rem;\r\n margin-bottom: 0.5rem;\r\n bottom: 1.5rem;\r\n}\r\n\r\n.titres {\r\n -webkit-animation: titresmeli 2s infinite;\r\n animation: titresmeli 2s infinite;\r\n animation-timing-function: ease;\r\n background-repeat: no-repeat;\r\n background-color: black;\r\n}\r\n\r\n\r\n\r\n.animated {\r\n visibility: visible !important;\r\n}\r\n\r\n.dur-1s {\r\n animation-duration: 1s !important;\r\n}\r\n\r\n.dur-2s {\r\n animation-duration: 2s !important;\r\n}\r\n\r\n.delay-1s {\r\n animation-delay: 1s;\r\n}\r\n.delay-2s {\r\n animation-delay: 2s;\r\n}\r\n.delay-3s {\r\n animation-delay: 3s;\r\n}\r\n.delay-4s {\r\n animation-delay: 4s;\r\n}\r\n\r\n.fadeInDown {\r\n -webkit-animation-name: fadeInDown;\r\n animation-name: fadeInDown;\r\n}\r\n\r\n.noise {\r\n z-index: 100;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n opacity: 0.075;\r\n}\r\n\r\n\r\n\r\n@keyframes fadeInDown {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translate3d(0,-33%,0) !important;\r\n transform: translate3d(0,-33%,0) !important;\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: none;\r\n transform: none;\r\n }\r\n}\r\n\r\n\r\n <\/style>\r\n <body>\r\n <canvas id=\"noise\" class=\"noise\"><\/canvas>\r\n <div class=\"custom-navigation d-flex align-items-center bg-transparent\">\r\n <div class=\"hover-logo\">\r\n <div class=\"p-2\"><a href=\"..\/\"><img decoding=\"async\" class=\"logo\" src=\"..\/img\/logo-light-outline.svg\"><\/a><\/div>\r\n <div class=\"p-2\"><a href=\"..\/\"><img decoding=\"async\" class=\"logo-motion\" src=\"..\/img\/logo-motion-white.gif\"><\/a><\/div>\r\n <\/div>\r\n <div class=\"flex-grow-1 horizontal-line\"><\/div>\r\n <div class=\"p-2\">La Jet\u00e8e<\/div>\r\n <\/div>\r\n <div class=\"jumbotron-fluid h-100\">\r\n <div class=\"down-arrow text-center\"><img decoding=\"async\" src=\"down.svg\">\r\n <\/div>\r\n <div class=\"container-fluid\">\r\n <div class=\"row vh-100\">\r\n <div class=\"col-md-12 d-flex align-self-center flex-column text-center\">\r\n <span class=\"spot hidden-first dur-2s animating\" data-animation=\"fadeIn\">CHRIS MARKER'S<\/span> \r\n <h1 class=\"hidden-first delay-1s dur-2s animating\" data-animation=\"fadeIn\">LA JET\u00c8E<\/h1>\r\n <span class=\"spot hidden-first delay-2s dur-1 animating\" data-animation=\"fadeIn\">PART I<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"container-fluid overflow-hidden\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6 offset-md-3 skew text-center hidden-first animating dur-2s\" data-animation=\"fadeIn\"><p class=\"text\">This is the story of a man, marked by an image of his childhood.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row big-separator-bottom\">\r\n <div class=\"col-md-6 offset-md-3 skew text-center hidden-first animating dur-2s delay-1s\" data-animation=\"fadeIn\"><p class=\"text\">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.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-4 d-flex flex-column\">\r\n <div class=\"h-100 mb-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j3.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <div class=\"h-100 mb-2 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j2.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <\/div>\r\n <div class=\"col-md-8 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-right\">Orly. Sunday.<\/p><video class=\"img-fluid\" src=\"j3.mp4\" muted autoplay loop><\/video><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-6 hidden-first animating\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j4.jpg\"><\/div>\r\n <div class=\"col-md-6 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><p class=\"text bottom-right\">Parents used to take their children <br>there to watch the departing planes.<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j5.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-4 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-left\">On this particular Sunday...<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j6.jpg\"><\/div>\r\n <div class=\"col-md-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><p class=\"text top-left\">the child whose story we are telling<br>was bound to remember the frozen sun...<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j7.jpg\"><\/div>\r\n <div class=\"col-md-4 hidden-first animating delay-2s\" data-animation=\"fadeInDown\"><p class=\"text bottom-right\">the setting at the end of the jetty...<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j8.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-9 hidden-first animating dur-2s\" data-animation=\"fadeInDown\">\r\n <p class=\"text top-left\">...and a woman's face.<\/p><video class=\"img-fluid\" src=\"j9.mp4\" muted autoplay loop><\/video>\r\n <\/div>\r\n <div class=\"col-md-3 d-flex justify-content-end flex-column skew pb-4 hidden-first dur-2s animating\" data-animation=\"fadeIn\">\r\n <p class=\"text\">Nothing sorts out memories from ordinary moments.<\/p>\r\n <p class=\"text\">Later on they do claim remembrance when they show their scars.<\/p>\r\n <p class=\"text\">That face he had seen was to be the only peacetime image to survive the war.<\/p>\r\n <p class=\"text\">Had he really seen it?<\/p>\r\n <p class=\"text\">Or had he invented that tender moment to prop up the madness to come?<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-4 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-left\">The sudden roar,<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j10.jpg\"><\/div>\r\n <div class=\"col-md-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><p class=\"text top-left\">the woman's gesture,<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j11.jpg\"><\/div>\r\n <div class=\"col-md-4 hidden-first animating delay-2s\" data-animation=\"fadeInDown\"><p class=\"text bottom-right\">the crumpling body,<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j12.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-8 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-left\">...and the cries of the crowd on the jetty blurred by fear.<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j13.jpg\">\r\n <\/div>\r\n <div class=\"col-md-4 d-flex flex-column\">\r\n <div class=\"h-100 mb-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j14.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <div class=\"h-100 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j15.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row big-separator-bottom mt-5\">\r\n <div class=\"col-md-4 offset-md-4 skew text-center hidden-first animating dur-2s\" data-animation=\"fadeIn\">\r\n <p class=\"text\">Later, he knew he had seen a man die...<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-12 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-left\">...And sometime after came the destruction of Paris.<\/p><video class=\"img-fluid\" src=\"j16.mp4\" muted autoplay loop><\/video>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-6 hidden-first animating\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j17.jpg\"><\/div>\r\n <div class=\"col-md-6 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j18.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-4 d-flex flex-column\">\r\n <div class=\"h-100 mb-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j19.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <div class=\"h-100 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j20.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <\/div>\r\n <div class=\"col-md-8 hidden-first animating\" data-animation=\"fadeInDown\"><video class=\"img-fluid\" src=\"j21.mp4\" muted autoplay loop><\/video><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-6 hidden-first animating\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j23.jpg\"><\/div>\r\n <div class=\"col-md-6 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j24.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5 big-separator-bottom\">\r\n <div class=\"col-md-8 hidden-first animating\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j25.jpg\"><\/div>\r\n <div class=\"col-md-4 d-flex flex-column\">\r\n <div class=\"h-100 mb-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j26.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <div class=\"h-100 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j27.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row big-separator\">\r\n <div class=\"col-md-12 text-center\">\r\n <span class=\"spot hidden-first delay-2s dur-1 animating\" data-animation=\"fadeIn\">END OF PART I<\/span>\r\n <p class=\"text-center mt-5\">If you want to get alerted for Part II,<br> <a href=\"\/subscribe\">click here<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script src=\"..\/node_modules\/in-view\/dist\/in-view.min.js\"><\/script>\r\n <script src=\"..\/js\/animate-trigger.js\"><\/script>\r\n <script src=\"..\/js\/noise.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\nModel 4:01\u202fPM\r\nThinkingThoughts\r\nExpand to view model thoughts\r\n\r\nchevron_right\r\nHarika bir proje! Chris Marker'\u0131n La Jet\u00e9e filmi zaten sinema tarihinde \"fotoroman\" (photo-roman) tekni\u011fiyle yap\u0131lm\u0131\u015f ba\u015fyap\u0131tlardan biridir. Bu ruhu web'e ta\u015f\u0131rken basit bir a\u015fa\u011f\u0131 kayd\u0131rma (scroll) i\u015fleminden ziyade, \"Cinematic Scrollytelling\" (Sinematik Kayd\u0131rmal\u0131 Hikaye Anlat\u0131m\u0131) y\u00f6ntemini kullanmak \u00e7ok daha etkileyici olacakt\u0131r.\r\nEski kodundaki Bootstrap ve Animate.css ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kald\u0131r\u0131p, yerine g\u00fcn\u00fcm\u00fcz\u00fcn modern animasyon k\u00fct\u00fcphanesi olan GSAP (GreenSock) ve ScrollTrigger'\u0131 ekledim. Ayr\u0131ca t\u00fcm foto\u011fraflar\u0131n 16:9 oran\u0131n\u0131 korumas\u0131 i\u00e7in modern CSS aspect-ratio \u00f6zelli\u011fini kulland\u0131m.\r\nA\u015fa\u011f\u0131daki kodu tek bir index.html dosyas\u0131 olarak kaydedip taray\u0131c\u0131n\u0131zda a\u00e7abilirsiniz.\r\nYeni Deneyimin \u00d6zellikleri:\r\nSinematik Kayd\u0131rma (ScrollTrigger): Kullan\u0131c\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a paneller ve metinler s\u0131rayla, dramatik bir \u015fekilde ekrana girer. Foto\u011fraflar ekrana girerken hafif\u00e7e b\u00fcy\u00fcr (Ken Burns etkisi).\r\nModern CSS Grid: 16:9 oran\u0131 aspect-ratio: 16\/9 ile kesin olarak korundu. Karma\u015f\u0131k Bootstrap class'lar\u0131 yerine temiz CSS Grid kullan\u0131ld\u0131.\r\nDinamik Film Greni (Noise): Eski kodda harici bir JS dosyas\u0131na ba\u011fl\u0131 olan kar\u0131ncalanma (noise) efekti, performans\u0131 art\u0131rmak i\u00e7in saf CSS animasyonu ile yeniden yaz\u0131ld\u0131.\r\nTipografi ve \u00c7izgi Roman Dokunu\u015flar\u0131: Metin kutular\u0131 keskin k\u00f6\u015feli, hafif g\u00f6lgeli ve sahnelere asimetrik yerle\u015ftirilerek nostaljik ama modern bir fotoroman hissiyat\u0131 verildi.\r\n\u0130\u015fte ba\u015ftan yarat\u0131lan kod:\r\ncode\r\nHtml\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Chris Marker's La Jet\u00e9e - Interactive Comic<\/title>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@300;500;700&family=Rubik:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n <style>\r\n :root {\r\n --bg-color: #1a1a1a;\r\n --text-color: #f4f4f4;\r\n --accent-color: #da532c;\r\n --panel-border: #000;\r\n --panel-bg: #fff;\r\n --font-display: 'Rubik', sans-serif;\r\n --font-body: 'Rajdhani', sans-serif;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: var(--bg-color);\r\n color: var(--text-color);\r\n font-family: var(--font-body);\r\n overflow-x: hidden;\r\n font-size: 1.2rem;\r\n }\r\n\r\n \/* CSS Film Grain Effect *\/\r\n .noise-overlay {\r\n position: fixed;\r\n top: -50%; left: -50%; right: -50%; bottom: -50%;\r\n width: 200%; height: 200%;\r\n background: transparent url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/7\/76\/1k_Dissolve_Noise_Texture.png') repeat 0 0;\r\n background-repeat: repeat;\r\n animation: bg-animation .2s infinite;\r\n opacity: 0.06;\r\n pointer-events: none;\r\n z-index: 9999;\r\n }\r\n\r\n @keyframes bg-animation {\r\n 0% { transform: translate(0,0) }\r\n 10% { transform: translate(-5%,-5%) }\r\n 20% { transform: translate(-10%,5%) }\r\n 30% { transform: translate(5%,-10%) }\r\n 40% { transform: translate(-5%,15%) }\r\n 50% { transform: translate(-10%,5%) }\r\n 60% { transform: translate(15%,0) }\r\n 70% { transform: translate(0,10%) }\r\n 80% { transform: translate(-15%,0) }\r\n 90% { transform: translate(10%,5%) }\r\n 100% { transform: translate(5%,0) }\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero {\r\n height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n .hero h1 {\r\n font-family: var(--font-display);\r\n font-size: 8vw;\r\n letter-spacing: 1.5vw;\r\n text-transform: uppercase;\r\n line-height: 1;\r\n margin: 1rem 0;\r\n }\r\n\r\n .hero .spot {\r\n font-size: 1.5rem;\r\n letter-spacing: 0.5vw;\r\n color: #aaa;\r\n }\r\n\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 5vh;\r\n animation: bounce 2s infinite;\r\n opacity: 0.5;\r\n }\r\n\r\n @keyframes bounce {\r\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\r\n 40% { transform: translateY(-20px); }\r\n 60% { transform: translateY(-10px); }\r\n }\r\n\r\n \/* Comic Grid Layout *\/\r\n .comic-container {\r\n max-width: 90vw;\r\n margin: 0 auto;\r\n padding: 5vh 0;\r\n }\r\n\r\n .scene {\r\n position: relative;\r\n margin-bottom: 25vh; \/* Dramatik bo\u015fluklar *\/\r\n display: grid;\r\n gap: 2rem;\r\n }\r\n\r\n \/* 16:9 Image \/ Video Containers *\/\r\n .media-wrapper {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 16 \/ 9;\r\n overflow: hidden;\r\n border: 4px solid var(--panel-border);\r\n box-shadow: 10px 10px 0px rgba(0,0,0,0.8);\r\n background: #000;\r\n }\r\n\r\n .media-wrapper img, .media-wrapper video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transform: scale(1.1); \/* Animasyon i\u00e7in ba\u015flang\u0131\u00e7 boyutu *\/\r\n filter: grayscale(100%) contrast(1.2); \/* Siyah beyaz fotoroman etkisi *\/\r\n }\r\n\r\n \/* Grid Variations *\/\r\n .grid-1 { grid-template-columns: 1fr; }\r\n .grid-2 { grid-template-columns: 1fr 1fr; }\r\n .grid-3 { grid-template-columns: 1fr 1fr 1fr; }\r\n .grid-split { grid-template-columns: 1fr 2fr; }\r\n .grid-split-rev { grid-template-columns: 2fr 1fr; }\r\n\r\n \/* Comic Text Boxes *\/\r\n .text-box {\r\n background-color: var(--panel-bg);\r\n color: var(--panel-border);\r\n padding: 1.5rem 2rem;\r\n font-size: 1.4rem;\r\n font-weight: 500;\r\n border: 3px solid var(--panel-border);\r\n box-shadow: 6px 6px 0px rgba(0,0,0,0.5);\r\n max-width: 80%;\r\n z-index: 10;\r\n transform: skew(-2deg);\r\n }\r\n\r\n .text-box p {\r\n transform: skew(2deg); \/* Yaz\u0131y\u0131 d\u00fczeltme *\/\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .text-box p:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Positioning Text Boxes *\/\r\n .txt-overlap-top-left { position: absolute; top: -2rem; left: -2rem; }\r\n .txt-overlap-bottom-right { position: absolute; bottom: -2rem; right: -2rem; }\r\n .txt-center { margin: 0 auto; text-align: center; }\r\n \r\n \/* Links *\/\r\n a {\r\n color: var(--accent-color);\r\n text-decoration: none;\r\n border-bottom: 2px solid var(--accent-color);\r\n transition: all 0.3s;\r\n }\r\n a:hover {\r\n background: var(--accent-color);\r\n color: #fff;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .grid-2, .grid-3, .grid-split, .grid-split-rev {\r\n grid-template-columns: 1fr;\r\n }\r\n .text-box { position: relative; top: 0; left: 0; right: 0; bottom: 0; margin-top: -1rem; width: 100%; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"noise-overlay\"><\/div>\r\n\r\n \r\n <header class=\"hero\">\r\n <span class=\"spot hero-element\">CHRIS MARKER'S<\/span>\r\n <h1 class=\"hero-element\">LA JET\u00c9E<\/h1>\r\n <span class=\"spot hero-element\">PART I<\/span>\r\n <div class=\"scroll-indicator\">\u2193 SCROLL TO BEGIN \u2193<\/div>\r\n <\/header>\r\n\r\n <main class=\"comic-container\">\r\n\r\n \r\n <div class=\"scene grid-1\">\r\n <div class=\"text-box txt-center\">\r\n <p>This is the story of a man, marked by an image of his childhood.<\/p>\r\n <p>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.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-split gs-reveal\">\r\n <div class=\"media-column d-flex\">\r\n <div class=\"media-wrapper\"><img decoding=\"async\" src=\"j2.jpg\" alt=\"Memory\"><\/div>\r\n <div class=\"media-wrapper mt-4\"><img decoding=\"async\" src=\"j3.jpg\" alt=\"Memory\"><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <video src=\"j3.mp4\" muted autoplay loop playsinline><\/video>\r\n <div class=\"text-box txt-overlap-top-left\"><p>Orly. Sunday.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-2 gs-reveal\">\r\n <div class=\"media-wrapper\"><img decoding=\"async\" src=\"j4.jpg\" alt=\"Jetty\"><\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j5.jpg\" alt=\"Planes\">\r\n <div class=\"text-box txt-overlap-bottom-right\"><p>Parents used to take their children there to watch the departing planes.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-3 gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j6.jpg\" alt=\"Boy\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>On this particular Sunday...<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j7.jpg\" alt=\"Sun\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>the child whose story we are telling was bound to remember the frozen sun...<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j8.jpg\" alt=\"Setting\">\r\n <div class=\"text-box txt-overlap-bottom-right\"><p>the setting at the end of the jetty...<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-split-rev gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <video src=\"j9.mp4\" muted autoplay loop playsinline><\/video>\r\n <div class=\"text-box txt-overlap-top-left\"><p>...and a woman's face.<\/p><\/div>\r\n <\/div>\r\n <div class=\"text-box\">\r\n <p>Nothing sorts out memories from ordinary moments.<\/p>\r\n <p>Later on they do claim remembrance when they show their scars.<\/p>\r\n <p>That face he had seen was to be the only peacetime image to survive the war.<\/p>\r\n <p>Had he really seen it?<\/p>\r\n <p>Or had he invented that tender moment to prop up the madness to come?<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-3 gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j10.jpg\" alt=\"Roar\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>The sudden roar,<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j11.jpg\" alt=\"Gesture\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>the woman's gesture,<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j12.jpg\" alt=\"Body\">\r\n <div class=\"text-box txt-overlap-bottom-right\"><p>the crumpling body,<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-split gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j13.jpg\" alt=\"Crowd\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>...and the cries of the crowd on the jetty blurred by fear.<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-column\">\r\n <div class=\"media-wrapper\"><img decoding=\"async\" src=\"j14.jpg\" alt=\"Fear\"><\/div>\r\n <div class=\"media-wrapper\"><img decoding=\"async\" src=\"j15.jpg\" alt=\"Fear\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-1 gs-reveal\">\r\n <div class=\"text-box txt-center\">\r\n <p>Later, he knew he had seen a man die...<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-1 gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <video src=\"j16.mp4\" muted autoplay loop playsinline><\/video>\r\n <div class=\"text-box txt-overlap-top-left\"><p>...And sometime after came the destruction of Paris.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-1 text-center\" style=\"margin-top: 20vh; margin-bottom: 10vh;\">\r\n <span class=\"spot\">END OF PART I<\/span>\r\n <p style=\"margin-top: 2rem; font-size: 1.5rem;\">If you want to get alerted for Part II,<br> <a href=\"\/subscribe\">click here<\/a><\/p>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n <script>\r\n \/\/ GSAP and ScrollTrigger initialization\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n \/\/ Hero Animation\r\n gsap.from(\".hero-element\", {\r\n y: 50,\r\n opacity: 0,\r\n duration: 1.5,\r\n stagger: 0.3,\r\n ease: \"power3.out\",\r\n delay: 0.5\r\n });\r\n\r\n \/\/ Scene Animations (Cinematic Scrollytelling)\r\n const scenes = gsap.utils.toArray('.gs-reveal');\r\n\r\n scenes.forEach(scene => {\r\n \/\/ Select elements inside the scene\r\n const medias = scene.querySelectorAll('img, video');\r\n const textBoxes = scene.querySelectorAll('.text-box');\r\n\r\n \/\/ Create a timeline for each scene\r\n let tl = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: scene,\r\n start: \"top 80%\", \/\/ Animasyon sahne ekran\u0131n %80'ine geldi\u011finde ba\u015flar\r\n toggleActions: \"play none none reverse\" \/\/ A\u015fa\u011f\u0131 inerken oynat, yukar\u0131 \u00e7\u0131karken geri sar\r\n }\r\n });\r\n\r\n \/\/ 1. Ken Burns Effect: Resimler ve videolar hafif\u00e7e k\u00fc\u00e7\u00fclerek netle\u015fir\r\n if(medias.length > 0) {\r\n tl.to(medias, {\r\n scale: 1,\r\n duration: 2,\r\n ease: \"power2.out\",\r\n stagger: 0.2\r\n });\r\n \r\n tl.fromTo(scene.querySelectorAll('.media-wrapper'), \r\n { opacity: 0, y: 30 },\r\n { opacity: 1, y: 0, duration: 1.5, ease: \"power2.out\", stagger: 0.2 },\r\n \"<\" \/\/ \u00d6nceki animasyonla ayn\u0131 anda ba\u015flat\r\n );\r\n }\r\n\r\n \/\/ 2. Metin kutular\u0131 resimlerden hemen sonra dramatik bir \u015fekilde belirir\r\n if(textBoxes.length > 0) {\r\n tl.from(textBoxes, {\r\n y: 20,\r\n opacity: 0,\r\n rotation: -5, \/\/ \u00c7izgi romanvari bir d\u00fc\u015f\u00fc\u015f efekti\r\n duration: 1,\r\n ease: \"back.out(1.7)\",\r\n stagger: 0.3\r\n }, \"-=1.5\"); \/\/ Resim animasyonu bitmeden metinler girmeye ba\u015flar\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>code Code Chris Marker’s La Jet\u00e8e La Jet\u00e8e CHRIS MARKER’S LA JET\u00c8E 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-156","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/pages\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kultzine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=156"}],"version-history":[{"count":8,"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/pages\/156\/revisions"}],"predecessor-version":[{"id":166,"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/pages\/156\/revisions\/166"}],"wp:attachment":[{"href":"https:\/\/kultzine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\ncode\r\nCode\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n\r\n\r\n \r\nChris Marker's La Jet\u00e8e<\/title>\r\n <\/head>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css?family=Rajdhani:300,400,500,600,700|Rubik:300,400,500,700&display=swap&subset=latin-ext');\r\n\r\n:root {\r\n --col1: #2c2c2c;\r\n --col2: #fff;\r\n --fon1: 'Rajdhani', sans-serif;\r\n --fon2: 'Rubik', sans-serif;\r\n}\r\n\r\nhtml {\r\n font-size: 1vw;\r\n}\r\n\r\n\/** NAV **\/\r\n\/*\r\n.custom-navigation {\r\n color: white;\r\n font-family: baskerville-display-pt, serif;\r\n width: 100%;\r\n position: absolute;\r\n z-index: 5;\r\n}\r\n\r\nimg.logo {\r\n transform: rotate(-6deg);\r\n margin-top: -1rem;\r\n margin-left: -0.6rem;\r\n height: 4rem;\r\n}\r\n\r\nimg.logo-motion {\r\n transform: rotate(-6deg);\r\n margin-top: -1rem;\r\n margin-left: -0.6rem;\r\n height: 4rem;\r\n}\r\n\r\n.title {\r\n position: absolute;\r\n right: 5vw;\r\n text-align: center;\r\n top: 33vh;\r\n}\r\n\r\n.title p {\r\n color: white;\r\n font-size: 1vw;\r\n letter-spacing: 6px;\r\n}\r\n\r\n.custom-navigation a {\r\n background-image: inherit;\r\n background-size: inherit;\r\n background-position: inherit;\r\n transition: inherit;\r\n font-weight: inherit;\r\n color: inherit;\r\n text-decoration: inherit;\r\n}\r\n\r\n.horizontal-line {\r\n height: 1px;\r\n background-color: white;\r\n display: block; \r\n}\r\n\r\n.custom-navigation img.logo-motion {\r\n display: none;\r\n}\r\n\r\n.custom-navigation .hover-logo:hover img.logo-motion {\r\n display: inherit;\r\n}\r\n\r\n.custom-navigation .hover-logo:hover img.logo {\r\n display: none;\r\n}\r\n\r\n*\/\r\n\r\n\/** NAV **\/\r\n\r\nbody {\r\n font-family: var(--fon1);\r\n font-size: 1.2rem;\r\n\/* background-image: url('..\/darknoise.png');*\/\r\n background-repeat: repeat;\r\n color: var(--col2);\r\n background-color: #3e3e3e;\r\n}\r\n\r\nh1, h2, h3, h4 {\r\n font-family: var(--fon2);\r\n font-weight: 500;\r\n}\r\n\r\na {\r\n background-image: linear-gradient(120deg, #da532c 0%, #da532c 100%);\r\n background-repeat: no-repeat;\r\n background-size: 100% 0.4em;\r\n background-position: 0 80%;\r\n transition: background-size 0.25s ease-in;\r\n font-weight: inherit;\r\n color: inherit;\r\n text-decoration: inherit;\r\n}\r\n\r\na:hover {\r\n background-size: 100% 90%;\r\n color: inherit;\r\n text-decoration: inherit;\r\n}\r\n\r\nh1 {\r\n font-size: 8rem;\r\n font-family: var(--fon2);\r\n line-height: 1;\r\n letter-spacing: 2vw;\r\n}\r\n\r\nspan.spot {\r\n font-size: 1.5rem;\r\n letter-spacing: 0.75vw;\r\n margin-bottom: 1rem;\r\n}\r\n\r\np {\r\n font-weight: 300;\r\n}\r\n\r\n\r\n\r\n\r\n\/*** Helper ***\/\r\n.big-separator {\r\n margin: 10vh 0;\r\n}\r\n\r\n.big-separator-bottom {\r\n margin-bottom: 10vh;\r\n}\r\n\r\n.noise-overlay {\r\n position: fixed;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url(\"..\/noise3.png\");\r\n background-repeat: repeat;\r\n z-index: 100;\r\n top: 0;\r\n left: 0;\r\n}\r\n\r\n.big-font {\r\n font-size: 150%;\r\n}\r\n\r\n.vh-75 {\r\n height: 75vh !important;\r\n}\r\n\r\n\/*** Page ***\/\r\n.mb-4 {\r\n margin-bottom: 2rem !important;\r\n}\r\n\r\n.down-arrow img {\r\n width: 3vw;\r\n height: auto;\r\n position: absolute;\r\n bottom: 10vh;\r\n left: 50%;\r\n margin-left: -1.5vw;\r\n}\r\n\r\n.img-fluid {\r\n border: 3px solid black;\r\n}\r\n\r\n\/** Comic **\/\r\n\r\n.container-fluid {\r\n max-width: 90%;\r\n}\r\n\r\n.comic {\r\n display:flex;\r\n flex-wrap:wrap;\r\n font-family: var(--fon1);\r\n padding:1vmin;\r\n}\r\n\r\n.panel {\r\n background-color: var(--col2);\r\n border: solid 2px var(--col1);\r\n box-shadow: 0 6px 6px -6px var(--col1);\r\n display: inline-block;\r\n flex: 1 1;\r\n height: 50vh;\r\n margin: 1vmin;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.text {\r\n background-color: var(--col2);\r\n border: 3px solid black;\r\n margin: 0;\r\n color: var(--col1);\r\n font-size: 1.2rem;\r\n line-height: 1.3;\r\n box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;\r\n}\r\n\r\n.text.top-left {\r\n padding: 0.5rem 1rem;\r\n}\r\n\r\n.text.bottom-left {\r\n padding: 0.5rem 1.5rem;\r\n}\r\n\r\n.text.top-right {\r\n padding: 0.5rem 1.5rem;\r\n}\r\n\r\n.text.bottom-right {\r\n padding: 0.5rem 1.5rem;\r\n}\r\n\r\n.top-left {\r\n position:absolute;\r\n transform:skew(-15deg);\r\n top: -1rem;\r\n left: 0.5rem;\r\n}\r\n\r\n.top-right {\r\n position: absolute;\r\n transform:skew(-15deg);\r\n top: -1rem;\r\n right: 0.5rem;\r\n}\r\n\r\n.bottom-right {\r\n position: absolute;\r\n transform:skew(-15deg);\r\n bottom: -1rem;\r\n right: 0.5rem;\r\n}\r\n\r\n.bottom-left {\r\n position: absolute;\r\n transform:skew(-15deg);\r\n bottom: -1rem;\r\n left: 0.5rem;\r\n}\r\n\r\n.speech {\r\n background-color:var(--col1);\r\n border:solid 2px var(--col1);\r\n border-radius:12px;\r\n display:inline-block;\r\n margin:.5em;\r\n padding:.5em 1em;\r\n position:relative;\r\n}\r\n\r\n.speech:before {\r\n border:solid 12px transparent;\r\n border-left:solid 12px var(--col2);\r\n border-top:solid 12px var(--col2);\r\n bottom:-24px;\r\n content:\"\";\r\n height:0;\r\n left:24px;\r\n position:absolute;\r\n transform:skew(-15deg);\r\n width:0;\r\n}\r\n\r\n.speech:after {\r\n border:solid 10px transparent;\r\n border-left:solid 10px var(--col1);\r\n border-top:solid 10px var(--col1);\r\n bottom:-19px;\r\n content:\"\";\r\n height:0;\r\n left:27px;\r\n position:absolute;\r\n transform:skew(-15deg);\r\n width:0;\r\n}\r\n\r\n.skew p {\r\n transform: skew(-15deg);\r\n padding: 0.5rem 1rem;\r\n margin-left: -3rem;\r\n margin-bottom: 0.5rem;\r\n bottom: 1.5rem;\r\n}\r\n\r\n.titres {\r\n -webkit-animation: titresmeli 2s infinite;\r\n animation: titresmeli 2s infinite;\r\n animation-timing-function: ease;\r\n background-repeat: no-repeat;\r\n background-color: black;\r\n}\r\n\r\n\r\n\r\n.animated {\r\n visibility: visible !important;\r\n}\r\n\r\n.dur-1s {\r\n animation-duration: 1s !important;\r\n}\r\n\r\n.dur-2s {\r\n animation-duration: 2s !important;\r\n}\r\n\r\n.delay-1s {\r\n animation-delay: 1s;\r\n}\r\n.delay-2s {\r\n animation-delay: 2s;\r\n}\r\n.delay-3s {\r\n animation-delay: 3s;\r\n}\r\n.delay-4s {\r\n animation-delay: 4s;\r\n}\r\n\r\n.fadeInDown {\r\n -webkit-animation-name: fadeInDown;\r\n animation-name: fadeInDown;\r\n}\r\n\r\n.noise {\r\n z-index: 100;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n opacity: 0.075;\r\n}\r\n\r\n\r\n\r\n@keyframes fadeInDown {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translate3d(0,-33%,0) !important;\r\n transform: translate3d(0,-33%,0) !important;\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: none;\r\n transform: none;\r\n }\r\n}\r\n\r\n\r\n <\/style>\r\n <body>\r\n <canvas id=\"noise\" class=\"noise\"><\/canvas>\r\n <div class=\"custom-navigation d-flex align-items-center bg-transparent\">\r\n <div class=\"hover-logo\">\r\n <div class=\"p-2\"><a href=\"..\/\"><img decoding=\"async\" class=\"logo\" src=\"..\/img\/logo-light-outline.svg\"><\/a><\/div>\r\n <div class=\"p-2\"><a href=\"..\/\"><img decoding=\"async\" class=\"logo-motion\" src=\"..\/img\/logo-motion-white.gif\"><\/a><\/div>\r\n <\/div>\r\n <div class=\"flex-grow-1 horizontal-line\"><\/div>\r\n <div class=\"p-2\">La Jet\u00e8e<\/div>\r\n <\/div>\r\n <div class=\"jumbotron-fluid h-100\">\r\n <div class=\"down-arrow text-center\"><img decoding=\"async\" src=\"down.svg\">\r\n <\/div>\r\n <div class=\"container-fluid\">\r\n <div class=\"row vh-100\">\r\n <div class=\"col-md-12 d-flex align-self-center flex-column text-center\">\r\n <span class=\"spot hidden-first dur-2s animating\" data-animation=\"fadeIn\">CHRIS MARKER'S<\/span> \r\n <h1 class=\"hidden-first delay-1s dur-2s animating\" data-animation=\"fadeIn\">LA JET\u00c8E<\/h1>\r\n <span class=\"spot hidden-first delay-2s dur-1 animating\" data-animation=\"fadeIn\">PART I<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"container-fluid overflow-hidden\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6 offset-md-3 skew text-center hidden-first animating dur-2s\" data-animation=\"fadeIn\"><p class=\"text\">This is the story of a man, marked by an image of his childhood.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row big-separator-bottom\">\r\n <div class=\"col-md-6 offset-md-3 skew text-center hidden-first animating dur-2s delay-1s\" data-animation=\"fadeIn\"><p class=\"text\">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.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-4 d-flex flex-column\">\r\n <div class=\"h-100 mb-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j3.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <div class=\"h-100 mb-2 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j2.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <\/div>\r\n <div class=\"col-md-8 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-right\">Orly. Sunday.<\/p><video class=\"img-fluid\" src=\"j3.mp4\" muted autoplay loop><\/video><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-6 hidden-first animating\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j4.jpg\"><\/div>\r\n <div class=\"col-md-6 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><p class=\"text bottom-right\">Parents used to take their children <br>there to watch the departing planes.<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j5.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-4 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-left\">On this particular Sunday...<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j6.jpg\"><\/div>\r\n <div class=\"col-md-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><p class=\"text top-left\">the child whose story we are telling<br>was bound to remember the frozen sun...<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j7.jpg\"><\/div>\r\n <div class=\"col-md-4 hidden-first animating delay-2s\" data-animation=\"fadeInDown\"><p class=\"text bottom-right\">the setting at the end of the jetty...<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j8.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-9 hidden-first animating dur-2s\" data-animation=\"fadeInDown\">\r\n <p class=\"text top-left\">...and a woman's face.<\/p><video class=\"img-fluid\" src=\"j9.mp4\" muted autoplay loop><\/video>\r\n <\/div>\r\n <div class=\"col-md-3 d-flex justify-content-end flex-column skew pb-4 hidden-first dur-2s animating\" data-animation=\"fadeIn\">\r\n <p class=\"text\">Nothing sorts out memories from ordinary moments.<\/p>\r\n <p class=\"text\">Later on they do claim remembrance when they show their scars.<\/p>\r\n <p class=\"text\">That face he had seen was to be the only peacetime image to survive the war.<\/p>\r\n <p class=\"text\">Had he really seen it?<\/p>\r\n <p class=\"text\">Or had he invented that tender moment to prop up the madness to come?<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-4 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-left\">The sudden roar,<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j10.jpg\"><\/div>\r\n <div class=\"col-md-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><p class=\"text top-left\">the woman's gesture,<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j11.jpg\"><\/div>\r\n <div class=\"col-md-4 hidden-first animating delay-2s\" data-animation=\"fadeInDown\"><p class=\"text bottom-right\">the crumpling body,<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j12.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-8 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-left\">...and the cries of the crowd on the jetty blurred by fear.<\/p><img decoding=\"async\" class=\"img-fluid\" src=\"j13.jpg\">\r\n <\/div>\r\n <div class=\"col-md-4 d-flex flex-column\">\r\n <div class=\"h-100 mb-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j14.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <div class=\"h-100 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j15.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row big-separator-bottom mt-5\">\r\n <div class=\"col-md-4 offset-md-4 skew text-center hidden-first animating dur-2s\" data-animation=\"fadeIn\">\r\n <p class=\"text\">Later, he knew he had seen a man die...<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-12 hidden-first animating\" data-animation=\"fadeInDown\"><p class=\"text top-left\">...And sometime after came the destruction of Paris.<\/p><video class=\"img-fluid\" src=\"j16.mp4\" muted autoplay loop><\/video>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-6 hidden-first animating\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j17.jpg\"><\/div>\r\n <div class=\"col-md-6 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j18.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-4 d-flex flex-column\">\r\n <div class=\"h-100 mb-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j19.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <div class=\"h-100 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j20.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <\/div>\r\n <div class=\"col-md-8 hidden-first animating\" data-animation=\"fadeInDown\"><video class=\"img-fluid\" src=\"j21.mp4\" muted autoplay loop><\/video><\/div>\r\n <\/div>\r\n <div class=\"row mt-5\">\r\n <div class=\"col-md-6 hidden-first animating\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j23.jpg\"><\/div>\r\n <div class=\"col-md-6 hidden-first animating delay-1s\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j24.jpg\"><\/div>\r\n <\/div>\r\n <div class=\"row mt-5 big-separator-bottom\">\r\n <div class=\"col-md-8 hidden-first animating\" data-animation=\"fadeInDown\"><img decoding=\"async\" class=\"img-fluid\" src=\"j25.jpg\"><\/div>\r\n <div class=\"col-md-4 d-flex flex-column\">\r\n <div class=\"h-100 mb-4 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j26.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <div class=\"h-100 hidden-first animating delay-1s\" data-animation=\"fadeInDown\" style=\"background-image: url('https:\/\/kultzine.com\/wp-content\/uploads\/2026\/03\/j27.jpg'); background-size: cover; background-position: center; border: 3px solid black;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row big-separator\">\r\n <div class=\"col-md-12 text-center\">\r\n <span class=\"spot hidden-first delay-2s dur-1 animating\" data-animation=\"fadeIn\">END OF PART I<\/span>\r\n <p class=\"text-center mt-5\">If you want to get alerted for Part II,<br> <a href=\"\/subscribe\">click here<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script src=\"..\/node_modules\/in-view\/dist\/in-view.min.js\"><\/script>\r\n <script src=\"..\/js\/animate-trigger.js\"><\/script>\r\n <script src=\"..\/js\/noise.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\nModel 4:01\u202fPM\r\nThinkingThoughts\r\nExpand to view model thoughts\r\n\r\nchevron_right\r\nHarika bir proje! Chris Marker'\u0131n La Jet\u00e9e filmi zaten sinema tarihinde \"fotoroman\" (photo-roman) tekni\u011fiyle yap\u0131lm\u0131\u015f ba\u015fyap\u0131tlardan biridir. Bu ruhu web'e ta\u015f\u0131rken basit bir a\u015fa\u011f\u0131 kayd\u0131rma (scroll) i\u015fleminden ziyade, \"Cinematic Scrollytelling\" (Sinematik Kayd\u0131rmal\u0131 Hikaye Anlat\u0131m\u0131) y\u00f6ntemini kullanmak \u00e7ok daha etkileyici olacakt\u0131r.\r\nEski kodundaki Bootstrap ve Animate.css ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kald\u0131r\u0131p, yerine g\u00fcn\u00fcm\u00fcz\u00fcn modern animasyon k\u00fct\u00fcphanesi olan GSAP (GreenSock) ve ScrollTrigger'\u0131 ekledim. Ayr\u0131ca t\u00fcm foto\u011fraflar\u0131n 16:9 oran\u0131n\u0131 korumas\u0131 i\u00e7in modern CSS aspect-ratio \u00f6zelli\u011fini kulland\u0131m.\r\nA\u015fa\u011f\u0131daki kodu tek bir index.html dosyas\u0131 olarak kaydedip taray\u0131c\u0131n\u0131zda a\u00e7abilirsiniz.\r\nYeni Deneyimin \u00d6zellikleri:\r\nSinematik Kayd\u0131rma (ScrollTrigger): Kullan\u0131c\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a paneller ve metinler s\u0131rayla, dramatik bir \u015fekilde ekrana girer. Foto\u011fraflar ekrana girerken hafif\u00e7e b\u00fcy\u00fcr (Ken Burns etkisi).\r\nModern CSS Grid: 16:9 oran\u0131 aspect-ratio: 16\/9 ile kesin olarak korundu. Karma\u015f\u0131k Bootstrap class'lar\u0131 yerine temiz CSS Grid kullan\u0131ld\u0131.\r\nDinamik Film Greni (Noise): Eski kodda harici bir JS dosyas\u0131na ba\u011fl\u0131 olan kar\u0131ncalanma (noise) efekti, performans\u0131 art\u0131rmak i\u00e7in saf CSS animasyonu ile yeniden yaz\u0131ld\u0131.\r\nTipografi ve \u00c7izgi Roman Dokunu\u015flar\u0131: Metin kutular\u0131 keskin k\u00f6\u015feli, hafif g\u00f6lgeli ve sahnelere asimetrik yerle\u015ftirilerek nostaljik ama modern bir fotoroman hissiyat\u0131 verildi.\r\n\u0130\u015fte ba\u015ftan yarat\u0131lan kod:\r\ncode\r\nHtml\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Chris Marker's La Jet\u00e9e - Interactive Comic<\/title>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@300;500;700&family=Rubik:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n <style>\r\n :root {\r\n --bg-color: #1a1a1a;\r\n --text-color: #f4f4f4;\r\n --accent-color: #da532c;\r\n --panel-border: #000;\r\n --panel-bg: #fff;\r\n --font-display: 'Rubik', sans-serif;\r\n --font-body: 'Rajdhani', sans-serif;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: var(--bg-color);\r\n color: var(--text-color);\r\n font-family: var(--font-body);\r\n overflow-x: hidden;\r\n font-size: 1.2rem;\r\n }\r\n\r\n \/* CSS Film Grain Effect *\/\r\n .noise-overlay {\r\n position: fixed;\r\n top: -50%; left: -50%; right: -50%; bottom: -50%;\r\n width: 200%; height: 200%;\r\n background: transparent url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/7\/76\/1k_Dissolve_Noise_Texture.png') repeat 0 0;\r\n background-repeat: repeat;\r\n animation: bg-animation .2s infinite;\r\n opacity: 0.06;\r\n pointer-events: none;\r\n z-index: 9999;\r\n }\r\n\r\n @keyframes bg-animation {\r\n 0% { transform: translate(0,0) }\r\n 10% { transform: translate(-5%,-5%) }\r\n 20% { transform: translate(-10%,5%) }\r\n 30% { transform: translate(5%,-10%) }\r\n 40% { transform: translate(-5%,15%) }\r\n 50% { transform: translate(-10%,5%) }\r\n 60% { transform: translate(15%,0) }\r\n 70% { transform: translate(0,10%) }\r\n 80% { transform: translate(-15%,0) }\r\n 90% { transform: translate(10%,5%) }\r\n 100% { transform: translate(5%,0) }\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero {\r\n height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n .hero h1 {\r\n font-family: var(--font-display);\r\n font-size: 8vw;\r\n letter-spacing: 1.5vw;\r\n text-transform: uppercase;\r\n line-height: 1;\r\n margin: 1rem 0;\r\n }\r\n\r\n .hero .spot {\r\n font-size: 1.5rem;\r\n letter-spacing: 0.5vw;\r\n color: #aaa;\r\n }\r\n\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 5vh;\r\n animation: bounce 2s infinite;\r\n opacity: 0.5;\r\n }\r\n\r\n @keyframes bounce {\r\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\r\n 40% { transform: translateY(-20px); }\r\n 60% { transform: translateY(-10px); }\r\n }\r\n\r\n \/* Comic Grid Layout *\/\r\n .comic-container {\r\n max-width: 90vw;\r\n margin: 0 auto;\r\n padding: 5vh 0;\r\n }\r\n\r\n .scene {\r\n position: relative;\r\n margin-bottom: 25vh; \/* Dramatik bo\u015fluklar *\/\r\n display: grid;\r\n gap: 2rem;\r\n }\r\n\r\n \/* 16:9 Image \/ Video Containers *\/\r\n .media-wrapper {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 16 \/ 9;\r\n overflow: hidden;\r\n border: 4px solid var(--panel-border);\r\n box-shadow: 10px 10px 0px rgba(0,0,0,0.8);\r\n background: #000;\r\n }\r\n\r\n .media-wrapper img, .media-wrapper video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transform: scale(1.1); \/* Animasyon i\u00e7in ba\u015flang\u0131\u00e7 boyutu *\/\r\n filter: grayscale(100%) contrast(1.2); \/* Siyah beyaz fotoroman etkisi *\/\r\n }\r\n\r\n \/* Grid Variations *\/\r\n .grid-1 { grid-template-columns: 1fr; }\r\n .grid-2 { grid-template-columns: 1fr 1fr; }\r\n .grid-3 { grid-template-columns: 1fr 1fr 1fr; }\r\n .grid-split { grid-template-columns: 1fr 2fr; }\r\n .grid-split-rev { grid-template-columns: 2fr 1fr; }\r\n\r\n \/* Comic Text Boxes *\/\r\n .text-box {\r\n background-color: var(--panel-bg);\r\n color: var(--panel-border);\r\n padding: 1.5rem 2rem;\r\n font-size: 1.4rem;\r\n font-weight: 500;\r\n border: 3px solid var(--panel-border);\r\n box-shadow: 6px 6px 0px rgba(0,0,0,0.5);\r\n max-width: 80%;\r\n z-index: 10;\r\n transform: skew(-2deg);\r\n }\r\n\r\n .text-box p {\r\n transform: skew(2deg); \/* Yaz\u0131y\u0131 d\u00fczeltme *\/\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .text-box p:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Positioning Text Boxes *\/\r\n .txt-overlap-top-left { position: absolute; top: -2rem; left: -2rem; }\r\n .txt-overlap-bottom-right { position: absolute; bottom: -2rem; right: -2rem; }\r\n .txt-center { margin: 0 auto; text-align: center; }\r\n \r\n \/* Links *\/\r\n a {\r\n color: var(--accent-color);\r\n text-decoration: none;\r\n border-bottom: 2px solid var(--accent-color);\r\n transition: all 0.3s;\r\n }\r\n a:hover {\r\n background: var(--accent-color);\r\n color: #fff;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .grid-2, .grid-3, .grid-split, .grid-split-rev {\r\n grid-template-columns: 1fr;\r\n }\r\n .text-box { position: relative; top: 0; left: 0; right: 0; bottom: 0; margin-top: -1rem; width: 100%; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"noise-overlay\"><\/div>\r\n\r\n \r\n <header class=\"hero\">\r\n <span class=\"spot hero-element\">CHRIS MARKER'S<\/span>\r\n <h1 class=\"hero-element\">LA JET\u00c9E<\/h1>\r\n <span class=\"spot hero-element\">PART I<\/span>\r\n <div class=\"scroll-indicator\">\u2193 SCROLL TO BEGIN \u2193<\/div>\r\n <\/header>\r\n\r\n <main class=\"comic-container\">\r\n\r\n \r\n <div class=\"scene grid-1\">\r\n <div class=\"text-box txt-center\">\r\n <p>This is the story of a man, marked by an image of his childhood.<\/p>\r\n <p>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.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-split gs-reveal\">\r\n <div class=\"media-column d-flex\">\r\n <div class=\"media-wrapper\"><img decoding=\"async\" src=\"j2.jpg\" alt=\"Memory\"><\/div>\r\n <div class=\"media-wrapper mt-4\"><img decoding=\"async\" src=\"j3.jpg\" alt=\"Memory\"><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <video src=\"j3.mp4\" muted autoplay loop playsinline><\/video>\r\n <div class=\"text-box txt-overlap-top-left\"><p>Orly. Sunday.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-2 gs-reveal\">\r\n <div class=\"media-wrapper\"><img decoding=\"async\" src=\"j4.jpg\" alt=\"Jetty\"><\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j5.jpg\" alt=\"Planes\">\r\n <div class=\"text-box txt-overlap-bottom-right\"><p>Parents used to take their children there to watch the departing planes.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-3 gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j6.jpg\" alt=\"Boy\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>On this particular Sunday...<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j7.jpg\" alt=\"Sun\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>the child whose story we are telling was bound to remember the frozen sun...<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j8.jpg\" alt=\"Setting\">\r\n <div class=\"text-box txt-overlap-bottom-right\"><p>the setting at the end of the jetty...<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-split-rev gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <video src=\"j9.mp4\" muted autoplay loop playsinline><\/video>\r\n <div class=\"text-box txt-overlap-top-left\"><p>...and a woman's face.<\/p><\/div>\r\n <\/div>\r\n <div class=\"text-box\">\r\n <p>Nothing sorts out memories from ordinary moments.<\/p>\r\n <p>Later on they do claim remembrance when they show their scars.<\/p>\r\n <p>That face he had seen was to be the only peacetime image to survive the war.<\/p>\r\n <p>Had he really seen it?<\/p>\r\n <p>Or had he invented that tender moment to prop up the madness to come?<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-3 gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j10.jpg\" alt=\"Roar\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>The sudden roar,<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j11.jpg\" alt=\"Gesture\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>the woman's gesture,<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j12.jpg\" alt=\"Body\">\r\n <div class=\"text-box txt-overlap-bottom-right\"><p>the crumpling body,<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-split gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <img decoding=\"async\" src=\"j13.jpg\" alt=\"Crowd\">\r\n <div class=\"text-box txt-overlap-top-left\"><p>...and the cries of the crowd on the jetty blurred by fear.<\/p><\/div>\r\n <\/div>\r\n <div class=\"media-column\">\r\n <div class=\"media-wrapper\"><img decoding=\"async\" src=\"j14.jpg\" alt=\"Fear\"><\/div>\r\n <div class=\"media-wrapper\"><img decoding=\"async\" src=\"j15.jpg\" alt=\"Fear\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-1 gs-reveal\">\r\n <div class=\"text-box txt-center\">\r\n <p>Later, he knew he had seen a man die...<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-1 gs-reveal\">\r\n <div class=\"media-wrapper\">\r\n <video src=\"j16.mp4\" muted autoplay loop playsinline><\/video>\r\n <div class=\"text-box txt-overlap-top-left\"><p>...And sometime after came the destruction of Paris.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"scene grid-1 text-center\" style=\"margin-top: 20vh; margin-bottom: 10vh;\">\r\n <span class=\"spot\">END OF PART I<\/span>\r\n <p style=\"margin-top: 2rem; font-size: 1.5rem;\">If you want to get alerted for Part II,<br> <a href=\"\/subscribe\">click here<\/a><\/p>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n <script>\r\n \/\/ GSAP and ScrollTrigger initialization\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n \/\/ Hero Animation\r\n gsap.from(\".hero-element\", {\r\n y: 50,\r\n opacity: 0,\r\n duration: 1.5,\r\n stagger: 0.3,\r\n ease: \"power3.out\",\r\n delay: 0.5\r\n });\r\n\r\n \/\/ Scene Animations (Cinematic Scrollytelling)\r\n const scenes = gsap.utils.toArray('.gs-reveal');\r\n\r\n scenes.forEach(scene => {\r\n \/\/ Select elements inside the scene\r\n const medias = scene.querySelectorAll('img, video');\r\n const textBoxes = scene.querySelectorAll('.text-box');\r\n\r\n \/\/ Create a timeline for each scene\r\n let tl = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: scene,\r\n start: \"top 80%\", \/\/ Animasyon sahne ekran\u0131n %80'ine geldi\u011finde ba\u015flar\r\n toggleActions: \"play none none reverse\" \/\/ A\u015fa\u011f\u0131 inerken oynat, yukar\u0131 \u00e7\u0131karken geri sar\r\n }\r\n });\r\n\r\n \/\/ 1. Ken Burns Effect: Resimler ve videolar hafif\u00e7e k\u00fc\u00e7\u00fclerek netle\u015fir\r\n if(medias.length > 0) {\r\n tl.to(medias, {\r\n scale: 1,\r\n duration: 2,\r\n ease: \"power2.out\",\r\n stagger: 0.2\r\n });\r\n \r\n tl.fromTo(scene.querySelectorAll('.media-wrapper'), \r\n { opacity: 0, y: 30 },\r\n { opacity: 1, y: 0, duration: 1.5, ease: \"power2.out\", stagger: 0.2 },\r\n \"<\" \/\/ \u00d6nceki animasyonla ayn\u0131 anda ba\u015flat\r\n );\r\n }\r\n\r\n \/\/ 2. Metin kutular\u0131 resimlerden hemen sonra dramatik bir \u015fekilde belirir\r\n if(textBoxes.length > 0) {\r\n tl.from(textBoxes, {\r\n y: 20,\r\n opacity: 0,\r\n rotation: -5, \/\/ \u00c7izgi romanvari bir d\u00fc\u015f\u00fc\u015f efekti\r\n duration: 1,\r\n ease: \"back.out(1.7)\",\r\n stagger: 0.3\r\n }, \"-=1.5\"); \/\/ Resim animasyonu bitmeden metinler girmeye ba\u015flar\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>code Code Chris Marker’s La Jet\u00e8e La Jet\u00e8e CHRIS MARKER’S LA JET\u00c8E 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-156","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/pages\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kultzine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=156"}],"version-history":[{"count":8,"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/pages\/156\/revisions"}],"predecessor-version":[{"id":166,"href":"https:\/\/kultzine.com\/index.php?rest_route=\/wp\/v2\/pages\/156\/revisions\/166"}],"wp:attachment":[{"href":"https:\/\/kultzine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}