Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 30, 2017 at 6:42 pm #831884
    yava17

    Hello,
    I like to find a way, to fade in (maybe You would not name it that way?) a text letter by letter as if you would watch someone typing the text on the keyboard. Is that possible?
    Thank You.

    • This topic was modified 7 years, 3 months ago by yava17.
    August 1, 2017 at 8:17 am #832672
    Rikard

    Hey Yasmin,

    Yes but there is nothing like that in the theme by default, the closest thing is the Headline Rotator element. Maybe you could check that out to see if you like it? http://kriesi.at/themes/enfold-2017/elements/headline-rotator/

    Best regards,
    Rikard

    August 8, 2017 at 10:43 am #835769
    yava17

    Hello Rikard, thank You for Your answer, I tried ti figure out, how to probably realize my idea with an CSS-Code. It woult ony matter one word (the last one) of a sentence. So, although I like the rotating headline, it could not produce that kind of attention combined with the existing layout I wanted, I assume?
    Thanks,
    Yasmin

    August 9, 2017 at 7:06 am #836177
    Rikard

    Hi,

    I’m not really sure what you mean by your last reply, but like I mentioned earlier, there is nothing like that in the theme by default. Your options would be to look for a plugin which will add that for you or to implement a custom solution.

    Best regards,
    Rikard

    October 18, 2017 at 10:52 am #865636
    yava17

    Sorry, for missing earlier, You can close the thread.

    October 18, 2017 at 12:06 pm #865674
    Guenni007

    i guess you mean the typewriter effect:

    f.e. ( and this is nothing for a globaly use – set your heading to normal – not modern on enfold – and give it a class – f.e. letteranimation)
    the 26 is the letter count including spaces so you have to go and change it to your words 

    @keyframes typewriter{
  from{width: 0;}
  to{width: 100%;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

.letteranimation h1 {
font-size: 48px !important;
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
    animation: typewriter 4s steps(26) 1s 1 normal both,  blinkTextCursor 500ms steps(26) infinite normal;
}

    see heading on startpage of testsite of mine: https://webers-testseite.de/

    • This reply was modified 7 years, 1 month ago by Guenni007.
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.