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

Related Topics
  • mventuresundefined

    Heading text on NodeBB forum

    Solved Customisation
    27
    1 Votes
    27 Posts
    2k Views
    phenomlabundefined

    @mventures I’ve not done anything here.

  • Salaundefined

    Fixing YouTube videos css

    Solved WordPress
    8
    2 Votes
    8 Posts
    525 Views
    Salaundefined

    @phenomlab It looks good, but not anymore. I’ve already lost so much time. Now it’s time to move on

  • DownPWundefined

    hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    1k 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.

  • cagatayundefined

    Top Ranked Forums

    Chitchat
    9
    3 Votes
    9 Posts
    583 Views
    phenomlabundefined

    The real issue here is that most people consider forums to be “dead” in the sense that nobody uses them anymore, and social media groups have taken their place. Their once dominant stance in the 90’s and early 00’s will never be experienced again, but having said that, there are a number of forums that did in fact survive the social media onslaught, and still enjoy a large user base.

    Forums tend to be niche. One that immediately sticks out is Reddit - despite looking like it was designed in the 80s, it still has an enormous user base. Another is Stack Overflow, which needs no introduction. The key to any forum is the content it offers, and the more people whom contribute in terms of posting , the more popular and widely respected it becomes as a reliable source of information.

    Forums are still intensely popular with gamers, alongside those that offer tips on hacking etc.

  • marusakyundefined

    NodeBB changing color of the text

    Solved Customisation
    7
    2 Votes
    7 Posts
    862 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

  • pwsincdundefined

    [NodeBB] greeting message

    Solved Customisation
    2
    3 Votes
    2 Posts
    641 Views
    phenomlabundefined

    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here

    https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358

  • JACundefined

    Social icon (Nodebb)

    Solved Customisation
    7
    0 Votes
    7 Posts
    1k Views
    JACundefined

    @phenomlab said in Social icon (Nodebb):

    @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

    fixed 🙂

  • JACundefined

    Iframely (Nodebb)

    Solved Configure
    40
    4 Votes
    40 Posts
    3k Views
    phenomlabundefined

    @DownPW This is now resolved. The issue was an incorrect URL specified in the Nodebb plugin. I’ve corrected this, and now it works as intended.