текст, который появляется на пару секунд а потом пропадает ( идея мотивация успех)
3 ответа
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, red, blue)
}
div {
font-size: 5vw;
color: orange;
position: relative;
}
div::before, div::after {
content: attr(aria-label);
}
div::after {
white-space: nowrap;
opacity: .25;
}
div::before {
position: absolute;
overflow: hidden;
height: 100%;
word-break: break-all;
animation: width-0-100 5s linear;
}
@keyframes width-0-100 {
from { width: 0; }
to { width: 100%; }
}
<div aria-label="ІДЕЯ – МОТИВАЦІЯ – УСПІХ"></div>
-
А интересно кстати, ну вот, даже на css оказывается можно, но на js как-то мне кажется проще да и возможностей больше.– WalkMess11 окт 2021 в 22:23
html/css - никак. Это массив букв типа ['a','b''c]'; которым через js settimeout? Однако я не уверен, что это будет верным решением и все немного сложнее. Нужно будет создать cust sleep(_) по задержке в n.
Мы пробегаемся по массиву строк циклом и на каждой итерации идет задержка. settimeout обойдет цикл, вот почему нужна функция задержки.
Как-то делал что-то похожие.
const titleTexts = 'EXPOFORUM'.split('');
const linkLogo = document.querySelector('.link');
for (const letter of titleTexts) {
linkLogo.innerHTML += `<span class="link__letter">${letter}</span>`
}
const letters = document.querySelectorAll('.link__letter');
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
linkLogo.addEventListener('mouseover', async () => {
for (const letter of letters) {
await sleep(35);
letter.setAttribute('style', `color: #000;`);
}
letters[letters.length - 1].setAttribute('style', `color: #FFC41E;`);
});
linkLogo.addEventListener('mouseout', async () => {
for (const letter of letters) {
await sleep(35);
letter.setAttribute('style', `color: #fff;`);
}
});
<div class="expoforum__top">
<a class="expoforum__logo link" href="#"></a>
<nav class="expoforum__navigation navigation center-items"></nav>
<div class="expoforum__bar center-items">
<svg class="expoforum__search-svg" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 612 612"><path d="M606 579L448 423c42-45 67-104 67-170C515 113 400 0 257 0 115 0 0 113 0 253s115 254 257 254c62 0 118-21 163-57l158 156c8 8 20 8 28 0 8-7 8-20 0-27zM257 468c-120 0-217-96-217-215S137 39 257 39c121 0 218 96 218 214s-97 215-218 215z"/></svg>
<div class="expoforum__language language">
<a class="language__dropdown link center-items" href="#">
<svg class="language__dropdown-svg" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 479.4 479.4"><path d="M239 0a240 240 0 100 480 240 240 0 000-480zM78 84l4-4 5-4 4-4 5-4 4-3a187 187 0 019-7l5-4a214 214 0 0146-23l6-2a249 249 0 0111-4l5-1 2-1c-24 23-42 52-51 83-19-5-38-12-55-21v-1zM67 97c19 11 40 19 61 24-11 36-16 74-16 111H16c1-49 19-97 51-135zm0 286c-32-38-50-86-51-135h96c0 37 5 75 16 111-21 5-42 13-61 24zm115 73l-5-1-6-2-5-2a191 191 0 01-27-11l-5-2a223 223 0 01-25-16l-4-3-5-4-4-3-5-4-4-4-5-4-4-4v-1c17-9 36-16 55-21 9 31 27 60 51 83l-2-1zm49 7c-34-4-64-40-83-93 28-6 55-9 83-10v103zm0-119c-29 1-59 4-88 11-10-35-15-71-15-107h103v96zm0-112H128c0-36 5-72 15-107 29 7 59 10 88 11v96zm0-112c-28-1-55-4-83-10 19-53 49-88 83-93v103zm181-23c31 38 50 86 51 135h-96c0-37-5-75-16-111 21-5 42-13 61-24zM297 24l5 1 6 2 5 2a191 191 0 0147 22 210 210 0 0119 14l4 3 5 4 4 4 5 4 3 4 1 1c-17 9-36 16-55 21-10-31-27-60-51-83l2 1zm-50-7c35 5 65 40 84 93-28 6-56 9-84 10V17zm0 119c30-1 60-4 89-11 10 35 15 71 15 107H247v-96zm0 112h104c0 36-5 72-15 107-29-7-59-10-89-11v-96zm0 215V360c28 1 56 4 84 10-19 53-49 89-84 93zm153-67l-3 4-5 4-4 4-5 4-4 3a187 187 0 01-9 7l-5 4a187 187 0 01-10 6l-5 3a238 238 0 01-26 12l-5 2a198 198 0 01-22 7l-2 1c24-23 41-52 51-83 19 5 38 12 55 21l-1 1zm12-13c-19-11-40-19-61-24 11-36 16-74 16-111h96c-1 49-20 97-51 135z"/></svg>
<p class="language__dropdown-text" data-toggle="language-dropdown">Russian</p>
</a>
<div class="language__dropdown-submenu">
<a class="language__dropdown-link link" href="#" data-language-id="russian">Russian</a>
<a class="language__dropdown-link link" href="#" data-language-id="english">English</a>
</div>
</div>
</div>
</div>
-
-
-
спасибо, подправил под себя. А возможно сделать так, чтобы по загрузке это происходило? jsfiddle.net/n2scmkq9 11 окт 2021 в 21:12
-
-
Да можно, где подписываетесь на событие, удалите все включая саму подписку и замените на это.
(async function main() { for (const letter of letters) { await sleep(35); letter.setAttribute('style', `color: blue;`); } })();
– WalkMess11 окт 2021 в 22:36
Есть способ "заливки" текста при помощи -webkit-background-clip: text
. Можно анимировать такой фон:
.text-wrapper{
width: fit-content;
padding: 20px;
font-size: 30px;
font-family: sans-serif;
background-size: cover;
background-position: center top;
animation: bgFill .5s linear forwards 3.5s;
}
.text{
background: linear-gradient(orange, orange) no-repeat 0 0/50% auto rgba(255, 165, 0, .3);
-webkit-background-clip: text;
color: transparent;
animation: textFill 4s linear forwards;
}
@keyframes textFill{
0%{
background-size: 0 auto;
}
75%{
background-size: 100% auto;
opacity: 1;
}
100%{
background-size: 100% auto;
opacity: 0;
}
}
@keyframes bgFill{
from{
background-image: none;
}
to{
background-image: url(https://www.placecage.com/c/300/200);
}
}
<link rel="preload" as="image" href="https://www.placecage.com/c/300/200">
<div class="text-wrapper">
<div class="text">Ідэя - Матывацыя - Поспех</div>
</div>