3 Replies Latest reply on Dec 21, 2017 8:40 PM by Ussnorway

    Help with Text Effect?

    asadkhandesign

      Hi, im new to muse and I have no clue how to do anything with code. I am making a portfolio (www.akhan.space). On the home page i would like for there to be "Welcome." text that first types itself out, then has a glitch effect. The typing effect can be found here : Typewriter Effect | CSS-Tricks . I want the one that reads "Hi, Im Si.", "I am Creative.", "I Love Design.", "I Love to Develop." I would like to change the background to transparent, the text color to #7F7F7F, the text bar color to #fbc, and slow down the typing speed a bit. Only after the text is done typing out, i would like to apply this glitch effect Glitch Text Widget for Adobe Muse by Musefree with modified glitch colors. So....... can someone point me in the right direction? I've been searching around the internet and learning to understand small parts of the code but honestly I'm totally lost here. Any help is appreciated!

        • 1. Re: Help with Text Effect?
          Mylenium Most Valuable Participant

          The colors are set in the widget settings. By all means watch the explanatory video. There doesn't seem to be a way to control the speed, so that may require hacking some code after publishing the page.

           

          Mylenium

          • 2. Re: Help with Text Effect?
            asadkhandesign Level 1

            Thank you for trying to help but that's not quite what i was asking. So I've messed with the code until it did exactly what i want. At this point, all that's left is to combine the two effects. The second code pasted below (the glitch effect) needs to begin after the typing effect in the first code finishes. Is this possible?

             

             

            <h1>Welcome.</h1>

            <style>

            body {

              background-color: transparent;

              height: 100%;

              font-family: t-26 carbon, monospace;

            }

            h1 {

              color: #7f7f7f;

              text-transform: none;

            }

            span {

              border-right: .1em solid #fbc;

              animation: caret 1s steps(1) infinite;

            }

            @keyframes caret {

              50% {

                border-color: transparent;

              }

            }

            </style>

            <script>

            document.addEventListener('DOMContentLoaded',function(event){

              // array with texts to type in typewriter

              var dataText = [ "Welcome."];

              // type one text in the typwriter

              // keeps calling itself until the text is finished

              function typeWriter(text, i, fnCallback) {

                // chekc if text isn't finished yet

                if (i < (text.length)) {

                  // add next character to h1

                document.querySelector("h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

                  // wait for a while and call this function again for next character

                  setTimeout(function() {

                    typeWriter(text, i + 1, fnCallback)

                  }, 400);

                }

                // text finished, call callback if there is a callback function

                else if (typeof fnCallback == 'function') {

                  // call callback after timeout

                  setTimeout(fnCallback, 700);

                }

              }

              // start a typewriter animation for a text in the dataText array

              function StartTextAnimation(i) {

                if (typeof dataText[i] == 'undefined'){

                    setTimeout(function() {

                      StartTextAnimation(0);

                    }, 20000);

                }

                // check if dataText[i] exists

                if (i < dataText[i].length) {

                  // text exists! start typewriter animation

                typeWriter(dataText[i], 0, function(){

                  // after callback (and whole text has been animated), start next text

                  StartTextAnimation(i + 1);

                });

                }

              }

              // start the text animation

              StartTextAnimation(0);

            });

            </script>

             

            ------------------------------------------------------------------------------------------ -----

             

            <p>Welcome.</p>

            <style>

            html {

            background: Transparent;

            padding: 2rem;

            }

            p {

            font-family: t-26 carbon, monospace;

            font-weight: regular;

            color: transparent;

            animation: glitch 3s steps(100) infinite;

            }

            /* GLITCH EFFECT */

            @keyframes glitch {

              0% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              1% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              2% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              3% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              4% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              5% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              6% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              7% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              8% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              9% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              10% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              11% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              12% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              13% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              14% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              15% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              16% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              17% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              18% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              19% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              20% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              21% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              22% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              23% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              24% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              25% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              26% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              27% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              28% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              29% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              30% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              31% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              32% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              33% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              34% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              35% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              36% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              37% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              38% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              39% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              40% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              41% {text-shadow: 50px 0 0 #004256, -50px 0 0 #595900;}

              42% {text-shadow: 0 0 0 #004256, 0 0 0 #595900;}

              43% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              44% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              45% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              46% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              47% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              48% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              49% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              50% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              51% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              52% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              53% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              54% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              55% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              56% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              57% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              58% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              59% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              60% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              61% {text-shadow: 30px 0 0 #4f0031, -30px 0 0 #595900;}

              62% {text-shadow: 0 0 0 #4f0031, 0 0 0 #595900;}

              63% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #004256;}

              64% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #004256;}

              65% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #004256;}

              66% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #004256;}

              67% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              68% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              69% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              70% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              71% {text-shadow: 70px 0 0 #4f0031, -70px 0 0 #004256;}

              72% {text-shadow: 0 0 0 #4f0031, 0 0 0 #004256;}

              73% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              74% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              75% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              76% {text-shadow: 1px 0 0 #4f0031, -1px 0 0 #004256;}

              77% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              78% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              79% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              80% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #004256;}

              81% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              82% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              83% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              84% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              85% {text-shadow: 0.5px 0 0 #4f0031, -0.5px 0 0 #595900;}

              86% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              87% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              88% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              89% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              90% {text-shadow: -1px 0 0 #4f0031, 1px 0 0 #595900;}

              91% {text-shadow: 60px 0 0 #595900, -60px 0 0 #004256;}

              92% {text-shadow: 0 0 0 #595900, 0 0 0 #004256;}

              92% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              93% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              94% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              95% {text-shadow: 0.7px 0 0 #004256, -0.7px 0 0 #595900;}

              96% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              97% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              98% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              99% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

              100% {text-shadow: -1px 0 0 #004256, 1px 0 0 #595900;}

            }

            </style>

            • 3. Re: Help with Text Effect?
              Ussnorway Adobe Community Professional

              yes it is possible to add custom css code to muse... I would add it as a {text or graphic} style but be aware of upper | lower case names if your host is not a Windows system

              Screenshot (334).png

              1 person found this helpful