• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Gráficos Fondo de cabecera deslizante - Como hacer esto?

ManuTdi

XenForoUser
Mensajes
1.189
Puntuación de reacciones
405
Puntos
583
País
España
Versión de XenForo
2.1.x
Dando vueltas por internet... Ese mundo tan desconocido... He encontrado una web y me he enamorado de la cabecera en movimiento, como se podría hacer eso? Tengo unas buenas ideas si consigo hacerlo
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Añade a la plantilla page_container_js_head, abajo del todo
Insertar CODE, HTML o PHP:
<script type="text/javascript">

$(document).ready(function($){

var backgroundpos = 0;
var offset = 1;
function scrollbackground() {
offset = (offset < 1) ? offset + (backgroundpos - 1) : offset - 1;
$('.branding').css("background-position", + offset + "px 0");
setTimeout(function() {
scrollbackground();
}, 100
);
}
scrollbackground();

});

</script>
Añade a EXTRA.css, al final del todo

Insertar CODE, HTML o PHP:
.branding {

    background: url("styles/default/xenforo/xenfocus/banner_bg.jpg") repeat-x scroll left top #000000;
    height: 200px;
}

.pageWidth {

    margin: 0 auto;
    min-width: 980px;
    width: 90%;
}
En la plantilla header, busca
Insertar CODE, HTML o PHP:
<xen:hook name="header">
<div id="header">
    <xen:include template="logo_block" />
    <xen:include template="navigation" />
    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</xen:hook>
y cámbialo por
Insertar CODE, HTML o PHP:
<xen:hook name="header">
<div id="header">
<div class="branding">

<div class="banner_texture">
    <xen:include template="logo_block" />
    <xen:include template="navigation" />
    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</div>
</div>
</xen:hook>
PCA -> Aspecto -> Propiedades del estilo -> estilo a editar -> Cabecera y navegación -> Encabezado -> Fondo ->
Color: sin valor
Imagen de fondo: ./styles/default/xenforo/xenfocus/banner_bg.jpg
Repetir: Sin repetición.
Posición: déjalo en blanco.
GUARDA los cambios

Gracias a onimua por dejarme el js en http://xenforo.com/community/threads/as-is-this-done.21929/#post-276465

Salud2
 

Adjuntos

  • banner_bg.jpg
    banner_bg.jpg
    34,8 KB · Visitas: 22
  • banner_texture.png
    banner_texture.png
    274 bytes · Visitas: 14

ManuTdi

XenForoUser
Mensajes
1.189
Puntuación de reacciones
405
Puntos
583
País
España
Versión de XenForo
2.1.x
Cuando pruebe comento. Gracias
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Primer post actualizado con las modificaciones definitivas.

Funciona como podrás observar.

Salud2
 
Arriba