Skip to content
Sudonix

Blinking text Effect

Customisation
  • DownPWundefined

    Hello 🙂

    small blinking text effect that I put on the name of my forum:

    here the code :

    :root {
     --site-title-blink: #CCCCCC;
}

    /*Blink text effect */
@keyframes text-blink {
    0%,
    20%,
    22%,
    25%,
    28%,
    55%,
    80%,
    100% {
        text-shadow: 0 0 2px #000,
            0 0 10px var(--site-title-blink),
            0 0 5px var(--site-title-blink),
            0 0 25px var(--site-title-blink);
        opacity: 1;
        color: var(--site-title-blink);
    }

    21%,
    24%,
    56% {
        opacity: 0.2;
        text-shadow: none;
    }
}

.navbar-default .navbar-brand {
    animation: 0.5s text-blink 1.5s infinite alternate;
    animation-iteration-count: 5;
    animation-duration: 1000ms;
}

    PW and WS Spirit alive

    3
  • DownPWundefined DownPW marked this topic as a regular topic on
  • phenomlabundefined

    @DownPW looks great ! Has that “broken neon light” look that you see in films. When I saw the title of this post, I instantly thought of the flashing text everyone had on their website in the 90’s and early 00’s but I like this effect a lot.

    Custom-Bates-Motel-No-Vacancy-Glass-Neon-Light-Sign-Beer-Bar.jpg_Q90.jpg_.webp

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    1
  • DownPWundefined

    @phenomlab

    I love it too

    @phenomlab said in Blinking text Effect:

    Has that “broken neon light” look that you see in films.

    It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too 😉

    PW and WS Spirit alive

    1

  • crazycellsundefined

    Bug Report

    Solved Bugs
    43
    21 Votes
    43 Posts
    833 Views
    phenomlabundefined

    @crazycells yep. I get it! Good point.

  • Hariundefined

    Rotating Star Effect

    Solved Let's Build It
    17
    12 Votes
    17 Posts
    463 Views
    Hariundefined

    @phenomlab thanks a lot for these, both of the below are awesome! ♥

    https://codepen.io/bennettfeely/pen/vYLmYJz

    https://codepen.io/C-L-the-selector/pen/MWZbWBo

  • Pandaundefined

    Nodebb icon on google page

    Solved Customisation
    9
    4 Votes
    9 Posts
    582 Views
    phenomlabundefined

    @Panda It’s been raised multiple times, but only for the open source version, and not hosted.

  • Pandaundefined

    www. Infront stops website access?

    Solved Configure
    10
    1 Votes
    10 Posts
    294 Views
    phenomlabundefined

    @Panda because there is no match for the DNS entry specified. The receiving web server parses the headers looking for a destination hostname to match, and anything the web server is unable to resolve will be sent back to the root.

  • Pandaundefined

    adding some console.log to Nodebb

    Solved Customisation
    4
    1 Votes
    4 Posts
    474 Views
    phenomlabundefined

    @eeeee if you’re using the console, you could try

    node app.js > app.log 2>&1

    This would redirect stdout to a file named app.log and redirect stderr to stdout.

    I’m not sure about standard logging under NodeBB, but there is an error log located at logs/error.log.

    Failing that, you could always stop the NodeBB service then use ./nodebb dev from the console which would then provide debug output.

  • mventuresundefined

    Heading text on NodeBB forum

    Solved Customisation
    27
    1 Votes
    27 Posts
    2k Views
    phenomlabundefined

    @mventures I’ve not done anything here.

  • DownPWundefined

    hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    605 Views
    phenomlabundefined

    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function

    document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); })

    The CSS for start is below

    .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; }

    And this is the corresponding keyframe

    @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } }

    It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.

  • marusakyundefined

    NodeBB changing color of the text

    Solved Customisation
    7
    2 Votes
    7 Posts
    760 Views
    marusakyundefined

    @phenomlab said in NodeBB changing color of the text:

    @marusaky This ought to to it

    a.permalink, a.permalink:active, a.permalink:focus, a.permalink:hover { color: #ffffff; }

    works great, thanks a lot