✔ ¿Der Apple-Effekt?

[czweifel]

Hey leute

Ich lese mich z. Z. in CSS3 ein. Ich habe schon relativ viele Dinge ausprobiert und meist auch erfolgreich abschliessen können. ;D
Aber nun bin ich auf ein Problem gestossen, wenn ich die Apple-website aufrufe erscheint dieser coole effekt. (Ja, ich weiss tönt doof, aber ich weiss nicht wie ich in nennen soll)

Vielleicht kann mir ja jemand von Euch einen heissen Tip geben. thx

grüsse czweifel

PS: Ich hoffe doch schwer, dass dieser Effekt durch CSS3 erzeugt wird, wenn Apple doch immer mit HTML5 und CSS3 prahlt.

 

[Parantatatam]

Apple setzt noch auf HTML4 und CSS2, da sie logischerweise auch Menschen von der anderen Seite (Microsoft) abfangen wollen und der Internet Explorer immer etwas zurückhängt, was die Unterstützung von neuen Standards betrifft. Außerdem ist HTML5 noch nicht endgültig festgelegt, was bedeutet, dass sich Dinge noch ändern können und CSS3 wird bisher nur mager unterstützt. Aber Apple kann gut mit HTML5 und CSS3 prallen: Safari 5 unterstützt es ja.

Kommen wir jedoch zu deinem Problem: welchen Effekt meinst du?

 

[czweifel]

okay.
wenn ich auf apple.com surfe, ist das Fenster weiss, dann folgen das Bild und die beiden kurzen Sätze 'The Beatles' bzw. 'Now on iTunes'.
Ich fände, dass eben noch eine netten Intro auf meiner website

 

[Parantatatam]

Wenn du mal in den Quelltext einen Blick geworfen hättest, wäre das dein Fund:

<script type="text/javascript">
var blackout = new AC.Blackout('billboard', 'beatles2010116', {
  showWhenReferredByApple: false,
  showOnce: true,
  delay: 3,
  duration: .5,
  link: '/the-beatles/'
});
blackout.addImage('http://images.apple.com/home/images/beatles_title20101116.png', { offsets: [221, 32], dimensions: [238, 54], delay: 1 });
blackout.addImage('http://images.apple.com/home/images/beatles_now_on_itunes20101116.png', { offsets: [459, 32], dimensions: [297, 54], delay: 2 });
blackout.addImage('http://images.apple.com/home/images/beatles_hero20101116.jpg', { offsets: [126, 115], dimensions: [728, 856] });

if(typeof AC !== "undefined" && typeof AC.Detector !== "undefined" && (AC.Detector.isiPad() || AC.Detector.isiPhone())){
  document.body.observe('ACBlackout:didFadeImageIn', function(evt){
    if(evt.memo.src == 'http://images.apple.com/home/images/beatles_title20101116.png'){
      $('title-1').setStyle('z-index: 10001; position: relative;');
    } else if(evt.memo.src == 'http://images.apple.com/home/images/beatles_now_on_itunes20101116.png'){
      $('title-2').setStyle('z-index: 10001; position: relative;');
    } else if(evt.memo.src == 'http://images.apple.com/home/images/beatles_hero20101116.jpg'){
      $('hero-image').setStyle('z-index: 10001; position: relative;');
    }
  });
}
</script>

 

[Markus Kolletzky]

Hi,

dieser Effekt ist mit JavaScript – u.a. scriptaculous – umgesetzt, weswegen ich den Thread dann mal in den richtigen Bereich verschiebe. Ein Blick in den Quelltext der Seite verrät dir im Prinzip die Vorgehensweise, um den Effekt nachzubauen.

Viele Grüße,
Markus

 

[CPoly]

Da war doch eben was auf Twitter...ah hier:
http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/

 

[czweifel]

hey leute vielen dank... ich hatte fast die Vermutung, dass das nicht CSS ist... nochmals Vielen Dank

 

[Markus Kolletzky]

Für die Nachwelt wurde der Link auch in unserem Artikelsystem konserviert. Danke an CPoly für den Link!