5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)
  • Q:
    Bijdrager
    Damio

    Apple-effect [Opgelost]

    Hallo,

    Ik heb een vraagje. Nu ben ik bezig met mijn homepage, en het lijkt me wel leuk om een soort van ‘apple-effect’ in te bouwen. Ik bedoel het effect dat je te zien krijgt als de de applewebsite opent. Je krijgt eerst een plaatje van een iPad te zien, en daarna fade hij uit naar de gewone website. Ik heb al eens even op internet zitten kijken, maar kan dit nergens vinden. Heeft iemand een idee hoe ik dit zou kunnen gebruiken? Ik heb de beschikking over iWeb, Flash en Dreamweaver.

    Groetjes, Max

    Bijdrager
    prullenbak

    Het is sowieso geen flash. Dus schrap dat maar. iWeb kan t denk ik ook bijna niet in. Dreamweaver wel, maar aleen als je handig bent met CSS en javascript (en wss iets van jquery) of misschien wel css3 en html5.

    Moderator
    Mac Daddy

    Ik gok dat het HTML 5 is. Aangezien Apple daar zo blij mee is, zullen ze op hun eigen site wel laten zien wat je daarmee kan. Wie weet is het met andere code ook te bereiken en met Flash ook zeker wel, maar dat vind Apple stom.

    Bijdrager
    Damio

    Ik heb het stukje code geloof ik gevonden. Het is een javascriptje:

    <script type="text/javascript"><br />
    		// Choose a hero<br />
    		var pmch = new AC.PromoManager('ipad20110302', 'pmch li');</p>
    <p>		var blackout = new AC.Blackout(document.body, 'ipad20110302', { link: '/ipad/' });</p>
    <p>		blackout.setDelegate({<br />
    			willFade: function(bo){<br />
    				if(AC.Detector.isCSSAvailable('-webkit-animation')){<br />
    					videoTray = $('video-tray');<br />
    					videoTray.addClassName('animate-set');<br />
    					videoTray.addClassName('animate');<br />
    				}<br />
    			},<br />
    			didFade: function(bo){<br />
    				if(AC.Detector.isCSSAvailable('-webkit-animation')){<br />
    					videoTray = $('video-tray');<br />
    					videoTray.removeClassName('animate');<br />
    					videoTray.removeClassName('animate-set');<br />
    				}<br />
    			}<br />
    		});</p>
    <p>		// Choose blackout images based on promomanager selection<br />
    		blackout.addImage('http://images.apple.com/home/images/ipad2_title_20110308.png', { offsets: [345, 133], dimensions: [289, 95], delay: .5 });<br />
    		blackout.addImage('http://images.apple.com/home/images/ipad2_subhead_20110302.png', { offsets: [253, 256], dimensions: [473, 59], delay: 1 });</p>
    <p>		if(pmch.selectedPromoIndex === 0){<br />
    			// White hardware<br />
    			blackout.addImage('http://images.apple.com/home/images/ipad2_hero_20110302.png', { offsets: [-318, 115], dimensions: [1314, 480] });<br />
    		} else {<br />
    			// Black hardware<br />
    			blackout.addImage('http://images.apple.com/home/images/ipad2_hero2_20110302.png', { offsets: [-318, 115], dimensions: [1314, 480] });<br />
    		}</p>
    <p>		// When DOM is ready, hide unwanted heroes<br />
    		Event.onDOMReady(function() {<br />
    			if(pmch.selectedPromoIndex === 0){<br />
    				$('hero-1').show();<br />
    				$('hero-2').hide();<br />
    			} else {<br />
    				$('hero-1').hide();<br />
    				$('hero-2').show();<br />
    			}<br />
    		});<br />
    	</script>
    Bijdrager
    maclover111

    Op de Apple site wordt gebruik gemaakt van het javascript framework script.aculo.us

    Maar je kunt dit effect ook makkelijk maken met mootools of jquery.

5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.