Перейти к основному содержимому

Новогодние настраиваемые украшения

Код лучше всего разместить в специальном инфоблоке для скриптов и стилей headScripts или аналогичном. При его отсутствии код можно вставить в любой удобный для вас инфоблок. Что такое "инфоблок" и как его найти - смотрите тут (раздел "инфоблоки").

Падающий на странице снег​

<script>$(function()`{$('').prependTo("body");}`);</script>
<style>#snow`{background:none;z-index:1;background-image: url(https://cdn.abcp.ru/f/403527),url(https://cdn.abcp.ru/f/403526),url(https://cdn.abcp.ru/f/403525);height:100%;left:0;position:absolute;top:0;width:100%;-webkit-animation:snow 10s linear infinite;-moz-animation:snow 10s linear infinite;-ms-animation:snow 10s linear infinite;animation:snow 10s linear infinite;pointer-events:none}`@keyframes snow`{0%{background-position:0 0,0 0,0 0}`50%`{background-position:500px 500px,100px 200px,-100px 150px}`100%`{background-position:500px 1000px,200px 400px,-100px 300px}`}@-moz-keyframes snow`{0%{background-position:0 0,0 0,0 0}`50%`{background-position:500px 500px,100px 200px,-100px 150px}`100%`{background-position:400px 1000px,200px 400px,100px 300px}`}@-webkit-keyframes snow`{0%{background-position:0 0,0 0,0 0}`50%`{background-position:500px 500px,100px 200px,-100px 150px}`100%`{background-position:500px 1000px,200px 400px,-100px 300px}`}@-ms-keyframes snow`{0%{background-position:0 0,0 0,0 0}`50%`{background-position: 500px 500px,100px 200px,-100px 150px}`100%`{background-position:500px 1000px,200px 400px,-100px 300px}`}</style>

Гирлянда мигающая (с цветными лампочками)​

альт=

