Здравствуйте уважаемые читатели! Мир Вашему дому, а Вам многая лета!
Начну с того, что я стал заниматься такими поздравлениями не на пустом месте: в 2001 году я закончил Волгоградский Государственный Технический Университет, где изучал ВЕБ-технологии. Поэтому теперь в качестве хобби стал применять знакомый язык программирования: JAVASCRIPT.
Вот законченная работа: http://ivitrinakrsk.ru/posdravs/pozdravl_XB2021.html
Это ссылка на страницу с соответствующей JAVAScript-анимацией. Для того, чтобы увидеть эту анимацию нужно или перейти по ссылке, или просмотреть видесюжет, который я снял с этой страницы.
Конечно, видеосюжет более ограничен (часть изображения не попала в запись, ширина фиксирована, ) но он даёт общее представление об ожидаемом интернет-поздравлении!
Итак вот видео:
Ссылку на эту JAVAScript-анимацию я уже указал ранее. Теперь попробую разобрать на элементы структуру поздравления, а затем описать реализацию этих элементов.
Первое - это ЗАНАВЕС. С его помощью реализован театральный эффект, вызывающий ощущение того, что за занавесом будет что-то интересное.
Более того - это действительно так!
Этот занавес реализован с помощью контейнеров <div></div> и javascript-функции, встроенной в указание вызова setInterval. Как многие программисты наверняка поняли контейнеры <div></div> снабжены диагональной градиентной огненной заливкой. Их заливки подобны зеркальному отражению. Они занимают правую и левую части экрана от середины. Даже указывающие на них id имеют названия: id="zanaves-l" и id="zanaves-r".
Вызов функции setInterval устанавливает функцию, вызываемую через временной интервал (100милисекунд). Эта функция за каждый вызов приближает крайние границы контейнеров к середине на 1 процент. Таким образом через 100 вызовов правая граница каждого контейнера окажется от левей на расстояние 0% и огненный занавес "схлопентся". Так как он нематериален, то можно утверждать что он исчезнет без следа.
За ним будет видна большая поздравительная надпись "Христос Воскресе!". Раздельно установленные стили с деформационным эффектом позволили установить наклон слову "Христос" 30 градусов, а слову "Вокресе" минус 30 градусов. Таким образом эти слова образуют "домик", позади которого расположена православная икона воскресения Христова. Цвет и размер надписи установлены с помощью html-стилей, как и описание огненного занавеса.
Внизу экрана расположен текст пасхального тропаря, которому также стилистически задан большой размер и тёмно-красная тень.
Это поздравление снабжено звуком, но, к сожалению, не каждый браузер его воспроизводит. У меня воспроизвёл Microsoft Edge и я зафиксировал это на снятом видео.
Дополнительный преимущества JAVAScript-анимации в её маштабируемости: данное поздравление будет визуально похоже отображаться практически в любом браузере.
В завершении приведу весь html-файл поздравления:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Поздравляем с Воскресением Христовым !!!</title>
<script language=JavaScript>
function MyOnload() {
//alert ("onload");
var timerId = setInterval(function() {
var a = document.getElementById("zanaves-l").style.left;
//alert(a);
a=parseInt(a);
if (a<50) {document.getElementById("zanaves-l").style.left = a+1+"%";};
if (a<50) {document.getElementById("zanaves-r").style.right = a+1+"%";};
}, 100);
var timerId2 = setTimeout(function(){document.getElementById("Myaudio").currentTime=0; document.getElementById("Myaudio").play(); }, 1000);
};
</script>
</head>
<body onload = MyOnload(); style="background-color:#000000">
<audio id="Myaudio" src="TroparXB-horSTSL.mp3" ></audio>
<!-- div style="position:absolute;left:0;top:0;bottom:0;right:0;" id="div1"><img src="fon-hram.jpeg" height=100%>
</div -->
<div style="position:absolute;top:20vh;left:10vw;right:10vw;">
<img src="https://days.pravoslavie.ru/jpg/ib4506.jpg" style="width:80vw;" ><br>
<font style="position:relative;text-shadow: 9px 9px 4px #510; font-size:6vw;" color="#999900">
Христо́с воскре́се из ме́ртвых, сме́ртию смерть попра́в, и су́щим во гробе́х живо́т дарова́в.
</font>
</div>
<div style="position:absolute;transform:rotate(-30deg);top:10vh;left:0;">
<font style="position:relative;text-shadow: 9px 9px 4px #510; font-size:12vw;" color="#FF0000">
Христос
</font>
</div>
<div style="position:absolute;transform:rotate(30deg);top:10vh;right:0;">
<font style="position:relative;text-shadow: 9px 9px 4px #510; font-size:12vw;" color="#FF0000">
Воскресе !
</font>
</div>
<div id="zanaves-l" style="background:linear-gradient(45deg,#FF0000,#FFFF00,#FF0000);position:absolute;left:10; top:0%;bottom:0;right:50%">
</div>
<div id="zanaves-r" style="background:linear-gradient(-45deg,#FF0000,#FFFF00,#FF0000);position:absolute;right:10; top:0%;bottom:0;left:50%">
</div>
</body>
</html>
