Banner rotatie

[Hipska]

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:

<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:

<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.

[Hipska]

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:

<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.

[Gomez12]

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]

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.

[Rvanlaak]

Voor zo'n dingen hebben we altijd de cross-browser jQuery library nog

Ofwel:

JavaScript:

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]

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.

[Bosmonster]

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]

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?