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

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

На главную

Neat trick here is how you "split" the CTA ✨ Pseudoelements in CSS will pick up pointer events 👀 When the Nav is collapsed, scale up a pseudoelement on the CTA so it's like the CTA takes up all the space 😎 Check out the purple highlighted pseudo 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,982 subscribers

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

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Arc Terminus
Arc Terminus2 лет назад

At this point your posts are about 90% of my bookmarks.

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

@lee_marjon jheymarks™ 😅

Фото профиля Mery
Mery2 лет назад

Never seen this kinda animation in a website before. So so cool

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

Definitely a fun opportunity to mess with some of the new stuff 😁 Interesting problem here is that it needs to appear like a clickable button before revealing the navigation 🤓

Фото профиля liro crocodilo
liro crocodilo2 лет назад

@buenomrl

Фото профиля Sebastian
Sebastian2 лет назад

so good dude

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

🤙🤙🤙

Фото профиля Patrick Petcu
Patrick Petcu2 лет назад

@learnframer is this possible in framer? Looks wild and awesome. Would love to see you give it a try!

Фото профиля Design With Ay
Design With Ay2 лет назад

Oh man this is so cool!

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

🙏🙏🙏

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

It's really getting out of hand on the CTA. Here, a woman pulls a gun out to stop a man from smoking on a train. Brought you by Mayor Brandon Johnson, who is always reminding us crime is down in Chicago and the CTA is safe.
1:14

It's really getting out of hand on the CTA. Here, a woman pulls a gun out to stop a man from smoking on a train. Brought you by Mayor Brandon Johnson, who is always reminding us crime is down in Chicago and the CTA is safe.

Chicago Contrarian

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

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! */ } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) * 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @​property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @​supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @​keyframes show-cta { to { --show: 1; } } } Using @​supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇
0:29

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! */ } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) * 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @​property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @​supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @​keyframes show-cta { to { --show: 1; } } } Using @​supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

This video perfectly captures why CTA ridership has dropped. While the victim of this crime was not set aflame or sexually assaulted — it's just a theft — this is the typical experience for riders on CTA. Fairly soon, only criminals will use the CTA.
1:06

This video perfectly captures why CTA ridership has dropped. While the victim of this crime was not set aflame or sexually assaulted — it's just a theft — this is the typical experience for riders on CTA. Fairly soon, only criminals will use the CTA.

Chicago Contrarian

913,732 просмотров • 7 месяцев назад

President of the California Teachers Association denies they directed local teacher unions to strike (or threaten to) all at the same time, across the state. "CTA doesn't line up contracts." Schools & state are strapped for cash, is CTA ignoring that?
4:47

President of the California Teachers Association denies they directed local teacher unions to strike (or threaten to) all at the same time, across the state. "CTA doesn't line up contracts." Schools & state are strapped for cash, is CTA ignoring that?

Ashley Zavala

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

Today, Mayor Brandon Johnson said the solution to a man setting a woman on fire on the CTA is found in additional state money for housing and mental health services. You can’t make this up…..
0:48

Today, Mayor Brandon Johnson said the solution to a man setting a woman on fire on the CTA is found in additional state money for housing and mental health services. You can’t make this up…..

Chicago Contrarian

199,534 просмотров • 7 месяцев назад

Chicago Flips Red popped up at Jefferson Park CTA for some grassroots outreach in the 45th Ward. ALL HANDS ON DECK 💫🔥🇺🇸✊🏾 #ChicagoFlipsRed
1:05

Chicago Flips Red popped up at Jefferson Park CTA for some grassroots outreach in the 45th Ward. ALL HANDS ON DECK 💫🔥🇺🇸✊🏾 #ChicagoFlipsRed

Chicago Flips Red

14,090 просмотров • 1 год назад

“The number one reason people don’t ride the train (cta) is because they feel the train is unsafe.” Illinois’ solution? Disarm concealed carry holders, leaving criminals armed. You can’t make this stuff up. 🎥 Illinois Policy
0:37

“The number one reason people don’t ride the train (cta) is because they feel the train is unsafe.” Illinois’ solution? Disarm concealed carry holders, leaving criminals armed. You can’t make this stuff up. 🎥 Illinois Policy

Jen

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

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)
0:48

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

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

It's always a great day when you wake up and the holocaust is trending 😎 WE SHOOK UP THE WORLD.
0:36

It's always a great day when you wake up and the holocaust is trending 😎 WE SHOOK UP THE WORLD.

1984

217,468 просмотров • 1 год назад

.Impulse Space President and COO Eric Romo says the idea of cleaning up space junk is a "scam": "People show these really misleading graphics like, 'Oh my God, look at all that junk around Earth. It's so congested. It's all going to blow up and crash into each other.'" "The reality is, if you showed that at scale, you wouldn't even see the satellites because they're all so tiny."
1:51

.Impulse Space President and COO Eric Romo says the idea of cleaning up space junk is a "scam": "People show these really misleading graphics like, 'Oh my God, look at all that junk around Earth. It's so congested. It's all going to blow up and crash into each other.'" "The reality is, if you showed that at scale, you wouldn't even see the satellites because they're all so tiny."

