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

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

На главную

spritesheets are, and always will be, a fun trick! ⚡ translate with css based on pointer position grace note™ blink included ♪

154,132 просмотров • 1 месяц назад •via X (Twitter)

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

Фото профиля Peter Petrash
Peter Petrash1 месяц назад

spritesheeted myself for my site ☺️ it has a mood system underneath including easter egg behaviors (eg. try hypnotizing it with your mouse)

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

haha 😅 that's real good i think where this one wins is because it doesn't try to be the "centerpiece", it's one of those where you've lined it up to be discovered easily, but then lets the user feel like they discovered it 👏

Фото профиля Peter Petrash
Peter Petrash1 месяц назад

appreciate it Jhey 👊

Фото профиля Boyd
Boyd1 месяц назад

I did something similar to this but for my dog.

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

love it - that's so good! 🐶

Фото профиля Boyd
Boyd1 месяц назад

Least I could do for him. He was a huge personality in our house.

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

i have no doubts from the pictures 🥲 such a lovely tribute 🫶

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

and of course, sorry for your loss Boyd, never quite know what the right words are 🙏 but, the "love it – it's so good" were definitely in regards to how well you have delivered that tribute 🫶

Фото профиля Boyd
Boyd1 месяц назад

Thanks! We miss him as a family but time has healed the immediate loss. Appreciate the kind words both about Pi and the project.

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

i didn't bookmark the post i saw doing the rounds for this the other day 🤦‍♂️ but saw a bunch of 'em so if someone has it to reference 🙏

Фото профиля Chauve Camille
Chauve Camille1 месяц назад

😮

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

that's the one i was looking for to QT 🙏 different technique but the same concept 💯

Фото профиля oil-oil
oil-oil1 месяц назад

I also implemented a similar effect on my website,

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

had a few questions about this one 🤙 - quick way: generate a video based on a character map and use ffmpeg etc. to split frames and create the sprite (you don't need a 3mb sprite file! compress!) - smoothing: track pointer pos + eased pos. the eased pos plays catch up, use that

Фото профиля Joel Stransky ✨
Joel Stransky ✨1 месяц назад

I did this in 2005 in Flash.

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

never got to play with flash 🥲

Фото профиля Joel Stransky ✨
Joel Stransky ✨1 месяц назад

You would have been the best of us.

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

ha 😅 i highly doubt that but from what i understand, that was an incredibly fun/creative era

Фото профиля Hurricane Zane
Hurricane Zane1 месяц назад

where is beaver demo? my son is requesting access

Фото профиля Techies Reviews
Techies Reviews1 месяц назад

Wohoo sprites are back baby!

Фото профиля dennys dionigi
dennys dionigi1 месяц назад

Fun trick also here 😆

Фото профиля Geryy
Geryy1 месяц назад

Back in my times we used sprite sheets for button hover states.... 🧓

Фото профиля mr.tipton
mr.tipton1 месяц назад

I love sprite sheets. I built a native utility app with sprite sheets being the UI. Haha This one is so good! Love the look and smoothness

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

sprites are always fun! i did put a little "smoothing" slider in there to try help things out on it 😁

Фото профиля mr.tipton
mr.tipton1 месяц назад

Looks great man

Фото профиля Jimmy Lee
Jimmy Lee1 месяц назад

This is so good, the future of avatars

Фото профиля Brayan
Brayan1 месяц назад

Any tips on smooth sprite animations?

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

in this case, keep the pointer position as "the target" then lerp/ease a separate value towards it on every frame and use that eased value to drive the spritesheet frame you’re smoothing the input, not the sprite itself 🤙

Фото профиля Ismael
Ismael1 месяц назад

Wait, I need this for my website

Фото профиля Ahmed Dahbi
Ahmed Dahbi1 месяц назад

wow super cool! love the blink 😉

Фото профиля Occam’s Orange
Occam’s Orange1 месяц назад

How did you generate the sprite in the first place? When i tried using gpt image or gemini, it keep duplicating the same image.

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

the skill with ai is prepping the journey 1. base image for your character 2. character map for your character 3. gaze rig for your character if you try jumping to 3, that's the issue, you need good reference material, and a good model Krea + GPT 2.0 for this one 🤙

Фото профиля Occam’s Orange
Occam’s Orange1 месяц назад

Thank you 🙏 I'm trying to make one for

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

ahh yes - you should be able to generate one for that little character 💯 try prompting for the prompts too my gaze rig prompt would start something like: 9x9 spritesheet head-rotation gaze rig for this character (map + basic images attached) and then i'll detail the angles

Фото профиля Occam’s Orange
Occam’s Orange1 месяц назад

Got it. Thanks a ton! The character is my son. Gotta pay him royalist

Фото профиля 808
8081 месяц назад

Damn thats clean! I love the double blink, adds so much depth. Will this be added sooner or later to the /index?

Фото профиля Mane
Mane1 месяц назад

Didn’t know you vibes with beavers like that

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

it's a gopher 🥲

Фото профиля John Cotterell
John Cotterell1 месяц назад

The blinking is a really nice touch. I did something similar with this character. It is quite painstaking work doing it with a spritesheet.

Фото профиля Deepak
Deepak1 месяц назад

If I could follow one fucking person on X it'll be you man, you're the fucking goat

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

whoah - appreciate that 💯🙏 doin' what i can to try and post a little more again. i've been trying to collect/curate all my work over the years into one spot on my site, it's been takin' a minute 🙇‍♂️

Фото профиля Deepak
Deepak1 месяц назад

There's so much alpha in what you post, it's just an endless sea of knowledge. Thank you for your posts

Фото профиля yann · minimal design
yann · minimal design1 месяц назад

Is that on Codepen somewhere? 😍

Фото профиля Allie Speers
Allie Speers1 месяц назад

omg who is lil fella

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 месяц назад

a little mascot i'm toying with for a project 😁

Фото профиля Simon
Simon1 месяц назад

really cool

Фото профиля Crownz | AI & Design
Crownz | AI & Design1 месяц назад

It does look fun

Фото профиля Joshua Ress, BSc
Joshua Ress, BSc1 месяц назад

I LOVE playing with spritesheets. Such a simple and effective trick

Фото профиля IGGYsosa
IGGYsosa1 месяц назад

Very very clever 👏 well done

Фото профиля Shubhu
Shubhu1 месяц назад

how many images you generated for this one?

Фото профиля Nattu
Nattu1 месяц назад

Thats some neat sprite management.

Фото профиля Anshuman
Anshuman1 месяц назад

The explanation on this one is superb!!! 🤯🙌

Фото профиля Dzmitry Drynau
Dzmitry Drynau1 месяц назад

Hmm, interesting and cool! I should try to do something like that on our platform.

Фото профиля Joseph Miclaus
Joseph Miclaus1 месяц назад

This is way too good... waaay too good.

Фото профиля Massdx
Massdx1 месяц назад

how ? can you share a tutorial ?

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

CSS Trick 🧲 You can create magnetic links with the power of custom properties and some JavaScript 💪 a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) ...; transition: translate var(--s, 1s) var(--ease, var(--elastic)); } a:hover { --s: 0s; } The trick here is to pad out the list items wrapping your links and use that as a translation limit 🛑 Start by using some JavaScript to calculate a value between -1 and 1 for both the x/y axis on pointermove for each list item, not the link! 🔗 If your pointer was at the center of the item, you'd get [0,0]. If it was in the top right, you'd get [1,-1] ☝️ It's worth checking out the JavaScript snippet to see how the mapping function works. Essentially, you create a function that when given a value between two bounds, will give you a mapped value back 🤙 const mapX = mapRange( item.offsetWidth * -0.5, item.offsetWidth * 0.5, 1, -1 ) Then, on pointermove, you plug the pointer position in to get the value back out and pass that into your CSS const x = mapX(item.centerX - event.x) document​.documentElement​.style.setProperty(--x, x) When the pointer leaves the list item, you make sure to reset these values back to 0 ✨ Once CSS has your values, it's the trick of updating the translation of each part You know that in each axis, you only want to translate the link by the padding amount li a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) calc(clamp(-1, var(--y), 1) * var(--pad-y)); transition: translate var(--speed, 1s) var(--ease, var(--elastic)); } This will translate the link within the list item by the desired amount. The cool part here is that you can set an offset for the text inside the link and have that move at a different rate ⭐️ By only updating the --pad-x/y custom properties for the inside the link, you can control how much it moves nav a span { --pad-x: 0.25rem; --pad-y: 0.25rem; } And the last piece, how do you update the behavior for transition speeds? And so it springs back like that? Again, use custom properties ✨ a:hover { --s: 0s; } a { transition: translate var(--s, 1s) var(--ease, var(--elastic)); } By default, a link will use --elastic easing via linear() and have a transition-duration of 1s. When a link is hovered that speed becomes 0s because you want the link to magnetise to your pointer. How about that little gap between when your pointer enters the item but hasn't hovered the link? Set a different transition so it transitions to being hovered 🫶 nav li:hover a { --ease: ease-out; --speed: 0.1s; } That's kinda it! 🙌 Use JavaScript (~40 loc) to get the information and then let CSS do all the lifting for you 💪 Any questions or suggestions, let me know 🙏 If you want a walkthrough video, also let me know please 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

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