Guie
KPCKevin Powell - Community
•Created by Guie on 6/18/2024 in #front-end
Figma / SVG Mask Path Change
My designer gave me this from Figma, and I'm really perplexed. The image of the person is contained within an SVG mask. The path of the mask changes on hover and also includes a transition. Every attempt I've made to do this ignores the transition. Any tips?
11 replies
KPCKevin Powell - Community
•Created by Guie on 3/9/2024 in #front-end
Horizontal Scroll Carousel
Does anyone know of a JS library or jQuery library for something similar to this? This was built in React, and I don't know enough about it to reverse engineer something similar. What's really special about this one is how seamless it is. You scroll down, and instead of continuing downward, you automatically start moving right until the end, and then back down. It's really cool.
https://www.hover.dev/components/carousels#horizontal-scroll-carousel
https://www.hover.dev/frames/carousels/horizontal-scroll
3 replies
KPCKevin Powell - Community
•Created by Guie on 2/5/2024 in #front-end
Lighthouse & Multi-format Responsive <picture> tag
I'm a little perplexed and wondering if someone can see what i'm missing. Running a Lighthouse test on one of my sites and it's coming back that I should be using WEBP as my image format of choice. As far as I can tell, I am and have PNG as a fallback.
Below is the code in question.
<picture>
<source media="(max-width: 360px)" type="image/webp" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-358x360.webp">
<source media="(max-width: 360px)" type="image/png" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-358x360.png">
<source media="(max-width: 640px)" type="image/webp" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-636x640.webp">
<source media="(max-width: 640px)" type="image/png" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-636x640.png">
<source type="image/webp" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh.webp">
<img src="/wp-content/uploads/2023/12/homepage_phone_refresh.png" alt="Background Image" fetchpriority="high">
</picture>
1 replies
KPCKevin Powell - Community
•Created by Guie on 1/19/2024 in #front-end
Target something using Position:Sticky if it's reached the bottom
I love position:sticky it works great as a hassle free to make objects follow the users window. Does anyone know of a way I can adjust something in CSS if that sticky element has reached the bottom?
4 replies