sourcery

12,984 просмотров • 1 месяц назад

Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇
0:22

Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

No, CPD is not harassing anyone. Considering the high volume of crime on the CTA — stabbings are common — it is certain CPD was able to reasonably articulate a reason for the search. Transit riders should be applauding CPD for their effort to make the CTA safer. Unfortunately, this is Mayor Brandon Johnson's Chicago, where progressive lawmakers routinely trash CPD, so riders immediately became confrontational with Police.
1:28

No, CPD is not harassing anyone. Considering the high volume of crime on the CTA — stabbings are common — it is certain CPD was able to reasonably articulate a reason for the search. Transit riders should be applauding CPD for their effort to make the CTA safer. Unfortunately, this is Mayor Brandon Johnson's Chicago, where progressive lawmakers routinely trash CPD, so riders immediately became confrontational with Police.

Chicago Contrarian

34,829 просмотров • 3 месяцев назад

The big bang is more than just a theory — it's how we all ended up … here! Check out the strange, true history of the universe with the new episode of Astro-Investigates: The Early Universe:
0:44

The big bang is more than just a theory — it's how we all ended up … here! Check out the strange, true history of the universe with the new episode of Astro-Investigates: The Early Universe:

NASA Universe

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

When the boys are hyping you up, the trick is basically guaranteed.
0:34

When the boys are hyping you up, the trick is basically guaranteed.

Dudes Posting Their W’s

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

This Chinese Shanghai Gold Exchange (SGE) Commodity Trading Advisor (CTA) is saying that the #Gold price in China will most likely go up because of the new Chinese government #Gold tax rules. I agree with him 💯%. BullionStar VBL’s Ghost Bai, Xiaojun
2:02

This Chinese Shanghai Gold Exchange (SGE) Commodity Trading Advisor (CTA) is saying that the #Gold price in China will most likely go up because of the new Chinese government #Gold tax rules. I agree with him 💯%. BullionStar VBL’s Ghost Bai, Xiaojun

Eric Yeung 👍🚀🌕

24,953 просмотров • 8 месяцев назад

Removing off pump an infected 4fen (featuring a CT distal stentgraft false aneurysm) to end up with a 3 vessels repair thanks to the gastroduodenal artery. 3.5 months routine postop CTA, patient returned to work intraop pictures and preop full CTA in quoted tweets #aortaEd
0:25

Removing off pump an infected 4fen (featuring a CT distal stentgraft false aneurysm) to end up with a 3 vessels repair thanks to the gastroduodenal artery. 3.5 months routine postop CTA, patient returned to work intraop pictures and preop full CTA in quoted tweets #aortaEd

Xavier Berard

13,775 просмотров • 1 год назад

EXCLUSIVE: I've compiled scanner audio from this morning's mass shooting on the CTA Blue Line, in which 4 people were killed. The first part is when CTA initially discovered the bodies, the second part is Forest Park FD dispatch (Westcom), and the third part is CPD taking the offender into custody. Three victims were found deceased on one railcar, and a fourth victim was found with a faint pulse on a second railcar. The fourth victim was transported to an area hospital where they were pronounced deceased. Shell casings littered the railcar. #ChicagoScanner #Chicago
5:16

EXCLUSIVE: I've compiled scanner audio from this morning's mass shooting on the CTA Blue Line, in which 4 people were killed. The first part is when CTA initially discovered the bodies, the second part is Forest Park FD dispatch (Westcom), and the third part is CPD taking the offender into custody. Three victims were found deceased on one railcar, and a fourth victim was found with a faint pulse on a second railcar. The fourth victim was transported to an area hospital where they were pronounced deceased. Shell casings littered the railcar. #ChicagoScanner #Chicago

Eric Tendian

100,067 просмотров • 1 год назад

neat trick for the sheet effect by transforming the body with CSS when you have :popover-open ✨ :root:has(.drawer:popover-open) body { scale: calc(0.95 + (var(--c) * 0.05)); translate: 0 calc(.875rem * (1 - var(--c)); } [popover] isn't affected as it's in the :top-layer 🚀
0:20

neat trick for the sheet effect by transforming the body with CSS when you have :popover-open ✨ :root:has(.drawer:popover-open) body { scale: calc(0.95 + (var(--c) * 0.05)); translate: 0 calc(.875rem * (1 - var(--c)); } [popover] isn't affected as it's in the :top-layer 🚀

jhey ʕ•ᴥ•ʔ

77,988 просмотров • 1 год назад

A lot of crimes are committed on CTA property, especially on the red line. That’s why the sheriffs are there. If you don’t want them there, don’t act like a fool and they will leave.
0:49

A lot of crimes are committed on CTA property, especially on the red line. That’s why the sheriffs are there. If you don’t want them there, don’t act like a fool and they will leave.

Goofies Of Chicago

101,878 просмотров • 3 месяцев назад