Объявление для XenForo 2 с обратным отсчетом до нового года

XenForo 2.х.х Объявление для XenForo 2 с обратным отсчетом до нового года 1.0

Нет прав для скачивания
Объявление для XenForo 2 с обратным отсчетом до нового года
Обзор История версий Обсуждение
Совместимость с XenForo
  1. 2.0.x
  2. 2.1.x
  3. 2.2.x
Переходим по ссылке admin.php?notices создаем объявление и добавляем код в сообщение:
HTML: 
<body onresize="resizeCanvas()">
    <canvas id="canvas" height="600"></canvas>
    <script>

      function Animation(rate) {
        this.LastTime = 0;
        this.Rate = rate;
        this.update = function () {};
        this.render = function () {};
      }

      Animation.prototype.run = function(time) {
        if((time - this.LastTime) > this.Rate ) {
          this.LastTime = time;
          this.update();
        }
        this.render();
      };

      var layer1 = new Animation(30);
      layer1.sx = 0;
      layer1.sy = 0;
      layer1.w = 1024;
      layer1.h = 600;
      layer1.render = function () {
        var x = 0;
        var screen_w = canvas.width;
        while(x < screen_w) {
          var draw_w = Math.min(this.w , screen_w - x);
          ctx.drawImage(art, this.sx, this.sy, draw_w, this.h,
                              x, 0, draw_w, this.h);
          x += this.w;
        }
        //the moon
        ctx.drawImage(art, 1024,0,300,300,
                            100,0,300,300);
      };

      var layer2 = new Animation(30);
      layer2.sx = 0;
      layer2.sy = 600;
      layer2.w = 1664;
      layer2.h = 600;
      layer2.dx = 0;
      layer2.speed = 1;
      layer2.update = function () {
        this.dx += this.speed;
        if(this.dx > this.w) {
          this.dx -= this.w;
        }
      };
      layer2.render = function() {
        var x = 0;
        var screen_w = canvas.width;
        if((this.w - this.dx) > 0) {
          ctx.drawImage(art, this.sx + this.dx, this.sy, this.w - this.dx, this.h,
                          x,0,this.w - this.dx, this.h);
          x += this.w - this.dx;
        }
        while(x < screen_w) {
          var draw_w = Math.min(this.w , screen_w - x);
          ctx.drawImage(art, this.sx, this.sy, draw_w, this.h,
                              x, 0, draw_w, this.h);
          x += this.w;
        }
      };

      var layer3 = new Animation(30);
      layer3.sx = 0;
      layer3.sy = 1200;
      layer3.w = 1664;
      layer3.h = 600;
      layer3.dx = 0;
      layer3.speed = 3;
      layer3.update = layer2.update;
      layer3.render = layer2.render;

      var layer4 = new Animation(30);
      layer4.sx = 0;
      layer4.sy = 1800;
      layer4.w = 1664;
      layer4.h = 600;
      layer4.dx = 0;
      layer4.speed = 6;
      layer4.update = layer2.update;
      layer4.render = layer2.render;

      var layer5 = new Animation(30);
      layer5.sx = 0;
      layer5.sy = 2400;
      layer5.w = 1664;
      layer5.h = 600;
      layer5.dx = 0;
      layer5.speed = 10;
      layer5.update = layer2.update;
      layer5.render = layer2.render;

      var ded_moroz = new Animation(50);
      ded_moroz.frame_num = 0;

      ded_moroz.get_frame = function() {
        if(this.frame_num > 7) {
          return {x:((this.frame_num - 8)*150),y:3150};
        } else {
          return {x:(this.frame_num*150),y:3000};
        }
      };
      ded_moroz.update = function() {
        this.frame_num++;
        if(this.frame_num > 15) this.frame_num = 0;
      };
      ded_moroz.render = function() {
        var frame = this.get_frame();
        ctx.drawImage(art,frame.x,frame.y,150,150,
                          150,450,150,150);
      };

      function MainLoop(time) {
        layer1.run(time);
        layer2.run(time);
        layer3.run(time);
        layer4.run(time);
        layer5.run(time);
        ded_moroz.run(time);
        requestAnimationFrame(MainLoop);
      }

      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      var art = new  Image();

      art.onload = function() {
        requestAnimationFrame(MainLoop);
      }

      art.src = "art.png";

      resizeCanvas();

      function resizeCanvas() {
        canvas.width = window.innerWidth - 40;
      }
        /*----------------------*/
        const year = new Date().getFullYear();
const fourthOfJuly = new Date(year, 1,1).getTime();
const fourthOfJulyNextYear = new Date(year + 1, 0, 1).getTime();
const month = new Date().getMonth();

// countdown
let timer = setInterval(function() {

  // get today's date
  const today = new Date().getTime();

  // get the difference
  let diff;
  if(month > 6) {
    diff = fourthOfJulyNextYear - today;
  } else {
    diff = fourthOfJuly - today;
  }
  // math
  let days = Math.floor(diff / (1000 * 60 * 60 * 24));
  let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // display
  document.getElementById("timer").innerHTML =
    "<div class=\"days\"> \
  <div class=\"numbers\">" + days + "</div>дней</div> \
<div class=\"hours\"> \
  <div class=\"numbers\">" + hours + "</div>часов</div> \
<div class=\"minutes\"> \
  <div class=\"numbers\">" + minutes + "</div>минут</div> \
<div class=\"seconds\"> \
  <div class=\"numbers\">" + seconds + "</div>секунд</div> \
</div>";

}, 1000);

    </script>
  </body>
<div class="container">
  <div class="balloon white">
    <div class="star-red"></div>
  <div class="face">
    <div class="eye"></div>
    <div class="mouth happy"></div>
  </div>
  <div class="triangle"></div>
  <div class="string"></div>
</div>

<div class="balloon red">
  <div class="star"></div>
  <div class="face">
    <div class="eye"></div>
    <div class="mouth happy"></div>
  </div>
  <div class="triangle"></div>
  <div class="string"></div>
</div>

<div class="balloon blue">
  <div class="star"></div>
  <div class="face">
    <div class="eye"></div>
    <div class="mouth happy"></div>
  </div>
  <div class="triangle"></div>
  <div class="string"></div>
</div>
  <div id="timer"></div>
</div>
<div class="sp-container">
    <div class="sp-content">
        <div class="sp-globe"></div>
        <h2 class="frame-1">СЧАСТЬЯ</h2>
        <h2 class="frame-2">ЗДОРОВЬЯ</h2>
        <h2 class="frame-3">БЛАГОПОЛУЧИЯ</h2>
        <h2 class="frame-4">В НОВОМ ГОДУ!</h2>
        <h2 class="frame-5">
            <span>С новым</span>
            <span>2023</span>
            <span>годом!</span>
        </h2>
    </div>
</div>
<style>
     canvas {
    width: 100%;
}
.container {
    position: absolute;
    margin: auto;
    overflow: hidden;
    width: 650px;
    top: 0px;
    right: 0px;
}

#timer {
  color: #F6F4F3;
  text-align: center;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-size: 0.7em;
  letter-spacing: 5px;
  margin-top: 24%;
}

.days, .hours, .minutes, .seconds {
  display: inline-block;
  padding: 10px;
  width: 100px;
  border-radius: 5px;
}

.days {
  background: #EF2F3C;
}

.hours {
  background: #F6F4F3;
  color: #183059;
}

.minutes {
  background: #276FBF;
}

.seconds {
  background: #F0A202;
}
.numbers {
  font-family: "Montserrat", sans-serif;
  color: #183059;
  font-size: 4em;
}

.white {
  position: absolute;
  background: #F6F4F3;
  height: 85px;
  width: 75px;
  left: 30%;
  top: 4%;
}
.white .triangle {
  border-bottom: 14px solid #F6F4F3;
}
.white .string {
  background: #F6F4F3;
  border: 1px solid #F6F4F3;
}

.red {
  position: absolute;
  background: #EF2F3C;
  left: 18%;
  top: 9%;
  height: 65px;
  width: 70px;
}
.red .triangle {
  border-bottom: 14px solid #EF2F3C;
}
.red .string {
  background: #EF2F3C;
  border: 1px solid #EF2F3C;
}

.blue {
  position: absolute;
  background: #276FBF;
  height: 80px;
  width: 80px;
  left: 56%;
  top: 5%;
}
.blue .triangle {
  border-bottom: 14px solid #276FBF;
}
.blue .string {
  background: #276FBF;
  border: 1px solid #276FBF;
}

.balloon {
  border: 1px solid #000;
  border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
  z-index: 2;
}

.eye {
  position: absolute;
  width: 7px;
  height: 7px;
  top: 40%;
  left: 22%;
  background: #000;
  border-radius: 50%;
}
.eye:after {
  content: "";
  left: 35px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000;
  position: absolute;
}

.mouth {
  position: absolute;
  top: 45%;
  left: 43%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.happy {
  border: 2px solid;
  border-color: transparent #000 #000 transparent;
  transform: rotate(45deg);
}

.triangle {
  position: absolute;
  left: 40%;
  bottom: -10%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

.string {
  position: absolute;
  height: 70px;
  width: 1px;
  left: 48%;
  top: 100%;
  z-index: -1;
}

.star {
  width: 20px;
  height: 20px;
  background: #F6F4F3;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star-red {
  width: 30px;
  height: 30px;
  margin-left: 51px;
  margin-top: -5px;
  background: #EF2F3C;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
    /*-----------------------------*/
h1.main, p.demos {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.sp-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    /*background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));*/
}
.sp-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 1000;
}
.sp-container h2 {
    position: absolute;
    top: 50%;
    line-height: 100px;
    height: 90px;
    margin-top: -50px;
    font-size: 90px;
    width: 100%;
    text-align: center;
    color: transparent;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
    -moz-animation: blurFadeInOut 3s ease-in backwards;
    -ms-animation: blurFadeInOut 3s ease-in backwards;
    animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
}
.sp-container h2.frame-2 {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}
.sp-container h2.frame-3 {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.sp-container h2.frame-4 {
    font-size: 200px;
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
}
.sp-container h2.frame-5 {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
    color: transparent;
    text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
    -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
    -moz-animation: blurFadeIn 1s ease-in 12s backwards;
    -ms-animation: blurFadeIn 3s ease-in 12s backwards;
    animation: blurFadeIn 3s ease-in 12s backwards;
    color: transparent;
    text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {
    -webkit-animation-delay: 13s;
    -moz-animation-delay: 13s;
    -ms-animation-delay: 13s;
    animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s;
}
.sp-globe {
    position: absolute;
    width: 282px;
    left: 50%;
    top: 50%;
    margin: -137px 0 0 -141px;
    -webkit-animation: fadeInBack 3.6s linear 14s backwards;
    -moz-animation: fadeInBack 3.6s linear 14s backwards;
    -ms-animation: fadeInBack 3.6s linear 14s backwards;
    animation: fadeInBack 3.6s linear 14s backwards;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
    -webkit-transform: scale(5);
    -moz-transform: scale(5);
    -o-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
}
/**/

@-webkit-keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -webkit-transform: scale(1.3);
    }
    20%, 75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        -webkit-transform: scale(0);
    }
}
@-webkit-keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -webkit-transform: scale(1.3);
    }
    50% {
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        -webkit-transform: scale(1.1);
    }
    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -webkit-transform: scale(1);
    }
}
@-webkit-keyframes fadeInBack {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
    50% {
        opacity: 0.4;
        -webkit-transform: scale(2);
    }
    100% {
        opacity: 0.2;
        -webkit-transform: scale(5);
    }
}
@-webkit-keyframes fadeInRotate {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(360deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
    }
}
/**/

@-moz-keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -moz-transform: scale(1.3);
    }
    20%, 75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -moz-transform: scale(1);
    }
    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        -moz-transform: scale(0);
    }
}
@-moz-keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -moz-transform: scale(1.3);
    }
    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -moz-transform: scale(1);
    }
}
@-moz-keyframes fadeInBack {
    0% {
        opacity: 0;
        -moz-transform: scale(0);
    }
    50% {
        opacity: 0.4;
        -moz-transform: scale(2);
    }
    100% {
        opacity: 0.2;
        -moz-transform: scale(5);
    }
}
@-moz-keyframes fadeInRotate {
    0% {
        opacity: 0;
        -moz-transform: scale(0) rotate(360deg);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1) rotate(0deg);
    }
}
/**/

@keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }
    20%, 75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        transform: scale(0);
    }
}
@keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }
    50% {
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }
}
@keyframes fadeInBack {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 0.4;
        transform: scale(2);
    }
    100% {
        opacity: 0.2;
        transform: scale(5);
    }
}
@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
</style>
Получаем следующий результат:
dfr61.gif

Картинку для объявления можно забрать из прикрепленного архива, при желании можно добавить надпись например "С новым годом" и т.д.
  • Мне нравится
Реакции: hacker
Автор
baltun
Скачиваний
1
Просмотры
534
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0
Обсудить ресурс Подробная информация

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