Daellus
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Daellus
-
-
[UPDATED IN ANSWERS] Attached updated files.
I'm trying to extend a rather well-used animation formula using css.
To start, here's the basic animation: http://www.daellusknights.com
The banner text is set to a specific rotation, Animation 1. (two instances)
Likewise, the "glow" effect is also animated. (Animation 2)
What my goal is, the "layers" of each word are going to be statically faded out
by setting each layer slightly more transparent than the one before it.
This includes setting the text, stroke, and glow opacity.
I'm using "h1:nth-child(#){code}" to set the primary properties of each
layer such as Z-offset, etc. This is not a problem for making a transparency
fade with the letters themselves. What I want to do is also apply the same
transparency fade to the glow, but still have the colors animated.
Is there a shorthand way to do this, or will it be necessary to synchronize
a separate animation for each layer of the block of text? Each with it's own
color animation, but with a set opacity?
Thank you in advance!
Christopher W.
-
SOLVED
For whatever reason there was an "overflow: hidden;" declaration
in the w3.css for the w3-bar class. As soon as I removed that, it
started working in Chrome, and then in Edge once I added back in
the Stickyfill script.
-
For whatever reason, anytime I use "position: sticky" in whatever form
whether it's browser supported or through the Stickyfill.js it breaks the
w3-bar navigation menu. w3schools.com obviously has a way to make
it work. But I can't. Sticky off - dropdown menu works perfect. Stick ON
and the menu button clicks but the dropdown content is not displayed.
Or at the very least it's not visible if it is.
http://dev.daellusknights.com/index.html <-- Sticky ON (broken)
http://dev.daellusknights.com/index2.html <-- Sticky OFF (works)
Is this a known issue or am I just missing something. Currently
working with MS Edge and latest Chrome on Win 10 Pro (dev)
Animating multiple layers / strokes / opacities [UPDATED]
in CSS
Posted
Okay, so I've more or less achieved exactly what I wanted to do,
with the exception of the fade-out for the opacity on the glow/blur.
I think that may a limitation of the browser i'm using since the pc
i'm working on is rather outdated. Either way, I'm okay with the
results until i can compare on a newer machine. Attached the
updated html/css files.
index2.html
dk-anim2.css