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

Настройка Компонент темы
, ,
1

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

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

Возможности

: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

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