Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 2 Jahren •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Arc Terminus
Arc Terminusvor 2 Jahren

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

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 2 Jahren

@lee_marjon jheymarks™ 😅

Profilbild von Mery
Meryvor 2 Jahren

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

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 2 Jahren

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 🤓

Profilbild von liro crocodilo
liro crocodilovor 2 Jahren

@buenomrl

Profilbild von Sebastian
Sebastianvor 2 Jahren

so good dude

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 2 Jahren

🤙🤙🤙

Profilbild von Patrick Petcu
Patrick Petcuvor 2 Jahren

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

Profilbild von Design With Ay
Design With Ayvor 2 Jahren

Oh man this is so cool!

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 2 Jahren

🙏🙏🙏

Ähnliche 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.
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,566 Aufrufe • vor 3 Monaten

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,003 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 5 Monaten

Another break day on the CTA... #CTA #ChicagoScanner
1:10

Another break day on the CTA... #CTA #ChicagoScanner

Emjay Phan

761,612 Aufrufe • vor 3 Jahren

The #CTA is not safe at all #Chicago
2:20

The #CTA is not safe at all #Chicago

Goofies Of Chicago

32,991 Aufrufe • vor 2 Jahren

The Allstate CTA Holiday Train is coming to town 🎅❄️ What day/ line are you riding?
0:20

The Allstate CTA Holiday Train is coming to town 🎅❄️ What day/ line are you riding?

cta

82,349 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 3 Monaten

Banning concealed carry on the CTA will definitely make it safer. Chicago residents can now ride the CTA without any concerns.
1:11

Banning concealed carry on the CTA will definitely make it safer. Chicago residents can now ride the CTA without any concerns.

Goofies Of Chicago

68,551 Aufrufe • vor 2 Monaten

Blassie on the beat on the CTA.
0:45

Blassie on the beat on the CTA.

“CLASSY” FRED BLASSIE

110,580 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 6 Monaten

Hey cta Chicago Police can we please do something about all the people nonchalantly smoking on CTA trains at all hours of the day? Swissport Swissport Baggage Services, how do you feel about 3 of your Chicago O'Hare staff smoking marijuana on the train on the way to work?
0:29

Hey cta Chicago Police can we please do something about all the people nonchalantly smoking on CTA trains at all hours of the day? Swissport Swissport Baggage Services, how do you feel about 3 of your Chicago O'Hare staff smoking marijuana on the train on the way to work?

Windy City Wheelman

200,746 Aufrufe • vor 1 Jahr

Another beautiful day on the Red Line; the CTA is definitely world-class transportation without a doubt.
0:32

Another beautiful day on the Red Line; the CTA is definitely world-class transportation without a doubt.

Goofies Of Chicago

43,676 Aufrufe • vor 11 Monaten

Brandon Johnson signed an executive order making it illegal to smoke on the CTA; according to him, this makes the CTA safer.
1:14

Brandon Johnson signed an executive order making it illegal to smoke on the CTA; according to him, this makes the CTA safer.

Goofies Of Chicago

19,475 Aufrufe • vor 10 Monaten

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,078 Aufrufe • vor 1 Jahr

“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 Aufrufe • vor 8 Monaten

ride the cta they say ....
4:51

ride the cta they say ....

SubX.News®

51,898 Aufrufe • vor 8 Tagen

In Matchday 25, the CTA, the committee of referees, reviewed a challenge between Valentín Gómez and Ratiu that is identical to the challenge between Gerard Martín and Thiago Almada. In this video, the CTA clearly determined that the player should receive a red card and be sent off.
0:33

In Matchday 25, the CTA, the committee of referees, reviewed a challenge between Valentín Gómez and Ratiu that is identical to the challenge between Gerard Martín and Thiago Almada. In this video, the CTA clearly determined that the player should receive a red card and be sent off.

Atlético de Madrid

246,199 Aufrufe • vor 2 Monaten

Santa and his elves are back and spreading holiday cheer across the CTA 🚂❄️
0:32

Santa and his elves are back and spreading holiday cheer across the CTA 🚂❄️

cta

51,557 Aufrufe • vor 1 Jahr

classic CSS trick for gradient border with blurred backdrop 👉 pseudoelement + mask-composite check the exploded view video 👇
0:33

classic CSS trick for gradient border with blurred backdrop 👉 pseudoelement + mask-composite check the exploded view video 👇

jhey ʕ•ᴥ•ʔ

28,641 Aufrufe • vor 1 Jahr