正在加载视频...

视频加载失败

Ceci n’est pas un video ↓ The playback of “Link” is handled by a custom script that sequences individual images. The scale, direction, and speed can be modified interactively. Each edition contains two image sets default (1600px) and high quality (4000px).

30,146 次观看 • 1 年前 •via X (Twitter)

11 条评论

ertdfgcvb 𓅰 𓅬 𓅭 𓅮 𓅯 的头像
ertdfgcvb 𓅰 𓅬 𓅭 𓅮 𓅯1 年前

Realtime versions ↓

Akool Inc 的头像
Akool Inc1 年前

Looking for the best Video Translation tool? Akool outperforms Rask AI with superior translation accuracy and industry-leading lip-sync technology. Akool delivers more natural speech, precise mouth movements, and a truly lifelike experience across multiple languages. 🌍

Kerim Safa 的头像
Kerim Safa1 年前

Incredible work, Andreas.

ana 的头像
ana1 年前

ouais enfin ça ressemble bcp à une vidéo quand même

ICON 的头像
ICON1 年前

wow

verycool 的头像
verycool1 年前

These are cool

B 的头像
B1 年前

@kimasendorf Damn these are good 👏

jeru 的头像
jeru1 年前

beautiful

888bit 的头像
888bit1 年前

je t'aime! lovely work!

jonooo 的头像
jonooo1 年前

Wow, love how much texture and vibrancy there is.

Conwic 的头像
Conwic1 年前

I think I built this

相关视频

CSS Tip! ✨ You can create these parallax effects and image cross-fades with scroll-driven animations 🤙 img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @​keyframes fade { to { opacity: 0; }} This one's fun! 😁 The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction 🫶 The use of mix-blend-mode: plus-lighter; produces a better cross-fade result 💯 A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% 🎬 How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @​keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver 🤙 /* section contains both images */ section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh + (var(--big-height) * 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported 🤙 To do that, it uses GSAP ScrollTrigger 🏆 As always, any questions, requests, etc. hit me up! 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

242,205 次观看 • 2 年前