Google Maps ontvouwd in 3D CSS

Google heeft vandaag haar browser Chrome geupdatet naar versie 12. Één van de leukste dingen die ze hebben toegevoegd wat ons betreft, is hardware acceleratie voor 3D-CSS-effecten. Dit zegt je waarschijnlijk niet zoveel, maar wij hebben er alvast even mee geëxperimenteerd en een voorbeeld online gezet zodat je kunt zien wat er mogelijk is.

In het experiment wilden we een Google Maps kaart een opgevouwen effect geven zoals een echte papieren kaart. Ook hebben we een animatie gemaakt waarbij de kaart uitvouwt. Alles effecten zijn in 3D en door de nieuwe hardware acceleratie van Chrome 12 loopt het ook nog eens soepel. We hadden een paar jaar geleden nooit kunnen denken dat dit op internet zou kunnen. Je kunt het voorbeeld hier bekijken. Als je geen Chrome hebt, moet je dat wel even installeren uiteraard.

Nerd-alert: een korte verklaring van wat je ziet. Er wordt Google Maps geladen in een container met een opacity van 0. De inhoud van deze container wordt met behulp van jQuery gekloond en gekopieerd naar de zes kaartdelen. Door ieder kaartdeel een andere margin-left te geven lijkt het geheel nog steeds één kaart. Met de CSS 3D transformaties rotateX en rotateY kunnen we nu vervolgens de kaart kantelen in de 3D-ruimte. Door hier vervolgens nog wat jQuery en simpele goniometrie op los te laten animeren we een langzaam ontvouwende Google Maps.

We houden erg van de laatste snufjes op het internet en innoveren graag mee. Meer van ons zien? Laat snel je e-mailadres achter om binnenkort een invite te ontvangen!

Screenshot van de gevouwen Google Maps kaart

Wanderfly, een inspiratiebron

Wat moet ik me nou precies voorstellen bij de nieuwe vakantiereiswijzer Bonnevoy? Is er op internet niet ergens een voorbeeld te vinden van iets vergelijkbaars?

Jazeker, dat is er! Neem snel even een kijkje op wanderfly.com en krijg een idee van wat er ongeveer aan te komen zit. Zoals je kunt zien is het niet nodig om een bestemming of een exacte reisdatum in te vullen. Daarentegen is het veel belangrijker dat je aangeeft wat je interesseert en hoeveel geld je ongeveer te besteden hebt. Op basis van deze gegevens zal Wanderfly vervolgens voor je op zoek gaan naar een passende vakantie. Hierbij maken ze gebruik van gegevens van onder andere Facebook, Twitter, Foursquare en Yelp. Informatie van deze websites wordt geaggregeerd en gecombineerd om jouw perfecte vakantie te kunnen vinden.

Wij kijken echter ook met een kritische blik naar Wanderfly. Het kan in onze ogen namelijk allemaal nog veel beter.

Wij willen een reisplanner die ook vakanties kan vinden wanneer het budget slechts €200 is. Ook dat goedkope weekendje weg moet te vinden zijn. Wij willen kunnen zoeken op bijvoorbeeld het weer of de prijs van een drankje op het terras. Tijdens onze stedentrip willen we met een biertje op het terras kunnen zitten. Wij willen het zo gek niet kunnen bedenken of het moet te zoeken en te vinden zijn! Daarom Bonnevoy!

Wat vind jij van Wanderfly? Welke dingen wil je zeker terugzien op Bonnevoy en welke zaken missen nog volgens jou?

Een vliegreis over de wolken

Hier bij Bonnevoy houden we van mooie dingen en we zijn goed in programmeren. Voor onze ‘coming soon’ pagina hebben we daarom geprobeerd iets moois te programmeren, waar je naar kunt kijken tijdens het wachten (niet letterlijk, want zo coming soon zijn we ook weer niet). Als je de pagina hebt bekeken zul je weten dat ik de animatie met de wolkjes bedoel, zo niet: bekijk hem dan nog even snel.

Animaties op websites bestaan al heel lang, maar tegenwoordig zijn er verschillende technieken bijgekomen om geavanceerdere animaties te maken zonder dat je hiervoor bijvoorbeeld een Flash plugin voor hoeft te installeren. Het voordeel van deze technieken is dat het in theorie op alle apparaten met internet zou moeten werken (dus ook op je iPad). Het nadeel is dat het nieuw is en hierdoor niet werkt op oude apparaten of software die vandaag nog wel steeds worden gebruikt.

Vele wegen leiden naar Rome en zo zijn er ook verschillende manieren om de wolkjes animatie op te bouwen. Om onze coming soon pagina voor zoveel mogelijk mensen leuk te maken hebben we de nieuwe animatietechnieken eens getest op vloeiendheid en compatibiliteit. Een kijkje in de keuken van Bonnevoy (pas op: turbo-, geek- en nerd-taal vanaf hier).

De 3 verschillende methoden die zijn getest zijn (1) de jQuery animate functie met afzonderlijke elementen per wolk, (2) een CSS3 keyframe animation en (3) een 2D animatie met HTML5 canvas. De animatie bestaat uit willekeurig geplaatste wolken (24-bit PNG’s) die met een lineaire snelheidsfunctie naar de onderkant en zijkant van het scherm ‘drijven’. Tegelijkertijd wordt de afmeting van de wolk vergroot en neemt de ondoorzichtigheid (opacity) toe.

De jQuery methode is het meest compatibel met verschillende browsers. De enige afhankelijkheid is Javascript, 24-bit PNG’s  en een vorm van CSS opacity. De enige afvaller hierbij is Internet Explorer 6. De keerzijde is dat deze methode ook de slechtste performance heeft van de drie. De animatie kan geen gebruik maken van hardware acceleratie en wat oudere browsers hebben al snel moeite met de transparantie en het vele javascript.

De CSS3 keyframe animatie is de nieuwste vorm van animeren en heeft veel potentie. Standaard gebruiken deze animaties hardware acceleratie en dit is terug te zien in de mooie vloeiende beweging. Daarnaast is deze methode ook in erg weinig regels te programmeren. Het grootste nadeel is dat het op dit moment alleen werkt in Webkit browsers, wat neerkomt op Chrome en Safari. Met gezamenlijk 20% marktaandeel is dat nog niet zoveel.

De laatste methode is een 2D canvas animatie. Deze nieuwe HTML5 methode wordt door de laatste versies van alle grote browsers ondersteund en in veel gevallen ook met hardware acceleratie. De methode is Javascript intensief, maar de performance is in de meeste gevallen goed. Op de ‘coming soon’ pagina hebben we daarnaast een systeem ingebouwd om het aantal wolken te beperken in het geval er toch slechte performance blijkt. Helaas heeft Internet Explorer pas vanaf versie 9 ondersteuning voor canvas, dus bezoekers met Internet Explorer 8 of lager serveren we een statische afbeelding van de wolken. Canvas is duidelijk de methode om animaties zonder Flash weer te geven tegenwoordig. Daarnaast gaan we in de toekomst CSS3 animaties zien voor eenvoudige en snel te implementeren effecten.

Het idee

We willen je met onze website laten dromen over nieuwe vakanties. Inspireren met leuke stedentrips. Verleiden tot een weekendje weg. En bovenal laten zien dat dit allemaal veel goedkoper kan dan je denkt!
Door je vliegtickets en accommodatie los te boeken kun je de marge van reisbureaus uitsparen. Dit scheelt erg veel geld. Het grote nadeel is echter de lange zoektocht naar die ene perfecte combinatie. Wanneer je eindelijk scherp geprijsde vliegtickets hebt gevonden blijken de hotels op de bestemming erg prijzig, of vice versa. Hier gaan wij verandering in brengen. Bij ons kun je binnenkort tegelijkertijd vliegtickets en accommodatie vergelijken en boeken. Hierdoor vind je altijd de goedkoopste combinaties!

Deze gecombineerde manier van zoeken staat aan de basis van onze website, maar is slechts het fundament van de talloze mogelijkheden die wij zullen bieden. Door informatie over de bestemmingen van talrijke bronnen op het internet te combineren wordt het bij Bonnevoy mogelijk om eenvoudig die ene perfecte vakantie of reis te vinden. Zo helpen we je graag bij het kiezen van een bestemming die bij jou past en houden we real-time trends en interesses bij om zo de ideale inspiratiebron te worden.

Hieronder vind je een aantal voorbeelden van wensen waarop we een reis of stedentrip kunnen gaan zoeken voor je.

 

  • Ik wil eind augustus twee weken op vakantie. Het mag maximaal 30 graden zijn op mijn bestemming. Ik wil een hotel of hostel midden in het uitgaansgebied van de stad en mijn budget is €500.
  • Ik wil tussen september en december een stedentrip maken van drie tot vijf dagen. Er moet tijdens mijn trip een groot festival plaats vinden in de stad. Een biertje op het terras mag maximaal €1,50 kosten.
  • Ik wil binnen een maand zo lang mogelijk op vakantie voor €200.

 

Heb je ideeën voor ons om het zoeken van vakanties nog leuker of makkelijker te maken? Laat het weten in de comments!

Hallo wereld!

Het vinden van een vakantie zal nooit meer hetzelfde zijn.

Vakantiewebsites zijn al tijden onveranderd. Een overvolle, schreeuwende website met willekeurige ‘superdeals’ die iedereen zouden moeten aanspreken. Weinig inspirerend vinden wij. Waarom moet het plannen van een  reis zo’n vervelende ervaring zijn?

Waar vind ik het goedkoopste vliegticket? Waar in de stad wil ik overnachten? Wat voor weer is het tijdens je reis? Het zoeken en boeken van de perfecte vakantie of stedentrip kan dagen, soms zelfs weken, duren.

Dit kan niet langer. Het stopt hier!

Wat als er een website zou bestaan die alle informatie van het internet op een ongelofelijke manier combineert om jouw perfecte vakantie of stedentrip samen te stellen? Een website met alle gemakken van een reisagent, maar dan tegen de goedkoopste tarieven op het hele internet.

Volg de Vakantie Revolutie, Volg Bonnevoy! Op Facebook, Twitter en onze Blog.

Team Bonnevoy