Профили на ТП: bestbb, qssupport
Выложенные собственные скрипты: хронология, снегопад
by Эмбер
Сообщений 1 страница 3 из 3
Поделиться12016-11-20 01:28:24
Поделиться22016-12-03 02:11:14
Дело было ночью, делать ничего не хотелось, поэтому Эмбер нашла на просторах тырнета, как сделать снегопад на css3, и немного доработала сию прелесть.
Потыкать можно здесь, присутствует возможность отключения снегопада без появления "артефактов" (статус запоминается на полгода) для нелюбителей новогоднего настроения.
html-верх или в свой стиль без тегов style
<style>#sfoff{ //стиль снежинки отключения снегопада position: absolute; font-size: 60px; //размер color: #eacbb6; //цвет font-family: serif; text-shadow: 0px 0px 3px black;//тень right: 0;//отступ справа } #sfon{ //включение снегопада, настройка аналогичны, тень также можно дописать position: absolute; font-size: 60px; font-family: serif; text-shadow: 0px 0px 3px black; right: 0; } #snowfall{ display: none; } .snowContainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;} #snow {width: 100%; height: 100%; background-image: url("http://yraaa.ru/_pu/27/15825154.png"), url("http://yraaa.ru/_pu/27/89961317.png"), url("http://yraaa.ru/_pu/27/21791255.png"); -webkit-animation: snow 20s linear infinite;-moz-animation: snow 20s linear infinite;-ms-animation: snow 20s linear infinite;animation: snow 20s linear infinite;} @keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}} @-moz-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}} @-webkit-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}} @-ms-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}} #snowfall{ //блок, в котором будет падать снег, в нашем случае - весь форум, z-index - чтобы снег не загораживал текст и не мешал читателям position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }</style>
Туда, где нужен снегопад
<div id=snowfall><div class="snowContainer"> <div id="snow"></div> </div></div>
Туда, где нужны кнопки
<div id=sfon title="Включить снегопад" onclick="snowOff(0)">*</div><div id=sfoff title="Выключить снегопад" onclick="snowOff(1)">*</div>
Куда-нибудь ниже кнопок и контейнера с снегом( для простоты в HTML-низ - не ошибетесь)
<script type="text/javascript"> function get_cookie ( cookie_name ) { var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if ( results ) return ( unescape ( results[2] ) ); else return null; } function snowOff(value) { var d = new Date(); d.setDate(d.getDate() + 183); if( value == 0 ) { $('#snowfall').css("display", "block"); $('#sfon').css({"display":"none"}); $('#sfoff').css({"display":"block"}); document.cookie = "snowfall=0;expires=" + d.toGMTString(); } else if( value == 1 ) { $('#snowfall').css("display", "none"); $('#sfon').css({"display":"block"}); $('#sfoff').css({"display":"none"}); document.cookie = "snowfall=1;expires=" + d.toGMTString(); } } if( get_cookie("snowfall") != null ) { snowOff(get_cookie("snowfall")); } else{ snowOff(0); } </script>
Исходный код для самого снегопада отсюда
Поделиться32017-03-09 15:56:03
Скрипт, пилящий мини-табличку с приветствием и списком эпизодов, в которых ждут человека (требует обновления администрации)
<table><tr><td><div id="ava"></div></td><td><div id="miniprof"></div></td></tr></table> <script>var Epi = {"Лиа":[]}; //Формат такой: "Никнейм1":["<a href=ссылка1>эпизод1</a>", "<a href=ссылка2>эпизод2</a>"], "Никнейм2":["<a href=ссылка1>эпизод1</a>", "<a href=ссылка2>эпизод2</a>"] if(GroupID==3){ $('#miniprof').html("Добро пожаловать в Хогвартс, незнакомец!<br>"); $('#miniprof').html($('#miniprof').html()+"К сожалению, пока Вас не могут ждать в эпизодах."); $('#ava').html("<img src=http://placehold.it/50x50>"); } else { $('#ava').html("<a href=/profile.php?section=avatar&id=" + UserID + "><img src=" + UserAvatar + "></a>"); $('#miniprof').html("Добро пожаловать в Хогвартс, " + UserLogin + "!<br>"); $('#miniprof').html($('#miniprof').html()+"Сейчас Вас ждут в следующих эпизодах:<br>"); if(Epi[UserLogin].length==0){ $('#miniprof').html($('#miniprof').html()+"Таких эпизодов нет"); } else { for( var i = 0; i < Epi[UserLogin].length-1; ++i ){ $('#miniprof').html($('#miniprof').html()+Epi[UserLogin][i] + ", "); } $('#miniprof').html($('#miniprof').html()+Epi[UserLogin][Epi[UserLogin].length-1]); }}</script>