Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Canvas achtergrond dmv scrollen (Opgelost)

GroundZero - 23/12/2015 13:32 (laatste wijziging 23/12/2015 14:29)

Lid

Beste,

ik heb een canvas welke ik geanimeerd heb (uit eindelijk een parallax effect) door de achtergrond te veranderen (om alles te testen)... echter loopt het niet helemaal lekker... dit komt denk ik omdat er elke keer een ander plaatje geladen word... jullie enig idee hoe je iets als dit kunt optimaliseren?

voorbeeld: http://animation.devbizz.nl/

code:

javascript code - Bekijk de code zonder highlighting - Klap code in

                $(document).ready(function(e) {
	$.preloadImages = function() {
	  for (var i = 0; i < arguments.length; i++) {
		$("<img />").attr("src", arguments[i]);
	  }
	}
	
	$.preloadImages(
		<?php
		for($i = 1; $i <= 90; $i++) {
			
			if($i <= 9){ 
				$name = 'watch000'.$i;
			}elseif($nr >= 10 && $i <= 99) {
				$name = 'watch00'.$i;
			} else {
				$name = 'watch0'.$i;
			}
			
			if($i == 90) {
				echo '"'.$name.'.png"';
			} else {
				echo '"'.$name.'.png",';
			}
		}
		?>
	);
});

$(document).scroll(function(){
	// get scrolled position
	var scrolled = $(document).scrollTop();
	$('#position').html( Math.round(scrolled * 0.02) );
	
	// get the correct name
	var nr = Math.round(scrolled * 0.02);	
	
	if(nr <= 9){ 
		var name = 'watch000' + nr;
	}else if(nr >= 10 && nr <= 99) {
		var name = 'watch00' + nr;
	} else {
		var name = 'watch0' + nr;
	}
	
	if(nr >= 71) {
		$('.kiekeboo').fadeIn(2000)
		$('.background').slideDown(2000);
	} else {
		$('.kiekeboo').fadeOut(2000);
		$('.background').slideUp(2000);
	}
	
	// update canvas background accordingly to the
	// numbers of frames we scrolled
	$('.canvas').css('background-image', 'url(' + name + '.png)');
});
            
$(document).ready(function(e) {
	$.preloadImages = function() {
	  for (var i = 0; i < arguments.length; i++) {
		$("<img />").attr("src", arguments[i]);
	  }
	}
 
	$.preloadImages(
		<?php
		for($i = 1; $i <= 90; $i++) {
 
			if($i <= 9){ 
				$name = 'watch000'.$i;
			}elseif($nr >= 10 && $i <= 99) {
				$name = 'watch00'.$i;
			} else {
				$name = 'watch0'.$i;
			}
 
			if($i == 90) {
				echo '"'.$name.'.png"';
			} else {
				echo '"'.$name.'.png",';
			}
		}
		?>
	);
});
 
$(document).scroll(function(){
	// get scrolled position
	var scrolled = $(document).scrollTop();
	$('#position').html( Math.round(scrolled * 0.02) );
 
	// get the correct name
	var nr = Math.round(scrolled * 0.02);	
 
	if(nr <= 9){ 
		var name = 'watch000' + nr;
	}else if(nr >= 10 && nr <= 99) {
		var name = 'watch00' + nr;
	} else {
		var name = 'watch0' + nr;
	}
 
	if(nr >= 71) {
		$('.kiekeboo').fadeIn(2000)
		$('.background').slideDown(2000);
	} else {
		$('.kiekeboo').fadeOut(2000);
		$('.background').slideUp(2000);
	}
 
	// update canvas background accordingly to the
	// numbers of frames we scrolled
	$('.canvas').css('background-image', 'url(' + name + '.png)');
});
 

P.S. staat niet meer in een canvas haha

Ik heb een "pre-load images" script toegevoegd dat zou moeten werken alleen zie ik totaal geen verschil om eerlijk te zijn.

Probleem nu is dat als je te snel scrolt dat je ziet dat hij moet "laden"... de overgang is gewoon niet mooi (snel genoeg?)

2 antwoorden

Gesponsorde links

Thomas - 23/12/2015 16:07
Moderator		Heb je al gekeken naar je netwerktab in je developer console? Zelfs al is je afbeelding gecached gaat er nog steeds een GET request uit om te controleren of de afbeelding is gewijzigd en dat kost tijd. Al gegoogled op "css get background image from cache"? In de eerste hit staat al interessante informatie. Mogelijk kun je de headers tweaken van de request/responses. Of je zult echt via JavaScript moeten refereren aan je gecachede afbeeldingen zodat de animatie vervolgens volledig clientside verloopt (dus via een andere weg dan .css('background-image', '...')). Ook het niet geaccepteerde antwoord biedt een aantal alternatieven zoals sprites (geanimeerde gif? lol). Ook zou je kunnen denken aan vector scale graphics. Daarnaast de observatie dat het renderen van pagina grote achtergrondafbeeldingen in eerste instantie waarschijnlijk niet bedoeld (laat staan geoptimaliseerd) zijn voor animatie. Ik zou dan al snel aan een andere techniek denken zoals Flash of sprites (of iig een geanimeerd ding uit één geheel en niet allerlei afzonderlijke afbeeldingen) of vector graphics. Maar misschien kom je enkel met JavaScript manipulatie (zij het op een andere manier) al een heel eind.
Bedankt door: GroundZero

GroundZero - 24/12/2015 07:49
Lid		Thanks voor je antwoord, word even verdiepen in javascript dus hahaha... ken er weinig tot niks van maar ik zal eens onderzoeken. Idee kwam oorspronkelijk van Sony af, hun gebruiken ca. 1300 images voor hun parallax website, maar dat zal indd. met een flink stuk javascript opgebouwd zijn ;) http://www.sony.com/be-moved/

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten