Pulsing Glow Effect

Basileus
Basileus
edited July 2016 in Campaign Portal Building

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); }
}

 

Post edited by Basileus on

Comments

  • cgregory
    cgregory
    Posts: 780

    Yeah, it came out real nicely.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • abu_is_evil
    abu_is_evil
    Posts: 168

    Really cool!  When do you start this one?

    Just trying to help out.

  • Basileus
    Basileus
    Posts: 589 edited July 2016

    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.

    Post edited by Basileus on
  • Basileus
    Basileus
    Posts: 589

    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:


    /* BANNER GLOW ANIMATION */
    .campaign-public-layout #banner-container .campaign-banner-image {-webkit-animation: smallglow 1s infinite; animation: smallglow 1s infinite;}
    .campaign-public-layout #banner-container {background-image: url('http://db4sgowjqfwig.cloudfront.net/campaigns/144441/assets/623556/halo.png?1470092344 '); -webkit-animation: bigglow 9s infinite; animation: bigglow 9s infinite; background-position: center center; background-size: cover;}
    .campaign-public-layout #banner-container .campaign-banner-image:before {
    content: "";
    position: absolute;
    overflow: visible;
    display: block;
    background-image: url('http://db4sgowjqfwig.cloudfront.net/campaigns/144441/assets/623553/halo_base.png?1470091281');
    background-position: center center;
    background-size: cover;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    max-height: ;
    z-index: -1;
    -webkit-animation: glowwithfade 3s infinite, rotate 27s infinite;
    -webkit-animation-timing-function: linear;
    animation: glowwithfade 3s infinite, rotate 27s infinite;
    animation-timing-function: linear;
    }
    .campaign-public-layout #banner-container .campaign-banner-image:after {
    content: "";
    position: absolute;
    overflow: visible;
    display: block;
    background-image: url('http://db4sgowjqfwig.cloudfront.net/campaigns/144441/assets/623553/halo_base.png?1470091281');
    background-position: center center;
    background-size: cover;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-animation: glowwithfade 3s infinite, rotate 27s infinite;
    -webkit-animation-direction: reverse;
    -webkit-animation-timing-function: linear;
    animation: glowwithfade 3s infinite, rotate 27s infinite;
    animation-direction: reverse;
    animation-timing-function: linear;
    }
    @-webkit-keyframes bigglow {
    0%, 100% { -webkit-filter: saturate(1); -webkit-filter: contrast(1);}
    50% { -webkit-filter: saturate(2); -webkit-filter: contrast(2);}
    }
    @keyframes bigglow {
    0%, 100% { filter: saturate(1); filter: contrast(1);}
    50% { filter: saturate(2); filter: contrast(2);}
    }
    @-webkit-keyframes glowwithfade {
    0%, 100% { -webkit-filter: saturate(1); -webkit-filter: contrast(1); -webkit-filter: opacity(0.3);}
    50% { -webkit-filter: saturate(1.2); -webkit-filter: contrast(1.2); -webkit-filter: opacity(0.7);}
    }
    @keyframes glowwithfade {
    0%, 100% { filter: saturate(1); filter: contrast(1); filter: opacity(0.3);}
    50% { filter: saturate(1.2); filter: contrast(1.2); filter: opacity(0.7);}
    }
    @-webkit-keyframes smallglow {
    0%, 100% { -webkit-filter: saturate(1); -webkit-filter: contrast(1); }
    50% { -webkit-filter: saturate(1.2); -webkit-filter: contrast(1.2);}
    }
    @keyframes smallglow {
    0%, 100% { filter: saturate(1); filter: contrast(1);}
    50% { filter: saturate(1.2); filter: contrast(1.2); }
    }
    @-webkit-keyframes rotate {
    0% {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
    }
    @keyframes rotate {
    0% {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
    }

    I've also added glowing buttons and a fly-in effect on page load, but those are topics for another thread!

  • saethone
    saethone
    Posts: 153

    Wow that star looks amazing, great job Bas!

  • twiggyleaf
    twiggyleaf
    Posts: 1,953

    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

  • Keryth987
    Keryth987
    Posts: 1,018

    Impressive.

    Most Impressive

    I want to know how you did the expanding windows on each screen :)

  • cgregory
    cgregory
    Posts: 780

    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!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Keryth987
    Keryth987
    Posts: 1,018

    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.

  • cgregory
    cgregory
    Posts: 780 edited August 2016
    Deleted this because the pasting of the code looked really ugly and editing it was not really working. see below for the code in a code snippet
    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780 edited August 2016

    .campaign-public-layout .collapsable-nav-row {
    -webkit-opacity: 0;
    opacity: 0;
    -webkit-transform: scale(0);
    -webkit-transform-origin: 50% 0%;
    transform: scale(0);
    transform-origin: 50% 0%;
    filter: blur(4px);
    animation: flyin 1.2s ease forwards;
    -webkit-animation: flyin 1.2s ease forwards;
    }
    @-webkit-keyframes flyin {
    to {
    -webkit-filter: blur(0px);
    -webkit-transform: scale(1);
    -webkit-opacity: 1;
    }
    }
    @keyframes flyin {
    to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
    }

     

    If you click on my banner you can see a different use of similar animation code. I just used it to cause words to fade in and out on my front page. Basileus use is far cooler in my opinion.
    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Bortas
    Bortas
    Posts: 645 edited August 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:

    image
    (browser must support .SVG images)
    Post edited by Bortas on
  • cgregory
    cgregory
    Posts: 780

    Bortas i posted Basileus' code just above your post.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Bortas
    Bortas
    Posts: 645

    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

  • cgregory
    cgregory
    Posts: 780

    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!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Bortas
    Bortas
    Posts: 645

    That's neat-o. I was thinking more along the lines of my scroll of parchment unfurling, instead of the fly-in animation ;-)

     

    -bort

  • Keryth987
    Keryth987
    Posts: 1,018

    OK< if that code is what I think it is, awesome and Thanks cGregory

Sign In or Register to comment.

January 2023
Fake News, Real Adventure

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions