Найти тему

Создание интернет-поздравления с Воскресением Христовым (Пасхой) на JAVAscript со скриншотами

Здравствуйте уважаемые читатели! Мир Вашему дому, а Вам многая лета!
Начну с того, что я стал заниматься такими поздравлениями не на пустом месте: в 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>