Forum / Bits und Bytes / CSS/HTML - Code - Online-Magazin Team-Ulm.de

Hallo!

Ich bin auf der Suche, nach der Technik (CSS ?), mit der die Animation bei den iMacs auf der Apple-Seite. Was ich damit meine ist das hinein - und hinausschieben der iMacs. Wäre cool, wenn jemand aucn einen Beispielcode präsentieren könnte, wie sowas gemacht wird.

Danke für eure Bemühungen!

[zustimmen]

SpongeBernd

- 34
Champion (offline)

Dabei seit 06.2006
2277 Beiträge

Geschrieben am: 18.05.2011 um 19:07 Uhr

javascript heißt das zauberwort... mit html&css kommst du nicht weit ;)

[zustimmen]

Michael-B

- 31
Halbprofi (offline)

Dabei seit 01.2009
162 Beiträge

Geschrieben am: 18.05.2011 um 19:08 Uhr

Sicher?
Also ich hab mal gehört, dass die von Apple das mit HTML 5 machen.

[zustimmen]

mjb

Profi (offline)

Dabei seit 11.2003
412 Beiträge

Geschrieben am: 18.05.2011 um 19:10 Uhr
Zuletzt editiert am: 18.05.2011 um 19:11 Uhr

hab mir das ding gerade mal über Firebug (ein Firefoxplugin) angeschaut und da kommt folgendes Java-skript zum einsatz:

