kolobdur74
Так а вписать кусок css возможно в него? Чтобы запозиционировать есчё картинку в него. Или уже ни как😣

kolobdur74

Отредактировано МАЧОнаДАЧЕ (Вс, 10 Апр 2022 12:35:45)

kolobdur74
Пасиб оно (вопрос снят) выручил

Нашла даже два. )
В первом, взятом отсюда, очень нравится эффект, но почему-то не получается убрать белый фон. Если ставлю его прозрачным, текста не видно, получается голубая полоса.

Во втором, взятом отсюда, все зашибись, но текст не выравнивается по центру поста, если добавляю в спан "text-align: center", текст уезжает влево и выравнивается наверное по какому-то другому центру, а если делать шрифт больше, текст начинает обрезаться сверху.

Да, не текст. И никак нельзя убрать этот белый фон?

Mirra Bell, можно поставить в качестве подложки вместо белого цвета, цвет фона поста, но все равно будет переливаться весь прямоугольник, в котором находится текст..

Я тоже думал о данной фиче (как вариант это поставить свой фон и обернуть в borde). С бордером эффект будет круче (я так думаю)

Мне не надо, чтобы переливался прямоугольник, мне надо, чтобы переливался только текст, причем на том фоне, куда я его поставлю. )

МАЧОнаДАЧЕ
Эффект нужен для текста, причем для любого.

Отредактировано Mirra Bell (Ср, 13 Апр 2022 09:41:04)

Mirra Bell
Посмотрел на пк....тоже с фоном. Может возможно подкрутить этот скрипт (линейностью цвета) http://usefulscript.ru/color_text.php под ваше хочу

ЗЫ: По моему тот эффект который нужен (фон под текстом убрал....что и требовалось)
[html]
<div class="typing">
    <p class="text">Имитация набора текста с переливающимся эффектом. </p>
</div>

<style>
.typing {
    padding: 20px 30px;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
   
}
.typing span{
    color: #BFE2FF;
    animation: 1.9s typing-color infinite;
}
@keyframes typing-color {
    50% {
        color: #FFF;
    }
}
</style>
<script>
var wrapper = document.querySelector(".typing");
var text = document.querySelector(".typing .text");
var textCont = text.textContent;
text.style.display = "none";
for (var i = 0; i < textCont.length; i++) {
(function(i) {
    setTimeout(function() {
    var texts = document.createTextNode(textCont[i])
    var span = document.createElement('span');
    span.appendChild(texts);
    wrapper.appendChild(span);
    }, 75 * i);
}(i));
}
</script>
[/html]
Подстроить скорость и линейность (под себя)

<div class="typing">
    <p class="text">Имитация набора текста с переливающимся эффектом. </p>
</div>

<style>
.typing {
    padding: 20px 30px;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
   
}
.typing span{
    color: #BFE2FF;
    animation: 0.9s typing-color infinite;
}
@keyframes typing-color {
    50% {
        color: #FFF;
    }
}
</style>
<script>
var wrapper = document.querySelector(".typing");
var text = document.querySelector(".typing .text");
var textCont = text.textContent;
text.style.display = "none";
for (var i = 0; i < textCont.length; i++) {
(function(i) {
    setTimeout(function() {
    var texts = document.createTextNode(textCont[i])
    var span = document.createElement('span');
    span.appendChild(texts);
    wrapper.appendChild(span);
    }, 75 * i);
}(i));
}
</script>

Отредактировано МАЧОнаДАЧЕ (Ср, 13 Апр 2022 12:59:00)