[SVG] Отсчет до Нового 2017 Года 1.0.1

Георгий Шевченко · 13 Дек 2016

jenokizm,

Добавьте в CSS в конец

Код:

.svg-countdown-ng .santa .head .face .beard .nouse {
  background: red;
  box-shadow: inset -3px -3px 0px #de2f32;
}

И будет вам счастье)))

Alex1204 · 22 Дек 2016

А как сделать так, чтоб дед мороз был под кнопкой "Регистрация"? (а не над ней)
То бишь прописывался в шаблон forum_list сразу после <xen:edithint template="sidebar.css" />

vadimon · 28 Дек 2016

А время в этом дополнении берется из системного? А то как-то для разных часовых поясов будет не айс...

blad · 15 Ноя 2017

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

Hope · 17 Ноя 2017

В шаблоне svg_countdown_ng.js замените дату в строке: var targetDate = new Date("2017/01/01 00:00:00"); на нужную и в шаблоне svg_countdown_countdown в строке:

Код:

<xen:if is="{xen:time $serverTime, 'n'} >= 1 AND {xen:time $serverTime, 'j'} >= 1 AND {xen:time $serverTime, 'Y'} >= 2017">

Не забудьте поменять год.

rnuts · 20 Дек 2017

вопрос - у меня дедмороз над кружком и обрезанная шапка видна, как очередность слоев поменять?

и еще, как подтянуть до верхней границы? Чет уехало чуть чуть

Skaiman · 20 Дек 2017

Ну во первых надо понять почему дед мороз вылез :)

rnuts · 20 Дек 2017

хороший вопрос, опять стиль (ксенит) наложил свои корявые лапки??? =(((

Skaiman · 20 Дек 2017

ширина сайдбара какая?

rnuts · 20 Дек 2017

Skaiman, 250px

Skaiman · 20 Дек 2017

стандартно, делалось на дефолтном, правда год назад, уже не помню что там :) но вроде не было такого ни у кого. Скорее всего стиль менял, нагородил там черти чего :)

nictic123 · 21 Дек 2017

А у меня не идёт отсчёт(( Только дед мороз и поздравление, а отсчёта нет. Может, можно его как-то включить?

Hope · 21 Дек 2017

Если почитать посты выше, то всё будет супер.

rnuts · 25 Дек 2017

Skaiman, а можешь подсказать, какой кусок кода отвечает за круглую рамку?
я так пониманию это часть кода в svg_countdown_ng.css

может можно дописать строчку с принудительным положением выше всех слоев?

поправил добавив в класс санта z-index: 1

Код:

.svg-countdown-ng .santa {
    bottom: -20%;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    z-index: 1;

Skaiman · 25 Дек 2017

rnuts, проблема не в этом блоке, а в твоем кривом форуме :) значит только по месту подгонять (чего делать не буду, так на всякий случай) ищи другой вариант для сайдбара.

rnuts · 25 Дек 2017

Skaiman написал(а):
rnuts, проблема не в этом блоке, а в твоем кривом форуме :) значит только по месту подгонять (чего делать не буду, так на всякий случай) ищи другой вариант для сайдбара.

верю, но ни кривой форум, а кривой стиль уж тогда))
anyway, главное в круг его удалось загнать

xakmika · 13 Дек 2019

ребят я на xenforo 2 не могу найти, на других бортах нашел, а у нас нету

Matew · 13 Дек 2019

xakmika написал(а):
ребят я на xenforo 2 не могу найти, на других бортах нашел, а у нас нету

Очень интересно, но ничего не понятно

xakmika · 13 Дек 2019

Matew, что не понятного, такой же плагин есть на xenforo 2?

Skaiman · 14 Дек 2019

Для второй версии движка, создаем виджет HTML
Ключ виджета: countdown_new_year
Заголовок: Отсчет до Нового Года
Позиции для отображения: Список разделов: Боковая панель 0
Шаблон:

Код:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

<xf:css>
    .svg-countdown-ng {
        display: block;
        height: 220px;
        margin: 0 auto;
        position: relative;
        width: 220px;
    }

    .svg-countdown-ng .window {
        background: #a0d5d3;
        border: 10px solid #f8e7dc;
        border-radius: 50%;
        display: block;
        height: 200px;
        margin: 10px 0;
        overflow: hidden;
        position: relative;
        width: 200px;
    }

    .svg-countdown-ng .santa {
        bottom: -20%;
        left: 50%;
        position: absolute;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .svg-countdown-ng .santa .body {
        width: 190px;
        height: 210px;
        background: #de2f32;
        position: relative;
        border-radius: 50%;
        top: 0;
        -webkit-animation: bodyLaugh 4s linear infinite;
        animation: bodyLaugh 4s linear infinite;
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
    }

    .svg-countdown-ng .santa .body:before {
        content: " ";
        width: 7px;
        height: 7px;
        background: #f7be10;
        border-radius: 50%;
        position: absolute;
        top: 35%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        box-shadow: 0px -18px 0px #f7be10, 0px 18px 0px #f7be10;
    }

    .svg-countdown-ng .santa .head {
        z-index: 2;
        position: absolute;
        bottom: 90px;
        left: 50%;
        -webkit-animation: headLaugh 4s linear infinite;
        animation: headLaugh 4s linear infinite;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .svg-countdown-ng .santa .head .face {
        width: 120px;
        height: 130px;
        background: #edcab0;
        background: radial-gradient(#edcab0, #e9a982);
        border-radius: 50%;
        border: 3px solid #f8e7dc;
    }

    .svg-countdown-ng .santa .head .face .redhat .whitepart {
        position: absolute;
        left: 50%;
        top: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 90%;
        height: 32px;
        background: #f8e7dc;
        border-radius: 50px;
        z-index: 4;
        box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1);
    }

    .svg-countdown-ng .santa .head .face .redhat .redpart {
        width: 120px;
        height: 120px;
        background: #de2f32;
        position: absolute;
        top: -50px;
        left: 15px;
        border-radius: 50%;
        z-index: -1;
    }

    .svg-countdown-ng .santa .head .face .redhat .redpart:before {
        content: " ";
        width: 95px;
        height: 95px;
        position: absolute;
        left: 0;
        top: 12px;
        border-radius: 50%;
        box-shadow: inset -8px -1px 0px -5px rgba(0, 0, 0, 0.05);
    }

    .svg-countdown-ng .santa .head .face .redhat .redpart:after {
        content: " ";
        position: absolute;
        right: 0;
        top: 60px;
        background: #de2f32;
        width: 20px;
        height: 50px;
    }

    .svg-countdown-ng .santa .head .face .redhat .hatball {
        width: 38px;
        height: 38px;
        background: #f8e7dc;
        border-radius: 50%;
        z-index: 5;
        position: absolute;
        right: -20px;
        top: 40px;
        box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1);
    }

    .svg-countdown-ng .santa .head .face .eyes {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 57px;
    }

    .svg-countdown-ng .santa .head .face .eyes:before,
    .svg-countdown-ng .santa .head .face .eyes:after {
        content: " ";
        position: absolute;
        width: 15px;
        height: 9px;
        top: 0;
        border: 5px solid #a8744f;
        border-width: 0;
        border-top-width: 5px;
        border-radius: 50%;
    }

    .svg-countdown-ng .santa .head .face .eyes:before {
        left: -28px;
    }

    .svg-countdown-ng .santa .head .face .eyes:after {
        right: -28px;
    }

    .svg-countdown-ng .santa .head .face .beard {
        width: 55px;
        height: 55px;
        background: #f8e7dc;
        border-radius: 50%;
        position: absolute;
        bottom: -30px;
        left: 50%;
        -webkit-animation: beardLaugh 4s linear infinite;
        animation: beardLaugh 4s linear infinite;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .svg-countdown-ng .santa .head .face .beard:before,
    .svg-countdown-ng .santa .head .face .beard:after {
        content: " ";
        width: 80px;
        height: 80px;
        background: #f8e7dc;
        border-radius: 50%;
        position: absolute;
        bottom: 15px;
    }

    .svg-countdown-ng .santa .head .face .beard:before {
        left: -40px;
    }

    .svg-countdown-ng .santa .head .face .beard:after {
        right: -40px;
    }

    .svg-countdown-ng .santa .head .face .beard .nouse {
        width: 25px;
        height: 20px;
        border-radius: 50%;
        background: #edcab0;
        position: absolute;
        z-index: 3;
        box-shadow: inset -3px -3px 0px #e9a982;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        top: -42px;
    }

    .svg-countdown-ng .santa .head .face .beard .mouth {
        background: #a8744f;
        z-index: 3;
        position: absolute;
        width: 15px;
        height: 5px;
        border-bottom-right-radius: 80px 50px;
        border-bottom-left-radius: 80px 50px;
        left: 50%;
        top: 0;
        -webkit-animation: mouthLaugh 4s linear infinite;
        animation: mouthLaugh 4s linear infinite;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .svg-countdown-ng .santa .head .ears:before,
    .santa .head .ears:after {
        content: " ";
        width: 20px;
        height: 30px;
        border-radius: 50%;
        background: radial-gradient(#e9a982, #edcab0);
        position: absolute;
        top: 50%;
        z-index: -1;
    }

    .svg-countdown-ng .santa .head .ears:before {
        left: -8px;
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    .svg-countdown-ng .santa .head .ears:after {
        right: -8px;
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }

    @-webkit-keyframes bodyLaugh {
        0% {
            top: 0px;
        }

        2% {
            top: -3px;
        }

        4% {
            top: 0px;
        }

        8% {
            top: -3px;
        }

        10% {
            top: 0px;
        }

        12% {
            top: -3px;
        }

        14% {
            top: 0px;
        }

        18% {
            top: -3px;
        }

        20% {
            top: 0px;
        }

        22% {
            top: -3px;
        }

        24% {
            top: 0px;
        }

        28% {
            top: -3px;
        }

        30% {
            top: 0px;
        }

        100% {
            top: 0px;
        }
    }

    @keyframes bodyLaugh {
        0% {
            top: 0px;
        }

        2% {
            top: -3px;
        }

        4% {
            top: 0px;
        }

        8% {
            top: -3px;
        }

        10% {
            top: 0px;
        }

        12% {
            top: -3px;
        }

        14% {
            top: 0px;
        }

        18% {
            top: -3px;
        }

        20% {
            top: 0px;
        }

        22% {
            top: -3px;
        }

        24% {
            top: 0px;
        }

        28% {
            top: -3px;
        }

        30% {
            top: 0px;
        }

        100% {
            top: 0px;
        }
    }

    @-webkit-keyframes beardLaugh {
        0% {
            bottom: -28px;
        }

        2% {
            bottom: -30px;
        }

        4% {
            bottom: -28px;
        }

        8% {
            bottom: -30px;
        }

        10% {
            bottom: -28px;
        }

        12% {
            bottom: -30px;
        }

        14% {
            bottom: -28px;
        }

        18% {
            bottom: -30px;
        }

        20% {
            bottom: -28px;
        }

        22% {
            bottom: -30px;
        }

        24% {
            bottom: -28px;
        }

        28% {
            bottom: -30px;
        }

        30% {
            bottom: -28px;
        }

        100% {
            bottom: -28px;
        }
    }

    @keyframes beardLaugh {
        0% {
            bottom: -28px;
        }

        2% {
            bottom: -30px;
        }

        4% {
            bottom: -28px;
        }

        8% {
            bottom: -30px;
        }

        10% {
            bottom: -28px;
        }

        12% {
            bottom: -30px;
        }

        14% {
            bottom: -28px;
        }

        18% {
            bottom: -30px;
        }

        20% {
            bottom: -28px;
        }

        22% {
            bottom: -30px;
        }

        24% {
            bottom: -28px;
        }

        28% {
            bottom: -30px;
        }

        30% {
            bottom: -28px;
        }

        100% {
            bottom: -28px;
        }
    }

    @-webkit-keyframes headLaugh {
        0% {
            bottom: 83px;
        }

        45% {
            bottom: 83px;
        }

        50% {
            bottom: 90px;
        }

        92% {
            bottom: 90px;
        }

        98% {
            bottom: 83px;
        }

        100% {
            bottom: 83px;
        }
    }

    @keyframes headLaugh {
        0% {
            bottom: 83px;
        }

        45% {
            bottom: 83px;
        }

        50% {
            bottom: 90px;
        }

        92% {
            bottom: 90px;
        }

        98% {
            bottom: 83px;
        }

        100% {
            bottom: 83px;
        }
    }

    @-webkit-keyframes mouthLaugh {
        0% {
            width: 20px;
        }

        45% {
            width: 20px;
        }

        50% {
            width: 15px;
        }

        92% {
            width: 15px;
        }

        98% {
            width: 20px;
        }

        100% {
            width: 20px;
        }
    }

    @keyframes mouthLaugh {
        0% {
            width: 20px;
        }

        45% {
            width: 20px;
        }

        50% {
            width: 15px;
        }

        92% {
            width: 15px;
        }

        98% {
            width: 20px;
        }

        100% {
            width: 20px;
        }
    }

    .svg-countdown-countdown {
        text-align: center;
    }

    .svg-countdown-countdown #svg-countdown-ng {
        font-size: 35px;
        font-weight: 600;
        color: red;
        font-family: 'Roboto Condensed', sans-serif;
    }

    .svg-countdown-countdown #svg-countdown-ng div {
        display: inline-block;
        min-width: 60px;
    }

    .svg-countdown-countdown #svg-countdown-ng div span {
        display: block;
        color: rgb(160, 213, 211);
        font-size: 14px;
        text-transform: uppercase;
    }

    .svg-countdown-countdown .svg-countdown-txt {
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: rgb(222, 47, 50);
        text-align: center;
        padding: 10px 0 5px;
        text-transform: uppercase;
    }

    .svg-countdown-ng .santa .head .face .beard .nouse {
        background: red;
        box-shadow: inset -3px -3px 0px #de2f32;
    }
</xf:css>

<div class="block">
    <div class="block-container">
        <div class="svg-countdown-ng">
            <div class="window">
                <div class="santa">
                    <div class="head">
                        <div class="face">
                            <div class="redhat">
                                <div class="whitepart"></div>
                                <div class="redpart"></div>
                                <div class="hatball"></div>
                            </div>
                            <div class="eyes"></div>
                            <div class="beard">
                                <div class="nouse"></div>
                                <div class="mouth"></div>
                            </div>
                        </div>
                        <div class="ears"></div>
                    </div>
                    <div class="body"></div>
                </div>
            </div>
        </div>
        <div class="svg-countdown-countdown">
            <div class="svg-countdown-txt">До Нового Года:</div>
            <div id="svg-countdown-ng"></div>
        </div>
    </div>
</div>

<xf:js>
    function updateTimer() {
      future  = Date.parse("2020/01/01 00:00:00");
      now     = new Date();
      diff    = future - now;

      days  = Math.floor( diff / (1000*60*60*24) );
      hours = Math.floor( diff / (1000*60*60) );
      mins  = Math.floor( diff / (1000*60) );
      secs  = Math.floor( diff / 1000 );

      d = days;
      h = hours - days  * 24;
      m = mins  - hours * 60;
      s = secs  - mins  * 60;

      document.getElementById("svg-countdown-ng")
        .innerHTML =
          '<div>' + d + '<span>дней</span></div>' +
          '<div>' + h + '<span>часов</span></div>' +
          '<div>' + m + '<span>минут</span></div>' +
          '<div>' + s + '<span>секунд</span></div>' ;
    }
    setInterval('updateTimer()', 1000 );
</xf:js>

Галочка Расширенный режим

Еще можно заменить участок кода

Код:

            <div class="svg-countdown-txt">До Нового Года:</div>
            <div id="svg-countdown-ng"></div>

заменить на

Код:

            <xf:if is="{{ date($xf.time, 'n') }} >= 1 AND {{ date($xf.time, 'j') }} >= 1 AND {{ date($xf.time, 'Y') }} >= 2020">
                <div class="svg-countdown-txt">C Новым Годом!</div>
            <xf:else />
                <div class="svg-countdown-txt">До Нового Года:</div>
                <div id="svg-countdown-ng"></div>
            </xf:if>

То после наступления отсчет закончится и будет просто С Новым Годом

[SVG] Отсчет до Нового 2017 Года 1.0.1

Георгий Шевченко

Alex1204

vadimon

blad

Hope

rnuts

Skaiman

rnuts

Skaiman

rnuts

Skaiman

nictic123

Hope

rnuts

Skaiman

rnuts

xakmika

Matew

xakmika

Skaiman

Похожие темы

Мы ценим вашу конфиденциальность