<script charset="utf-8" type="text/javascript" src="http://images.apple.com/imac/scripts/overview.js">
var sections={},fancyGallery,transform2d3d=function(a,b){if(AC.Detector.supportsThreeD()){a.setVendorPrefixStyle("transform","translate3d("+b+", 0, 0)")
}else{a.setVendorPrefixStyle("transform","translate("+b+", 0)")}},fancySection={initializeFancySection:function(){this._width=this.content.getWidth();
this._offset=this.content.positionedOffset().left;this.imgs=this.content.select("img.hero");
this.img=this.imgs[0];this.hdr=this.content.down("h1");this.sub=this.content.down("h2");
this.imgsLength=this.imgs.length;for(var a=this.imgsLength-1;a>=0;a--){transform2d3d(this.imgs[a],this.width+"px");
this.imgs[a].setVendorPrefixStyle("transition","0");this.imgs[a].setVendorPrefixStyle("transition-timing-function","cubic-bezier(0.25, 0, 0.25, 1.0)")
}transform2d3d(this.hdr,this.width+"px");this.hdr.setVendorPrefixStyle("transition","0");
this.hdr.setVendorPrefixStyle("transition-timing-function","cubic-bezier(0.25, 0, 0.25, 1.0)");
transform2d3d(this.sub,this.width+"px");this.sub.setVendorPrefixStyle("transition","0");
this.sub.setVendorPrefixStyle("transition-timing-function","cubic-bezier(0.25, 0, 0.25, 1.0)")
},resetPosition:function(){for(var a=this.imgsLength-1;a>=0;a--){transform2d3d(this.imgs[a],"0")
}transform2d3d(this.hdr,"0");transform2d3d(this.sub,"0");this.hdr.style.opacity=1;
this.sub.style.opacity=1},resetDuration:function(b){if(!b){b=0}for(var a=this.imgsLength-1;
a>=0;a--){this.imgs[a].setVendorPrefixStyle("transition-duration",b+"ms")}this.hdr.setVendorPrefixStyle("transition-duration",b+"ms");
this.sub.setVendorPrefixStyle("transition-duration",b+"ms")},mode:"play",multiplier:function(){return this[this.mode+"Multiplier"]
},playMultiplier:1,touchMultiplier:(1/8),options:{duration:500},duration:function(){return this[this.mode+"Duration"]()
},playDuration:function(){return this.options.duration},touchDuration:function(){return this.options.duration/2
},_width:980,width:function(){return this._width},_offset:980,offset:function(){return this._offset
},easeOut:function(a){return(a==1)?1:1-Math.pow(2,-10*a)},right:Prototype.emptyFunction,left:Prototype.emptyFunction,show:Prototype.emptyFunction};
sections.galleryNew={};Object.extend(sections.galleryNew,fancySection);Object.extend(sections.galleryNew,{resetDuration:function(b){if(!b){b=0
}if(!this.shown){for(var a=0;a<this.imgsLength;a++){this.imgs[a].setVendorPrefixStyle("transition-duration",b*((a+1)/2)+"ms")
}this.hdr.setVendorPrefixStyle("transition-duration",b*1.5+"ms");this.sub.setVendorPrefixStyle("transition-duration",b*1.5+"ms");
this.shown=true}else{for(var a=this.imgsLength-1;a>=0;a--){this.imgs[a].setVendorPrefixStyle("transition-duration",b+"ms")
}this.hdr.setVendorPrefixStyle("transition-duration",b+"ms");this.sub.setVendorPrefixStyle("transition-duration",b+"ms")
}},right:function(d){var b=this.easeOut(d)*this.width();var c=[];for(var a=this.imgsLength;
a>=0;a--){c.push(-Math.round(b*(a)*this.multiplier()))}for(var a=this.imgsLength-1;
a>=0;a--){transform2d3d(this.imgs[a],c[a]+"px")}this.sub.style.opacity=1-this.easeOut(d);
this.touched=true},left:function(d){var b=this.easeOut(d)*this.width();var c=[];
for(var a=this.imgsLength+1;a>=0;a--){c[a]=(this.touched)?Math.round(b*(a+1)*((a+1)*this.multiplier())):Math.round(b*(1)*((1)*this.multiplier()))
}for(var a=this.imgsLength-1;a>=0;a--){transform2d3d(this.imgs[a],c[a]+"px")}transform2d3d(this.hdr,c[this.imgsLength]+"px");
transform2d3d(this.sub,c[this.imgsLength]+"px");this.sub.style.opacity=1-this.easeOut(d);
this.touched=true},show:function(){for(var a=this.imgsLength-1;a>=0;a--){this.imgs[a].setVendorPrefixStyle("transition-duration",this.duration()-(a*20)+"ms")
}this.hdr.setVendorPrefixStyle("transition-duration",(this.duration()*0.6)+"ms");
this.sub.setVendorPrefixStyle("transition-duration",(this.duration()*0.6)+"ms")
}});sections.galleryDisplay={};Object.extend(sections.galleryDisplay,fancySection);
Object.extend(sections.galleryDisplay,{right:function(d){var b=this.easeOut(d)*this.width();
var a=-Math.round(b*4*this.multiplier());var c=-Math.round(b*0.25*this.multiplier());
transform2d3d(this.img,a+"px");transform2d3d(this.hdr,c+"px");transform2d3d(this.sub,c+"px");
this.hdr.style.opacity=1-this.easeOut(d);this.sub.style.opacity=1-this.easeOut(d)
},left:function(d){var b=this.easeOut(d)*this.width();var a=Math.round(b*4*this.multiplier());
var c=Math.round(b*1.25*this.multiplier());transform2d3d(this.img,a+"px");transform2d3d(this.hdr,c+"px");
transform2d3d(this.sub,c+"px");this.hdr.style.opacity=1-this.easeOut(d);this.sub.style.opacity=1-this.easeOut(d)
},show:function(){this.img.setVendorPrefixStyle("transition-duration",this.duration()+"ms");
this.hdr.setVendorPrefixStyle("transition-duration",this.duration()+"ms");this.sub.setVendorPrefixStyle("transition-duration",this.duration()+"ms")
}});sections.galleryAllinone={};Object.extend(sections.galleryAllinone,fancySection);
Object.extend(sections.galleryAllinone,{playMultiplier:1,touchMultiplier:(1/4),right:function(d){var b=this.easeOut(d)*this.width();
var a=-Math.round(b*2*this.multiplier());var c=-Math.round(b*1*this.multiplier());
transform2d3d(this.img,a+"px");transform2d3d(this.hdr,c+"px");transform2d3d(this.sub,c+"px");
this.hdr.style.opacity=1;this.sub.style.opacity=1},left:function(d){var b=this.easeOut(d)*this.width();
var a=Math.round(b*2*this.multiplier());var c=Math.round(b*0.5*this.multiplier());
transform2d3d(this.img,a+"px");transform2d3d(this.hdr,c+"px");transform2d3d(this.sub,c+"px");
this.hdr.style.opacity=1-this.easeOut(d);this.sub.style.opacity=1-this.easeOut(d)
},show:function(){this.img.setVendorPrefixStyle("transition-duration",(this.duration()*1)+"ms");
this.hdr.setVendorPrefixStyle("transition-duration",(this.duration()*0.6)+"ms");
this.sub.setVendorPrefixStyle("transition-duration",(this.duration()*0.6)+"ms")
}});sections.galleryWireless={};Object.extend(sections.galleryWireless,fancySection);
Object.extend(sections.galleryWireless,{right:function(d){var b=this.easeOut(d)*this.width();
var c=[];for(var a=this.imgsLength;a>=0;a--){c.push(-Math.round(b*(a+1)*this.multiplier()))
}for(var a=0;a<this.imgsLength;a++){transform2d3d(this.imgs[a],c[a]+"px")}transform2d3d(this.hdr,c[3]+"px");
transform2d3d(this.sub,c[3]+"px");this.sub.style.opacity=1-this.easeOut(d)},left:function(d){var b=this.easeOut(d)*this.width();
var c=[];for(var a=this.imgsLength;a>=0;a--){c[a]=Math.round(b*(a+1)*this.multiplier())
}transform2d3d(this.hdr,c[0]+"px");transform2d3d(this.sub,c[0]+"px");for(var a=this.imgsLength-1;
a>=0;a--){transform2d3d(this.imgs[a],c[a+1]+"px")}this.sub.style.opacity=1-this.easeOut(d)
},show:function(){for(var a=this.imgsLength-1;a>=0;a--){this.imgs[a].setVendorPrefixStyle("transition-duration",(this.duration()-(this.duration()*(this.imgsLength-a)/10))+"ms")
}this.hdr.setVendorPrefixStyle("transition-duration",(this.duration()*0.2)+"ms");
this.sub.setVendorPrefixStyle("transition-duration",(this.duration()*0.4)+"ms")
}});sections.gallerySoftware={};Object.extend(sections.gallerySoftware,fancySection);
Object.extend(sections.gallerySoftware,{right:function(d){var b=this.easeOut(d)*this.width();
var c=[];for(var a=this.imgsLength+1;a>=0;a--){c.push(-Math.round(b*a*this.multiplier()))
}for(var a=this.imgsLength-1;a>=0;a--){transform2d3d(this.imgs[a],c[a]+"px")}this.sub.style.opacity=1-this.easeOut(d)
},left:function(d){var b=this.easeOut(d)*this.width();var c=[];for(var a=this.imgsLength+1;
a>=0;a--){c[a]=Math.round(b*(a+1)*this.multiplier())}transform2d3d(this.hdr,c[0]+"px");
transform2d3d(this.sub,c[0]+"px");for(var a=this.imgsLength-1;a>=0;a--){transform2d3d(this.imgs[a],c[a+1]+"px")
}this.sub.style.opacity=1-this.easeOut(d)},show:function(){for(var a=this.imgsLength-1;
a>=0;a--){this.imgs[a].setVendorPrefixStyle("transition-duration",this.duration()-(a*20)+"ms")
}this.hdr.setVendorPrefixStyle("transition-duration",(this.duration()*0.6)+"ms");
this.sub.setVendorPrefixStyle("transition-duration",(this.duration()*0.6)+"ms")
}});fancyGallery=Class.create({options:{duration:1000},fancy:function(){if(this._fancy==undefined){this._fancy=(AC.Detector.isCSSAvailable("transition")&&AC.Detector.isCSSAvailable("transform"))
}return this._fancy},initialize:function(e,a,c){this.element=$(e);this.width=a.getWidth()||0;
if(this.fancy()){this.element.addVendorEventListener("transitionEnd",this.didTouch.bind(this));
this.element.setVendorPrefixStyle("transition-timing-function","cubic-bezier(0.25, 0, 0.25, 1.0)");
transform2d3d(this.element,this.width+"px")}if(!c){c={}}Object.extend(this.options,c);
fancySection.options.duration=this.options.duration;this.view=new AC.ViewMaster.SlideViewer(null,this.element,this.element.id,{silentTriggers:true,continuous:true,discontinuousPreviousNext:true,useKeyboardNav:true});
this.view.setDelegate(this);var d=document.getElementsByTagName("head")[0];var b=document.createElement("script");
b.type="text/javascript";b.setAttribute("src","http://images.apple.com/global/scripts/pagingview.js");
d.appendChild(b);var b=document.createElement("script");b.type="text/javascript";
b.setAttribute("src","http://images.apple.com/global/scripts/reveal.js");d.appendChild(b);document.observe("ac:pagingView:load",this.pagingView.bind(this));
document.observe("ac:reveal:load",this.revealed.bind(this))},pagingView:function(){if(this.element&&!this._pagingView&&this.fancy()){this._pagingView=this.element.pagingView(this.touch.bind(this),this.touch.bind(this),this.touch.bind(this),{preventDefault:"horizontal"})
}},revealed:function(){if(typeof(this.element.pagingView)=="function"){this.pagingView()
}var c=this.element.getElementsByClassName("gallery-content");this.sections=[];
this.totalSections=c.length;for(var b=0;b<this.totalSections;b++){var e=c[b].id.replace("MASKED-","");
var a=e.camelize();if(this.view.currentSection&&e===this.view.currentSection.id){var d=this.view.currentSection;
this.view.orderedSections.shift();this.view.orderedSections.push(d.id)}else{var d=this.view.addSection(c[b])
}Object.extend(d,sections[a]);d.initializeFancySection();this.sections.push(d)}this.currentSectionIndex=0;
this.nextSectionIndex=1;this.view.options.animationDuration=(this.options.duration*0.7)/1000;
if(!this.view.currentSection){this.view.showFirst();this.slideshow=new AC.ViewMaster.Slideshow(this.view,null,{delay:5000,stopOnContentTriggerClick:true});
this.stopSlideshowOnContentTriggerClickEvent=Event.observe(document,"click",this.stopSlideshowOnContentTriggerClick.bind(this))
}},stopSlideshowOnContentTriggerClick:function(a){var b;if((b=a.findElement("a"))&&b.hasClassName(this.view.triggerClassName)){this.stopSlideshow()
}Event.stopObserving(document,"click",this.stopSlideshowOnContentTriggerClickEvent);
this.stopSlideshowOnContentTriggerClick=Prototype.emptyFunction},stopSlideshow:function(){if(this.slideshow){if(this.startSlideshowTimeout){window.clearTimeout(this.startSlideshowTimeout)
}this.slideshow.stop();delete this.slideshow;this.view.options.discontinuousPreviousNext=true;
this.view.disablePreviousNextIfNeeded()}this.stopSlideshow=Prototype.emptyFunction
},elementOffset:function(){var a=this.element.style.transform;if(!a){a=this.element.style.webkitTransform
}if(!a){a=this.element.style.MozTransform}if(!a){a=this.element.style.msTransform
}if(!a){a=this.element.style.oTransform}if(a){return parseInt(a.replace(/.*\(([^,]*).*/,"$1").replace("px",""))
}return parseInt(this.element.offsetLeft)},nextSectionIndex:false,touch:function(c){this.nextSectionIndex=false;
this.stopSlideshow();this.element.setVendorPrefixStyle("transition-duration","0");
if(c.startCoords&&c.coords&&c.difference){var e=c.difference.abs.x/this.width;if(c.startCoords.x>c.coords.x){var j="right";
var a=e;var d="left";var b=1-e}else{var j="left";var a=e;var d="right";var b=1-e
}var i=this.currentSectionIndex;var g=this.sections[this.currentSectionIndex];if(!(d=="left"&&this.currentSectionIndex==this.totalSections-1)&&!(d=="right"&&this.currentSectionIndex==0)){if(d=="left"){this.nextSectionIndex=this.currentSectionIndex+1
}if(d=="right"){this.nextSectionIndex=this.currentSectionIndex-1}}var f=(this.nextSectionIndex!==false)?this.sections[this.nextSectionIndex]:false;
g.resetDuration();g.content.style.opacity=1;g.mode="touch";if(f){f.resetDuration();
f.content.style.opacity=1;f.mode="touch"}if(c.touches.length){g[j](a);if(f){f[d](b)
}}}if(c.difference){transform2d3d(this.element,(this.startOffset-c.difference.x)+"px")
}else{this.startOffset=this.elementOffset()}if(!c.touches.length&&g){this._shouldAnimateContentChange=false;
if(f&&(c.difference.abs.x>this.width/2||c.speed>5)){var k=f;var h=g}else{var k=g;
var h=f;this.nextSectionIndex=false}k.show();if(h){h.resetDuration(h.duration())
}this.element.setVendorPrefixStyle("transition-duration",k.duration()/2+"ms");window.setTimeout(function(){k.resetPosition();
if(h){h.resetPosition()}transform2d3d(this.element,"-"+k.offset()+"px")}.bind(this),1)
}},didTouch:function(a){if(a.target===this.element&&a.propertyName.match("transform")){if(!this._shouldAnimateContentChange){this.element.setVendorPrefixStyle("transition-duration","0");
if(this.nextSectionIndex!==false){this.currentSectionIndex=this.nextSectionIndex
}this.view._currentTrigger=a;this.view.show(this.sections[this.currentSectionIndex]);
this.sections[this.currentSectionIndex].content.style.opacity=1;this._shouldAnimateContentChange=true
}}},_shouldAnimateContentChange:true,shouldAnimateContentChange:function(b,c,a){return this._shouldAnimateContentChange
},willShow:function(b,c,a){this.outgoingSection=c;this.incomingSection=a;this.outgoingSectionIndex=(this.outgoingSection)?this.view.indexOfSection(this.outgoingSection):-1;
this.incomingSectionIndex=(this.incomingSection)?this.view.indexOfSection(this.incomingSection):-1;
this.sectionsToAnimate=[];if(this.outgoingSection){this.sectionsToAnimate.push(this.outgoingSection);
this.outgoingSection.mode="play"}if(this.outgoingSectionIndex<this.incomingSectionIndex){if(this.sectionsToAnimate[0]){this.sectionsToAnimate[0].direction="right"
}for(var d=this.outgoingSectionIndex+1;d<this.incomingSectionIndex+1;d++){this.sections[d].direction="left";
this.sections[d].mode="play";this.sectionsToAnimate.push(this.sections[d])}}else{if(this.outgoingSectionIndex>this.incomingSectionIndex){if(this.sectionsToAnimate[0]){this.sectionsToAnimate[0].direction="left"
}for(var d=this.outgoingSectionIndex-1;d>this.incomingSectionIndex-1;d--){this.sections[d].direction="right";
this.sections[d].mode="play";this.sectionsToAnimate.push(this.sections[d])}}}},willAnimate:function(j,h,d,c,n,e){var g=this.element,a=this.elementOffset()||0,m=(this.incomingSection!==null)?-this.incomingSection.offset():0,b=this.sectionsToAnimate.length;
if(this.fancy()){e=e*1000;for(var f=0;f<b;f++){var l=this.sectionsToAnimate[f];
l.content.style.opacity=1;if(f==0&&b>1){l.resetDuration(e);window.setTimeout(function(){this[this.direction](1)
}.bind(l),1)}else{if(f==b-1){l[l.direction](1);window.setTimeout(function(){this.resetDuration(e);
window.setTimeout(function(){this.resetPosition()}.bind(this),1)}.bind(l),1)}else{l.resetDuration();
l.resetPosition()}}}this.element.setVendorPrefixStyle("transition-duration",(e*0.7)+"ms");
window.setTimeout(function(){transform2d3d(this.element,"-"+this.sectionsToAnimate[b-1].offset()+"px")
}.bind(this),1);var k=function(i){if(i.target==this.element&&i.propertyName.match(/transform$/i)){this.element.removeVendorEventListener("transitionEnd",k,false);
c()}}.bind(this);this.element.addVendorEventListener("transitionEnd",k,false)}else{for(var f=0;
f<b;f++){this.sectionsToAnimate[f].content.setOpacity(1);this.sectionsToAnimate[f].content.style.opacity=1
}return new Effect.Move(g,{x:m-a,y:0,duration:e,afterFinish:function(){c()},queue:{scope:n}})
}},_didShow:function(){this.currentSectionIndex=this.view.indexOfSection(this.view.currentSection)
},didShow:function(){this._didShow();this.view.currentSection.content.style.opacity=1;
this.view.options.discontinuousPreviousNext=true;if(this.slideshow){this.startSlideshowTimeout=window.setTimeout(function(){if(this.slideshow){this.slideshow.start()
}}.bind(this),2000)}this.view.options.animationDuration=this.options.duration/1000;
this.didShow=function(b,c,a){this._didShow();if(this.slideshow&&this.sections[this.totalSections-1].id==a.id){this.view.options.discontinuousPreviousNext=false
}if(this.sections[0].id==a.id){this.stopSlideshow();this.didShow=this._didShow}}
}});var hero=$("hero");new fancyGallery($("gallery-hero"),hero);hero.down("nav").style.display="block";
if(AC.Detector.isCSSAvailable("border-radius")){hero.className+=" capped"};
</script>

[zustimmen]

www.markus-braig.de **** www.seelenfänger.net **** www.maushausen.net

Michael-B

- 31
Halbprofi (offline)

Dabei seit 01.2009
162 Beiträge

Geschrieben am: 18.05.2011 um 19:12 Uhr
Zuletzt editiert am: 18.05.2011 um 19:12 Uhr

Kannst du vielleicht auch erklären, wie das Script funktioniert?

[zustimmen]

SpongeBernd

- 34
Champion (offline)

Dabei seit 06.2006
2277 Beiträge

Geschrieben am: 18.05.2011 um 19:12 Uhr

nope. deaktiviere einmal javascript im browser und du wirst schnell erkennen, dass die seite alternativ dieses "standbild" anzeigt:
http://images.apple.com/euro/imac/images/overview_software2_20110426b.png

[zustimmen]

mjb

Profi (offline)

Dabei seit 11.2003
412 Beiträge

Geschrieben am: 18.05.2011 um 19:14 Uhr

natürlich hab ich das mal eben kurz schnell in die tasten gehauen.
nee firebug ein firefoxplugin ist das zauberwort, hier kannst du dir ganz einfach anschauen was hinter der seite steckt.
was da für was zuständig ist absolut keine ahnung

[zustimmen]

www.markus-braig.de **** www.seelenfänger.net **** www.maushausen.net

Michael-B

- 31
Halbprofi (offline)

Dabei seit 01.2009
162 Beiträge

Geschrieben am: 18.05.2011 um 19:16 Uhr

Wahrscheinlich brauch man die hälfte vom Code nicht, jedoch hamm sies drin, damit solche wie ich/wir nicht mehr durchblicken.

[zustimmen]

RoHaN

- 45
Profi (offline)

Dabei seit 04.2006
698 Beiträge