Загрузка видео...

Не удалось загрузить видео

На главную

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself

wesbos's profile picture

Wes Bos

437,786 subscribers

222,832 просмотров • 2 лет назад •via X (Twitter)

Наука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 9

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈2 лет назад

And here's my version that attempts to match up to the iPad site one 🤙 Uses the pathLength trick and position:sticky to get closer to the video behavior from the original 😎

Фото профиля Wes Bos
Wes Bos2 лет назад

Ohhhh sheeesh - thats even better. Good tip - thank you

Фото профиля Mbaziira Ronald
Mbaziira Ronald2 лет назад

Man, CSS is becoming more powerful every year 😎

Фото профиля Wes Bos
Wes Bos2 лет назад

lots of super powerful APIs rolling out right now - its a good time for CSS

Фото профиля Jeroen Reumkens — FrontendFYI
Jeroen Reumkens — FrontendFYI2 лет назад

Appreciate the mention Wes! This tutorial is already super complete! Well done 🔥

Фото профиля CRANQ
CRANQ2 лет назад

Great video content, a bit over my head though!

Фото профиля Matias Baldanza.dev 😁 ⚛️
Matias Baldanza.dev 😁 ⚛️2 лет назад

What a great step-by-step breakdown!

Фото профиля TommyTheJ
TommyTheJ2 лет назад

Pretty neat 😎

Фото профиля Nicholas Mackey
Nicholas Mackey2 лет назад

So sick. Thanks for sharing, Wes. 🤙

Похожие видео

what HyperFrames + Claude Code can do: motion video done with 2 prompts, 10 mins. here's a quick 4-min tutorial on how you do it yourself link in thread:
4:11

what HyperFrames + Claude Code can do: motion video done with 2 prompts, 10 mins. here's a quick 4-min tutorial on how you do it yourself link in thread:

Bin Liu

44,522 просмотров • 4 месяцев назад

I made a quick tutorial video on how you can do this. I am using Marshmallow PB system, but it can work without it as well. Check replies, if you want to know how to access to open beta.
2:51

I made a quick tutorial video on how you can do this. I am using Marshmallow PB system, but it can work without it as well. Check replies, if you want to know how to access to open beta.

Kadeko

45,089 просмотров • 5 месяцев назад

Heres video tutorial on how to do it! #royalehigh #royalehighdorms
1:42

Heres video tutorial on how to do it! #royalehigh #royalehighdorms

Lеxair

39,108 просмотров • 1 год назад

Apple Image Playground API Tutorial (link with code in comments) Did you know the API supports source images and long-form text? Or that it integrates with UIKit using a delegate conformance? 🤯 My first video tutorial - I'm trying new formats this year. Would love feedback!
0:49

Apple Image Playground API Tutorial (link with code in comments) Did you know the API supports source images and long-form text? Or that it integrates with UIKit using a delegate conformance? 🤯 My first video tutorial - I'm trying new formats this year. Would love feedback!

Matt Pfeiffer ᯅ

12,785 просмотров • 1 год назад

Take any Python code and build a dynamic GUI on top of it by dragging and dropping components. Python is already the most popular language in the world. This makes it even better! The attached video is only 45 seconds. It will show you how it works. Here is the important part: You can now build an interface for your Python code without learning HTML, JavaScript, or CSS. Go to this link to try this: Remember to work smarter, not harder! Thanks to the team behind Taipy for partnering with me on this post.
0:45

Take any Python code and build a dynamic GUI on top of it by dragging and dropping components. Python is already the most popular language in the world. This makes it even better! The attached video is only 45 seconds. It will show you how it works. Here is the important part: You can now build an interface for your Python code without learning HTML, JavaScript, or CSS. Go to this link to try this: Remember to work smarter, not harder! Thanks to the team behind Taipy for partnering with me on this post.

Santiago

155,254 просмотров • 2 лет назад

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊
0:24

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Surjith S M ✪

169,291 просмотров • 3 лет назад

