Профили на ТП: 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>

