Открыть главное меню
ABCP Documentation

NewYear Decorations

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

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

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

<!--- Падающий снег (начало) --->
<script>$(function(){$('<div id="snow"></div>').prependTo("body");});</script>
<style>#snow{background:none;z-index:1;background-image: url(//f.nodacdn.net/403527),url(//f.nodacdn.net/403526),url(//f.nodacdn.net/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() {$( '<ul class="lightrope"><li></li><li></li><li></li><li></li><li><img src="//f.nodacdn.net/268621" style=" position: absolute; width: 24px; top: 41%; left: 2px; filter: opacity(0.3);"/></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li><img src="//f.nodacdn.net/268621" style="position: absolute; width: 24px; top: 41%; left: 2px; filter: opacity(0.3);"/></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>' ).prependTo( "body" );});</script>
<!--- Гирлянда (конец) --->


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

  

<style type="text/css"> 
#garland{position:absolute;top:0;left:0;background-image:url(//f.nodacdn.net/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(){$('<div id="garland" class="garland_4"><div id="nums_1">1</div></div>').prependTo("body")});
setInterval(function() {
  garland()
}, 1200) // интервал мигания гирлянды в миллисекундах
</script>


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

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

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

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


Если украшение не отображается, добавьте после строки 'height:229px; /* высота контейнера украшения */'+
следующую строку: 'z-index:1;'+

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

  

<script type="text/javascript">
$(function() { $( '<div class="new-year-decor-top-block" style="position:absolute;top:0px;left:0px;'+
'width:200px; /* ширина контейнера украшения */'+
'height:229px; /* высота контейнера украшения */'+
'background:url(//f.nodacdn.net/403548) no-repeat; /* заменив ссылку, вы можете вставить своё украшение */'+
'background-size:contain;pointer-events:none;"></div>').prependTo("body");});
</script>


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

  

<script type="text/javascript">
$(function() { $( '<div class="new-year-decor-top-block" style="position:absolute;top:0px;right:0px;'+
'width:200px; /* ширина контейнера украшения */'+
'height:229px; /* высота контейнера украшения */'+
'background:url(//f.nodacdn.net/403548) no-repeat; /* заменив ссылку, вы можете вставить своё украшение */'+
'background-size:contain;pointer-events:none;transform:rotateY(180deg);"></div>' ).prependTo("body");});
</script>


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

  

<script type="text/javascript">
$(function() { $( '<div class="new-year-decor-top-block" style="position:absolute;top:0px;left:0px;'+
'width:200px; /* ширина контейнера украшения */'+
'height:160px; /* высота контейнера украшения */'+
'background:url(//f.nodacdn.net/403549) no-repeat; /* заменив ссылку, вы можете вставить своё украшение */'+
'background-size:contain;pointer-events:none;"></div>').prependTo("body"); });
</script>


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

  

<script type="text/javascript">
$(function() { $( '<div class="new-year-decor-top-block" style="position:absolute;top:0px;left:0px;'+
'width:200px; /* ширина контейнера украшения */'+
'height:160px; /* высота контейнера украшения */'+
'background:url(//f.nodacdn.net/403550) no-repeat; /* заменив ссылку, вы можете вставить своё украшение */'+
'background-size:contain;pointer-events:none;"></div>').prependTo("body");});
</script>


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

  

<script type="text/javascript">
$(function() { $( '<div class="new-year-decor-top-block" style="position:absolute;top:0px;right:0px;'+
'width:200px; /* ширина контейнера украшения */'+
'height:160px; /* высота контейнера украшения */'+
'background:url(//f.nodacdn.net/403550) no-repeat; /* заменив ссылку, вы можете вставить своё украшение */'+
'background-size:contain;pointer-events:none;transform:rotateY(180deg);"></div>' ).prependTo("body");});
</script>
Источник — https://www.abcp.ru/w/index.php?title=NewYear_Decorations&oldid=15709