somrigostsås 🧀
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 10/4/2024 in #front-end
Improving placement and transform for rotated items in a wheel
That makes so much more sense. Big thanks, Mark!
15 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 10/4/2024 in #front-end
Improving placement and transform for rotated items in a wheel
This is all an experiment and me wanting to learn. Whether it's something that I'm going to implement in the real world or not has nothing to do with my challenge.
15 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 10/4/2024 in #front-end
Improving placement and transform for rotated items in a wheel
So I get the feedback, I really do, but it still doesn't solve my issue. Let's say the text is naturally wrapping across two lines. I just want the placement to be correct, without having to put any fixed values in there.
15 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 10/4/2024 in #front-end
Improving placement and transform for rotated items in a wheel
@ἔρως yeah, that's a sort of "backend" approach to it, but I'm sure there's gotta be a math solution to it, somehow?
15 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 10/4/2024 in #front-end
Improving placement and transform for rotated items in a wheel
@Alex yeah, in a service, like this, I couple probably get the count for the amount of tasks and pass it in as a custom property. It's not super-smooth, but I love the suggestion!
15 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 9/11/2024 in #os-and-tools
Animate between a moon path to a circle
Yes.
4 replies
KPCKevin Powell - Community
•Created by AbhijithB on 9/10/2024 in #front-end
Why aren't the margins collapsing?
Because they are
display: inline-flex and not display: flex. Margin collapse is only applied to block-level elements.6 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 9/5/2024 in #front-end
Navigation indicator using scroll-driven animations?
That's exactly it, Chris! Big thanks!
Yeah, I know that the browser support isn't the best at the moment, but I still wanted to play around with a bit, learning from different examples. The minicourse from Bramus on YT is such a great start, but even for me who have 20+ years with CSS thought it was a lot to handle. ^^
4 replies
KPCKevin Powell - Community
•Created by Yido on 6/1/2024 in #front-end
Progress bars value/width does not change with javascript (bootstrap)
There are a few things I need to point out before sharing the solution:
When using Codepen, you should put JS in the JS box, and omit the
<html>, <head> and <body> tags. Those are already being rendered. If you want to import specific CSS or JS libraries, you can press the cogwheel at the top right corner of the CSS and JS boxes, respectively.
Now, as for your code:
- onclick should be for buttons, not divs.
- Since the value is provided from the aria-valuenow prop instead, you could use that, or set it elsewhere. Relying on inline style values for JS is not a good practice.
With that being said, here's a solution: https://codepen.io/erikblomqvist/pen/gOJmGLB3 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 5/2/2024 in #front-end
"Overlay" section, between section, with dynamic content
That's really clever! Thanks for sharing!
5 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 5/2/2024 in #front-end
"Overlay" section, between section, with dynamic content
Just learned that a percentage value for
margin-top (or margin-block-start) is relative to the inline size of the containing block. 😔5 replies
KPCKevin Powell - Community
•Created by SonnyJR on 2/20/2024 in #front-end
How to Animate Slider Loop?
This is a very vague question. You should have a look at this post first and come back with a code example of where you're at. For all we know, this could be built using HTML tables.
https://discord.com/channels/436251713830125568/1022288836715356180/1022288836715356180
4 replies
KPCKevin Powell - Community
•Created by ✫𝕽𝖆𝖌𝖊𝖗 ✫ on 2/14/2024 in #front-end
Love calculator for Valentine's day.
Should probably be posted in #showcase instead.
2 replies
KPCKevin Powell - Community
•Created by RaviTeja on 2/14/2024 in #front-end
Aligning content in web pgae
You could use
position: sticky or position: fixed for both header and footer. If you know the height of the footer, you could do the same for the image. Otherwise, I would probably place the image inside the footer, and then position it outside the footer wrapper.6 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
Glad you found a solution, Catz!
14 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
One issue is that you have
height: 100%/object-fit: contain on the image, which allows the image calculation to be based on the height, rather than the width. As long as you have that, it's never going to work on all viewports.14 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
I did a bit of a cleanup just to keep my brain sane. 😅
14 replies
KPCKevin Powell - Community
•Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
So something like this?
https://codepen.io/erikblomqvist/pen/LYagmqp
14 replies
KPCKevin Powell - Community
•Created by RMON on 2/10/2024 in #front-end
Header clipping (transition not smooth)
Kevin has done a few videos on the subject, with the most basic here: https://www.youtube.com/watch?v=UmzFk68Bwdk
Demos and more reading can be found here: https://scroll-driven-animations.style/#demos
As a fallback, using
@supports, you can just use an opacity: 0.5 by default, I think.11 replies
KPCKevin Powell - Community
•Created by RMON on 2/10/2024 in #front-end
Header clipping (transition not smooth)
The reason why you're getting this jump glitch effect is because you're switching from
position: static (which all elements have by default) to position: fixed. When using fixed or absolute, other elements don't take that element's space into calculation, and therefore, when you scroll, the site jumps up 110px (the height of the header) when it changes to fixed. My suggestion is that you keep it fixed all the time. As MarkBoots mentioned, you can also use sticky, but it all depends on when you want the animation to kick in, since the opacity might bleed through to the body element, which is white.
With some more modern CSS, using animation-timeline and animation-range, you can achieve the same effect, without the use of JS. It's supported in Chrome and Edge as for now, and with limited support in Firefox. A forked example I created is available here:
https://codepen.io/erikblomqvist/pen/abMRGzQ11 replies