Daddyzilla
KPCKevin Powell - Community
•Created by Daddyzilla on 4/11/2024 in #front-end
Opacity overload?
Thanks for that. I shall have a fiddle with your code pen and see how it goes. I think I must resign to the fact that I will need a CSS/JS solutions. Was attempting to do it purely with CSS (kinda more of a personal challenge more then anything lese). But the lack of support for CSS scroll-animations, and the fact that it breaks other fundamental requirements that the boss wants, means its time to re-think this with JS in mind. cheers!
17 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 4/11/2024 in #front-end
Opacity overload?
What is the advantage to your suggested re-write on controlling opacity?
17 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 4/11/2024 in #front-end
Opacity overload?
I realise scroll animation is not well supported. However these things move quickly, so I suspect in a year or so, it will be good enough. I considered checking the scrollTop (I believe that is correct property) to know the scroll distance and simply running an animation. That is probably my best fallback. Those are a dime-a-dozen on sites these days. I was trying to go one better with the animation.
17 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 4/11/2024 in #front-end
Opacity overload?
My first CodePen - it probably smells of newbie, since I am (using code pen)
17 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 4/11/2024 in #front-end
Opacity overload?
17 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 4/11/2024 in #front-end
Opacity overload?
.Back-To-Top-Container {
position: fixed;
z-index: 99999 !important;
left: 20px;
height: 20px;
bottom: 0px;
width: 100%;
opacity: 60%;
}
.Back-To-Top-Container:hover {
opacity: 100%;
transition: opacity 500ms;
}
.Back-To-Top-Container {
animation: gradual-show auto linear;
animation-fill-mode: none;
animation-timeline: scroll();
animation-range-start: 30%;
animation-range-end: 50%;
}
@keyframes gradual-show {
0% {
opacity: 0%;
}
100% {
opacity: 60%;
}
}
17 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 4/11/2024 in #front-end
Opacity overload?
Here is the relevant CSS...
17 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 2/22/2023 in #front-end
Using :NOT operator deeply nested within duplicate elements
Well your help is very much appreciated. You hover close to "god" status 😇 in my mind. 95% of what I know about CSS came from you. I look forward to the next YouTube video discussing :NOT() and specificity... 🤟 peace!
7 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 2/22/2023 in #front-end
Using :NOT operator deeply nested within duplicate elements
Hi Kevin. You know me as LokiDaFerret on YouTube. In regards to above, I was intentionally keeping the selector as bland as I could since DevExpress could change their implementation. My original only specified the top DIV and bottom IMG, until I realised where they specified their "actibeTab" flag. But thank you for looking into it further. 👍
7 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 2/11/2023 in #front-end
Spanning columns using CSS Grid
Thank you for your response and suggest. Although I will probably just let it go. I've learnt over time that if you try to stick a square peg into a round hole, eventually it ends in tears. Best to stick with square pegs/holes or round pegs/holes. So we'll just let it go this time. The boss-man will learn to like the new design 🙂 The flexibility CSS Grid gives him on mobile devices, far out-weights his desire to span cells. cheers!
4 replies