In urmatorul tutorial veti invata cum sa animati fundalul headerului exact ca pe urmatorul forum de teste: http://testephpbb2fd.forumgratuit.ro/

Sunt cativa pasi simpli, pe care oricine ii poate face. Sa trecem la treaba!

Mai intai trebuie sa punem ca si fundal headerului o imagine care se poate repeta. Eu am sa folosesc imaginea urmatoare: https://2img.net/h/oi44.tinypic.com/240x16v.jpg


Mergem in PA - Afisare - Culori - Foaia de stil CSS si introducem urmatorul cod:

Code: Selecțati Conținutul

#pun-intro{
background: url(https://2img.net/h/oi44.tinypic.com/240x16v.jpg) repeat;
}
Acum ca am pus background headerului, hai sa il animam.
Mergem in PA - Module - Jestiunea codurilor javascript

Asigura-te ca ai activat gestiunea codurilor javascript



Apoi creaza un nou fisier javascript cu amplasare in toate paginile, cu titlul "background animat", si introduceti codul urmator, apoi valideaza-l.

Code: Selecțati Conținutul

$(document).ready(function () {
setInterval(function() {
$('#pun-intro').animate({
'background-position-x' : '+=2'
}, 100)
}, 100)
});


Am terminat!
Codul de mai sus va anima backgroundul a.i sa se deruleze pe orizontal. Daca vrei sa se deruleze pe vertical, in codul js inlocuieste
Code: Selecțati Conținutul

'background-position-x' : '+=2'
cu

Cod:

'background-position-y' : '+=2'

Codurile de mai sus sunt pentru versiunea PunBB.
Daca forumul tau este pe PhpBB3, atunci va trebui sa inlocuiesti atat in codul css, cat si in codul js

Cod:

#pun-intro

cu

Cod:

.headerbar

.
Sper ca ti-a fost de ajutor

TUTORIAL REALIZAT DE REDLINE