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!
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
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
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>
Copy link to clipboard
Copied
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