How it made mac pro
All direct child elements of wrapper are positioned absolute on top of each other and their individual z-index values take care of the visual order. On navigation click the div curtain is set to display: This class is then removed when the video in the background rewinds to the appropriate time, and a still image of that time point is displayed on top of the video.
The current section image has an additional class of visible crossFade. There are a total of 13 video overlay images img. If you are still having trouble understanding the structure of the page layers, have a look at a more visual demonstration below. I hope that this deconstruction answers some of your questions about how the Apple Mac Pro page was built. Nothing about seeking the video in reverse?!
The videos are using Codec H. Nice to see that done without me trawling source, good to see Apples sow progression to newer technologies in there markup. I thought that this could save time to a lot of developers. Stay tuned for more deconstructions like this and thanks for the comment Mathew. Awesome deconstruction of the website!
Scrolling down
Thank you! But i was wondering: When you also look at other things such as timeframes and budget, you need to make a decision whether the implementation on mobile devices is worth it. That might be the case for Kickstarter. Any idea how the site works on mobile devices? Hi Will, looks like there is a canvas object for each of the sections. On the canvas is then played a sequence of still images. Hope that helps. I was looking for indications for create a site such as the Apple Mac Pro page for a long time. Thanks for everything has been really helpful to read your post, now I can do it too!
Great article! Thank you for that. What i am wondering, is if the video mp4 is also used when viewing on an ipad. When i inspect and emulate an ipad with chrome i see that they also used the mp4 video. Do you know if the mac pro site uses an mp4 on the ipad or perhaps a png sequence? If I remember correctly it was done using JavaScript and the data attributes.
I am definitely going to make this into my new portfolio website in the near future.. Any strong opinion as to why Apple did not use Sprite Mapping for the animation sequences? I feel using video is a clunkier feeling approach, whereas with Sprite Mapping you could have really smooth forwards and backwards animations controlled by scrolling. Good question Jacob, do you have any handy resources on Sprite Mapping?
Apple details new MacBook manufacturing process
Maybe other people reading this article might find it useful, myself included. Cheers Petr. Great work Petr, after I saw Jacobs comment I did some searching the first couple of results were perfect and found the following: How does the site control mouse scroll events? When you scroll on the webpage, using the Mighty Mouse on a MacBook Pro , a single swipe up switches down one section. How does it stop from simply scrolling down 3 sections or something?
I will check it out and might add a deconstruction to my YouTube channel. Thanks for the tip. I like that as you scroll down, a new light glows for the next section on the page and that the name of that section appears. Is it similar to this effect?
- a good web browser for mac.
- free f1 racing games mac.
- Apple Mac Pro.
- iMac Pro, the most powerful Mac ever - Apple (IN).
Your email address will not be published. The Mac Pro incarnation did not disappoint. What makes Apple fascinating is not that they are using some wiz-bang alien technologies to make things - even here in Portland, Oregon, all the technologies Apple shows in this video are in-practice across numerous local factories.
iMac Pro, the most powerful Mac ever
What makes Apple unique is that they perform their manufacturing with remarkable precision and on a scale that is simply astonishing, using techniques typically reserved for the aerospace or medical device industries. When uncle Phil said that Apple was using technologies that were new to them to make the Mac Pro, the brunt of his statement was focused on how the cylindrical case of the machine is formed. Here, Apple is using a process known as hydraulic deep draw stamping. Most metal stampings go through one or two die tools to produce the final shape. With the Mac Pro though, the challenge is to produce a massive amount of plastic deformation without tearing, rippling or deforming the perfect cylindrical surface.
To do this, the enclosure is drawn through a series of dies that progressively stretch the aluminum into something approaching the final shape of a Mac Pro. Deep drawing is a process that very efficiently produces a "net shape" part. Apple could have just chucked a giant hunk of aluminum in a lathe and created the same part, but that amount of metal removal is extremely inefficient.
Deep drawing efficiently creates a hunk of metal that is very close to the final shape of a Mac Pro in just a couple of operations. Here, we see the initial ingot of material that will become a Mac Pro enclosure. I suspect that this initial step is outsourced noting the uniforms of employees and the general state of the shop in the background isn't the typical "Apple White Willy Wonka Magical Factory" look.
How Apple Makes the Mac Pro — Atomic Delights
The results of the first of between 4 and 5 deep draw stamping operations. Notice how the Mac Pro part is nowhere near the final length. Edited to Add: A deep draw stamping guy emailed to say that Apple's specific strategy here is hydraulic impact extrusion, after the initial deep draw step. Same technique for making fire extinguishers and scuba bottles. This step brings the part into high-precision tolerances and removes the relatively rough surface finish produced in the deep draw process. On the left side, we can see that the slight curve on the bottom of the enclosure has been machined.
As lovely as they are, machined surfaces are not up to Apple's standards. In this segment of the video, two Kuka robotic arms with custom end actuators spin the Mac Pro's enclosure around polishing wheels to produce a near-mirror surface finish. Just as the enclosure is moved onto the internal polishing station, the machine spits a fresh load of polishing compound onto the wheel.
Similar technology is used in high-volume knife production for creating both the grind profile and sharp edges of blades. Precision equipment used in grinding and polishing operations such as this must be meticulously maintained. The fine dust produced works into bearings, actuators and ball-screws, wreaking havoc. The freshly polished enclosure is coated with a surface protection film to prevent damage during the upcoming milling operations.
Why machine these openings after polishing? The open edges would not only get marred by polishing, but the cloth polishing wheels would get ripped to shreds on them in no time.
Point of Interest: My best guess is that the original plan was to simply machine through the protective film, but the cutting action of the end mill wound up tearing the film's edges dinging up the surfaces slightly.