» » Красивый текст для поздравлений

Красивый текст для поздравлений

Я писала не так давно о горящем тексте, который подходит для поздравления на 9 Мая. А в этой статье предлагаю посмотреть ещё несколько текстов, которыми можно поздравить читателей. И не только с Днём Победы. Коды нашла в интернете, большинство с сайта http://usefulscript.ru/
Красивый текст можно добавлять в гаджеты, например, в боковую панель или в статью.
Все тексты созданы с помощью скриптов, поэтому советую ставить их только на некоторое время, а после праздника удалить.
Работу кодов смотрите в визуальном редакторе.

Исчезающий текст

Исчезающий текст
В коде можно поменять текст, цвет текста, размер, толщину.
<div class="fading">Ваш текст</div>
<style>
.fading {
    color: #ff0808;
    font-size: 35px;
    font-weight: 600;
    line-height: 32px;    
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 30px 0;
}
.fading span {
    animation: fading 3s alternate infinite;
    opacity: 0;
}
@keyframes fading {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    50%, 100% {
        opacity: 1;
        filter: blur(0px);
    }
}    
  </style>
<script>
let fadingHeading = document.querySelectorAll('.fading');
for (let a = 0; a < fadingHeading.length; a++){
let letters = fadingHeading[a].textContent.split('');
let content = letters.map((val, i) => {
    let delay = Math.floor((Math.random() * 1000) + 1);
    return ('<span style="animation-delay: '+ delay + 'ms">'+ val +'</span>');
});
fadingHeading[a].innerHTML = "";
for (let i = 0; i < content.length; i++) {
    fadingHeading[a].innerHTML += content[i];
}
}</script>

Текст с эффектом волны

Текст с эффектом волны
<script type="text/javascript">
function next_Size(i, Length) {
 return (14 + 22 * Math.abs(Math.sin(i / Length * 3.14)));
}

function size_Cycle(Wave, dis, text) {
var out = "";
for (i = 0; i < text.length; i++) {
 size = parseInt(next_Size(i + dis, text.length));
 out += "<b style='font-size: "+ size +"px'>" + text.substring(i,i+1) + "</b>";
}
if (document.all) document.all(Wave).innerHTML = out;
else if (document.getElementById) {
 rng = document.createRange();
 el = document.getElementById(Wave);
 rng.setStartBefore(el);
 html_Frag = rng.createContextualFragment(out);
 while (el.hasChildNodes()) el.removeChild(el.lastChild);
 el.appendChild(html_Frag);
}
}

function Wave_start(id, n, Text) {
 size_Cycle(id, n, Text);
 if (n > Text.length) n = 0;
 setTimeout("Wave_start('" + id + "', " + (n + 1) + ", '" + Text + "')", 90);
}
</script>
<div id="Div_Wave" style="text-align: center;"></div>
<div id="Div_Wave2" style="text-align: center;"></div>
<script type="text/javascript">
 Wave_start("Div_Wave", 0, "День Победы! 75 лет");
 Wave_start("Div_Wave2", 0, "С праздником 9 Мая!");
</script>
Текст замените своим.

Печатающий текст

Печатающий текст
<script type="text/javascript">
var mess=new Array(
 "Поздравляю читателей с праздником! ",
 "75 лет со дня Победы! ",
 "С 9 Мая! С днём Победы! ");

var size = 32;
var txtcol = "#fec41d";
var lastcol = "#000000";
var pause = 1500;
var speed = 70;
var i = i_str = 0;
var msg = msgpre = msgafter = "";

function get_text() {
 msgpre = mess[i].substring(0, i_str-1);
 msgafter = mess[i].substring(i_str-1, i_str);
 msg = "<span style='position: relative; color:" + txtcol + "; font-size: " +
 size + "px;'>" + msgpre + "<span style='color:" + lastcol + ";'>" + msgafter +
 "</span></span>";
}

function go() {
if (i_str<=mess[i].length-1) {
 i_str++;
 get_text();
 if (document.all) typewriter.innerHTML = msg;
 else if (document.layers) {
  document.typewriter.document.write(msg);
  document.typewriter.document.close();
 }
 else document.getElementById("typewriter").innerHTML = msg;
 var timer = setTimeout("go()", speed);
}
else {
 clearTimeout(timer);
 var timer = setTimeout("changemess()", pause);
}
}

