forked from mirzaev/ff
ссылка на кошке + рандомный танец + остановка инстасамки при скримере
This commit is contained in:
parent
c242ba9a0b
commit
05576b1041
|
|
@ -5,24 +5,6 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
@keyframes koshka_dancing {
|
||||
100% {
|
||||
bottom: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hand_dancing {
|
||||
100% {
|
||||
bottom: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes knife_dancing {
|
||||
100% {
|
||||
bottom: calc(-273px + 88px + 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--button-light-red-active: #eee4e4;
|
||||
|
|
@ -58,7 +40,6 @@
|
|||
-moz-user-select : none;
|
||||
-ms-user-select : none;
|
||||
user-select : none;
|
||||
pointer-events : none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
|
@ -103,52 +84,54 @@ aside {
|
|||
div#wrap {
|
||||
margin-top: -394px;
|
||||
margin-left: 50vw;
|
||||
height: 394px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div#wrap>img#masha {
|
||||
z-index: 1500;
|
||||
bottom: 0px;
|
||||
div#wrap>a>img#masha {
|
||||
z-index: 800;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 333px;
|
||||
height: 394px;
|
||||
position: relative;
|
||||
animation-duration : 1s;
|
||||
cursor: pointer;
|
||||
animation-direction : alternate;
|
||||
animation-name : koshka_dancing;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: cubic-bezier(.65,.05,.36,1);
|
||||
}
|
||||
|
||||
div#wrap>img#hand{
|
||||
z-index: 500;
|
||||
left: -30px;
|
||||
bottom: -5px;
|
||||
width: 70px;
|
||||
height: 88px;
|
||||
:is(div#wrap>a>img#masha, div#wrap>a>#masha_hand):hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
div#wrap>a>#masha_hand {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
animation-duration : .8s;
|
||||
cursor: pointer;
|
||||
animation-direction : alternate;
|
||||
animation-name : hand_dancing;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: cubic-bezier(.65,.05,.36,1);
|
||||
}
|
||||
|
||||
div#wrap>img#knife {
|
||||
div#wrap>a>#masha_hand>img#hand{
|
||||
z-index: 500;
|
||||
left: -30px;
|
||||
bottom: -5px;
|
||||
width: 70px;
|
||||
height: 88px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div#wrap>a>#masha_hand>img#knife {
|
||||
z-index: 100500;
|
||||
left: calc(-112px + 70px - 40px);
|
||||
bottom: calc(-273px + 88px + 35px);
|
||||
width: 112px;
|
||||
height: 273px;
|
||||
position: absolute;
|
||||
animation-duration : .8s;
|
||||
animation-direction: alternate;
|
||||
animation-name : knife_dancing;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: cubic-bezier(.65,.05,.36,1);
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
|
|||
|
|
@ -1,65 +1,108 @@
|
|||
"use strict";
|
||||
|
||||
class troller {
|
||||
static what = {
|
||||
constructor() {
|
||||
this.what = {
|
||||
// HTML-элемент с изображением
|
||||
sound: document.getElementById("troller_sound_what"),
|
||||
|
||||
// HTML-элемент со звуком
|
||||
image: document.getElementById("troller_image_what"),
|
||||
|
||||
enable() {
|
||||
document.body.onmouseleave = function () {
|
||||
// if (Math.random() > 0.90) {
|
||||
// 10%
|
||||
|
||||
troller.what.start();
|
||||
// }
|
||||
};
|
||||
|
||||
document.body.onmouseenter = function () {
|
||||
troller.what.end();
|
||||
};
|
||||
document.body.onmouseleave = () => this.start();
|
||||
document.body.onmouseenter = () => this.end();
|
||||
},
|
||||
disable() {
|
||||
document.body.onmouseleave = document.body.onmouseenter = undefined;
|
||||
},
|
||||
start() {
|
||||
// Отображение изображения
|
||||
document.getElementById("troller_image_what").classList.add("active");
|
||||
this.image.classList.add("active");
|
||||
|
||||
// Проигрывание звука
|
||||
troller.what.play();
|
||||
this.play();
|
||||
|
||||
// Остановка воспроизведения инстасамки
|
||||
if (this.core.instasamka.initialized) this.core.instasamka.pause();
|
||||
},
|
||||
end() {
|
||||
// Сокрытие изображения
|
||||
document.getElementById("troller_image_what").classList.remove("active");
|
||||
this.image.classList.remove("active");
|
||||
|
||||
// Возобновление воспроизведения инстасамки
|
||||
if (this.core.instasamka.initialized) this.core.instasamka.play();
|
||||
|
||||
// Остановка звука
|
||||
document.getElementById("troller_sound_what").pause();
|
||||
this.sound.pause();
|
||||
},
|
||||
single(event = "onmouseleave") {
|
||||
if (typeof event === "string") {
|
||||
// Получены обязательные входные параметры
|
||||
|
||||
// Отображение изображения
|
||||
document.getElementById("troller_image_what").classList.add("active");
|
||||
this.image.classList.add("active");
|
||||
|
||||
// Проигрывание звука
|
||||
troller.what.play();
|
||||
this.play();
|
||||
|
||||
document.body[event] = function () {
|
||||
troller.what.end();
|
||||
this.end();
|
||||
|
||||
document.body[event] = undefined;
|
||||
};
|
||||
}
|
||||
},
|
||||
play() {
|
||||
// Инициализация элемента со звуком
|
||||
const what_sound = document.getElementById("troller_sound_what");
|
||||
|
||||
// Воспроизведение звука
|
||||
what_sound.currentTime = 0;
|
||||
what_sound.play();
|
||||
this.sound.currentTime = 0;
|
||||
this.sound.play();
|
||||
}
|
||||
};
|
||||
|
||||
static vk() {
|
||||
this.instasamka = {
|
||||
// HTML-элемент с аудиозаписью
|
||||
sound: document.getElementById("troller_sound_instasamka"),
|
||||
|
||||
initialized: false,
|
||||
|
||||
play(time) {
|
||||
if (this.sound instanceof HTMLElement) {
|
||||
// Найден звук
|
||||
|
||||
// Инициализация инстасамки
|
||||
if (!this.initialized) this.initialized = true;
|
||||
|
||||
// Инициализация временной метки для воспроизведения
|
||||
if (typeof time === 'number') this.sound.currentTime = time;
|
||||
|
||||
// Воспроизведение звука
|
||||
this.sound.play();
|
||||
} else {
|
||||
// Не найден звук (подразумевается)
|
||||
|
||||
console.log('[mirzaev] [troller] Не удалось найти песню инстасамки');
|
||||
}
|
||||
},
|
||||
pause() {
|
||||
if (this.sound instanceof HTMLElement) {
|
||||
// Найден звук
|
||||
|
||||
// Остановка воспроизведения звука
|
||||
this.sound.pause();
|
||||
} else {
|
||||
// Не найден звук (подразумевается)
|
||||
|
||||
console.log('[mirzaev] [troller] Не удалось найти песню инстасамки');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// Инициализация ссылок на ядро
|
||||
this.what.core = this.instasamka.core = this;
|
||||
}
|
||||
|
||||
vk() {
|
||||
setInterval(function () {
|
||||
const sound = document.getElementById("troller_sound_vk");
|
||||
|
||||
|
|
@ -73,7 +116,7 @@ class troller {
|
|||
}, 85000);
|
||||
}
|
||||
|
||||
static whatsapp() {
|
||||
whatsapp() {
|
||||
setInterval(function () {
|
||||
const sound = document.getElementById("troller_sound_whatsup");
|
||||
|
||||
|
|
@ -87,7 +130,7 @@ class troller {
|
|||
}, 125000);
|
||||
}
|
||||
|
||||
static iphone() {
|
||||
iphone() {
|
||||
setInterval(function () {
|
||||
const sound = document.getElementById("troller_sound_iphone");
|
||||
|
||||
|
|
@ -100,25 +143,6 @@ class troller {
|
|||
}
|
||||
}, 265000);
|
||||
}
|
||||
|
||||
static instasamka = {
|
||||
play(time) {
|
||||
// Инициализация элемента со звуком
|
||||
const sound = document.getElementById("troller_sound_instasamka");
|
||||
|
||||
if (sound instanceof HTMLElement) {
|
||||
// Найден звук
|
||||
|
||||
// Воспроизведение звука
|
||||
sound.currentTime = time ?? Math.random() * 100;
|
||||
sound.play();
|
||||
} else {
|
||||
// Не найден звук (подразумевается)
|
||||
|
||||
console.log('[mirzaev] [troller] Не удалось найти песню инстасамки');
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
document.dispatchEvent(
|
||||
|
|
|
|||
|
|
@ -3,9 +3,28 @@
|
|||
|
||||
{% block body %}
|
||||
<div id="wrap" class="unselectable">
|
||||
<img id="masha" src="/images/photo_with_kitten.png" alt="Кошка Маша">
|
||||
<img id="hand" src="/images/photo_with_hand.png" alt="я помню бебра большой">
|
||||
<img id="knife" src="/images/photo_with_knife.png" alt="почему адблок сучара банит мои картинки">
|
||||
<style>
|
||||
@keyframes koshka_dancing {
|
||||
100% {
|
||||
bottom: -{{ random(15, 40) }}px;
|
||||
left: {{ random(-5, 5) }}px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hand_dancing {
|
||||
100% {
|
||||
bottom: -{{ random(10, 22) }}px;
|
||||
left: {{ random(-20, 20) }}px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<a href="https://vk.me/join/gbi_1CbxQrWPZsgQsKMO/_GpWEOYy1XWpSU=">
|
||||
<img id="masha" style="animation-duration: {{ random(8, 10) / 10 }}s" src="/images/photo_with_kitten.png" alt="Кошка Маша" ondragstart="return false">
|
||||
<div id="masha_hand" style="animation-duration: {{ random(8, 10) / 10 }}s">
|
||||
<img id="hand" src="/images/photo_with_hand.png" alt="я помню бебра большой" ondragstart="return false">
|
||||
<img id="knife" src="/images/photo_with_knife.png" alt="почему адблок сучара банит мои картинки" ondragstart="return false">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<header>
|
||||
<h1 class="unselectable">ПРАВИЛА БЕСЕДЫ</h1>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
</ol>
|
||||
<div class="row separated">
|
||||
<button
|
||||
onclick="troller.instasamka.play(); this.parentElement.parentElement.parentElement.remove();">Прочитал</button>
|
||||
<button onclick="troller.what.play(); alert('ты идиот?'); this.disabled = true">Не прочитал</button>
|
||||
onclick="bebra.instasamka.play(Math.random() * 100); this.parentElement.parentElement.parentElement.remove();">Прочитал</button>
|
||||
<button onclick="bebra.what.play(); alert('ты идиот?'); this.disabled = true">Не прочитал</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -8,37 +8,38 @@
|
|||
{% if troller.vk %}
|
||||
<audio id="troller_sound_vk" class="hide" src="/sounds/vk.mp3" preload="auto"></audio>
|
||||
<script>
|
||||
document.addEventListener('troller.loaded', function (e) {
|
||||
// Загружен документ с классом шутника
|
||||
document.addEventListener('troller.initialized', function () {
|
||||
// Инициализирован шутник
|
||||
|
||||
// Активация интервального воспроизведения звука сообщения ВКонтакте
|
||||
e.detail.troller.vk();
|
||||
bebra.vk();
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% if troller.whatsapp %}
|
||||
<audio id="troller_sound_whatsup" class="hide" src="/sounds/whatsup.mp3" preload="auto"></audio>
|
||||
<script>
|
||||
document.addEventListener('troller.loaded', function (e) {
|
||||
// Загружен документ с классом шутника
|
||||
document.addEventListener('troller.initialized', function () {
|
||||
// Инициализирован шутник
|
||||
|
||||
// Активация интервального воспроизведения звука сообщения WhatsApp
|
||||
e.detail.troller.whatsapp();
|
||||
bebra.whatsapp();
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% if troller.iphone %}
|
||||
<audio id="troller_sound_iphone" class="hide" src="/sounds/iphone.mp3" preload="auto"></audio>
|
||||
<script>
|
||||
document.addEventListener('troller.loaded', function (e) {
|
||||
// Загружен документ с классом шутника
|
||||
document.addEventListener('troller.initialized', function () {
|
||||
// Инициализирован шутник
|
||||
|
||||
// Активация интервального воспроизведения звука сообщения iPhone
|
||||
e.detail.troller.iphone();
|
||||
bebra.iphone();
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
<audio id="troller_sound_instasamka" class="hide" src="/sounds/instasamka/{{ troller.instasamka ?? 3 }}.mp3" preload="auto" loop="true"></audio>
|
||||
<audio id="troller_sound_instasamka" class="hide" src="/sounds/instasamka/{{ troller.instasamka ?? 3 }}.mp3"
|
||||
preload="auto" loop="true"></audio>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
|
|
@ -47,11 +48,20 @@
|
|||
|
||||
{% block js_init %}
|
||||
<script>
|
||||
// Инициализация переменной шутника в общей области видимости
|
||||
let bebra;
|
||||
|
||||
document.addEventListener('troller.loaded', function (e) {
|
||||
// Загружен документ с классом шутника
|
||||
|
||||
// Инициализация шутника
|
||||
bebra = new e.detail.troller;
|
||||
|
||||
// Вызов события о том, что шутник инициализирован
|
||||
document.dispatchEvent(new CustomEvent("troller.initialized"));
|
||||
|
||||
// Активация изображения при потере фокуса с окна
|
||||
e.detail.troller.what.enable();
|
||||
bebra.what.enable();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue