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

Я писала не так давно о горящем тексте, который подходит для поздравления на 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>

Меняйте текст на свой. Цвет текста так же можно поменять.