Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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 👇

jhey ʕ•ᴥ•ʔ

146,437 subscribers

77,124 views • 2 years ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Arc Terminus2 years ago

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

jhey ▲🐻🎈2 years ago

@lee_marjon jheymarks™ 😅

Mery2 years ago

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

jhey ▲🐻🎈2 years ago

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 crocodilo2 years ago

@buenomrl

Sebastian2 years ago

so good dude

jhey ▲🐻🎈2 years ago

🤙🤙🤙

Patrick Petcu2 years ago

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

Design With Ay2 years ago

Oh man this is so cool!

jhey ▲🐻🎈2 years ago

🙏🙏🙏

Related Videos

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.

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 views • 5 months ago

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! 👇

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 views • 2 years ago

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.

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 views • 7 months ago

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?

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 views • 4 months ago

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…..

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 views • 8 months ago

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 popped up at Jefferson Park CTA for some grassroots outreach in the 45th Ward. ALL HANDS ON DECK 💫🔥🇺🇸✊🏾 #ChicagoFlipsRed

Chicago Flips Red

14,090 views • 1 year ago

“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

“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 views • 10 months ago

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 👀)

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,533 views • 2 years ago

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

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

1984

217,468 views • 1 year ago

$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! 👇$

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,863 views • 2 years ago

.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."

.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 views • 1 month ago

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.

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 views • 4 months ago

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:

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 views • 11 months ago

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

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 views • 9 months ago

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

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,824 views • 1 year ago

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

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

Dudes Posting Their W’s

109,046 views • 5 months ago

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

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,081 views • 1 year ago

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 🚀

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 views • 1 year ago

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.

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 views • 3 months ago