[JQ]Plaatje animate resize

[BryanD]

Beste tweakers,

Ik ben bezig met een slideshow voor een bedrijf.
Ik heb nu met jquery een pluginetje geschreven die dit zou moeten doen, en die werkt ook wel.

Echter nu zit ik met een klein probleempje.
De foto's die de pagina binnen komen vliegen van de bovenkant zijn allemaal 960x540 px, en die worden vervolgens ge animeerd naar 1920x1080 px, dit wil inprincipe wel alleen gaat dit super schokkerig...Iemand enig idee hoe ik dit soepeler kan laten verlopen? Het plaatje moet dus geresized worden op 1 of andere manier, het gaat om een IMG tag dus tja.

Hierbij mijn huidige animatie functie:

code:

                var container = $("#container").children().eq(index);
                var img = container.find("img");
                var floater = container.find("#floater");
                var text = container.children("."+defaults.textName);
                container.removeAttr("style").attr("class","slide").css({"display":"table","top":"-1080px",});
                img.removeAttr("style").css({"height":"540px","width":"960px","padding-top":"270px"});
                text.removeAttr("style").css({"display":"none"});
                
                container.animate({"top":"0"}, 1000,function(){
                    img.animate({"height":"1080","width":"1920","padding-top":"0"},1000,function(){
                        
                        text.delay(250).fadeIn(500,function(){
                            var textInterval = setInterval(function(){
                                text.fadeOut(500);
                                clearInterval(textInterval);
                            },4000);
                            
                            var imgInterval = setInterval(function(){
                                img.animate({"height":"540px","width":"960px","padding-top":"270px"},1000,function(){
                                    container.animate({"top":"1080px"},1000,function(){
                                    
                                        container.css({"display":"none","top":"-1080px"});  
                                        
                                    });
                                });
                                clearInterval(imgInterval);
                            },5000);
                            
                            
                        });
                    });
                    
                });

Indien er iets niet duidelijk is hoor ik dit graag.
Bij voorbaat dank,

[HuHu]

Gaat het met een klein plaatje wel goed?

[RobIII]

Ik kan me voorstellen dat een browser moeite heeft om een beetje vloeiend (30+ fps) 1920x1080 plaatjes te resizen. Jij niet En stel dat 'ie dat, in jouw geval, straks niet meer heeft dan hebben andere browsers op andere (mindere) PC's het geheid. Ik zou me eerst eens gaan afvragen of dit wel de way to go is zeg maar...

[ Voor 8% gewijzigd door RobIII op 06-01-2011 14:29 ]

[BryanD]

Nee het blijft laggy en schokkerig, het trekt gewoon enorm veel kracht, dat is het probleem ik weet alleen niet hoe ik dit zou kunnen oplossen, iemand een idee?

btw dank voor het snelle antwoord huhu en rob

Edit:
@robb, nee dit is niet the way to go, maar ik zou ik ook niet weten waarvoor ik dit kan vervangen...

[ Voor 22% gewijzigd door BryanD op 06-01-2011 14:31 ]

[Verwijderd]

Ik kan me voorstellen dat een browser moeite heeft om een beetje vloeiend (30+ fps) 1920x1080 plaatjes te resizen. Jij niet En stel dat 'ie dat, in jouw geval, straks niet meer heeft dan hebben andere browsers op andere (mindere) PC's het geheid. Ik zou me eerst eens gaan afvragen of dit wel de way to go is zeg maar...

^ Ook wat ik dacht. Misschien wil het beter lopen als je de foto's preload als 1920x1080, vervolgens resized naar 960x540 px en vervolgens de animatie laten lopen naar 1920x1080.

Zoals je het nu doet moet de Browser allemaal berekeningen uitvoeren om pixels de juiste kleur te geven.

[edit] Daarbij neem ik aan dat je plaatjes oorspronkelijk ook 960x540 px zijn. Anders kun je het idee beter laten varen ja.

[ Voor 46% gewijzigd door Verwijderd op 06-01-2011 14:34 ]

[RobIII]

BryanD schreef op donderdag 06 januari 2011 @ 14:29:
Nee het blijft laggy en schokkerig, het trekt gewoon enorm veel kracht, dat is het probleem ik weet alleen niet hoe ik dit zou kunnen oplossen, iemand een idee?

Het zou misschien wel wat optimaler kunnen door wat (al dan niet browser specifieke) hacks/optimalisaties/truukjes uit te halen; maar linksom of rechtsom blijft dit natuurlijk een aardig zwaar klusje voor een gemiddeld PC'tje en daar ga je niet met een "truukje" omheen kunnen komen natuurlijk. Het kost wat het kost.

BryanD schreef op donderdag 06 januari 2011 @ 14:29:
@robb, nee dit is niet the way to go, maar ik zou ik ook niet weten waarvoor ik dit kan vervangen...

Moet je het vervangen dan? Is het hele idee laten varen geen optie ?

Heb je een testcase ergens online staan?

[ Voor 54% gewijzigd door RobIII op 06-01-2011 14:34 ]

[Bosmonster]

