Hello,
this is html code:
<div class="home-page-image-container">
<img src="https://webdesignleren.com/wp-content/uploads/2023/07/auto-reparatie-in-hoogvliet… (read more)
Hello,
this is html code:
<div class="home-page-image-container">
<img src="https://webdesignleren.com/wp-content/uploads/2023/07/auto-reparatie-in-hoogvliet.webp" alt="auto reparatie" />
<div id="app"></div>
</div>
and this is Javascript code:
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script>
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true
});
typewriter.typeString('Home Developer')
.pauseFor(2500)
.deleteAll()
.typeString('Web Designer')
.pauseFor(2500)
.deleteAll()
.typeString('<strong>FrontEnd Developer</strong>')
.pauseFor(2500)
.start();
</script>
and this is CSS code:
#app{
text-align:center;
font-size:50px;
background-image: linear-gradient(
-225deg,
#231557 0%,
#44107a 29%,
#ff1361 67%,
#fff800 100%
);
background-clip:border-box;
text-fill-color: transparent;
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
animation: textclip 2s linear infinite;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
the typewriter animation with text on chrome,edge,opera is working very wel . only on firefox is not working correctly. I see firefox has some problems with gradient.in this textwriter animation on firefox the first 3-4 letters are not showing and it has strange behaviour. I tried in this way to solve the problem:
#app {
text-align: center;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
}
#app::before {
content: attr(data-text);
display: inline-block;
width: 0;
color: #231557;
animation: typewriter 4s steps(40) infinite, colorTransition 4s infinite;
}
@keyframes typewriter {
from {
width: 0;
}
}
@keyframes colorTransition {
0% {
color: #231557;
}
50% {
color: #ff1361;
}
100% {
color: #ff1361;
}
}
<div id="app" data-text="Hello, Gradient!"></div>
but it didn't helpt . I tried many ways but the problem is the same .
can some one tell me how I can solve this problem with firefox . link text
any idea is welkome it has to be some way to solve this problem . I used chatgpt but it didn't help.
thanks
johan
