Share
We pakken vandaag een grote aan: Apple's 'Elevating the expedition' iPad marketingpagina.
Het is ongetwijfeld een indrukwekkende site op zich, die pronkt met krachtige JavaScript en CSS. Apple heeft het concept van doelgroep ook zeer serieus genomen in hun beslissingen met deze site. Laten we erin duiken!
Deze site is een aanvulling op een lange lijst met sites die gebruikmaken van scrollen om de presentatie van inhoud te verbeteren en ontworpen animaties te activeren. Terwijl u door de site scrolt, kunt u zien dat de inhoud wordt gevuld terwijl u scrolt, inclusief een verhogingsteller aan de rechterkant die toeneemt naarmate u verder scrolt; dit is een indicator die volgt, samen met het verhaal van het stijgingsverhaal van de klimmer.
We zien ook enkele subtiele parallaxanimaties (bijvoorbeeld de wolken), een paar illustratietriggers die optreden wanneer ze in beeld komen en enkele oneindige animaties die niet afhankelijk zijn van welke interactie dan ook.
Zeer grote afbeeldingen worden overal op de site gebruikt (meer hierover in de volgende sectie), zowel als achtergrondafbeeldingen als als inline-contentafbeeldingen.
Apple heeft een aantal interessante beslissingen genomen met deze marketingpagina. Misschien is de meest in het oog springende beslissing de grootte van de activa op de pagina. Hieronder ziet u een schermafbeelding van de Chrome-inspecteur. Op een snelle internetverbinding neemt de site meer dan 2 seconden in beslag om de items op de pagina te laden. De totale downloadgrootte voor de site overschrijdt 12,5 MB. Apple heeft natuurlijk een aantal dingen geoptimaliseerd (die we zullen bespreken), maar de vraag blijft: hoe kan iemand een 4 MB PNG rechtvaardigen voor wat technisch gezien een "extra" cloudanimatie is?
Het antwoord is, naar alle waarschijnlijkheid, dat Apple's doelwit voor deze pagina nooit vertragingen zal ondervinden bij het downloaden van gigantische bezittingen, en als ze dat wel doen, kunnen ze er niet om geven. De doelgroep is hoogstwaarschijnlijk op een Mac of een ander modern apparaatscherm en ze zitten waarschijnlijk op een snel netwerk. Daarom heeft Apple de beslissing genomen om een bijzonder boeiende ervaring te ondersteunen en een minder goede ervaring toe te staan voor diegenen die zich waarschijnlijk niet in hun doelmarkt bevinden..
Er moet ook rekening mee worden gehouden dat deze pagina een marketingcampagne is die buiten de verkoopstroom van Apple valt, wat betekent dat niemand de mogelijkheid heeft om een iPad te kopen van de inbel-Dell op een SD CRT-monitor, als ze daarvoor kiezen.
Een andere interessante beslissing die Apple heeft genomen (zowel hier als in veel andere webprojecten) is het gebruik van afbeeldingen voor tekstkoppen.
Dit is een pngDe meeste mensen weten dat Apple jarenlang trots is geweest op een consistente, duidelijke typografie; wijlen Steve Jobs nam zelfs een kalligrafieles aan het Reed College, wat volgens hem inspireerde om gelede fontbesturing naar het Mac-besturingssysteem te brengen. Met deze prioriteit in gedachten, kiest Apple er regelmatig voor om afbeeldingen van tekst in plaats van lettertypen weer te geven voor de meeste van hun koppen, vermoedelijk zodat ze controle hebben over wat iedereen ziet. Hoewel er enige kosten aan deze beslissing zijn verbonden, ruilt Apple die kosten in voor de consistente kwaliteit en volledige controle over het eindproduct.
Interessant is dat ze zelfs zover zijn gegaan om dit te doen met de nummerindicator op de zuurstofgrafiek.
Overtuig uzelf, hier is de SVG-sprite Apple heeft op deze site enkele eenvoudige, progressieve verbeteringstechnieken gebruikt; namelijk, het ontwerp blijft intact in alle browsers, terwijl de interacties kunnen variëren afhankelijk van de mogelijkheden van de browser. Apple gebruikt css transformeren; en de meeste van de progressieve verbeteringen draaien om dat aspect. Andere elementen, zoals de invoer van de schuifregelaar in het tweede gedeelte, worden alleen weergegeven in ondersteunende browsers. Apple gebruikt hacks zoals de volgende, die wordt gebruikt om elementen in IE 7-9 te verbergen, maar in alle andere browsers. Dit is handig bij het renderen van statische elementen voor IE, zoals de tophoogtegrafiek.
.diagram .oxygen-slider positie: absoluut; top: 246px; left: 45px; display: none \ 9; .ie-grafiek display: none; display: block \ 9; position: relative; top: 0;
De lijn display: none \ 9; en display: block \ 9; regels zijn alleen geldig in IE 7-9; dit kleine trucje vermijdt het gebruik van IE-specifieke stylesheets.
De schuifregelaar en animatie in dit diagram worden niet weergegeven in IE.Apple maakt ook gebruik van JavaScript om eenvoudige dingen te doen, zoals het vervangen van afbeeldingen met hun hi-res-versies als dat nodig is. Hoewel Chromium officieel responsieve afbeeldingen heeft geïmplementeerd, is het nog lang niet volledig geaccepteerd, dus dit doen via JavaScript is momenteel een van de weinige beschikbare opties.
Hoe laad je gigantische bestanden en kom je ermee weg? Laten we een paar lessen nemen van deze site.
Het is ongelooflijk belangrijk om te optimaliseren, indien mogelijk. In dit geval heeft Apple een aantal afbeeldingen geoptimaliseerd. De headerafbeelding van 1024 x 1766 is bijvoorbeeld 341 kB en de sprite van de pakketitems is 49,9 kB. Hoewel geen byte als overbodig mag worden beschouwd, worden deze formaten relatief snel gedownload bij de meeste moderne verbindingssnelheden, waaronder veel mobiele koeriersnelheden.
Afbeeldingen en scripts kunnen de renstersnelheid van een pagina aanzienlijk vertragen. Gebruik zo mogelijk iets als lazy-laden (laden met JavaScript nadat de pagina al is geladen) om grote afbeeldingen te laden of neem ze op in uw CSS als achtergrondafbeeldingen als ze geen deel uitmaken van de semantische inhoudsstroom. Apple maakt gebruik van een JavaScript-techniek na het laden met alle hi-res-afbeeldingen, zoals eerder besproken, en gebruikt ook CSS om de grote cloud PNG-achtergrondafbeeldingen in te stellen.
Wilt u dat uw pagina snel is? focus op het zo snel mogelijk maken van de top 2000px. Ongeacht wat er onder die 2000px zit, als je in twee venster-hoogtes aan inhoud laadt, is het veel waarschijnlijker dat de inhoud voorbij de 2000px gaat laden tegen de tijd dat de gebruiker ernaar scrolt. Apple heeft dit een prioriteit gemaakt door vanaf de bovenkant van de pagina de grote PNG's naar beneden te drukken tot ongeveer 4400px en heeft snel ladende afbeeldingen naar de bovenkant geplaatst.
Het schuifelement biedt de gebruiker zijn eerste interactie op de pagina (behalve scrollen). Apple heeft een reeks input, en wat CSS magie, om dit uit te trekken. Zoals eerder vermeld, wordt het nummer aan de rechterkant van de grafiek met afbeeldingen weergegeven, maar we gebruiken reguliere typografie om het punt bij te houden. (Als u geïnteresseerd bent om deze techniek te leren, begin dan met het leren over CSS-sprites.)
U kunt deze schuifregelaar zien werken op CodePen Er zijn een paar dingen om op te merken in dit voorbeeld. Ten eerste is er nogal wat CSS dat is bedoeld om de invoer van de schuifregelaar er goed uit te laten zien. Het grootste deel van de rest van de CSS is gericht op positionering en after / before -trucs.
Een ander interessant aspect van deze demo is het indicatorelement. Laten we even naar het JavaScript kijken.
Accentsconagua
var slider = $ (". bgslider"); var max = slider.attr ("max"); var min = slider.attr ("min"); var colBg = $ (". fg"); var indic = $ (". indicator"); slider.on ("veranderen", functie () var val = slider.val () / max * 100; colBg.css ("height", val + "%"); indic.css ("top", val * .7 + "%") [0] .innerHTML = Math.round (val);); We zien meteen dat de schuifregelaar waar alle interactie is gecentreerd. Maar als we naar de indicator kijken, zien we deze regel:
indic.css ("top", val * .7 + "%") [0] .innerHTML = Math.round (val); Wat doet deze regel? Eerst wordt de bovenste waarde van de indicator ingesteld als de procentuele waarde van de schuifregelaar, vermenigvuldigd met .7 - dit geeft ons een indicator die niet naar de onderkant van het element gaat. In het voorbeeld van Apple volgt de indicator de afbeelding; in dit voorbeeld beweegt onze indicator met een andere snelheid dan onze afbeelding. Dit geeft ons meer controle over de animatie zelf.
Vervolgens zien we de animatie JavaScript.
$ ("invoer"). animeren ("waarde": 20000, stap: functie () slider.val (this.value); slider.trigger ("change");, complet: function () slider.val (max) .trigger ("change");, duration: 3000); Omdat de animatiefunctie van jQuery standaard ondersteuning biedt voor het animeren van CSS-eigenschappen, schrijven we onze eigen stap en complete functies. Dit stelt ons in staat om de ingebouwde wachtrij- en versoepelfuncties van jQuery te gebruiken en te vermijden om op maat te schrijven setInterval of recursief setTimeout calls.
We hebben dit opzettelijk niet precies gedaan op de manier waarop Apple dit effect heeft bereikt, zodat we u kunnen laten zien hoe u hetzelfde probleem kunt benaderen met een andere oplossing.
Laten we vervolgens kijken naar de gear-animatie van het pakket.
We kunnen zien dat de verschillende versnellingsitems in zekere zin zijn neergelegd in uw browser terwijl u scrolt. Dit effect wordt bereikt met de JavaScript-schuifgebeurtenis, CSS-transformaties en CSS-sprites. Apple heeft vijftig verschillende items geplaatst met : N-kind en sprites, die er zo uitziet:
.pack-item: nth-child (49) top: 52.5px; left: 199px; width: 82px; Hoogte: 69.5px; achtergrond-positie: -199px -52.5px;
Het meest interessante deel van deze techniek is echter de JavaScript-scroll-animatie. Het oorspronkelijke JavaScript is verkleind, maar de basisinstellingen doorlopen alle pakketitems en verzamelen hun positie ten opzichte van het midden van de packitems en verplaatsen ze verder in die richting. We zullen niet alle wiskunde in dit artikel behandelen; in plaats daarvan zullen we ons concentreren op een manier om het onderwerp te verkennen.
http://codepen.io/jcutrell/full/krIAp
Deze CodePen toont een ruwe benadering van de techniek die door Apple wordt gebruikt. Het aanpassen van verschillende delen van dit JavaScript geeft u verschillende resultaten en helpt u de techniek grondiger te verkennen.
Hier is een uitdaging voor jou: vervaag de itemblokken, zoals in de techniek van Apple.
De cloud-animaties gebruiken een eenvoudige parallax-scrolltechniek, evenals een oneindige CSS-animatie. We zullen de parallaxtechniek niet behandelen (je kunt hier veel parallaxtechnieken zien die worden behandeld op Tuts +), maar laten we eens kijken naar de oneindige animatie die deze wolken gebruiken.
Rechtstreeks van Apple's CSS:
.wolken positie: absoluut; links: 0; achtergrond: 0 0 repeat-x; achtergrondformaat: 100% 100%; .basecamp-clouds, .ascent-clouds z-index: 2; links: -788 px; .basecamp-clouds top: -500px; breedte: 2600 px; hoogte: 2413 px; background-image: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_basecamp_01.png); / * max zichtbaar scherm * 2 = 5200, niet te verwarren met @ 2x asset. * / .ascent-clouds-1 .tile top: 50px; Breedte: 5200px; hoogte: 2000 pixels; background-image: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_01.png); .ascent-clouds-2 top: 600px; Breedte: 2600px; Hoogte: 1846px; bottom: 0; background-image: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_02.png); @keyframes cloudAnim van transform: translateX () translateZ () naar transform: translateX (-50%) translateZ () .ascent-clouds-1.visible .tile -webkit-animation: cloudAnim 80s linear oneindig; -moz-animatie: cloudAnim 80s linear oneindig; animatie: cloudAnim 80s lineair oneindig;
We kunnen meteen zien dat de cloud-animatie rechttoe rechtaan is - gebruik transformeren: translateX. Wat deze techniek echter zo krachtig maakt, is de lengte en helderheid van de gebruikte PNG. De grote wolk PNG-lussen lopen oneindig tachtig seconden lang, wat lang genoeg is om het herhalende patroon van de PNG te vergeten. Hoewel het niet moeilijk is om te bereiken, is het zeker een effectief gebruik van CSS-animaties.
Apple steekt misschien een controversieel gebied in met de belangrijkste 'beste praktijken' predikers van webontwikkeling, maar iedereen in het beroep van webdesign moet beslissingen nemen. Je moet altijd rekening houden met de waarden van een afweging; of u een gegeven kenmerk al dan niet moet implementeren, moet niet alleen worden gedicteerd door best practices, noch door technologische beperkingen alleen, maar eerder door de behoeften en wensen van degenen die het ding dat u maakt zullen bekijken. Sta niet toe dat de regels in de weg staan om iets geweldigs te maken, maar zorg ervoor dat je de afwegingen bekijkt.