Dit soort dingen moet je in de design-fase al afschieten, want je krijgt het nooit performant. Misschien dat je het met veel pielen enigszins soepel krijgt op je eigen machine onder Chrome ofzo, maar feit is dat het merendeel van je bezoekers je animatie met 3fps in IE gaat bekijken.

[BryanD]

Nee dit is een must voor de animatie, het plaatje moet halve grote het scherm in vliegen en vervolgens resizen naar fullscreen, de TV waar hij op komt te draaien heeft een resolutie van 1920 x 1080...dus tja

[BryanD]

@bosmonster, dat is geen probleem, de pagina word alleen lokaal op 1 machine gedraaid, verder niemand die er bij komt en hij word gedraaid in chrome. dus tja

edit:
sorry dubbel post,

@robb, nee niet online, ik wil em wel even zippen voor je en evt. over de mail sturen dat je ff kijken kan...
maar goed hij staat niet online

[ Voor 35% gewijzigd door BryanD op 06-01-2011 14:37 ]

[Bosmonster]

Als je niet bereid bent aan te passen dan wordt het lastig

Tenzij je een monster-PC neer mag zetten bij die TV en een browser naar keuze.

edit:
Hoe draait het dan op een monster-PC in bijvoorbeeld IE9 beta met hardware versnelling?

Anders, als het toch alleen maar voor een TV is, waarom pre-render je dan geen 1080p film? Wat je nu probeert is perse met een tractor een F1-race willen winnen.

[ Voor 48% gewijzigd door Bosmonster op 06-01-2011 14:40 ]

[RobIII]

BryanD schreef op donderdag 06 januari 2011 @ 14:36:
@robb, nee niet online, ik wil em wel even zippen voor je en evt. over de mail sturen dat je ff kijken kan...

Euh, nee. Sorry. Zo werk ik niet en zo werkt GoT niet _{Of je moet mijn uurtarief willen aftikken En dan nog valt 't onder werving}

BryanD schreef op donderdag 06 januari 2011 @ 14:36:
maar goed hij staat niet online

Wat je nog zou kunnen overwegen is om er een filmpje of flash ofzo van te maken.

[ Voor 13% gewijzigd door RobIII op 06-01-2011 14:39 ]

[BryanD]

@Rob / bosmonster, inderdaad dat zou nog kunnen. Echter heb ik atm geen monster bak ter beschikking, en de pc waar dei op komt is niet dat je zegt monster, P4 @ 2 ghz (ongv), en een verouderde raedon kaart...

IE9Beta kan ik nog wel even naar kijken, maar ik acht de kans klein.

Echter heb ik het wel goed gehad i.c.m. web-kit css3 animatie's, echter dan moet ik met jquery met classes werken waar ik geen call-back's op zetten kan, dan krijg ipv bovenstaande anim de volgende lap code:

code:

$("#container").children().eq(index).removeAttr("style").attr("class","slide").css({"display":"block","bottom":"-1080px"}).animate({"bottom":"0"},defaults.imgEffectin,function(){
    $("#container").children().eq(index).addClass(defaults.imgZoomin);
    $('#container').children().eq(index).addClass('keepscale'); 
    var text = $("#container").children().eq(index).find("."+defaults.textName);
    text.delay(1000).fadeIn(defaults.textEffectin,function(){
        var textInterval = setInterval(function(){
            text.fadeOut(defaults.textEffectout,function(){
                text.css({"display":"none"});                                                                                           
            });
        },defaults.textFreeze);
    });
    var interval = setInterval(function(){
        $("#container").children().eq(index).removeClass(defaults.imgZoomin);
        $("#container").children().eq(index).addClass(defaults.imgZoomout);
        $("#container").children().eq(index).removeClass("keepscale");
        $("#container").children().eq(index).delay(1000).animate({"bottom":"1080px","display":"none"},defaults.imgEffectout,function(){
            $("#container").children().eq(index).css({"bottom":"-1080px"});
        });
        clearInterval(interval);
    },defaults.imgFreeze);
});

en dit is de css voor de nieuwschierigen:

code:

.keepscale { -webkit-transform: scale(1); }
.scale { -webkit-transform: scale(0.5); }
.zoomin { -webkit-animation-name: zoomin; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; }
    @-webkit-keyframes zoomin {
        from { -webkit-transform: scale(0.5); }
        to { -webkit-transform: scale(1); }
    }
    
.zoomout { -webkit-animation-name: zoomout; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; }
    @-webkit-keyframes zoomout {
        from { -webkit-transform: scale(1); }
        to { -webkit-transform: scale(0.5); }
    }

[Verwijderd]

Wat je misschien zou kunnen proberen is de div waar het plaatje instaat resizen. Het plaatje in de div laat je op 1920 x 1080 px staan. Je ziet dan aan het begin dus maar een deel van het plaatje, door de animatie wordt de hele afbeelding zichtbaar.

Ik weet het niet zeker maar ik kan me voorstellen dat een plaatje resizen meer rekenkracht kost dan een plaatje uitbreiden. Misschien het proberen waard.

[BryanD]

@melay, dat is inderdaad wel beter voor timing, maar het is niet het effect wat de klant wil.
Ik denk dat dit wel moeielijker gaat worden als ik dacht.