Украшения на Хэллоуин 👻

Настройка Компонент темы
, ,
1
:discourse2: Краткое описание Halloween Decorations добавит немного жуткого настроения на ваш форум в этот праздничный сезон!
:eyeglasses: Предпросмотр Предпросмотр на Discourse Theme Creator
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/discourse-halloween-decorations
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Особенности

:information_source: Этот компонент темы отображается только в настольной версии. :desktop_computer:

Этот компонент имеет три эффекта:

  • Анимация летучих мышей
  • Паутина по обеим сторонам
  • Анимация загрузки в виде тыквы

Счастливого Хэллоуина! :ghost: :spider_web:

:discourse2: Хостинг у нас? Компоненты тем доступны для использования на наших тарифных планах Standard, Business и Enterprise.

37 лайков
Customizing your site with existing theme components
2

Это так круто. Спасибо!

2 лайка
3

3 сообщения были перенесены в новую тему: Где тыква?

4

Это всё ещё только для настольных компьютеров?

1 лайк
5

Да, так и есть.

Я отмечу это в первом сообщении. Спасибо.

2 лайка
6

Это изображение стилизованной иллюстрации кота на однотонном синем фоне. (Подпись сгенерирована ИИ)
Это изображение стилизованной иллюстрации кота на однотонном синем фоне. (Подпись сгенерирована ИИ)1263×886 80.4 KB

Я думаю, что можно реализовать анимацию открытия экрана при клике на форум, которая также будет скрывать контент в обновителе.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #custom-video-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #2cb9e4;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: visibility 0s 1s, opacity 1s linear; /* Добавить эффект перехода */
      visibility: visible;
      opacity: 1;
    }

    #custom-video {
      width: auto; /* Установить ширину 100% */
      height: auto; /* Высота подстраивается автоматически */
    }
  </style>
</head>
<body>
  <div id="custom-video-container">
    <video id="custom-video" autoplay muted>
      <source src="https://www.justnainai.com/uploads/default/original/2X/e/e4faa6e98fd8890bbd33a24ef27f63cbb30a9d16.mp4" type="video/mp4">
    </video>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const videoContainer = document.getElementById('custom-video-container');
      const video = document.getElementById('custom-video');

      video.addEventListener('ended', () => {
        setTimeout(() => {
          videoContainer.style.visibility = 'hidden';
          videoContainer.style.opacity = '0';
        }, 10); // Скрыть через 3 секунды после окончания видео
      });
    });
  </script>
</body>
</html>
1 лайк
7

Мои участники в восторге — просто отлично сделано. Ничего навязчивого, ровно в меру. Анимация с тыквой такая быстрая, что почти кажется, будто тебе мерещится — lol. Мои пользователи с мобильных устройств очень разочарованы — lol, они тоже хотят этого! И мой кот заметил летучих мышей! Надеюсь, мы сможем ожидать чего-то ко всем праздникам: День ветеранов, День благодарения, Рождество, Новый год, День святого Валентина, День святого Патрика, Пасха, День поминовения, 4 июля, День труда и так далее. А также забавные дополнения для времени между праздниками: падающий снег, цветы, пляж, осенние листья и тому подобное.

Кот внимательно смотрит на экран компьютера с открытым веб-браузером, где отображается красочный список тем закладок и чёрный значок паука. (Подпись сгенерирована ИИ)
Кот внимательно смотрит на экран компьютера с открытым веб-браузером, где отображается красочный список тем закладок и чёрный значок паука. (Подпись сгенерирована ИИ)261×634 57.1 KB

3 лайка
8

Привет, @famousamos.1 :wave: добро пожаловать в Discourse Meta :slight_smile:

У нас также есть:

6 лайков
9

Ура! Мои участники будут в восторге — вы же все знаете, что они всегда ждут весёлых украшений, верно?? lol

1 лайк
10

Разве что если они используют мобильные устройства… ну, кто-то может взволноваться, увидев несколько летучих мышей и больше ничего.

Это должно быть помечено тегом desktop, так как на мобильных устройствах это не работает.

2 лайка
11

Это верно — мои мобильные участники пока не могут видеть эти вещи [пока]

2 лайка
12

Можно ли настроить активацию в определённые периоды? Например, чтобы это украшение появлялось только на Хэллоуин каждый год.