XF 1.5 Живая шапка форума

[Len]

Вообще есть идеи как реализовать такую же шапку форума?

Для просмотра этого контента нам потребуется ваше согласие на установку файлов cookie третьих лиц.
Более подробную информацию можно найти на нашей странице cookie.

Принимать файлы cookie третьих лиц

Живой оригинал можно посмотреть на сайте

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

(не реклама..) Просто зайдите на сайт и внизу выберите тему Animate
Знаю, что это IPB но вить на xenForo тоже можно это реализовать?

 

[Exile]

Просто зайдите на сайт

А просто нажать правую кнопку не пробовали? PNG с анимацией по кругу.

 

[Len]

Exile, не пробовал, увы не все такие крутые как ты

Exile, мне бы все, в подробностях

 

[argument]

Exile, не пробовал, увы не все такие крутые как ты

Exile, мне бы все, в подробностях

Поддерживаю, тоже интересно знать, как реализовать.

 

[Time]

Делаете свой анимационный логотип, заливаете в корень сайта и меняете путь к нему
В настройках стиля

 

[Skaiman]

Time, да то ж не то :-)
Надо в шаблоне header добавить классы, просто заменить все, ну или посмотреть как у вас :-) и добавить:

<xen:edithint template="header.css" />

<xen:hook name="header">
<div id="header" class="animateBack">
<div class="animateFront">
    <xen:include template="logo_block" />
    <xen:include template="navigation" />
    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</div>
</xen:hook>

А в header.css стили, в самый низ или в EXTRA.css :

@keyframes headerAnimate {
0% {
    background-position: 0 50%;
}
100% {
    background-position: -1584px 50%;
}
}
@keyframes headerAnimate {
0% {
    background-position: 0 50%;
}
100% {
    background-position: -1584px 50%;
}
}
@keyframes headerAnimateBack {
0% {
    background-position: 0 50%;
}
100% {
    background-position: 1920px 50%;
}
}
@keyframes headerAnimateBack {
0% {
    background-position: 0 50%;
}
100% {
    background-position: 1920px 50%;
}
}
.animateBack {
    animation: 200s linear 0s normal none infinite running headerAnimateBack;
    background-image: url("http://ipsfocus.net/4x/uploads/set_resources_11/005d20f304c7929cbfdb3fe61d088022_headerBottom.jpg");
    background-position: 0 50%;
    background-repeat: repeat-x;
}
.animateFront {
    animation: 150s linear 0s normal none infinite running headerAnimate;
    background-image: url("http://ipsfocus.net/4x/uploads/set_resources_11/005d20f304c7929cbfdb3fe61d088022_headerTop.png");
    background-position: 0 50%;
    background-repeat: repeat-x;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.15) inset;
    padding-bottom: 10px;
}

В этом классе надо задать приоритет, а то не видно точек :-)

.animateBack {
    animation: 200s linear 0s normal none infinite running headerAnimateBack!important;
    background-image: url("http://ipsfocus.net/4x/uploads/set_resources_11/005d20f304c7929cbfdb3fe61d088022_headerBottom.jpg")!important;
    background-position: 0 50%;
    background-repeat: repeat-x;
}

Собрал в дополнение, есть возможность отключать/включать в разных стилях

 

[qpi3ik]

Time, да то ж не то :-)
Надо в шаблоне header добавить классы, просто заменить все, ну или посмотреть как у вас :-) и добавить:

<xen:edithint template="header.css" />

<xen:hook name="header">
<div id="header" class="animateBack">
<div class="animateFront">
    <xen:include template="logo_block" />
    <xen:include template="navigation" />
    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</div>
</xen:hook>

А в header.css стили, в самый низ или в EXTRA.css :

@keyframes headerAnimate {
0% {
    background-position: 0 50%;
}
100% {
    background-position: -1584px 50%;
}
}
@keyframes headerAnimate {
0% {
    background-position: 0 50%;
}
100% {
    background-position: -1584px 50%;
}
}
@keyframes headerAnimateBack {
0% {
    background-position: 0 50%;
}
100% {
    background-position: 1920px 50%;
}
}
@keyframes headerAnimateBack {
0% {
    background-position: 0 50%;
}
100% {
    background-position: 1920px 50%;
}
}
.animateBack {
    animation: 200s linear 0s normal none infinite running headerAnimateBack;
    background-image: url("http://ipsfocus.net/4x/uploads/set_resources_11/005d20f304c7929cbfdb3fe61d088022_headerBottom.jpg");
    background-position: 0 50%;
    background-repeat: repeat-x;
}
.animateFront {
    animation: 150s linear 0s normal none infinite running headerAnimate;
    background-image: url("http://ipsfocus.net/4x/uploads/set_resources_11/005d20f304c7929cbfdb3fe61d088022_headerTop.png");
    background-position: 0 50%;
    background-repeat: repeat-x;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.15) inset;
    padding-bottom: 10px;
}

В этом классе надо задать приоритет, а то не видно точек :-)

.animateBack {
    animation: 200s linear 0s normal none infinite running headerAnimateBack!important;
    background-image: url("http://ipsfocus.net/4x/uploads/set_resources_11/005d20f304c7929cbfdb3fe61d088022_headerBottom.jpg")!important;
    background-position: 0 50%;
    background-repeat: repeat-x;
}

Собрал в дополнение, есть возможность отключать/включать в разных стилях

Как настроить ширину? Что бы не вылазила анимация за пределы?

 

[Skaiman]

Как настроить ширину? Что бы не вылазила анимация за пределы?
Посмотреть вложение 38740

Была задача сделать так как есть, а уж дальнейшие изыскания как нибудь сами :) Занимаетесь сайтами, значит надо изучать html и css, не все на блюдечке будет преподносится.

 

[qpi3ik]

Была задача сделать так как есть, а уж дальнейшие изыскания как нибудь сами :-) Занимаетесь сайтами, значит надо изучать html и css, не все на блюдечке будет преподносится.

Я вас понимаю но нет времени учить html и css, так ка робота занимает очень много времени.
И нет времени сидеть и учить html и css.
Я бы с радостью занялся изучением html и css.