<style>.lightrope`{text-align:center;white-space:nowrap;overflow:hidden;position:absolute;z-index:1;margin:-12px 0 0 0;padding:0;pointer-events:none;width:100%}`.lightrope li`{position:relative;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;list-style:none;margin:0;padding:0;display:block;width:28px;height:28px;border-radius:50%;margin:20px 20px 30px;display:inline-block;background:#00f7a5;box-shadow:0 4.6666666667px 24px 3px #00f7a5;-webkit-animation-name:flash-1;animation-name:flash-1;-webkit-animation-duration:2s;animation-duration:2s;pointer-events:none}`.lightrope li:nth-child(2n+1)`{background:cyan;box-shadow:0 4.6666666667px 24px 3px rgba(0,255,255,.5);-webkit-animation-name:flash-2;animation-name:flash-2;-webkit-animation-duration:0.4s;animation-duration:0.4s}`.lightrope li:nth-child(4n+2)`{background:#f70094;box-shadow:0 4.6666666667px 24px 3px #f70094;-webkit-animation-name:flash-3;animation-name:flash-3;-webkit-animation-duration:1.1s;animation-duration:1.1s}`.lightrope li:nth-child(odd)`{-webkit-animation-duration:1.8s;animation-duration:1.8s}`.lightrope li:nth-child(3n+1)`{-webkit-animation-duration:1.4s;animation-duration:1.4s}`.lightrope li:before`{content:"";position:absolute;background:#222;width:10px;height:9.3333333333px;border-radius:3px;top:-7.6666666667px;left:50%;transform:translateX(-50%)}`.lightrope li:after`{content:"";top:-14px;left:9px;position:absolute;width:72px;height:18.6666666667px;border-bottom:solid #222 2px;border-radius:50%}`.lightrope li:last-child:after`{content:none}`.lightrope li:first-child`{margin-left:-40px}`@-webkit-keyframes flash-1`{0%,100%{background:#00f7a5;box-shadow:0 4.6666666667px 24px 3px #00f7a5}`50%`{background:rgba(0,247,165,.4);box-shadow:0 4.6666666667px 24px 3px rgba(0,247,165,.2)}`}@keyframes flash-1`{0%,100%{background:#00f7a5;box-shadow:0 4.6666666667px 24px 3px #00f7a5}`50%`{background:rgba(0,247,165,.4);box-shadow:0 4.6666666667px 24px 3px rgba(0,247,165,.2)}`}@-webkit-keyframes flash-2`{0%,100%{background:cyan;box-shadow:0 4.6666666667px 24px 3px cyan}`50%`{background:rgba(0,255,255,.4);box-shadow:0 4.6666666667px 24px 3px rgba(0,255,255,.2)}`}@keyframes flash-2`{0%,100%{background:cyan;box-shadow:0 4.6666666667px 24px 3px cyan}`50%`{background:rgba(0,255,255,.4);box-shadow:0 4.6666666667px 24px 3px rgba(0,255,255,.2)}`}@-webkit-keyframes flash-3`{0%,100%{background:#f70094;box-shadow:0 4.6666666667px 24px 3px #f70094}`50%`{background:rgba(247,0,148,.4);box-shadow:0 4.6666666667px 24px 3px rgba(247,0,148,.2)}`}@keyframes flash-3`{0%,100%{background:#f70094;box-shadow:0 4.6666666667px 24px 3px #f70094}`50%`{background:rgba(247,0,148,.4);box-shadow:0 4.6666666667px 24px 3px rgba(247,0,148,.2)}`}</style>
<script>$(function() {$( '
- <img src="https://cdn.abcp.ru/f/268621" style={{position: 'absolute', width: '24px', top: '41%', left: '2px', filter: 'opacity(0.3)'}}/>
- <img src="https://cdn.abcp.ru/f/268621" style={{position: 'absolute', width: '24px', top: '41%', left: '2px', filter: 'opacity(0.3)'}}/>
' ).prependTo( "body" );});</script>

Гирлянда мигающая (с цветными лампочками (№2)​

альт=

<style type="text/css"> 
1. garland`{position:absolute;top:0;left:0;background-image:url(https://cdn.abcp.ru/f/403535);height:36px;width:100%;overflow:hidden;z-index:99}`#nums_1`{padding:100px}`.garland_1`{background-position:0 0}`.garland_2`{background-position:0 -36px}`.garland_3`{background-position:0 -72px}`.garland_4`{background-position:0 -108px}`
</style>
<script type="text/javascript">
function garland()`{nums=document.getElementById("nums_1").innerHTML,1==nums&&(document.getElementById("garland").className="garland_1",document.getElementById("nums_1").innerHTML="2"),2==nums&&(document.getElementById("garland").className="garland_2",document.getElementById("nums_1").innerHTML="3"),3==nums&&(document.getElementById("garland").className="garland_3",document.getElementById("nums_1").innerHTML="4"),4==nums&&(document.getElementById("garland").className="garland_4",document.getElementById("nums_1").innerHTML="1")}`$(function()`{$('1').prependTo("body")}`);
setInterval(function() {
  garland()
}, 1200) // интервал мигания гирлянды в миллисекундах
</script>

Угловые украшения​

Пояснение к параметрам width и height: картинка украшения автоматически вписывается в ширину и высоту, сохраняя пропорции, поэтому вы можете регулировать размеры украшения, изменяя один любой параметр; контейнер никогда не будет перекрывать элементы управления

Если угловое украшение закрывает какие-либо элементы управления на узких экранах или мобильных устройствах, вы можете скрыть это украшение на ширине экрана 1200px и меньше (значение можно изменить), добавив следующий код:

<style>
    @media (max-width: 1200px) {
        .new-year-decor-top-block {
            display: none;
        }
    }
</style>

Если украшение не отображается, добавьте после строки

<code style={{fontSize: '12px'}}>'height:229px; /* высота контейнера украшения */'+</code>

следующую строку:

<code style={{fontSize: '12px'}}>'z-index:1;'+</code>

Ветка №1 (слева)​

альт=

<script type="text/javascript">
$(function() `{ $( '').prependTo("body");}`);
</script>

Ветка №1 (справа)​

альт=

<script type="text/javascript">
$(function() `{ $( '' ).prependTo("body");}`);
</script>

Ветка №2 (слева)​

альт=

<script type="text/javascript">
$(function() `{ $( '').prependTo("body"); }`);
</script>

Ветка №3 (слева)​

альт=

<script type="text/javascript">
$(function() `{ $( '').prependTo("body");}`);
</script>

Ветка №3 (справа)​

альт=

<script type="text/javascript">
$(function() `{ $( '' ).prependTo("body");}`);
</script>