cssmenustickyelementorgraphical-logo

Is there a way in CSS to turn a sentence into an acronym by triggering an action?


I've been searching all day and either can't find the right words, or Im not as good as I thought I was at googling.

The idea I have is to turn a 4-word logo into its 4-letter logo acronym version which would activate on a sticky menu, i.e. start with the Long version and slide back into the acronym version or visa-versa.

Appreciate your help


Solution

  • You didn't provide any code examples for what you are trying to do BUT I think I understand what you are trying to accomplish and took it as a mini development challenge.

    Reads to me like you want to transition from a multi-word (4) text logo to a multi-letter (4) initialism logo. I made a little demo that does this with a JS class change and CSS @keyframes. You can swap out the JS that toggles the class name how ever you plan to trigger the sticky menu.

    Run code snippet below, or view it in a CodePen using SCSS

    const button = document.querySelector('.toggle-button');
    const logo = document.querySelector('.logo');
    
    button.addEventListener('click', function() { 
      logo.classList.toggle('logo--small');
    });
    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }
    
    @keyframes letterSpacingNegative1em {
        from { letter-spacing: normal; }
        to { letter-spacing: -1em; }
    }
    
    @keyframes letterSpacingNegative02em {
        from { letter-spacing: normal; }
        to { letter-spacing: -0.2em; }
    }
    
    body {
        padding: 0 1rem;
        font-family: sans-serif;
    }
    
    .logo {
        width: fit-content;
        padding: 10px 14px 8px;
        background-color: #eee;
        line-height: 1;
    }
    
    .logo--small .logo__word {
        animation-name: letterSpacingNegative02em;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
        animation-duration: 0.2s;
        animation-delay: 0.6s;
    }
    
    /**
     * The sibling selector has a lower specificity but is functionally the same
     * as using :not(:first-child).
     */
    .logo--small .logo__word span ~ span {
        animation-name: fadeOut, letterSpacingNegative1em;
        animation-fill-mode: forwards, forwards;
        animation-timing-function: ease-out, ease-out;
        animation-duration: 0.4s, 0.6s;
        animation-delay: 0s, 0.4s;
    }
    <p>
      <button class="toggle-button">Toggle Logo Class</button>
    </p>
    
    <h1 class="logo">
      <span class="logo__word"><span>Y</span><span>our</span></span>
      <span class="logo__word"><span>M</span><span>ulti</span></span>
      <span class="logo__word"><span>W</span><span>ord</span></span>
      <span class="logo__word"><span>L</span><span>ogo</span></span>
    </h1>