Result
👆 こういうやつをCSSだけで実装する、みたいなやつです。セピア込みVer.もありました。
動画の上にかぶせればJS不要で古い映像みたいな演出が出来ますね。
css
:root { --trsn: all 0.5s ease 0s; --black: #000;}*, *:before, *:after { position: absolute;}body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--black); perspective: 100vmin;}.content { width: 100vw; height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: url(https://source.unsplash.com/random/800x600/?mountain) no-repeat center center; background-size: cover; transition: var(--trsn);}.content:after { content: ""; width: 100%; height: 100%; box-shadow: 0 0 20vmin 0vmin var(--black) inset, 0 0 3vmin 0.5vmin var(--black) inset, 0 0 1vmin 1vmin var(--black);}.film, .effect { width: 100%; height: 100%; filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);}.film:after, .effect:after { content: ''; width: 120%; height: 100%; top: 0; left: 0; padding-left: 100px; opacity: 0.5; animation: film-scratch 0.45s steps(1) infinite; background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);}.effect:after { left: 30%; animation: effect-scratch 2s infinite;}.grain { width: 100%; height: 100%;}.grain:after { content: ''; width: 110%; height: 110%; top: -5%; left: -5%; opacity: .25; background-image: repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%), repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%); animation: grain 0.5s steps(1) infinite; filter: drop-shadow(0px 0px 1px black);}@keyframes grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-1%, -1%); } 20% { transform: translate(1%, 1%); } 30% { transform: translate(-2%, -2%); } 40% { transform: translate(3%, 3%); } 50% { transform: translate(-3%, -3%); } 60% { transform: translate(4%, 4%); } 70% { transform: translate(-4%, -4%); } 80% { transform: translate(2%, 2%); } 90% { transform: translate(-3%, -3%); }}@keyframes film-scratch { 0%, 100% { transform: translateX(0); opacity: 0.5; } 10% { transform: translateX(-1%); } 20% { transform: translateX(1%); } 30% { transform: translateX(-2%); opacity: 0.75; } 40% { transform: translateX(3%); } 50% { transform: translateX(-3%); opacity: 0.5; } 60% { transform: translateX(8%); } 70% { transform: translateX(-3%); } 80% { transform: translateX(10%); opacity: 0.25; } 90% { transform: translateX(-2%); }}@keyframes effect-scratch { 0% { transform: translateX(0); opacity: 0.75; } 10% { transform: translateX(-1%); } 20% { transform: translateX(1%); } 30% { transform: translateX(-2%); } 40% { transform: translateX(3%); } 50% { transform: translateX(-3%); opacity: 0.5; } 60% { transform: translateX(8%); } 70% { transform: translateX(-3%); } 80% { transform: translateX(10%); opacity: 0.25; } 90% { transform: translateX(20%); } 100% { transform: translateX(30%); }} |
blurとdrop-shadowで古いメディアの特徴を再現、repeating-conic-gradient()でノイズを表現、反復線形グラデーションのrepeating-linear-gradient()でノイズ線が作られています。
これらに細かく動くアニメーションを@keyframesで与えれば懐かしのフィルム映像エフェクトの完成ですね。
html
<div class="content"> <div class='film'> <div class="effect"> <div class="grain"></div> </div> </div></div> |
