• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Help with Text Effect?

New Here ,
Dec 20, 2017 Dec 20, 2017

Copy link to clipboard

Copied

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!

Views

388

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Dec 21, 2017 Dec 21, 2017

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

Votes

Translate

Translate
LEGEND ,
Dec 21, 2017 Dec 21, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 21, 2017 Dec 21, 2017

Copy link to clipboard

Copied

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 == 'undefined'){

        setTimeout(function() {

          StartTextAnimation(0);

        }, 20000);

    }

    // check if dataText exists

    if (i < dataText.length) {

      // text exists! start typewriter animation

    typeWriter(dataText, 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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 21, 2017 Dec 21, 2017

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines