Toon posts:

Banner rotatie

Pagina: 1
Acties:

Onderwerpen


  • Hipska
  • Registratie: mei 2008
  • Laatst online: 16-09 15:24
Ik ben bezig met een projectje waar ik heel wat van de nieuwe technieken mee uitprobeer (html5, css3, ..) en had ik graag een banner rotatie gemaakt met css transitions/animation naar het idee van reclame rond een voetbal/basketbal-veld: om de x seconden scrolled er een nieuwe advertentie naar boven.

Ik heb 2 manieren gevonden om dit te doen, maar van beide ben ik nog niet helemaal tevreden. (stel dat we nu een rotatie maken van een div met 3 banners in.)

1) met animation en keyframes:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
@-webkit-keyframes adrotate-1 {
    0% {
        top: 0px;
    }
    33% {
        top: -60px;
    }
    67% {
        top: -120px;
    }
    100% {
        top: -180px;
    }
}
</style>
<div id="bb-1" class="billboard" style="-webkit-animation: adrotate-1 10s linear 5s infinite;">
...
</div>

Voordeel: Werkt goed en zonder problemen terug naar eerste banner.
Nadeel:
* Eerste banner moet er dubbel in zitten. (op het einde nog eens voor mooie overgang)
* Niet cross-browser. Voorlopig enkel WebKit volgens mij. Andere browsers tonen enkel eerste banner.
Probleem: Geen manier gevonden om tussen 2 banners een wacht-tijd te hebben. Alles blijft nu continue doorscrollen.

2) met transitions:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
div.billboard {
    position: relative;
    transition: top 1s linear;
    -webkit-transition: top 1s linear;
    -moz-transition: top 1s linear;
    -o-transition: top 1s linear;
}
</style>
<div id="bb-1" class="billboard">
...
</div>

+ nog wat JS code die dmv een timeout de top waarde aanpast. Hierdoor gaat om de zoveel tijd de banner scrollen zoals gewenst.
Voordeel:
* Cross-browser animatie van de rotatie
* Browser zonder animation support zien wel gewoon de volgende banner.
Nadeel: JS code nodig.
Probleem: Na de laatste banner komt top terug op '0px' waardoor je hem ziet terugscrollen naar de eerste banner.

Zoals je ziet hebben beide methoden hun voordelen en nadelen, maar elk hebben ook nog eens hun onvolmaaktheid waar ik tot op heden nog niet echt een goede oplossing voor gevonden heb. Op internet is hier ook nog niet veel te vinden gezien het nog in ontwikkeling zijn van meeste onderdelen.

Hebben jullie een idee hoe ik een van beide kan oplossen/toepassen. Of hoe ik het anders kan doen. Alle suggesties zijn welkom.

Bitcoin.de


  • Hipska
  • Registratie: mei 2008
  • Laatst online: 16-09 15:24
Bedankt aan de mensen die toch de moeite genomen hebben om mijn topic even te doorlezen. Ik begrijp ook wel door de tamelijk nieuwe materie er nog niet veel mensen bekend zijn met de problemen en oplossingen die er mee gepaard gaan.

Ik heb momenteel een oplossing gevonden die methode 1 volledig zoals gewenst laat werken: (om de eventueel geïntresseerden het toch nog eens te tonen)
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="sponsor format-234x60">
            <style type="text/css">
@-webkit-keyframes adrotate-1 {
    00.00% { top:0px; }
    13.89% { top:0px; }

    16.67% { top:-60px; }
    30.56% { top:-60px; }

    33.33% { top:-120px; }
    47.22% { top:-120px; }

    50.00% { top:-180px; }
    63.89% { top:-180px; }

    66.67% { top:-240px; }
    80.56% { top:-240px; }

    83.33% { top:-300px; }
    97.22% { top:-300px; }

    100% { top:-360px; }
}
</style>
<div id="bb-1" class="billboard" style="-webkit-animation: adrotate-1 36s linear 0s infinite;">
<div id="bb-1-0" class="sponsor format-234x60">
    <img src="/media/sponsor/234x60/sponsor-name.png" alt="Sponsor Logo 234x60" />
</div>

...

</div>
        </div>

Deze code toont elke advertentie 5 seconden en daarna de schuif-transition in 1 seconde naar de volgende.

Nu dient er enkel nog gewacht te worden op een keyframes implementatie in de overige browsers. Volgens mij is dit voorlopig enkel nog maar in WebKit mogelijk. Indien er mensen zijn die mij het tegendeel willen bewijzen, dan hoor ik dat graag.

Bitcoin.de


  • Gomez12
  • Registratie: maart 2001
  • Laatst online: 23-07 14:44
Waarom gooi je je banners hard in je code als je wilt gaan rotaten?

Dan weet je toch helemaal niet welke ik al gezien heb ( van de 3 ), dus welke ga je mij op mijn volgende pageview als 1e tonen.
Persoonlijk zou ik als ik dit zou willen de 1e hard in de code zetten en daarna de rest ophalen met Ajax.

Dan weet ik exact welke banners iemand gezien heeft en waar hij was (qua banners dan) en heb je ook geen probleem met een JS die terugspringt naar 0px.

  • TJHeuvel
  • Registratie: mei 2008
  • Niet online
Je bent met HTML5 en CSS3 bezig, ik denk niet dat dat erg cross browser vriendelijk is. Probeer je site eens te openen in IE7, of IE6.

Je moet dus een keuze maken, of hip HTML5, of cross-browser.

Freelance Unity3D developer


  • Rvanlaak
  • Registratie: juni 2005
  • Laatst online: 23-08 18:04
Voor zo'n dingen hebben we altijd de cross-browser jQuery library nog ;)

Ofwel:

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function slideSwitch()
{
   var active = $('#headerHome li.active');
   if ( active.length == 0 )
      active = $('#headerHome li:first');
               
   var next =  active.next().length  ?  active.next()  :  $('#headerHome li:first');
                    
   active.addClass('last-active');
   next.css({opacity: 0.0})
      .addClass('active')
            .animate({opacity: 1.0}, 500, function() {
                     active.removeClass('active last-active');
             });
    }
$(document).ready(function(){
   setInterval('slideSwitch()', 6800 );
});

[Voor 81% gewijzigd door Rvanlaak op 17-10-2010 23:45]


  • Hipska
  • Registratie: mei 2008
  • Laatst online: 16-09 15:24
Gomez12 schreef op zondag 17 oktober 2010 @ 20:37:
Waarom gooi je je banners hard in je code als je wilt gaan rotaten?

Dan weet je toch helemaal niet welke ik al gezien heb ( van de 3 ), dus welke ga je mij op mijn volgende pageview als 1e tonen.
Persoonlijk zou ik als ik dit zou willen de 1e hard in de code zetten en daarna de rest ophalen met Ajax.

Dan weet ik exact welke banners iemand gezien heeft en waar hij was (qua banners dan) en heb je ook geen probleem met een JS die terugspringt naar 0px.
De banners worden door op de server in random volgorde gegooid bij elke pagina refresh, volgen welke al dan niet gezien is heeft geen belang.

De methode om telkens met JS de volgende banner op te halen vond ik nogal overkill en te veel onnodige requests opleveren. Daar ben ik dus van af gestapt.

Ik kijk desnoods nog voor een scriptje die gaat checken of de user al dan niet keyframes support heeft, waarna een JS fallback zoals de 2de methode in actie treed.

Bitcoin.de


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
Webkit is voorlopig de enige die css animations ondersteunt en dat zal nog wel even zo blijven.

Zie niet zoveel nut in dit gebruiken met JS als fallback dus eerlijk gezegd. De draft staat nog verre van vast en is slechts een suggestie vooralsnog vanuit Apple. Redelijke kans dus dat dit breekt in de toekomst, zeker in andere browsers die dit ooit gaan pogen te implementeren of als de specs wijzigen.
CyCloneNL schreef op zondag 17 oktober 2010 @ 21:12:
Je bent met HTML5 en CSS3 bezig, ik denk niet dat dat erg cross browser vriendelijk is. Probeer je site eens te openen in IE7, of IE6.

Je moet dus een keuze maken, of hip HTML5, of cross-browser.
Das wel erg kort door de bocht. Progressive enhancement met css3 is redelijk standaard geworden dit jaar in internetland ;)

[Voor 43% gewijzigd door Bosmonster op 26-10-2010 00:00]


  • Hipska
  • Registratie: mei 2008
  • Laatst online: 16-09 15:24
Oke, daar heb je dan wel een punt.

Mijn argument om wel die css te gebruiken is dat het dan werkt zonder dat JS hoeft aan te liggen en als ik mij niet vergis is het minder cpu belastend? (echt niet getest hoor)

Ik denk dat ik dan toch met JS en Transition zal werken, dit zal in de meeste browsers het gewenste resultaat leveren (al dan niet met schuif-effect). Echter zal ik niet met AJAX calls werken maar denk ik er aan om de inhoud van die div telkens te dupliceren. Is dat dan een goede oplossing?

Bitcoin.de

Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee