I thought this effect turned out well (its neat and subtle), so thought I'd share it. I used layered images with bright, soft edges, and then applied CCS filters and animations to it. The end result was a pretty nifty "pulsing glow" effect on the campaign banner:
https://sol-ascendant.obsidianportal.com/
And the relevant CSS:
/* BANNER GLOW ANIMATION */
.campaign-public-layout #banner-container {background-image: url('http://db4sgowjqfwig.cloudfront.net/campaigns/144441/assets/622144/banner_back_glow.png?1469867436'); -webkit-animation: smallglow 1s infinite; animation: smallglow 1s infinite; background-position: center center; background-size: cover;}
.campaign-public-layout #banner-container .campaign-banner-image {-webkit-animation: bigglow 10s infinite; animation: bigglow 10s infinite;}
@-webkit-keyframes bigglow {
0%, 100% { -webkit-filter: saturate(1); -webkit-filter: contrast(1); }
50% { -webkit-filter: saturate(3); -webkit-filter: contrast(3);}
}
@keyframes bigglow {
0%, 100% { filter: saturate(1); filter: contrast(1);}
50% { filter: saturate(3); filter: contrast(3); }
}
@-webkit-keyframes smallglow {
0%, 100% { -webkit-filter: saturate(1); -webkit-filter: contrast(1); }
50% { -webkit-filter: saturate(1.1); -webkit-filter: contrast(1.1);}
}
@keyframes smallglow {
0%, 100% { filter: saturate(1); filter: contrast(1);}
50% { filter: saturate(1.1); filter: contrast(1.1); }
}
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Yeah, it came out real nicely.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Really cool! When do you start this one?
Just trying to help out.
Blargh! I tested on Firefox and Safari yesterday and all was fine, but looking at Chrome and IE today there are some problems - my apologies to anyone using those browsers, I'll have to work on some cross-compatibility.
@abu_is_evil: I have absolutely no idea yet. In fact, I'm not even sure if I'll run it over Roll20, or PbP, or what. Mostly I just put up the OP site last night so I could start transferring notes over. A lot of what I'm working on right now is more adapting Fate with rules for ships and space combat, so I'm not even really that far into a plot yet beyond picking inspirations and source material.
So I think I've finished that little effect. The final result really looks like a pulsing star!
Ultimately I ended up using pseudo elements to insert additional images, layered over each other, and with different animations applied to each. Animations and filters were some combination of rotation, contrast, saturation, and opacity.
Only Firefox handles everything at 100% (Chrome, IE, and Safari all have little things that don't quite work).
Anyway, final code is:
I've also added glowing buttons and a fly-in effect on page load, but those are topics for another thread!
Wow that star looks amazing, great job Bas!
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
Wow! Real Technowizardry!
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
Impressive.
Most Impressive
I want to know how you did the expanding windows on each screen :)
My guess offhand, would be with with animations using scaling transforms and opacity.
It was a really nice effect. I just started using animations on my site a week or two ago for two completely different things.This effect is far cooler than what I did on mine. :)
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Actually, I was looking for more technical stuff as to how it was done, like code and such :)
My coding skills are so so, most of what I got on my sites has been borrowed and tinkered with.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Yes, Bas, please tell us the code for that expand effect!!
The animation reminds me of something someone posted a while back, which gave me the idea for the subtle cloud effect on our banner:(browser must support .SVG images)
Campaign of the Year - 2018
Bortas i posted Basileus' code just above your post.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Awesome, thanks! For some reason, I thought it was the code for what you were using on your page.
But really, what I need to figure out is how to make a scroll of parchment unfurl! :-)
-bort
Campaign of the Year - 2018
No, my code is far more complex. For a far less cool effect.
It isn't quite what you are looking for, but maybe you'd be interested in this scrolling parchment effect. (You can delete the JavaScipt code and it still seems to work)
https://codepen.io/clarewhatever/pen/RNqYgR
They are among us!
XCom: Defiance - Campaign of the Month November 2016
That's neat-o. I was thinking more along the lines of my scroll of parchment unfurling, instead of the fly-in animation ;-)
-bort
Campaign of the Year - 2018
OK< if that code is what I think it is, awesome and Thanks cGregory