function changemess() {
 i++;
 i_str = 0;
 if (i>mess.length-1) i = 0;
 go();
}
</script>
<p id="typewriter"></p>
<script type="text/javascript">
 go();
</script>
Текст можно поменять на свой. Так же меняйте цвет текста.

Летающий текст

Летающий текст
<script type="text/javascript">
arrCos = new Array(360);
arrSin = new Array(360);

for (i=0; i<360; i++) {
        arrSin[i] = Math.sin(i * Math.PI / 180);
        arrCos[i] = Math.cos(i * Math.PI / 180);
}

function rotate(objID, x, y, r, deg, rinc) {
        y = r * arrSin[deg];
        x = r * arrCos[deg];
        document.getElementById(objID).style.left = x + "px";
        document.getElementById(objID).style.top = y + r + 10 + "px";
        if (deg % 50 == 0) r += rinc;
        if (r > 50 || r < 10) {
                rinc *= -1;
                r += rinc;
        }
        deg += 12;
        if (deg >= 360) deg = 0;

        setTimeout("rotate('" + objID + "'," + x + "," + y +
            "," + r + "," + deg + "," + rinc + ")", 80);
}

function start() {
        x=0; y=0; r=10; deg=0; rinc = 1;
        rotate("obj_1", x, y, r+10, deg, rinc);
        rotate("obj_2", x, y, r, deg+40, rinc);
        rotate("obj_3", x, y, r+15, deg+60, rinc);
        rotate("obj_4", x, y, r, deg+90, rinc);
}
</script>
<div style="font-weight: bold; text-align: center; color:#fe1d1d;">
<i>
    <span style="position: relative; font-size: 24px;" id="obj_1">9 Мая</span>
<br>
    <span style="position: relative; font-size: 20px;" id="obj_2">Поздравляю вас с Праздником!</span>
</i>
<br>
    <span style="position: relative; font-size: 20px;" id="obj_3">75 лет Великой Победе!</span>
<br>
    <span style="position: relative; font-size: 18px;" id="obj_4">С Днём Победы!</span>
</div>
<script type="text/javascript">
 start();
</script>
Меняем текст и цвет текста.

Подпрыгивающий текст

Подпрыгивающий текст
<script type="text/javascript">
message = "9 Мая! С Днём Победы!";
ns6_switch = 1;
var ns6 = document.getElementById&&!document.all;
var mess = new Array( -1, -5, -9, -13, -9, -5, -1);
var num = 0;
var scope = 0;
var text = "";

function start_jumping() {
if (ns6&&!ns6_switch) {
 jumping_text.innerHTML = message;
 return;
}
for (n=0; n != message.length; n++) {
 text += "<span style='position: relative;' id='id_" + n + "'>" +
 message.charAt(n) + "</span>"
}
jumping_text.innerHTML = text;
text = "";
move_left();
}

function move_left() {
first_symbol = document.getElementById("id_0");
first_symbol.style.left = -scope + "px";
if (scope != 12) {
 scope += 4;
 setTimeout("move_left();", 50);
}
else move_right();
}

function move_right() {
first_symbol.style.left = -scope + "px";
if (scope != 0) {
 scope -= 4;
 setTimeout("move_right();", 50);
}
else wave();
}

function wave() {
text = "";
for (n=0; n != message.length; n++) {
 if (n+num > -1 && n+num < 7) {
  text += "<span style='position: relative; top: " + mess[n+num] + "px'>" +
  message.charAt(n) + "</span>"
 }
 else text += "<span>" + message.charAt(n) + "</span>";
}
jumping_text.innerHTML = text;
text = "";
if (num != (-message.length)) {
 num--;
 setTimeout("wave();", 50);
}
else {
 num = 0;
 setTimeout("start_jumping();", 50);
}
}
</script>
<div id="jumping" style="font-weight: bold; font-size: 40px; color: #ff0000;"></div>
<script type="text/javascript">
jumping_text = document.getElementById("jumping");
start_jumping();
</script> 
Меняйте текст на свой. Цвет текста так же можно поменять.

  1. Надежда Т.9/5/20 08:45

    Большое спасибо, Наталья, за интересные формы поздравлений! Очень актуально. Я воспользовалась.
    С праздником Вас — с Днем Победы!

    ОтветитьУдалить

Комментарии со спамом удаляются.