revision:
<div class="container">
<div class="text"></div>
</div>
<style>
.container{display: flex; height: 30vw; width: 90vw; margin-left: 2vw;justify-content: center; align-items: center; background-image: linear-gradient(to bottom, blue, lightgreen, lightgrey, burlywood);
margin-top: 5;}
.text{font-weight: 500; font-size: 3vw; }
.dud{color: red;}
</style>
<script>
class TextScramble {
constructor(el) {
this.el = el
this.chars = '!<>-_\\/[]{}—=+*^?#________'
this.update = this.update.bind(this)
}
setText(newText) {
const oldText = this.el.innerText
const length = Math.max(oldText.length, newText.length)
const promise = new Promise((resolve) => this.resolve = resolve)
this.queue = []
for (let i = 0; i < length; i++) {
const from = oldText[i] || ''
const to = newText[i] || ''
const start = Math.floor(Math.random() * 40)
const end = start + Math.floor(Math.random() * 40)
this.queue.push({ from, to, start, end })
}
cancelAnimationFrame(this.frameRequest)
this.frame = 0
this.update()
return promise
}
update() {
let output = ''
let complete = 0
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i]
if (this.frame >= end) {
complete++
output += to
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar()
this.queue[i].char = char
}
output += `< span class="dud">${char}< /span>`
} else {
output += from
}
}
this.el.innerHTML = output
if (complete === this.queue.length) {
this.resolve()
} else {
this.frameRequest = requestAnimationFrame(this.update)
this.frame++
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)]
}
}
const phrases = [
'Dear,',
'sooner or later',
'you\'re going to realize',
'just as I did',
'that there\'s a difference',
'between knowing the path',
'and walking the path!!!'
]
const el = document.querySelector('.text')
const fx = new TextScramble(el)
let counter = 0
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 800)
})
counter = (counter + 1) % phrases.length
}
next()
</script>
Nice weather
Nice weather
Nice weather
Nice weather
<div class="frame">
<div class="backdrop"><p class="text multiply">Nice weather</p></div>
<div class="backdrop"><p class="text screen">Nice weather</p></div>
<div class="backdrop"><p class="text darken">Nice weather</p></div>
<div class="backdrop"><p class="text lighten">Nice weather</p></div>
</div>
<style>
.backdrop{background: url("../images/2.jpg") center; background-size: contain; margin-top: 1vw; margin-left: 3vw; margin-bottom: 1vw; width: 90vw;}
.text{font: bolder 5vw "Alfa Slab One"; text-align: center; margin: 0; border: 0.4vw solid darkgreen;}
.multiply{color: white; mix-blend-mode: multiply; background-color: dodgerblue;}
.screen{ color: black; mix-blend-mode: screen; background-color: seagreen;}
.darken{color: white; mix-blend-mode: darken; background-color: tomato;}
.lighten {color: black;mix-blend-mode: lighten; background-color: cyan;}
</style>
<div class="frame">
<h4 class="effect" id="rotate-words">Stay healthy!! Keep safe in these uncertain times!! </h4>
</div>
<style>
#rotate-words {--background: seagreen; --shadow: red; --text: dodgerblue;}
.effect {color: var(--text);text-shadow: 6px 6px var(--shadow),
5px 5px var(--shadow), 5.5px 5.5px var(--shadow), 5.25px 5.25px var(--shadow), 5.75px 5.75px var(--shadow),
4px 4px var(--shadow), 4.5px 4.5px var(--shadow), 4.25px 4.25px var(--shadow), 4.75px 4.75px var(--shadow),
3px 3px var(--shadow), 3.5px 3.5px var(--shadow), 3.25px 3.25px var(--shadow), 3.75px 3.75px var(--shadow),
2px 2px var(--shadow), 2.5px 2.5px var(--shadow), 2.25px 2.25px var(--shadow), 2.75px 2.75px var(--shadow),
1px 1px var(--shadow), 1.5px 1.5px var(--shadow), 1.25px 1.25px var(--shadow), 1.75px 1.75px var(--shadow),
0.5px 0.5px var(--shadow), 0.25px 0.25px var(--shadow), 0.75px 0.75px var(--shadow);
}
h4 {font-size: 4vw; text-transform: uppercase; font-family: "Archivo Black", "Archivo", sans-serif; font-weight: normal; display: block; width: 30vw; max-width: 60vw; min-height: 30vw; height: auto;
text-align: center; margin: calc(35vh - 9vw) auto; animation: message 15s linear infinite 0s;}
@keyframes message {
0% { opacity: 0.2; transform: translateX(0);filter:blur(5px);transform:scale(1.3)}
15% { opacity: 1; transform: translateX(0);filter:blur(20px);transform:scale(.8)}
30% { opacity: 1; transform: translateX(0);filter:blur(5px);transform:scale(1)}
50% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.4)}
70% { opacity: 1; filter:blur(0px); transform: scale(0.6);}
100% { opacity: 1; filter:blur(0px); transform:scale(0);}
}
</style>
<div class="title"><h3>Enjoy<br>the <br>Holidays</h3></div>
<style>
.title {margin-top: 3vw;font-family: "Montserrat"; text-align: center; color: burlywood; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 30vh; letter-spacing: 0.5vw;}
.title h3 {position: absolute; background-image: url("../images/2.jpg"); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; background-clip: text;
text-transform: uppercase; font-size: 6vw; line-height: 1; animation: flash 2s linear infinite;}
@keyframes flash{
0%{opacity: 1;}
20%{opacity: 1;}
40%{opacity: 0.5; color: seagreen;}
60%{opacity: 1; }
80%{ opacity: 1.5;}
100%{ opacity: 2.5;color:seagreen;}
}
</style>
<div class="typing">
<div class="typing-effect">Typing effect for text</div>
</div>
<style>
.typing {height: 10vw; width:30vw;display: flex; align-items: center; justify-content: center;}
.typing-effect {width: 25vw; white-space: nowrap; overflow: hidden; border-right: .3vw solid;
font-family: monospace; font-size: 2vw; animation: typing 2s steps(22), effect .5s step-end infinite alternate; }
@keyframes typing {
from {width: 0;}
}
@keyframes effect {
50% {border-color: transparent;}
}
</style>
<div class="spec">
<div class="intro">Our company can help you<br>
<div class="c1"><div class="type">grow your business</div></div><br>
<div class="c2"><div class="type2">build customer relations</div></div><br>
<div class="c3"><div class="type3">build a strong brand</div></div><br>
<div class="c4"><div class="type4"><a href="#">Get started today</a></div></div>
</div>
</div>
<style>
a{color: dodgerblue;}
.c1, .c2, .c3, .c4{display: inline-block;}
.intro{font-size: 2vw;margin-top: 1%; color:blue;}
.intro .type{color: red; font-size: 1.6vw;overflow: hidden; border-right: .15vw solid orange; white-space: nowrap; width: 0;
animation: type 1.5s steps(30, end) forwards;}
.intro .type2{ color: green; font-size: 1.5vw; overflow: hidden; border-right: .15vw solid orange; white-space: nowrap; width: 0;
animation: type 1.5s steps(30, end) forwards; animation-delay: 1.5s;}
.intro .type3{color:brown; font-size: 1.4vw; overflow: hidden; border-right: .15vw solid orange; white-space: nowrap; width: 0;
animation: type 2s steps(30, end) forwards; animation-delay: 3s;}
.intro .type4{ font-size: 2vw; overflow: hidden; margin-top: 6%; border-right: .15vw solid orange; white-space: nowrap; width: 0;
animation: type 2s steps(30, end) forwards, blink .75s infinite; animation-delay: 5.5s;}
@keyframes type {
from { width: 0 }
to { width: 100% }
}
@keyframes blink {
from { border-color: transparent }
to { border-color: orange; }
}
</style>
<div class="typewriter">
<div class="effect">This text is confusingggg ~~~</div>
</div>
<style>
.typewriter .effect {color: crimson; font-size:1.5vw; font-family: monospace; overflow: hidden; border-right: 0.15vw solid orange;
white-space: nowrap; margin-top: 12vw; margin-left: 2vw;letter-spacing: 0.15vw; animation: typing 3.5s steps(120, end) alternate
infinite, blink-caret 0.5s step-end infinite, rotateText 3.5s ease alternate infinite;}
@keyframes typing {
from {width: 0;}
to {width: 100%;}
}
@keyframes blink-caret {
from, to { border-color: transparent;}
50% {border-color: orange; }
}
@keyframes rotateText {
0% {transform: rotate(0);}
25% {transform: rotate(10deg) scale(1.5) translateX(10px) skewY(10deg);}
75% {transform: rotate(-10deg) scale(0.8) translateX(-10px) skewY(-10deg);}
100% {transform: rotate(5deg) scale(1.2) translateX(5px) skewY(5deg);}
}
</style>