Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 2 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Arc Terminus profil fotoğrafı
Arc Terminus2 yıl önce

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

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

@lee_marjon jheymarks™ 😅

Mery profil fotoğrafı
Mery2 yıl önce

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

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

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 profil fotoğrafı
liro crocodilo2 yıl önce

@buenomrl

Sebastian profil fotoğrafı
Sebastian2 yıl önce

so good dude

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

🤙🤙🤙

Patrick Petcu profil fotoğrafı
Patrick Petcu2 yıl önce

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

Design With Ay profil fotoğrafı
Design With Ay2 yıl önce

Oh man this is so cool!

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

🙏🙏🙏

Benzer Videolar

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 görüntüleme • 4 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 1 yıl önce

“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 görüntüleme • 9 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

.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 görüntüleme • 1 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

Emily stopping the show to check on the fan in the crowd❤️ “when somebody falls down, you pick them up!!”
1:33

Emily stopping the show to check on the fan in the crowd❤️ “when somebody falls down, you pick them up!!”

a.🍍| fan account

17,327 görüntüleme • 4 ay önce