Did you know how easy it is to create a form with AI? Well, if you didn't, you do now — check out this quick video tutorial from Jotform to discover how.
1:49

Did you know how easy it is to create a form with AI? Well, if you didn't, you do now — check out this quick video tutorial from Jotform to discover how.

Jotform

122,382 просмотров • 1 год назад

Web scraping with ChatGPT's Code Interpreter is a game-changer 🤯 Here's a quick tutorial on how you can leverage this powerful capability. Let me know what you think.
6:57

Web scraping with ChatGPT's Code Interpreter is a game-changer 🤯 Here's a quick tutorial on how you can leverage this powerful capability. Let me know what you think.

Sebo ⚛︎

501,005 просмотров • 3 лет назад

Been seeing a bunch of creators use that bullet time effect where everything freezes, then starts moving again—so I made a quick tutorial on how to do it.
1:29

Been seeing a bunch of creators use that bullet time effect where everything freezes, then starts moving again—so I made a quick tutorial on how to do it.

enigmatic_e

20,112 просмотров • 1 год назад

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶
0:24

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶

jhey ʕ•ᴥ•ʔ

91,596 просмотров • 2 лет назад

Learn how to create a smooth, realistic face swap in just minutes with this quick tutorial. Follow the steps and try it yourself with AKOOL!
0:38

Learn how to create a smooth, realistic face swap in just minutes with this quick tutorial. Follow the steps and try it yourself with AKOOL!

Akool Inc

135,386 просмотров • 29 дней назад

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇
0:24

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

210,485 просмотров • 2 лет назад

How to create this bullet time effect with higgsfield. ai here is a quick tutorial sc ig/kayo
0:48

How to create this bullet time effect with higgsfield. ai here is a quick tutorial sc ig/kayo

Laurent Correia Bill

30,140 просмотров • 10 месяцев назад

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇
0:25

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

729,560 просмотров • 2 лет назад

A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning. With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨
0:32

A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning. With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨

Maxi Ferreira

351,273 просмотров • 3 лет назад

I vibe-coded a website using Replit ⠕ that allows you to use x402 payments on Solana to access LLMs without an API key Pay per request with USDC, no API keys needed, only on Solana. Test it out here: (full video on how to do this soon)
2:13

I vibe-coded a website using Replit ⠕ that allows you to use x402 payments on Solana to access LLMs without an API key Pay per request with USDC, no API keys needed, only on Solana. Test it out here: (full video on how to do this soon)

ashen

44,237 просмотров • 9 месяцев назад

Building AI agents and tools is getting ridiculously easy! Here is a pretty impressive FREE and Open-Source AI agent builder that runs on your computer. It's a desktop app you can install on Mac or Windows. Link: • Free • 100% no-code: You can type what you want, and the tool will build everything for you. • You can use local models like DeepSeek or Qwen, or connect to cloud models like GPT-4o, Claude, or Gemini with your API key. • You can turn the tools you build into MCP Servers. I recorded a quick video to show you how easy it is to build something from scratch.
4:10

Building AI agents and tools is getting ridiculously easy! Here is a pretty impressive FREE and Open-Source AI agent builder that runs on your computer. It's a desktop app you can install on Mac or Windows. Link: • Free • 100% no-code: You can type what you want, and the tool will build everything for you. • You can use local models like DeepSeek or Qwen, or connect to cloud models like GPT-4o, Claude, or Gemini with your API key. • You can turn the tools you build into MCP Servers. I recorded a quick video to show you how easy it is to build something from scratch.

Santiago

56,815 просмотров • 1 год назад

Have you tried forking chat sessions in VS Code? Create a new independent session that keeps the conversation history so you can explore alternative approaches without losing your original context. Watch the video to see how it works.
1:06

Have you tried forking chat sessions in VS Code? Create a new independent session that keeps the conversation history so you can explore alternative approaches without losing your original context. Watch the video to see how it works.

Visual Studio Code

28,488 просмотров • 5 месяцев назад