fraNNNta-Design

Bine a-ti venit pe fraNNNta-Design
conectarecreaza cont



Tutorial animare header

Distribuiţi
REDLINE OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 299
Inscris : 05/10/2012

biggri Tutorial animare header

Mesaj Scris de REDLINE la data de Dum Noi 24, 2013 6:12 pm

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: http://i44.tinypic.com/240x16v.jpg


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

Cod:

#pun-intro{
  background: url(http://i44.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.

Cod:

$(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
Cod:

'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 :)
Lasa-ne un feed-back.


Ultima editare efectuata de catre REDLINE in Dum Noi 24, 2013 6:47 pm, editata de 1 ori


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
mr.franta OnlineOffline
avatar
fondator
Respect : 100%
Mesaje : 3980
Inscris : 18/06/2011

biggri Re: Tutorial animare header

Mesaj Scris de mr.franta la data de Dum Noi 24, 2013 6:41 pm

frumos si incredibil de bine explicat numai ca trebuie sa redenumesti titlul : header animat.


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Aditzu. OnlineOffline
avatar
administator
Respect : 100%
Mesaje : 1263
Inscris : 21/10/2012

biggri Re: Tutorial animare header

Mesaj Scris de Aditzu. la data de Dum Noi 24, 2013 6:43 pm

bun tutorial bravo red



Ajut utilizatori ForumGratuit cu probleme legate de (scripturi,coduri,widgeturi,forum) tot ceea ce trebuie sa faci este sa dai un mesaj privat Aici


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Dana. OnlineOffline
avatar
fondator
Respect : 100%
Mesaje : 718
Inscris : 25/06/2013

biggri Re: Tutorial animare header

Mesaj Scris de Dana. la data de Mar Noi 26, 2013 12:42 pm

foarte bine punctat am sa verific si eu pe forumul meu de teste.Va pup :*


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Vizitator OnlineOffline
avatar
Vizitator

biggri Re: Tutorial animare header

Mesaj Scris de Vizitator la data de Lun Dec 09, 2013 11:21 am

Pentr scroll in partea stanga :D
Cod:
$(document).ready(function () {
 setInterval(function() {
 $('#pun-intro').animate({
 'margin-left' : '-=2'
 }, 100)
 }, 100)
});


Sus
H4cK3R*uL OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 63
Inscris : 14/10/2012

biggri Re: Tutorial animare header

Mesaj Scris de H4cK3R*uL la data de Mar Dec 17, 2013 12:49 pm

Foarte interesant, felicitari
Poti face un header/fundal pentru banner? Versiunea phpbb2? Adica sa pui o imagine ca fundal pentru banner.


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
mr.franta OnlineOffline
avatar
fondator
Respect : 100%
Mesaje : 3980
Inscris : 18/06/2011

biggri Re: Tutorial animare header

Mesaj Scris de mr.franta la data de Mar Dec 17, 2013 12:57 pm

in curand o sa deschidem o sectiune premium cu tutoriale pentru toate versiunile


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
First Time OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 109
Inscris : 03/08/2013

biggri Re: Tutorial animare header

Mesaj Scris de First Time la data de Dum Dec 22, 2013 11:15 am

Ar fi mers si un print.
Felicitari.


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
REDLINE OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 299
Inscris : 05/10/2012

biggri Re: Tutorial animare header

Mesaj Scris de REDLINE la data de Dum Dec 22, 2013 11:17 am

Print pentru ce? Ti-am pus link cu previzualizare live, ce-ti mai trebuie print? Si plus de asta, asta este un efect dinamic, nu ai cum sa il vezi intr-un print :)

Te rog sa nu mai postezi doar ca sa te afli in treaba :D


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Jimmi OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 119
Inscris : 30/12/2013

biggri Re: Tutorial animare header

Mesaj Scris de Jimmi la data de Lun Dec 30, 2013 7:33 pm

nu merge si pe phpBB2??


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
REDLINE OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 299
Inscris : 05/10/2012

biggri Re: Tutorial animare header

Mesaj Scris de REDLINE la data de Lun Dec 30, 2013 9:52 pm

In principiu ar putea merge, dar nu prea ai cum sa ii pui fundal, pentru ca la phpbb2 in header logo-ul e 'gol', nu prea are un container in care sa se afle, si la care sa ii dai un fundal... 
Ii poti crea unul, desigur, dar e cam problematica treaba asta :D Dar iti recomand punbb, e mai usor de modificat.


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
snickers. OnlineOffline
avatar
Membru nou
Respect : 100%
Mesaje : 25
Inscris : 18/12/2013

biggri Re: Tutorial animare header

Mesaj Scris de snickers. la data de Mier Ian 15, 2014 9:17 pm

Cât de tare mulţumesc.


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Jimmi OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 119
Inscris : 30/12/2013

biggri Re: Tutorial animare header

Mesaj Scris de Jimmi la data de Joi Ian 30, 2014 8:25 pm

A mers dupa ce am schimbat versiunea la forum


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
DEXENN OnlineOffline
avatar
Membru nou
Respect : 100%
Mesaje : 5
Inscris : 01/02/2014

biggri Re: Tutorial animare header

Mesaj Scris de DEXENN la data de Sam Feb 01, 2014 8:18 pm

Pentru tema animate nu merge, aveti idee de ce?


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
balamuuk OnlineOffline
avatar
Membru nou
Respect : 100%
Mesaje : 15
Inscris : 05/04/2013

biggri Re: Tutorial animare header

Mesaj Scris de balamuuk la data de Vin Feb 14, 2014 8:30 pm

nu merge fratilor si am punbb


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
funky- OnlineOffline
avatar
Membru nou
Respect : 100%
Mesaje : 4
Inscris : 15/02/2014

biggri Re: Tutorial animare header

Mesaj Scris de funky- la data de Sam Feb 15, 2014 12:47 pm

mersi mult ! f frumoasa


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Liviu OnlineOffline
avatar
Membru nou
Respect : 100%
Mesaje : 17
Inscris : 15/02/2014

biggri Re: Tutorial animare header

Mesaj Scris de Liviu la data de Dum Feb 16, 2014 8:51 pm

pfff am incercat si nu merge 
Si folosesc punbb

nu se modifica nimic


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Continut sponsorizat OnlineOffline

biggri Re: Tutorial animare header

Mesaj Scris de Continut sponsorizat



Sus

    Subiecte similare

    -

    Acum este: Joi Dec 13, 2018 9:00 pm