Grad. Proj. Hypersurface Advertising by Postman Patrick

@ PRAVESH DATT PATRICK LU

Pravesh Datt Patrick Lu ARCH1393 â&#x20AC;&#x201C; Graduation Project 2013 Bachelor of Architectural Computing University of New South Wales

Patrickâ&#x20AC;&#x2122;s Acknowledgements To the Faculty of the Built Environment, I thank you most for this riveting journey through my exploration of computational architecture. To Pravesh, gratitude is placed upon your spirit and creativity keeping us focused and on track when times were low, especially for putting up with my indecisions and candidness. I could not have asked for a better partner, what a blast! To the tutors, Stephen Peter, Robert Walsh and Wesley Benn for your support and encouragement from day one to d-day. To my friends, thank you all for tolerating my disorganisation and understanding when I needed it the most, I hope I can repay the debt in the near future. To Anita, immense gratitude for differing perspectives, the emotional support and maturity for the times I never thought I needed it. Finally to my brother David and mother Kim, thank you for being the foundations in my life, eternal gratitude as I am forever in your debt.

Pravesh’s Acknowledgements First and foremost, to Pat, there’s only a few people I would have done Graduation Project with. Thanks for putting up with me, my ego and everything else that I’ve thrown at you for the past 2 years, especially this semester. You’re exceptional to work with and I couldn’t have chosen anyone better to do Grad Proj with. Thank you to the tutors Stephen, Rob & Wesley for their ongoing support and contributions throughout the course. To my friends, thanks for the support, encouragement and input you’ve had into this project and my university life. To the Earlwood Boys, thank you for all the support, mateship and laughs throughout this project and my life in general. Absolutely blessed to have your company, couldn’t ask for a better extended family. Finally, to Mum, Dad & Scindya, I wouldn’t be able to achieve anything without your support and love. Thank you for everything.

CONTENTS

Chapter 1 - Introduction

1.1 Aims and Objectives 1.2 Deliverables

10 11

Chapter 2 - Precedent Studies

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11

Beats by Dre - #showyourcolor Ford C-Max - Augmented Reality Footlocker - NB574 Kiosk Asics - Run With Ryan YesYesNo - Interactive Projection Mini Cooper - Vending Machine Ecko - Augmented Billboard Mini Maps - Online Racing JWT - AR Business Card Facecake - Augmented Dresser Lexus Interactive - Beyond Motion

14 16 18 20 22 24 26 28 30 32 34

Chapter 3 - Process

3.1 Proposed Timeline 3.2 Actual Timeline 3.3 Pravesh Weekly 3.4 Patrick Weekly 3.5 Concept 3.6 Design Chapter 4 - Code

38 39 40 44 50 52

Chapter 5 - Final Deliverables Chapter 6 - Bibliography

110

Chapter 7 - References

124

118

INTRODUCTION

The aim of this project was to create an interactive form of advertising. The idea of our interactive advertisements would have the ability to be easily moved and implemented from place to place. Our philosophy of design came from a the question of â&#x20AC;&#x2DC;how do you turn engagement into completion?â&#x20AC;&#x2122; From this we set on a development path where we chose HTML5 as a platform to express potential ideas of engagement methods.

1.1

â&#x20AC;&#x201C; AIMS & OBJECTIVES

Combining Interaction with HTML5. Exploration into finding products or software that allows interactivity beyond the current benchmark of static advertising. Once a certain software is found, couple it with our research into HTML 5 coding and begin designing examples of advertising that rely on user engagement to convey the message. Turning engagement into completion. When exploring the possible relationships between the interactivity and HTML 5 coding, the examples must take advantage of todays reliance in hand held technology to reduce the learning curve of new users to the advertisement as well as keep consistency in product placement. Philosophy Our philosophy in design and the creation of the product is not to invent or develop a brand new platform, but to take existing technologies and use them in a manner that they wouldnâ&#x20AC;&#x2122;t be generally used in. Ergo our final outcome must extend the boundaries of the technology we already have at our fingertips.

1.2

â&#x20AC;&#x201C; DELIVERABLES

Interactive website. Must be HTML 5 equipped and capable of executing advertising examples in conjunction with input device; in this case, the Leap Motion controller. Cross platform accessibility is not a priority but would be ideal if used outside of interactivity. Interactive media content Interactive Media Content. Media content must not be inventive but innovative to relate to user experience with hand held technology. Must convey the message effectively and without delay but still engage and maintain audience in a fashionable amount of time. Representation Representation. Combining the interactivity into a deployment possibility either using a stand alone projection system or designing a new housing to employ what we have created in the digital space with the physical requirements for rapid deployment.

PRECEDENT STUDIES

Finding precedent studies was easier than we thought as there is a global demand and rise of interactivity not only in advertising but also within general design. At first we focused our search on interactivity within Sydney and Australia but extended it globally as it was na誰ve to keep our research so confined especially to a country that has yet to develop a significant imprint into interactive media.

Fig 1. Display on buildings in Times Square, NY

BEATS BY DRE #SHOWYOURCOLOR 14

PROS

CONS

One of the main positives of this study is the basic human interaction. Basic human interaction is a key aspect that we are looking fore to incorporate into our project philosophy. The concept behind this form of advertising is based on a picture and a word, both chosen by the participant. There is a reduced amount of actions required for the entire process, with the majority of the process being taken up by the staff who guides you through the process. The process is efficient and simple; engage with the staff, choose the best photo taken, select a word & colour, step out and look at the billboard.

With the selection of photo and word, there isnâ&#x20AC;&#x2122;t any room for error. Once it is finalised, the image is fixed. While the participant gets to keep a printout of their image, another limitation is the amount of time it is up on the billboard before it is replaced by another image.

The simplicity of the technology used allows for a quick turnaround from the photobooth to the billboard. The large scale of the concept is brought down to a personal level efficiently through the use of the cameras. Placement of the event and advertising media are strategically placed for maximum views. The headphone booths form half of the concept. Using screens in timeâ&#x20AC;&#x2122;s square would reach a larger audience due to the busy nature of the area. This form of advertising also allows the participant to use the product as part of the interaction.

The interaction with the digital media is very basic. It is nonexistent for the participant, as they do not engage directly with the technology. Itâ&#x20AC;&#x2122;s simply a case of standing in front of a camera and listening to what the sales staff has to say about the product. This means people have to wait and listen before they can get their face up on the screens in Times Square. There is also the added distance between the two products, in that the interaction and the output are at two different locations, which require the user to move from one location to the other to see the final outcome.

Fig 2. Ford C-Max. Fig 3. C-Max augmented reality display being used.

FORD C-MAX AUGMENTED REALITY 16

PROS The use of existing technology (Augmented Reality) is well used in creating an engaging and interactive display. There is a wide range of content that provides a variety of information. The basic nature of interacting with the display means that there aren’t any special requirements to use the installation. The Panasonic D-Image Sensor Camera uses 3D depth imaging rather than a printed marker or symbol as a reference point. The removal of these markers allows anyone nearby to immediately start interacting with the content. There are basic instructions given by the screen and a place marker where to stand which are quick and easy to follow.

another form of basic interaction that we are looking for. The augmentation relies on the user having their hand outstretched as if to place the product in the palm of their hands, with the display showing the product. CONS There is a lack of hierarchy with the direction of the advertisement. Once the user has engaged with the board, they are immediately given all of the possible options straight away. The use of AR restricts the amount of people that can engage with the board. Although other people are able to view it, they are not directly involved.

The animated content and vibrant use of colours gives a ‘fun’ vibe to the advertisement. By using a webcam, the user becomes directly a part of the ad. With this scale of advertising and interactivity, there is a sense of intimacy through one person directly engaging with the advertisement.

When not in use, the display doesn’t have any form of enticing ‘screensaver’. The display only shows ‘hold out your palm’ to engage users. It would serve a better purpose if there were a video, or slideshow to further advertise and engage passers by.

Giving the user multiple choices to choose takes away the potential boredom outcome. Each of the interactions comes with detailed information and animations that keep the user interested and occupied.

In terms of information that can be taken away, there is no retention value apparent. Once the user is finished interacting, then they simply walk away from the display. It would be more efficient to have them finish by using a mobile phone, taking a pamphlet or inputting some details to be sent information about the vehicle.

Using the engagers’ hands as part of the interaction is

Fig 3. New Ballance Footlocker installation. Fig 4. Alternate view of installation.

NEW BALANCE 574 CUSTOM KIOSK 18

PROS

CONS

The large scale of the concept is brought down to a personal level efficiently through the use of the cameras. Placement of the event and advertising media are strategically placed for maximum views. The headphone booths form half of the concept. Using screens in timeâ&#x20AC;&#x2122;s square would reach a larger audience due to the busy nature of the area. This form of advertising also allows the participant to use the product as part of the interaction.

Fig 4 & 5. Partipants engagin with the Run With Ryan installation.

ASICS - RUN WITH RYAN 20

PROS

CONS

The most obvious positive with this media interaction is the physical activity required to get involved. In order to engage and be a part of the ad, it requires people to race against the ‘virtual Ryan’. Another positive, coming as a side effect is the passiveness of the entire ad. As it is a giant screen running down the hallway, it doesn’t require people to stop and turn it on, it keeps on running regardless. Being basic has kept the effectiveness of the advertisement high. Multiple people are able to engage with the screens and it doesn’t require any special skills to operate.

The location of the installation requires people to run in an enclosed space, essentially a thoroughfare, which has the potential to become very busy. This could mean it could become a potential hazard for those engaging with the advertisement as well as regular people passing by.

The screens are very large and impossible to miss. The placement means that it can be seen well and isn’t an interference with the walkway. The repetitive nature keeps the installation from being static and mundane. For children, an installation like this is very appealing as it poses a challenge. The amount of space required means that they are able to contain where they run and the scale and brightness is also something that would be very appealing.

There isn’t anything that makes the ad personal with the users. There is no personal interaction that is required from the user to get a response from the installation. It doesn’t create an intimate connection. Because of the fixed screens in the wall, there aren’t multiple forms of advertisements or different engagements. It’s one continuous loop, which may loose interest to some people. At the end of interaction with the advertisements, the engager isn’t left with any retainable materials to reference once they have left.

Fig 5. Participants using handheld devices to alter image map. Fig 6. Mapped image displayed on building facade.

INTERACTIVE MAPPING 22

PROS This is essentially interactivity at its most basic but extremely effective. Project collaboration is by YesYesNo with Inside Out productions and Electric Canvas, the installation was set in Auckland. Described as an extension beyond building projection allowing users to become performers; as the video states in the last step of their project process, â&#x20AC;&#x153;5â&#x20AC;? was inviting the public to bring the project to full circle. The second interactive ability was a light box podium where the younger demographic, notably children were manipulating the media with hand movement tracking on top of the light box which showed consideration of the diversity of users when the light display is moved to a different context. The most important addition was the ability to interact with the projection with a hand held device and as more joined, the denser the manipulation became adding to the social experience. Being a building facade that they have digitally mapped, the canvas opportunities are almost infinite allowing the interactivity to take on multiple personas and reactions per changing context. All three were capable examples were

capable of interacting together on the projection colliding when touched intensifying the experience. CONS Although enticing upon first inspection, it is in the end, a temporary sculpture designed to provide short term gratification and exhibition for the audience. To have a permanent installation would ruin the building faĂ§ade that was designed to premiere in the first place not to mention the maintenance requirements for the elements. The projected interactivity available to users was also minimal as the silhouette would only be engaging for a certain amount of time coupled with the light box or hand held manipulation. A large distraction was the background graphics changing constantly and reducing the viewing effectiveness. The structure itself would become an obstruction and only be operable doing after hours. Design wise the interactivity held no long term gain as the audience interaction would fail after physical interaction became repetitive and tiring as the video description stated that they cycled the 6 scenes by the hour.

Fig 7 & 8. Mini Cooper order system interface.

MINI COOPER VENDING MACHINE 24

PROS

CONS

As the projection is quite large, the Mini Cooper advertisement is quite eye catching to begin with as it mimics traditional, large and graphic advertising mixed with a digital spin. The Media Merchants (TMN) stated that they only used two projectors allowing for easy deployment and redeployment. This allows for a quick change between audiences as contrasted between passer-by’s at a car park to a large street gathering near the end of the video. The projection asks users to text their favourite Mini Cooper by the grid layout of vending machine. Already the advertisement uses two relatable interactions, the user’s personal phone as well as the usage of a vending machine. In return it sends a personal text about their chosen car with a unique animation provided by the projection and further information for purchasing.

Although the advertisement is labelled as quirky and fun, the sense of gratification is lost as an actual Mini Cooper would not be ‘dispensed’ at the bottom of the digital vending projection. In a way, the build-up of the advertisement is lost in the receiving of a digital text rather than a physical object. As the projection is quite large and mostly static in dimension (as shown in various parts of the video), a large flat and clear backdrop would be required to install it limiting the flexibility of the advertisement as well as being redundant in adverse weather conditions.

Animations ranging from skateboarding, pinball machine antics, smashing glass, smoky burnouts and many more keep the audience entertained suggesting texting additional codes to experience each animation, sound is also available creating an atmosphere and giving the users something to connect to when viewing the advertisement.

No details were given on how the texting system operates when there is a large amount of data traffic, when there are only a few texting, the digital vendor might be able to respond in kind but what if there were hundreds of people gathered, texting at the same time? The wait time would assumingly stack delaying the reaction that users were looking for thus losing the engagement of that user due to lack of response.

Fig 9. Ecko interactive spraypaint billboard.

AUGMENTED ADVERTISING 26

PROS

CONS

Interactive static advertising in Sydney has only recently begun with JCDecaux and ADshel presenting advertisements embedded with video. None which have harnessed our daily use of hand held technology on such a small scale. Ecko Untld presents an advertisement targeting the user’s creativity to graffiti a public amenity, something that is considered illegal can now be engaged as harmless fun. The assume application which users download allows you to create your own “digital spray can” with nozzle type, colour palette, button selector as well as asking you to “shake” before use, emulating a real experience and taking advantage of hand held technology.

A positive and negative, the engagement is based on the creativity of the audience member so interactivity may be lost at the extent of boredom or excessive use of time. The sole image provides the process in which the user creates the “digital spray can” It is also not group orientated although other members may watch on diluting the experience to one user at a time. The fact that it is an open media canvas; it could also be subjected to a heavy amount of vandalism of inappropriate imaging discouraging users further.

However, it uses relatable content drawn from the user’s own imagination as well as their hand held device creating instant gratification and depending on how long they spend, the message sinks deeper. As it is based on a bus stop, the deployment possibilities are endless especially around a CBD where the audience is comprised of a myriad of demographics allowing for endless iterations of designs at the touch of a finger.

No information was given on how the billboard resets itself, whether it is by the user leaving the vicinity of the advertisement or if it is to their will alone. Cross platform capabilities will also be necessary since a large range of operating systems for hand held devices are available and it is not clear if the billboard retains the ability to do so. Hygiene is also an issue as daily users can total in the thousands especially within the CBD on a weekday.

Fig 10. Racing friends from social networks. Fig 11. Customising Mini for the race.

MINI MAPS ONLINE DRIVING 28

PROS

CONS

Online advertisement has been the bane of existence since the beginning becoming a pet peeve for the majority of web surfers. Mini again provides an interactive advertisement through online maps, allowing light customisation of your drivable mini cooper using Google maps as the race track. It is tailored to act like a game; initially asking the user to design their cooper with a plethora of colours and graphics before even setting off in it. Using a search toolbar, Mini has provided preset locations across the globe for you to race in. So before you even start a race, the message of Mini has been lengthened through the customisation menu; the more you customise, the more you are subjected to Mini.

Although the game maintains engagement by using social networks to prolong the game time and possibilities of races, it is also the downside as extended game time may exhaust the attention of the audience, completely making the advertisement irrelevant in the first place. The high customisation of the users Mini also provides unrealistic expectations on what could actually be bought. Viewing the game from a bird’s eye view also restricts the advertising to the roof of the Mini which is mostly covered by the user’s customised design anyway. These characteristics factor into the users interactivity and shifts their focus to a “Mini Cooper mini game” rather than advertising.

This goes a step further as a friends list has been created that links to popular social networks allowing you to customise endless racing circuits and invite your friends to compete in your modified mini coopers, whether it is through the streets of Paris or the freeways of Germany. Having a group activity like this adds incredible game time and encourages exploration through the endless canvas of the world, furthering the exposure of Mini Cooper.

Fig 10. Scanning the AR card with a smartphone. Fig 11. Inteactive content from card.

AR BUSINESS CARD 30

PROS Although augmented reality (AR) has been deployed in areas of exhibition and restaurants, it is quite rare to see a smaller scale device thatâ&#x20AC;&#x2122;s as portable as a business card. Traditionally a gesture of good faith for further contact, a business card is as useful as the print it has on its surface, only able to release a number or email to the receiver. In an age now where printing has become more environmental, AR cards are a good improvement to traditional business cards with the ability to showcase a vast amount of additional information compared to the former. To access it, the user would have to simply use a third party application allowing it to access the AR printing on the card. With the ability to access the whole company profile in theory (in this case a show reel), reaching out to potential customers or clients has never been easier. Deployment would be easily carried out as there is no change in dimension or character of the business card besides the differing print type for AR capabilities. No change to the look is a great benefit to inheriting the technology as the only learning curve would be the third party application

which according to the video is as simple as focusing a normal hand held camera application. The similarities in both the card characteristics and usability of the third party application allow easy assimilation of this product in place of a traditional card. CONS Although the use of the AR card is simple, it doesnâ&#x20AC;&#x2122;t seem to be able to carry large amounts of information at least within the confines of the example video. It isnâ&#x20AC;&#x2122;t directly interactive as it links to another website or type of media which may discourage users as it is accessing potentially harmful third party links which may lose engagement to the user. Furthermore the application itself is third party adding another layer to discourage users even more. Being a traditional card as well means it is still subject to the elements and wear and tear. A traditional business card may still be effective when damaged but no information was given if the card is still readable by the third party application when damaged by the elements, if so is there an external link available to access the information?

Fig 12. User interacting with displayed options. Fig 13. Virtual room interaction using Kinect camera.

FACECAKE AUGMENTED CLOTHING 32

PROS

CONS

A great example of SDK for Kinect, Facecake has created a virtual dressing room prototype that allows users to ‘virtually’ wear any of the clothing provided by the selected stores. The interactivity is direct as it relies on the user to connect with the display and navigate the simple user interface which is quick to recognise the user and provide projections upon them. Flexibility is provided in the program to allow multiple projections upon the user, whether it is just a handbag or a handbag with shoes and a scarf heavily personalising the experience and increasing exposure time. User friends can also join in on the virtual dressing room without any privacy concerns.

The downside of the virtual program is in the title, it dulls the original experience of trying on clothes physically, similar to the experience of shopping online. Although the Kinect models the apparel close to the user’s body shape, the tactile feel is no longer present. The program also doesn’t respond to physics so inspecting the detail of a bag or finding out how a dress would react to certain body movements wouldn’t be possible.

At the end of the session, the user can choose to snap a picture of their self and save it to their hand held device or upload it to their favourite social network carrying over the experience and extending the reach to others within their network. The photo itself is also a reminder prolonging the personal experience and possibility of return.

Deployment possibilities would also be highly expensive as each change room would need a specific Kinect tailored to the room dimensions, this restriction would hamper the ability of the augmented change room to become status quo as right now it can only be available in boutique style outlets.

Fig 14. Horizontal scrolling. Fig 15. Vertical parallax scroll.

LEXUS INTERACTIVE WEBSITE 34

PROS

CONS

At first the website garners no block of text, rather a feature homepage with an arrow directing the viewer downwards. A minimalistic approach serves well as it subtlety suggests to the reader to scroll down without pressuring them. There is no “swipe down to continue” allowing the viewer to read at his/her discretion. The pages are ‘activate’ with HTML 5 transitions when scrolling is past a certain point allowing a sense of navigation loss as the pages feel ‘connected’ rather than being individual entities. Content is also minimal showing large graphics complimenting the scrolling as users can still appreciate the website when scrolling.

The amount of scrolling was tiring by the end of the website especially going through the sub stories. With so many entries it’s hard to anchor where it begins and where it stops until you scroll back to the feature homepage. Scrolling is heavily dependent as the full story is not available without exploring to enough detail. The fact that there are no buttons or taskbar extends the fact that you are lost within the stories around the half way mark. Although this is countered by the large graphics and minimal text, without any taskbar to anchor you, scrolling quickly becomes the bane of the website when attempting to go backwards.

Scrolling use is not only vertical but horizontal in the “sub stories” on the main page, some stories also require the use of scrolling to tell their story making use of the action second nature rather than solely for navigation. One example is the unravelling of the “figures” using the swipe gesture as each swipe would un-wrap the layers of the figurine construction; from the aesthetic cover to the inner workings then to the digital model and initial sketch. Users can scroll between these layers to create an animation, almost serendipitous

When relying on scrolling for navigation, inserting heavy text paragraphs would be a further detriment which is absent in this website negating the amount of information it could provide. Hence it relies on the detailed graphics and other related media such as stories or renders to provide the story to the user.

PROCESS

Precedent study is a form of study in which researchers use past literature or previously studied findings to develop new ideas and concepts. It is commonly used in fields such as law, especially in the reliance upon past judgements for current cases by court judges.

3.1 - Proposed Timeline Week 1 - 2 Produce proposal and objective based on brainstorming as well as time schedule for objectives, deliverables and sponsor meetings. Week 3 - 4 Finalise objective, initiate design proposals and iterations, possible deployment and fabrication outlets as well as components and interactivity research for precedents. Week 5 - 8 Finalise design proposal with backup iterations and revise objective if needed. Produce programmable examples as well as testing and troubleshooting. Week 9 - 12 Assembly of final product including further testing, workaround for ease of deployment and gathering survey data from the public interacting with the product. Week 13 - 15 Documentation report and portfolio creation including three printed catalogues. 38

3.1 - Actual Timeline Week 1 - 2 Brainstorming an objective proposal and concept history with proposed timeline and scheduling for objectives, deliverables and possible sponsors. Week 3 - 4 Research into interactivity using precedent studies as a basis of approach. Further research into deployment of interactivity and website coding notably html 5 for presentation. Week 5 - 8 Coding and development of html 5 examples used in conjunction with our Leap motion controller, additional troubleshooting for cross platform usability. Week 9 - 12 Designing the podium with workaround for ease of deployment and gathering survey data from the public interacting with the product. Week 13 - 15 Documentation report and portfolio creation including three printed catalogues. 39

PRAVESH

WEEKLY

WEEK 1 – Got all three proposals approved. Two proposals were individual and the third was a joint collaboration with Patrick. I chose to work with Pat as I have worked with him on projects in the past and am very comfortable with how he works and the skills that he has. We came up with the idea of developing a product that could be used for digital interactive advertising. WEEK 2 Continued moving forward with our vision and ideas. In class we were told once again to pull back on our idea and look at the broader scope. From here we were asked to look at case studies in the field that we are choosing to investigate. We took this advice and looked at books and case studies through various sources. At this point, we came to the conclusion that our initial idea may be a highly complex concept to complete within the given timeframe of semester. The precedent studies this week were forms of passive and direct methods of interactivity. WEEK 3 – Pat & I continued looking into finding different forms of interactive advertisements. Found some interesting examples from well-known global advertising brand jcdecaux. Looking through their portfolio of works gave us a lot of inspiration into techniques we may try to implement into our design. We were still having issues communicating ideas across to the tutors. It seemed that we needed to research more into our development area. We kept pushing with the idea of using a cylindrical tower with some form of interactivity. All through the week, we struggled to understand what the purpose of what we are doing. 42

At the start of the week we had a meeting with Dr. Hank Hausler. He gave us the idea of investigating the idea of using e-paper. This led us on another interesting development path, which we eventually scrapped. WEEK 4 – Spent the week reflecting on different advertising cases and found that a lot of the precedents looked at were on a large scale. What we figured out is that we need to find a method to bring this large-scale interaction down to an intimate and personal level. Bringing the interaction to an intimate level requires research into the different forms of interaction. Methods that we thought of using included various sensors (light, pressure, sound) as well as physical inputs (keys, buttons, phones). Also spent some time this week starting to plan out our report layout. Reasoning behind this is to get a head start so that once time comes to compile our report, it will be a drag and drop process. Editing and playing with design is time consuming. Doing this gives us more time for development, should we need it. WEEK 5 Spent the class brainstorming and filtering down a potential question that could serve the basis of our design philosophy. ‘How do you turn engagement into completion’ was the question that served the most purpose. From there we were distilling ideas down and finding key words from the questions that we had come up with. WEEK 6 This week we had our seminars with the tutors and the class. Like week 1, pat & myself had to present to the class what we

are doing, why we are doing it, where we are up to and what problems we’ve had. As time is quickly escaping us, we made the decision to move to a flat surface to present our media. At the end of our presentation, the tutors still didn’t have a clear idea about what we would produce as our final deliverable. This is something that we took into major consideration. WEEK 7 we made a major breakthrough this week! We’ve found the specific direction that we are now going to go pursue. Before class we made time to discuss what we thought was the best way to bring this concept to life. The solution; html5, css3 and an interactive input method. We haven’t figured out what input method we will use, but that is the next step in the design process. At this point in time, it’s between eyesight technology, Leapmotion and webcam based gesture recognition. Once we have that figured out, it’s onwards and upwards. WEEK 8 We received our leap motion devices this week. These controllers are what will be used for our interaction. The learning curve is pretty small and it comes with a lot of plug and play facilities. Third party applications have already been written for tracking finger movements and gestures, which makes this part of the assignment that much easier. WEEK 9 This week, we placed a lot of emphasis on starting to experiment with what html5 is capable of. Using sites like w3schools.com we could see types of coding that we could use to make our content more interactive. a lot of the websites we causally visit use a lot of javascripting. Pat & I quickly came to a conclusion that we simply didn’t have enough time to understand and

learn how to code javascripts. Instead, we can use what’s already been made in templates and implement them, as long as we credit the original source and coder. WEEK 10 This week we were focusing on continuing to develop the website. Patrick placed a lot of emphasis on developing code for the panorama while I continued on the aesthetics of the overall site. What we are trying to achieve is to create an interactive website that doesn’t have to initial feel of a website. This is something that we are finding hard to overcome because of the coding workarounds that are required. Some of the code is becoming quite complex and we do not have a thorough understanding of javascripting. WEEK 11 This week was a big one. We started to put together the full site. The main navigational elements are still missing at this point as we are still using our trackpads for navigating around. By end of next week, we aim to have the site fully complete so we can focus on our report and presentation podium. WEEK 12 More work on the site. Fixing the backgrounds and scripting. Pat put together a concept render of our presentation podium for the exhibition. This will house all of the items we need to display our project.

PATRICK

WEEKLY

1 - 20/08/13 Woo! I made it into Graduation Studio! Really glad that I made it in to set a milestone for myself. Now that the weekly culling is over Pravesh and I can focus on our actual project rather than worrying about future plans. This week I did a concept render of design iteration for our concept which I set in Pitt Street where the original idea came about. As the three cylinders cycle, the advert can be seen from multiple viewing angles rather than a static 2D view, allowing users to walk right up and interact with the visual display. I also initiated research into what companies might benefit us such as JCDecaux who handle the majority of bus stop advertising or what they call “public amenities”. Extreme support companies may be interested in a new type of advertising deployment as well. 2 – 27/08/13 Frustration! The concept we provided to the tutors was a bust, they understood but believed we should take a huge step back and start researching the idea behind advertising first. To this I didn’t understand as advertising has dated back centuries; therefore I took it as research interactivity in today’s society which made more sense. I also had a talk with Hank Haeusler to discuss possible avenues in which advertising today is missing. He presented the idea of guerrilla advertising as a nuisance which needs to be addressed, in this case pole advertising for renters within the Kensington area. Interesting stuff! 3 – 03/09/13

was effective in describing advertising on its basics from the ground up and the development from the 90’s. Although these books have nothing to do with interactivity, I hope to compare them to our future precedent studies. 4 – 10/03/13 This week Pravesh came up with the idea of a navigation system for a shopping mall. I pointed out that we had these in Myer already but he stated the context of Pitt Street. I then came up with some concept renders of what billboards could look like if given the ability of hand gesture of touch capabilities. Some examples were a Volkswagen puzzle piece, Bang and Olufsen audio touch screen, Pitt Street directory with a snapshot of the shopping street and the original example given by JCDecaux of their deployment in Europe. 5 – 17/03/13 Phew. In light of the upcoming seminar, Pravesh and I decided to breakdown all we have learnt from talking to Wesley and Robert in terms of concepts and finally come to a conclusion for our concept or objective so we can finally move on to fabrication and the bulk of the work. The only thing I can really draw on is to make sure our concept sticks with the original concept of JCDecaux; how his placement of public amenities arose a new era of smaller advertising but across a larger scale, how can we take advantage of today’s heavy reliance on hand held devices and slide in advertising so that it is no longer just a pet peeve? Anyway here is the brainstorm list we put together:

This week I took to the library to find additional backstory concepts from what JCDecaux has provided us, I found two effective books; “Oglivy on Advertising” and “The Advertising Handbook”. Oglivy who is deemed the ‘father’ of advertising gave a major insight on how the advertising game works and the development since the 80’s. The advertising Handbook 46

What does static advertising lack? What modern technologies are able to be used to create more efficient and engaging advertisements? How can we make ads more engaging? How to make someone finish an ad?

How do we make an ad not an ad? What are the fundamentals of an ad? How do we bring ads to a personal level? How to digitise advertising? How to turn engagement into completion? How do we make advertising more synonymous with our current lifestyle? Is it possible o use technology to subliminally mash the concept of an ad? Are we able to effectively communicate information in basic form? What is the best method? What is the objective of using interactivity in our method? Should we be aiming at a broad audience or engaging on a smaller level? How? 6 - 23/03/2013 Half point blues. Seminar is this week and we believe we have a solid concept that has been reworked to the tutors ideals. Even though we are still in a bit of shock of completely flipping our original idea upside down. What we are doing: We are taking the existing interactive advertising, analysing it and coming up with a solution to best suit our question of turning engagement into completion. Why we are doing it: Modern advertising is often skipped and seen as a pet peeve. Large graphic used to be the wow factor but is not being replaced by interactivity. Todays advertising lacks form in personal and intimate interaction. Where were up to: Starting to consider different technologies to incorporate into the design Create interactions and designs. using the background of research that we have done.

Problems we are encountering: Also found a billboard advertisement in Central Station showing a promo for the new Iron Man movie. Smack bang in the middle was a video screen that allowed users to view a cycle of short teaser trailers. Wasn’t interactive though so a bit of a bummer, however a good base idea starter for our panorama navigation for Circular Quay. 7 – 24/03/13 Found three additional precedent studies this week; A digital vending machine projection by Mini, A bus stop digital canvas by Ecko allowing users to spray paint the billboard with their phone and a light interaction show using hand gestures and body detection by YesYesNo. Finding these precedents has shed a bit more light on our concept in terms of where it is going. We have seen these examples now in the field so how can we integrate it into Sydney? Why is it not already being deployed? How can we make it easy to deploy and e.t.c. Using JCDecaux as a concept backing has definitely been solidified in my mind. Instead of trying to bring something inventive into the advertising game, why not use something that’s already available which can harness that ability? Public amenities are definitely a good start. We have also purchased two Leap Motion Controllers to aid in our exploration of hand gesture manipulation. 8 – 01/10/13 We just got our Leap Motion Controllers! Woo! Packaging was quite mint as it looked like it was designed straight from the Apple think tank. Almost plug and play (with the installation of the driver) the controller worked flawlessly, I needed a bit of configuration in terms of troubleshooting when using it but after about 10 minutes I was navigated my computer with natural ease. The Leap controller basically works but emitted a “V” shape infrared pyramid with one half being the detection stage and the second half of the pyramid being the touch stage so when your finger was 47

recognised in the first half, it came up as a gray reticule on the screen allowing for easy locating, once you thrust your finger to click on something, the second half would detect it and turn the reticule green complying. When browser surfing it was highly adaptable, a bit sensitive at first but the learning curve was very dull. Full gesture control was available from using two fingers to rotate or zoom and 4 fingers to swipe and return or forward a page. I’m very excited to see the capabilities it has on the examples we have provided for our future audience. 9 – 08/10/13 This week was a big find in terms of precedent studies as I found a website that was showcasing Lexus’s side funded projects, notably one that represented their motion of a new range of cars through puppet motion of two large mannequins experiencing each other. Using the leap motion controller we just received, it worked perfectly with the third party application “touch less for windows” allowing us to navigate the site even easier without the labouring scroll of my mouse or D-pad. The site took advantage of this quite heavily from using multiple scrolls to unveil a certain part of the design process or drag and scrolling to view a 3D model that only showed information at certain parts of the rotation. Although bespoke in nature for general users, the website takes advantage of gesture scrolling quite well above normal web surfing. 10 – 15/10/13 What a nightmare for this week, crash coursing myself into CSS/java/j-query was really annoying even from the knowledge of basic CSS retained from Stephen Peter’s class from first year. I’m not too worried about starting a bit late on this one as we have our layouts ready to go on paper, we just have to translate that into code and we should be okay. However the problem is finding a reliable j-query script 48

which would work with what we want to produce. 11 – 22/10/13 This week I stabilised the coding heavily for the panorama example. There are a few more kinks to iron out but the hover over works now. This allows users to hover over a certain part of the panorama and a highlighted box will appear around that site (eg. User highlights Circular Quay) Other kinks that need working are hotspots on those certain areas that link to further information about that certain site with upcoming events or contact information. Again this whole example is to cut down the time between finding out information about certain places and the things that they offer to either the local public or international explorers. The other hotspots I will code later on the week but it is simply a matter of getting one right and copying and pasting the others (easy to say hard to code). The changes that were made were adding a jquery script: <script src=” http://ajax.googleapis.com/ajax/libs/ jquery/1.10.2/jquery.min.js”></script> This scriptywhich allowed me to toggle the SYDNEY CBD font when hovering over the positioned area of the CBD within the panorama. This benefits me greatly working around Jquery as normal CSS does not allow you to toggle multiple things for one action. I also added a link to our final draft report which we have uploaded to issuu.com. 12 – 29/10/12 This week I focused on backgrounds for our advertisements where the example would be surrounded by additional information that supports the main theme without taking attention away. The purpose of this is to give passing audience members a glimpse of what the advertisement is about before interaction even occurs. This is necessary as if

the product was only available with no signage or additional supporting information; initial contact is lost with the user before interaction even occurs. For the 360, as the theme was for Jordan Nikes, I repurposed an older advertisement of Nike Jordan “wings” with the quote by William Blake “No bird soars too high, if he soars with his own wings”. With the outstretched arms of Michael Jordan, the advertisement will be easily recognised coupled with the rotating 360 model. The holiday image gallery was very fufilling to do as it was my first example that I imagined especially when standing bored at my regular bus stop. As many people find time aside hard for research into holidays, why not bring it to them? Thus the background for the holiday images would be a bold “NEED A HOLIDAY?” instantly breaking the ice to the audience. With a mental image, immediately a YES would be screaming in their mind and what better way to satisfy that with a gallery of possibly holiday destinations. The Qantas background confirms who they will be flying with which can be switched between companies. I had a bit of fun with the snow video and appropriated a photoshopped image of snowboarders with trolleys to give the audience something to relate to but with a twist. I enlarged the SEASON PASS for instant recognition for viewers as well as the left side bar of possible pricing and additional information.

13 – 05/11/12 Crunch time. This week was devoted heavily to improving my content for the report, notably the precedent studies. I had to edit the wording of some chapters as it didn’t feel like they linked properly. Pravesh and I decided on a podium platform for our exhibition which will house the laptop, projector and Leap motion controller, we wanted to design something very minimalistic as we were both interested in this area of display. I quickly whipped up a concept render of what the podium could possibly look like when we settled on Perspex with a matte black top and bottom cap. The Leap controller sits in a trench pocket flush level with the top cap and the usb cable trailing down the far back corner towards the laptop in the bottom section. Access to the projector is through a viewing hole which we have left open to lessen the hassle when the podium is active. However the laptop section at the bottom of the podium contains a dog flap for accessibility. A hole grid has also been fitted to allow for cooling capabilities. The reason why we designed this podium was not only for aesthetics when presenting, but to provide future potential clients a visualisation of what a gesture device could be when combined with a mobile deployable advertising display. Instead of a Perspex box, why not a box wrapped with the Red Bull logo or an Information stand in the middle of a shopping mall?

Although very informative, I didn’t want the background of the directory to just be some concept image or pretty view which distracted viewers from the actual panorama navigation. Instead I placed some current events that are about to happen or have happened allowing viewers to get a sense of what events are going on in the places that they are viewing in the Panorama. For example if the user hovered over the Opera Bar and there was an promotion for it, a connection would be made for their next destination. 49

CONCEPT

Advertising is no doubt the most effective way to distribute and manage media attention across to the general public, we are bombarded daily with commercial messages from all types of media, digital and analog. Brierly’s The Advertising Handbook describes the phenomenon “by the age of 18, the average American will have seen around 350,000 commercials (Law 1994:28)… you cannot avoid them.” With society being heavily saturated by tech, advertising is now available at every click of a button. However modern day technology has set a new benchmark at which advertising fails to adapt effectively and consistently especially in Sydney. Earlier this year, The Age and Sydney Morning Herald changed their print dimensions from broadsheet to tabloid marked on the 4th of March, 2013 calling it the “new era begins…” while devices such as the Apple Tablet have been released circa 2010. The adaptation between traditional to digital can no longer be overlooked, advertisement is no longer based on large static displays but rather its ability to remain dominant and engaging in a society heavily saturated with ‘at the ready’, technological devices. Ergo, our study is focused on the development of static advertising, how it has progressed and why we believe it is currently failing to retain engagement in such a technologically progressive society. Oglivy surmises on the creation of advertisement “I don’t want you to tell me that you find it ‘creative’. I want you to find it so interesting that you buy the product.” With hand held technology needing engagement in order to operate, interaction has become status quo, which is void in traditional static advertisements relying solely on visualisation as the selling point. He further deduces that from the point of conception of his Madison Avenue shop in 1949, he assumed that advertising would undergo major changes but only one has occurred to him; the emergence of television being a powerful medium for selling products, ergo the consistent nature to purchase products “who’s advertising promises them value for money, beauty, nutrition, relief from social suffering, social status…” is still prevalent “all over the world”. In saying this, channelling that same concept can bring to the conclusion that hand held ‘smart’ technology is now a new medium for advertisement. This underlining characteristic has survived time only to be passed on to a digital medium; advertising being placed as a ‘gateway’ to enter social platforms and applications require interaction e.g. YouTube advertisements; users need to interact with an advertisement before watching their desired video. In conjunction with new hand gesture television sets such as Samsung’s’ “SMART”, a new level of interaction is seen on a digital level however analog advertisement is still present, whether hearing it on the radio or reading it through print media but the engagement is no longer apparent as interaction is becoming more dominant than visualisation (back this up). With the world so interconnected now, it is not surprising to see advertising shown so frequently upon your digital footprint.

DESIGN

In Gaffney’s abstract on JCDecaux as an indicator of Globalisation, he disproves Decaux’s statement of inventing street furniture and rather that he lobbied to provide bus shelters across France as ‘public service amenities’ while capitalising on the “control for their integrated advertising panels”. At this point the concept of establishing ground in order to maximise viewing potential is evident as the weekly momentum of travelling to work is now hand in hand with viewing the advertisements. Gaffney then uses Decaux’s business model to encapsulate advertising in a nutshell “… is now part of decision-making processes which determine the level of service in neighbourhoods around the globe”. Throughout Sydney, advertisement icons such as the Coca Cola sign in Kings Cross, Pitt Street Mall, public transport and their amenities continue Decaux’s notion. Our response to advertising warrants both exposure but still assimilating itself in the environment without being too overbearing. In doing this the audience being so heavily technologically driven will be more inclined to adopt the innovative rather than adapt to the inventive especially the concept of grabbing attention within three seconds. Gaffney interprets Decaux’s notion of combining architectural aspects with the environment through Castell’s description of architecture: “The space of flows includes the symbolic connection of homogenous architecture in the places that constitute the node of each network across the world, so that architecture escapes from the history and culture of each society and becomes captured into the new imaginary, wonderland world of unlimited possibilities that underlies the logic transmitted by multimedia.” Coupled with the fact that most of the ‘street furniture’ is designed by architects, Gaffney concludes the marriage as “homogeneous architecture” as they are strategically placed in specific zones in cities where the ‘largest concentrations of production and consumption of capital: special economic zones, Business Improvement Districts, Commercial Districts and Entertainment Districts”. Within the Sydney CBD, JCDecaux’s street furniture is evident as the company recognition itself. Walking through George Street, Castlereagh and around Circular Quay and it would be difficult to not bypass a JCDecaux labelled public amenity but acknowledge them not as bus stops or signs, but as part of the Sydney CBD.

CODE

THE FUN PART

About Page

</section> </body> </html>

<head> <title>About Our Project</title> <meta name=”description” content=”How to create a parallax scrolling effect using jQuery, HTML5 and CSS3”> <meta name=”author” content=”Mohiuddin Parekh, Nettuts+”>  <link rel=”stylesheet” href=”css/style.css”>  <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/ jquery.min.js”></script> <script src=”js/script.js”></script> </head> <body>  <section id=”home” data-speed=”10” data-type=”background”> <div id=”headerover”> <a href=”../Index/index.html”> <img src=”arrow.png” width=”30” height=”30”></a> </div> <br> <img src=”images/intro.png” width=”1000” height=”800” align=”middle”> <article> </article> </section>  <section id=”about” data-speed=”4” data-type=”background”> <br><br><br><br><br><br><br><br><br><br><br> <img src=”images/intro.png” width=”1000” height=”800” align=”middle”> <article>Simple Parallax Scroll</article>

CSS - STYLE.CSS /** * Parallax Scrolling Tutorial * For NetTuts+ * * Author: Mohiuddin Parekh * http://www.mohi.me * @mohiuddinparekh */

body{ margin:0; padding:0; } .content { height: 250px; width: 500px; z-index: 99999; top: 100px; left: 400px; } #home { background: url(../images/home.jpg) 50% 0 no-repeat fixed; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.8);

} #about { background: url(../images/about.jpg) 50% 0 no-repeat fixed; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.8); }

#headerover:hover { width: 640px%; height: 30px; float: center; -webkit-transition-duration: 1s; -webkit-background-size: cover; z-index: 999999; }

/* Introduction */ #home article { /*background: url(“../images/intro.png”) no-repeat scroll center top transparent; background-size: cover;*/ height: 962px; position: absolute; text-indent: -9999px; top: 29px; width: 100%; } #about article { background: url(“../images/parallax.png”) no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; } #headerover { width: 640px%; height: 30px; float: center; background-color: rgba(102,102,102,0.6); -webkit-transition-duration: 1s; z-index: 999999; overflow:hidden; }

Index Page <!doctype html> <html> <head> <meta charset=”UTF-8”> <title>HTML5 Interaction - Pravesh Datt &amp; Patrick Lu</title> <link href=”style.css” rel=”stylesheet” type=”text/css”> <link href=”untitled folder/background.css” rel=”stylesheet” type=”text/css”> <link href=”untitled folder/bg.css” rel=”stylesheet” type=”text/ css”> <script type=”text/javascript” src=”js/modernizr.custom.86080. js”></script> </head> <body> <div id=”header2”></div> <div id=”container2”> <br><br><br><br><br><br><br><br><br><br><br><br> <ul class=”cb-slideshow”> <li><span>Image 01</span><div></div></li> <li><span>Image 02</span><div></div></li> <li><span>Image 03</span><div></div></li> <li><span>Image 04</span><div></div></li> <li><span>Image 05</span><div></div></li> <li><span>Image 06</span><div></div></li> </ul> <ul class=”ca-menu”> <li>

<a href=”../About/index.html”> <span class=”ca-icon”>A</span> <div class=”ca-content”> <h2 class=”ca-main”>About</h2> <h3 class=”ca-sub”>About Our Project</h3> </div> </a> </li> <li> <a href=”../Panorama/TEMPLATE/panorama-template.html”> <span class=”ca-icon”>P</span> <div class=”ca-content”> <h2 class=”ca-main”>Panorama</h2> <h3 class=”ca-sub”>Sydney Harbour </h3> </div> </a> </li> <li> <a href=”../Threesixty/threesixty.html”> <span class=”ca-icon”>3</span> <div class=”ca-content”> <h2 class=”ca-main”>360</h2> <h3 class=”ca-sub”>Full rotatable view</h3> </div> </a> </li> <li> <a href=”../Video/video.html”> <span class=”ca-icon”>V</span> <div class=”ca-content”> <h2 class=”ca-main”>Video</h2> <h3 class=”ca-sub”>Video</h3> </div> </a> </li> <li> <a href=”../Gallery/Travel/travel.html”> <span class=”ca-icon”>G</span>

<div class=”ca-content”> <h2 class=”ca-main”>Gallery</h2> <h3 class=”ca-sub”>Photo Goodness</h3> </div> </a> </li> </ul> </div> </div> </div> <div id=”footer”>Designed by Patrick Lu & Pravesh Datt <div id=”footerleft”></div> </div> <script type=”text/javascript” src=”http://ajax.googleapis. com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>

</body> </html> CSS - STYLE.CSS html, body { height: 77%; background-color:#000; } body

{ margin: 0; padding: 0; color: #000000; height: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; line-height: 1.4;

} #container { background-image: url(images/background.png); -webkit-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width: 150px; margin: 0 auto; display: block; background-attachment: fixed; height: inherit; min-height: 100%; } #footer { background-color: #000; width: auto; padding: 10px; height: auto; /*background-color: rgba(0,0,0,0.3); */ background-repeat: no-repeat; /*bottom:0; /*z-index:999999;*/ position: static; z-index: 99999999; }

#header { top: 0; width: auto; padding: 0px 0px; height: 100px; /*background-color: rgba(0,0,0,0.3);*/ background-color: #000; background-image:url(images/vlone_logo_clear.png);

}

background-repeat: no-repeat; background-position: 2% center;

#hold { height: auto; width: 100%; background-repeat: no-repeat; background-position: center; background-size: 90% auto; vertical-align: middle; padding: 10%; position:fixed; } #footerleft { float: left; padding: 10px; position: 2% center; color: #424242; position:fixed; } #footerright { float:right; padding: 9px; position:fixed; }

/* CSS STYLE TABS */ @font-face { font-family: ‘WebSymbolsRegular’; src: url(‘websymbols/websymbols-regular-webfont.eot’); src: url(‘websymbols/websymbols-regular-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘websymbols/websymbols-regular-webfont.woff’) for-

mat(‘woff’), url(‘websymbols/websymbols-regular-webfont.ttf’) format(‘truetype’), url(‘websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular’) format(‘svg’); font-weight: normal; font-style: normal; } .ca-menu{ padding:0; margin:20px auto; width: 1020px; } .ca-menu li{ width: 200px; height: 300px; overflow: hidden; position: relative; float:left; background: #fff; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); margin-right: 4px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; /* WebKit */ -webkit-transition-property: opacity; -webkit-transition-duration: 3s; } .ca-menu li:last-child{ margin-right: 0px; } .ca-menu li a{ text-align: left; width: 100%;

height: 100%; display: block; color: #333; position: relative; } .ca-icon{ font-family: â&#x20AC;&#x2DC;WebSymbolsRegularâ&#x20AC;&#x2122;, cursive; font-size: 60px; color: #333; text-shadow: 0px 0px 1px #333; line-height: 150px; position: absolute; width: 100%; height: 50%; left: 0px; top: 0px; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-content{ position: absolute; left: 0px; width: 100%; height: 50%; top: 50%; } .ca-main{ font-size: 30px; opacity: 0.8; text-align: center; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear;

} .ca-sub{ text-align:center; font-size: 14px; color: #666; line-height: 40px; opacity: 0.8; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ca-menu li:hover{ background-color: #000; } .ca-menu li:hover .ca-icon{ color: #fff; font-size: 90px; } .ca-menu li:hover .ca-main{ color: #00ccff; -webkit-animation: moveFromLeftRotate 300ms ease; -moz-animation: moveFromLeftRotate 300ms ease; -ms-animation: moveFromLeftRotate 300ms ease; } .ca-menu li:hover .ca-sub{ color: #fff; -webkit-animation: moveFromBottom 500ms ease; -moz-animation: moveFromBottom 500ms ease; -ms-animation: moveFromBottom 500ms ease; } @-webkit-keyframes moveFromLeftRotate{ from { -webkit-transform: translateX(-100%) rotate(-90deg); } to { -webkit-transform: translateX(0%) rotate(0deg); }

} @-moz-keyframes moveFromLeftRotate{ from { -moz-transform: translateX(-100%) rotate(-90deg); } to { -moz-transform: translateX(0%) rotate(0deg); } } @-ms-keyframes moveFromLeftRotate{ from { -ms-transform: translateX(-100%) rotate(-90deg); } to { -ms-transform: translateX(0%) rotate(0deg); } } @-webkit-keyframes moveFromBottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0%); } } @-moz-keyframes moveFromBottom { from { -moz-transform: translateY(100%); } to { -moz-transform: translateY(0%); } } @-ms-keyframes moveFromBottom { from { -ms-transform: translateY(100%); } to {

-ms-transform: translateY(0%); } } CSS - BACKGROUND.CSS .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow:after { content: â&#x20AC;&#x2DC;â&#x20AC;&#x2122;; background: transparent url(../images/pattern.png) repeat top left; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; }

.cb-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .cb-slideshow li div h3 { font-family: ‘BebasNeueRegular’, ‘Arial Narrow’, Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; } .cb-slideshow li:nth-child(1) span { background-image: url(images/1.jpg) } .cb-slideshow li:nth-child(2) span { background-image:url(images/2.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { background-image:url(images/3.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s;

animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { background-image:url(images/4.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) span { background-image:url(images/5.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .cb-slideshow li:nth-child(6) span { background-image:url(images/6.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .cb-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s;

} .cb-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .cb-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 }

100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0 }

8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } .no-cssanimations .cb-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .cb-slideshow li div h3 { font-size: 140px } } @media screen and (max-width: 600px) { .cb-slideshow li div h3 { font-size: 80px } }

CSS - BG.CSS @font-face { font-family: ‘BebasNeueRegular’; src: url(‘fonts/BebasNeue-webfont.eot’); src: url(‘fonts/BebasNeue-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘fonts/BebasNeue-webfont.woff’) format(‘woff’), url(‘fonts/BebasNeue-webfont.ttf’) format(‘truetype’), url(‘fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’); font-weight: normal; font-style: normal; } /* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:190px; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul {

list-style:none; } caption,th { text-align:left; } q:before,q:after { content:’’; } abbr,acronym { border:0; } a{ }

color: #333; text-decoration: none;

.clr{ clear: both; } .container > header{ padding: 30px 30px 10px 20px; margin: 0px 20px 10px 20px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: left; } .container > header h1{ font-family: ‘BebasNeueRegular’, ‘Arial Narrow’, Arial, sans-serif; font-size: 35px; line-height: 35px; position: relative; font-weight: 400; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); padding: 0px 0px 5px 0px; }

.container > header h1 span{ } .container > header h2, p.info{ font-size: 16px; font-style: italic; color: #f8f8f8; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); } /* Header Style */ .codrops-top{ font-family: Arial, sans-serif; line-height: 24px; font-size: 11px; width: 100%; background: #000; opacity: 0.9; text-transform: uppercase; z-index: 9999; position: relative; -moz-box-shadow: 1px 0px 2px #000; -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; } .codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #ddd; display: block; float: left; } .codrops-top a:hover{ color: #fff; } .codrops-top span.right{ float: right; } .codrops-top span.right a{ float: none;

}

display: inline;

p.codrops-demos{ display: block; padding: 15px 0px; } p.codrops-demos a, p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ display: inline-block; border: 1px solid #6d0019; padding: 4px 10px 3px; font-size: 13px; line-height: 18px; margin: 2px 3px; font-weight: 800; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1); box-shadow: 0px 1px 1px rgba(0,0,0,0.1); color:#fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #a90329; background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), colorstop(100%,#6d0019)); background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); }

p.codrops-demos a:hover{ background: #6d0019; } p.codrops-demos a:active{ background: #6d0019; background: -moz-linear-gradient(top, #6d0019 0%, #8f0222 56%, #a90329 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d0019), color-stop(56%,#8f0222), colorstop(100%,#a90329)); background: -webkit-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); background: -o-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); background: -ms-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); background: linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9); box-shadow: 0px 1px 1px rgba(255,255,255,0.9); } p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ color: #A5727D; background: #6d0019; } /* Media Queries */ @media screen and (max-width: 767px) { .container > header{ text-align: center; } p.codrops-demos { position: relative; top: auto; left: auto; } }

Panorama Page <!doctype html> <html> <head> <meta charset=”UTF-8”> <title>Panorama</title> <link href=”style.css” rel=”stylesheet” type=”text/css”> <script src=” http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/ jquery.min.js”></script> <script type=”text/javascript” src=”http://ajax.googleapis.com/ ajax/libs/jquery/1.9.0/jquery.min.js”></script> <script type=”text/javascript” src=”custom.js”></script>

$(“.CBD”).hover(function(){ $(“.CBDcaption”).fadeIn(); },function(){ $(“.CBDcaption”).fadeOut(2000); }); }); </script> <script> $(“.CBDcaption”).ready(function(){ $(“.CBDcaption”).hide(); }); </script>

}); </script> <script> $(document).ready(function(){ $(“.hBridge”).hover(function(){ $(“.hBridgeCaption”).fadeIn(); },function(){ $(“.hBridgeCaption”).fadeOut(); }); }); </script> <script> $(document).ready(function(){ $(“.operaHouse”).hover(function(){ $(“.operaHouseCaption”).fadeIn(); },function(){ $(“.operaHouseCaption”).fadeOut(); }); }); </script> <script> $(document).ready(function(){ $(“.operaBar”).hover(function(){ $(“.operaBarCaption”).fadeIn(); },function(){ $(“.operaBarCaption”).fadeOut(); }); }); </script> <script> $(document).ready(function(){ $(“.botGardens”).hover(function(){ $(“.botGardensCaption”).fadeIn(); },function(){ $(“.botGardensCaption”).fadeOut(); }); }); </script>

</head> <body>

<div id=”container2”> <div id=”hold”> <div id=”mouseover”> <br> <h1>/ Panorama</h1> <p>Australia had over 6.2 million tourists inbound at the end of March 2013 (Tourism Australia), an increase of 4.9 percent to the previous year. With a large portion of this number , it’s a wonder to why our navigational boards across Sydney CBD have not been updated to suit the legibility of the digital age. Current navigational boards are ill suited to providing effective information to the public relying on a birds eye view for maximum information about the surrounding area. Although this is positive for reinforcing the scale of the users surroundings, one would have to orientate themselves to the map and legend before direction is attained.<br><br> Having a panorama or snapshot of the area however provides instant recognition of the site that the viewer wishes to explore. With no need to understand minute text for legend or a plethora of colours, the visitor can simply explore the media with a touch of their finger on any hotspot of a certain placemark in that area whether it be a landmark or a leisure area that is popular with the public. This would have no impact on the original navigational user interface as the snaphot can be linked to a home map where different site pictures can be viewed.</p>

CSS - STYLE.CSS </div> <div id=”panorama”> <img src=”../Circular-Quay.gif” height=”567” width=”3804” id=”Image1”/></div> <div class=”CBD”></div> <div class=”CBDcaption”><a class=”show-popup” href=”http:// www.google.com.au”>SYDNEY CBD</a></div> <div <div <div <div <div <div div> <div <div <div <div <div <div <div <div

class=”operaRes”></div> class=”operaResCaption”>OPERA RESTAURANT</div> class=”cQuay”></div> class=”cQuayCaption”>CIRCULAR QUAY</div> class=”intTerminal”></div> class=”intTerminalCaption”>INTERNATIONAL TERMINAL</ class=”hBridge”></div> class=”hBridgeCaption”>HARBOUR BRIDGE</div> class=”operaBar”></div> class=”operaBarCaption”>OPERA BAR</div> class=”operaHouse”></div> class=”operaHouseCaption”>OPERA HOUSE</div> class=”botGardens”></div> class=”botGardensCaption”>BOTANICAL GARDENS</div>

</div> </div> </body> </html>

html, body { height: 77%; background-image:url(../background.jpg); background-size:cover; background-attachment:fixed; font-family: gothambook; } body }

{ margin: 0; padding: 0; color: #000000; height: 100%; font-family: gothambook; font-size: 100%; line-height: 1.4;

h1 { font-family: gothambook; font-size:36px; color: #FFF; } p{ font-family: gothambook; font-size:18px; color: #FFF; } #container2 { background-size: cover; min-width: 150px; margin: 0 auto; display: block;

}

background-attachment: fixed; height: inherit; min-height: 100%; padding-left: 10%;

#footer { background-color: #000; width: auto; padding: 10px; height: auto; background-repeat: no-repeat; position:static; } #header2 { top: 0; width: auto; padding: 0px 0px; height: 100px; background-color: #000; background-repeat: no-repeat; background-position: 2% center; } #hold }

{ height: 600px; width: 1000px; overflow: scroll; background-repeat: no-repeat; background-position: center; vertical-align: middle; position: fixed; padding-right: 10%;

#footerleft { float: left;

padding: 10px; position: 2% center; color: #424242; position:fixed; } #footerright { float:right; padding: 9px; position:fixed; } #mouseover { width: 90%; height: 55px; float: center; z-index:9999; -webkit-transition-duration: 2s; color: #0CC; margin-left: auto ; margin-right: auto ; } #mouseover:hover { width: 90%; height: 450; -webkit-transition-duration: 2s; z-index: 9999; color: #0CC; height: 450px; margin-left: auto ; margin-right: auto ; } #panorama { height: 500px; width: 100%;

}

padding: auto;

.CBD { height: 174px; width: 583px; position: absolute; left: 78px; top: 144px; z-index: 99; -webkit-transition-duration: 0.8s } .CBD:hover { z-index: 100; -webkit-transition-duration: 0.8s; border: 5px solid #999999; } .CBDcaption { position: absolute; width: 127px; height: 24px; left: 543px; top: 301px; color: #FFF; z-index: 101; font-size: 20px; font-weight: bold; background-color: #999999; visibility: inherit; } .cQuay { height: 39px; width: 204px; position: absolute; left: 347px; top: 319px; z-index: 99; -webkit-transition-duration: 0.8s }

.cQuay:hover { z-index: 100; -webkit-transition-duration: 0.8s; border-top-color: #FF6600; border-right-color: #FF6600; border-bottom-color: #FF6600; border-left-color: #FF6600; border-top-width: 5px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-width: 5px; border-bottom-width: 20px; border-left-width: 5px; } .cQuayCaption { position: absolute; width: 137px; height: 23px; left: 418px; top: 341px; color: #FFF; z-index: 101; display: inherit; font-size: 15px; font-weight: bold; } .intTerminal { height: 56px; width: 231px; position: absolute; left: 716px; top: 288px; z-index;99 -webkit-transition-duration: 0.8s } .intTerminal:hover { z-index: 100;

-webkit-transition-duration: 0.8s; border-top-color: #FF6600; border-right-color: #FF6600; border-bottom-color: #FF6600; border-left-color: #FF6600; border-top-width: 5px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-width: 5px; border-bottom-width: 20px; border-left-width: 5px; } .intTerminalCaption { position: absolute; width: 226px; height: 19px; left: 733px; top: 350px; color: #FFF; z-index: 101; display: hidden; font-size: 15px; font-weight: bold; } .hBridge { height: 143px; width: 481px; position: absolute; left: 1256px; top: 185px; z-index: 99; -webkit-transition-duration: 0.8s } .hBridge:hover { z-index: 100; -webkit-transition-duration: 0.8s; border-top-color: #FF6600;

border-right-color: #FF6600; border-bottom-color: #FF6600; border-left-color: #FF6600; border-top-width: 5px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-width: 5px; border-bottom-width: 30px; border-left-width: 5px; } .hBridgeCaption { position: absolute; width: 187px; height: 28px; left: 1558px; top: 334px; color: #FFF; z-index: 101; display: hidden; font-size: 20px; font-weight: bold; } .operaBar { height: 118px; width: 253px; position: absolute; left: 1660px; top: 321px; z-index: 99; -webkit-transition-duration: 0.8s } .operaBar:hover { z-index: 100; -webkit-transition-duration: 0.8s; border-top-color: #FF6600; border-right-color: #FF6600; border-bottom-color: #FF6600;

border-left-color: #FF6600; border-top-width: 5px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-width: 5px; border-bottom-width: 30px; border-left-width: 5px; } .operaBarCaption { position: absolute; width: 124px; height: 28px; left: 1795px; top: 446px; color: #FFF; z-index: 101; display: hidden; font-size: 20px; font-weight: bold; } .operaHouse { height: 305px; width: 596px; position: absolute; left: 1975px; top: 19px; z-index: 99; -webkit-transition-duration: 0.8s } .operaHouse:hover { z-index: 100; -webkit-transition-duration: 0.8s; border-top-color: #FF6600; border-right-color: #FF6600; border-bottom-color: #FF6600; border-left-color: #FF6600; border-top-width: 5px;

border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-width: 5px; border-bottom-width: 30px; border-left-width: 5px; } .operaHouseCaption { position: absolute; width: 146px; height: 30px; left: 2428px; top: 331px; color: #FFF; z-index: 101; display: hidden; font-size: 20px; font-weight: bold; } .operaRes { height: 57px; width: 298px; position: absolute; left: 134px; top: 342px; z-index: 99; -webkit-transition-duration: 0.8s } .operaRes:hover { z-index: 100; overflow: hidden; -webkit-transition-duration: 0.8s; border-top-color: #FF6600; border-right-color: #FF6600; border-bottom-color: #FF6600; border-left-color: #FF6600; border-top-width: 5px;

border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-width: 5px; border-bottom-width: 30px; border-left-width: 5px; } .operaResCaption { height: 20px; width: 163px; position: absolute; z-index: 101; left: 272px; top: 384px; color: #FFF; font-size: 15px; font-weight: bold; } .botGardens { height: 207px; width: 650px; position: absolute; left: 3150px; top: 87px; z-index: 99; -webkit-transition-duration: 0.8s } .botGardens:hover { z-index: 100; -webkit-transition-duration: 0.8s; border-top-color: #FF6600; border-right-color: #FF6600; border-bottom-color: #FF6600; border-left-color: #FF6600; border-top-width: 5px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid;

border-left-style: solid; border-right-width: 5px; border-bottom-width: 30px; border-left-width: 5px; } .botGardensCaption { position: absolute; width: 227px; height: 28px; left: 3158px; top: 302px; color: #FFF; z-index: 101; display: hidden; font-size: 20px; font-weight: bold; } #headerover { width: 640px%; height: 30px; float: center; background-color: rgba(102,102,102,0.6); -webkit-transition-duration: 1s; z-index: 999999; overflow:hidden; } #headerover:hover { width: 640px%; height: 30px; float: center; -webkit-transition-duration: 1s; -webkit-background-size: cover; z-index: 999999; } @font-face {

font-family: gothambook; src:url(../GothamBook.otf); } JAVASCRIPT - CUSTOM.JS $(document).ready(function(){ // show popup when you click on the link $(‘.show-popup’).click(function(event){ event.preventDefault(); // disable normal link function so that it doesn’t refresh the page $(‘.overlay-bg’).show(); //display your popup }); // hide popup when user clicks on close button $(‘.close-btn’).click(function(){ $(‘.overlay-bg’).hide(); // hide the overlay }); // hides the popup if user clicks anywhere outside the container $(‘.overlay-bg’).click(function(){ $(‘.overlay-bg’).hide(); }) // prevents the overlay from closing if user clicks inside the popup overlay $(‘.overlay-content’).click(function(){ return false; }); });

ThreeSixty Page <!doctype html> <html> <head> <meta charset=”UTF-8”> <title>ThreeSixty</title> <link rel=”stylesheet” href=”css/threesixty.css” media=”screen” type=”text/css” /> <script src=”js/heartcode-canvasloader-min.js”></script> <script src=”js/jquery-1.7.min.js”></script> <script src=”js/threesixty.js”></script> </head> <body> <div id=”headerover”> <a href=”../Index/index.html”> <img src=”arrow.png” width=”30” height=”30”></a> </div>

<h1>/ ThreeSixty</h1> <p>With shopping malls becoming more of an ‘experience’ rather than a task, customers are now more interested in purchasing an item with extensive knowledge on the product especially if it is quite unique. This relates to whether the item is fasionable in context or functional in product, with extensive knowledge on the product, a user is more likely to remember it in the long term rather than seeing it as another purchase. <br><br>

The use of the 360 allows users to view an item in store that may not be available physically, this information can then be sent to the users hand held device allowing them to view it on the fly, constantly reminding the user of what the product is at a more extensive layout. With store’s already adapting to digital use of catelogues, the technology would not be too hard to inherit to today’s technological processes.</p> </div> <div id=”hold”> <div id=”threesixty”> <div id=”spinner”> <span>0%</span> </div> <ol id=”threesixty_images”></ol> </div> </div>

</div> </div> </body> </html> CSS - THREESIXTY.CSS html, body { height: 77%; background-image:url(../background.jpg); background-size:cover; background-attachment:fixed; font-family: gothambook; }

body }

{ margin: 0; padding: 0; color: #000000; height: 100%; font-family: gothambook; font-size: 100%; line-height: 1.4; top: 99999px;

h1 { font-family: gothambook; font-size:36px; color: #FFF; } p{ font-family: gothambook; font-size:18px; color: #FFF; }

#container2 { background-image: url(images/background.png); -webkit-background-size: cover; background-size: cover; min-width: 150px; margin: 0 auto; display: block; background-attachment: fixed; height: inherit; min-height: 100%; } #footer {

background-color: #000; width: auto; height: 20px; background-color: #999; background-repeat: no-repeat; position:static; } #footer:hover { background-color: #000; width: auto; height: 150px; background-color:#FFF;*/ -webkit-transition-duration: 2s; z-index:999999; position:static; } #header2 { top: 0; width: auto; padding: 0px 0px; height: 100px; background-color: #FFF; background-repeat: no-repeat; background-position: 2% center; } #hold { height: auto; width: 100%; background-repeat: no-repeat; background-position: center; background-size: 90% auto; vertical-align: middle; padding: 10%; position:fixed; }

#mouseover { width: 60%%; height: 80px; float: center; -webkit-background-size: cover; -webkit-transition-duration: 2s; z-index:99999; overflow:hidden; margin-left: 350px; margin-right: auto ; } #mouseover:hover { width: 500px%; height: 350px; -webkit-transition-duration: 2s; -webkit-background-size: cover; z-index: 99999; overflow: hidden; margin-left: 350px; margin-right: auto; } #threesixty { position: absolute; overflow: hidden; width: 800px; height: 600px; left: 350px; top: 25%; } /* Makes the image slider invisible by default */ #threesixty_images { display: none; }

/* Sets every image in the slider to be absolute positioned and dynamically sized. */ #threesixty img { position:absolute; /* This one fixes the IE positioning bug */ top:0; width:100%; height:auto; } /* Sets the style of the visible current frame of the image slider animation */ .current-image { visibility:visible; width:100%; } /* Sets the style of the visible â&#x20AC;&#x153;previousâ&#x20AC;? frame of the image slider animation */ .previous-image { visibility:hidden; width:0; } /* Sets the dimensions of the CanvasLoader placeholder <div>, it also centeres it horizontally and vertically inside the wrapper and makes it invisible by default */ #spinner { position:absolute; left:50%; top:50%; width:90px; height:90px; display:none;

}

JAVASCRIPT - THREESIXTY.JS

#spinner span { position:absolute; top:50%; width:100%; color:#333; font:0.8em Arial, Verdana, sans; text-align:center; line-height:0.6em; margin-top:-0.3em; }

/** * We wrap all our code in the jQuery â&#x20AC;&#x153;DOM-readyâ&#x20AC;? function to make sure the script runs only * after all the DOM elements are rendered and ready to take action */ $(document).ready(function () { // Tells if the app is ready for user interaction var ready = false, // Tells the app if the user is dragging the pointer dragging = false, // Stores the pointer starting X position for the pointer tracking pointerStartPosX = 0, // Stores the pointer ending X position for the pointer tracking pointerEndPosX = 0, // Stores the distance between the starting and ending pointer X position in each time period we are tracking the pointer pointerDistance = 0,

#headerover { width: 640px%; height: 30px; float: center; background-color: rgba(102,102,102,0.6); -webkit-transition-duration: 1s; z-index: 999999; overflow:hidden; } #headerover:hover { width: 640px%; height: 30px; float: center; -webkit-transition-duration: 1s; -webkit-background-size: cover; z-index: 999999; } @font-face { font-family: gothambook; src:url(../GothamBook.otf); }

// The starting time of the pointer tracking period monitorStartTime = 0, // The pointer tracking time duration monitorInt = 10, // A setInterval instance used to call the rendering function ticker = 0, // Sets the speed of the image sliding animation speedMultiplier = 1, // CanvasLoader instance variable spinner,

// Stores the total amount of images we have in the sequenc6 totalFrames = 35, // The current frame value of the image slider animation currentFrame = 0, // Stores all the loaded image objects frames = [], // The value of the end frame which the currentFrame will be tweened to during the sliding animation endFrame = 0, // We keep track of the loaded images by increasing every time a new image is added to the image slider loadedImages = 0; /** * Adds a “spiral” shaped CanvasLoader instance to the #spinner div */ function addSpinner () { spinner = new CanvasLoader(“spinner”); spinner.setShape(“spiral”); spinner.setDiameter(90); spinner.setDensity(90); spinner.setRange(1); spinner.setSpeed(2); spinner.setColor(“#0000”); // As its hidden and not rendering by default we have to call its show() method spinner.show(); // We use the jQuery fadeIn method to slowly fade in the preloader $(“#spinner”).fadeIn(“slow”); }; /** * Creates a new <li> and loads the next image in the sequence inside it. * With jQuery we add the “load” event handler to the

image, so when it’s successfully loaded, we call the “imageLoaded” function. */ function loadImage() { // Creates a new <li> var li = document.createElement(“li”); // Generates the image file name using the incremented “loadedImages” variable var imageName = “img/threesixty_” + (loadedImages + 1) + “.jpg”; /* Creates a new <img> and sets its src attribute to point to the file name we generated. It also hides the image by applying the “previous-image” CSS class to it. The image then is added to the <li>. */ var image = $(‘<img>’).attr(‘src’, imageName). addClass(“previous-image”).appendTo(li); // We add the newly added image object (returned by jQuery) to the “frames” array. frames.push(image); // We add the <li> to the <ol> $(“#threesixty_images”).append(li); /* Adds the “load” event handler to the new image. When the event triggers it calls the “imageLoaded” function. */ $(image).load(function() { imageLoaded(); }); }; /** * It handles the image “load” events. * Each time this function is called it checks if all the images have been loaded or it has to load the next one.

* Every time a new image is succesfully loaded, we set the percentage value of the preloader to notify the user about the loading progress. * If all the images are loaded, it hides the preloader using the jQuery “fadeOut” method, which on complete stops the preloader rendering * and calls the “showThreesixty” method, that displays the image slider. */ function imageLoaded() { // Increments the value of the “loadedImages” variable loadedImages++; // Updates the preloader percentage text $(“#spinner span”).text(Math.floor(loadedImages / totalFrames * 100) + “%”); // Checks if the currently loaded image is the last one in the sequence... if (loadedImages == totalFrames) { // ...if so, it makes the first image in the sequence to be visible by removing the “previous-image” class and applying the “current-image” on it frames[0].removeClass(“previous-image”). addClass(“current-image”); /* Displays the image slider by using the jQuery “fadeOut” animation and its complete event handler. When the preloader is completely faded, it stops the preloader rendering and calls the “showThreesixty” function to display the images. */ $(“#spinner”).fadeOut(“slow”, function(){ spinner.hide(); showThreesixty(); }); } else { // ...if not, Loads the next image in the sequence loadImage();

} }; /** * Displays the images with the “swooshy” spinning effect. * As the endFrame is set to -720, the slider will take 4 complete spin before it stops. * At this point it also sets the application to be ready for the user interaction. */ function showThreesixty () { // Fades in the image slider by using the jQuery “fadeIn” method $(“#threesixty_images”).fadeIn(“slow”); // Sets the “ready” variable to true, so the app now reacts to user interaction ready = true; // Sets the endFrame to an initial value... endFrame = -360; // ...so when the animation renders, it will initially take 4 complete spins. refresh(); }; /* We launch the application by... Adding the preloader, and... */ addSpinner(); // loading the firt image in the sequence. loadImage(); /** * Renders the image slider frame animations. */ function render () { // The rendering function only runs if the “currentFrame” value hasn’t reached the “endFrame” one if(currentFrame !== endFrame)

{ /* Calculates the 10% of the distance between the “currentFrame” and the “endFrame”. By adding only 10% we get a nice smooth and eased animation. If the distance is a positive number, we have to ceil the value, if its a negative number, we have to floor it to make sure that the “currentFrame” value surely reaches the “endFrame” value and the rendering doesn’t end up in an infinite loop. */ var frameEasing = endFrame < currentFrame ? Math.floor((endFrame - currentFrame) * 0.1) : Math.ceil((endFrame - currentFrame) * 0.1); // Sets the current image to be hidden hidePreviousFrame(); // Increments / decrements the “currentFrame” value by the 10% of the frame distance currentFrame += frameEasing; // Sets the current image to be visible showCurrentFrame(); } else { // If the rendering can stop, we stop and clear the ticker window.clearInterval(ticker); ticker = 0; } }; /** * Creates a new setInterval and stores it in the “ticker” * By default I set the FPS value to 60 which gives a nice and smooth rendering in newer browsers * and relatively fast machines, but obviously it could be too high for an older architecture. */ function refresh () {

// If the ticker is not running already... if (ticker === 0) { // Let’s create a new one! ticker = self.setInterval(render, Math. round(1000 / 60)); } }; /** * Hides the previous frame */ function hidePreviousFrame() { /* Replaces the “current-image” class with the “previous-image” one on the image. It calls the “getNormalizedCurrentFrame” method to translate the “currentFrame” value to the “totalFrames” range (1-180 by default). */ frames[getNormalizedCurrentFrame()].removeClass(“current-image”).addClass(“previous-image”); }; /** * Displays the current frame */ function showCurrentFrame() { /* Replaces the “current-image” class with the “previous-image” one on the image. It calls the “getNormalizedCurrentFrame” method to translate the “currentFrame” value to the “totalFrames” range (1-180 by default). */ frames[getNormalizedCurrentFrame()].removeClass(“previous-image”).addClass(“current-image”); }; /**

* Returns the “currentFrame” value translated to a value inside the range of 0 and “totalFrames” */ function getNormalizedCurrentFrame() { var c = -Math.ceil(currentFrame % totalFrames); if (c < 0) c += (totalFrames - 0); return c; }; /** * Returns a simple event regarding the original event is a mouse event or a touch event. */ function getPointerEvent(event) { return event.originalEvent.targetTouches ? event. originalEvent.targetTouches[0] : event; }; /** * Adds the jQuery “mousedown” event to the image slider wrapper. */ $(“#threesixty”).mousedown(function (event) { // Prevents the original event handler behaciour event.preventDefault(); // Stores the pointer x position as the starting position pointerStartPosX = getPointerEvent(event).pageX; // Tells the pointer tracking function that the user is actually dragging the pointer and it needs to track the pointer changes dragging = false; }); /** * Adds the jQuery “mouseup” event to the document. We use the document because we want to let the user to be able to drag * the mouse outside the image slider as well, providing a

much bigger “playground”. */ $(document).mouseup(function (event){ // Prevents the original event handler behaciour event.preventDefault(); // Tells the pointer tracking function that the user finished dragging the pointer and it doesn’t need to track the pointer changes anymore dragging = true; }); /** * Adds the jQuery “mousemove” event handler to the document. By using the document again we give the user a better user experience * by providing more playing area for the mouse interaction. */ $(document).mousemove(function (event){ // Prevents the original event handler behaciour event.preventDefault(); // Starts tracking the pointer X position changes trackPointer(event); }); /** * */ $(“#threesixty”).live(“touchstart”, function (event) { // Prevents the original event handler behaciour event.preventDefault(); // Stores the pointer x position as the starting position pointerStartPosX = getPointerEvent(event).pageX; // Tells the pointer tracking function that the user is actually dragging the pointer and it needs to track the pointer changes dragging = true; });

/** * */ $(“#threesixty”).live(“touchmove”, function (event) { // Prevents the original event handler behaciour event.preventDefault(); // Starts tracking the pointer X position changes trackPointer(event); }); /** * */ $(“#threesixty”).live(“touchend”, function (event) { // Prevents the original event handler behaciour event.preventDefault(); // Tells the pointer tracking function that the user finished dragging the pointer and it doesn’t need to track the pointer changes anymore dragging = false; }); /** * Tracks the pointer X position changes and calculates the “endFrame” for the image slider frame animation. * This function only runs if the application is ready and the user really is dragging the pointer; this way we can avoid unnecessary calculations and CPU usage. */ function trackPointer(event) { // If the app is ready and the user is dragging the pointer... if (ready && dragging) { // Stores the last x position of the pointer pointerEndPosX = getPointerEvent(event). pageX; // Checks if there is enough time past between this and the last time period of tracking

if(monitorStartTime < new Date().getTime() - monitorInt) { // Calculates the distance between the pointer starting and ending position during the last tracking time period pointerDistance = pointerEndPosX - pointerStartPosX; // Calculates the endFrame using the distance between the pointer X starting and ending positions and the “speedMultiplier” values endFrame = currentFrame + Math. ceil((totalFrames - 1) * speedMultiplier * (pointerDistance / $(“#threesixty”).width())); // Updates the image slider frame animation refresh(); // restarts counting the pointer tracking period monitorStartTime = new Date().getTime(); // Stores the the pointer X position as the starting position (because we started a new tracking period) pointerStartPosX = getPointerEvent(event).pageX; } } }; }); <!DOCTYPE html> <html> <head> <title>New Zealand Snow</title> <link href=”video-js.css” rel=”stylesheet” type=”text/css”> <link href=”TEMPLATE/style.css” rel=”stylesheet” type=”text/ css”> <script src=”video.js”></script> <script> videojs.options.flash.swf = “video-js.swf”;

Video Page </script>

</head> <body> <div id=”headerover”> <a href=”../Index/index.html”> <img src=”arrow.png” width=”30” height=”30”></a> </div> </div> <br> <div id=”mouseover”> <h1>/ Video</h1> <p>Similar to the Image Gallery example, the Video takes advantage of users that are on the go but are idle for short periods of time. Popular for storefronts or public waiting areas, an video with interactive overlays with additional information is more engaging than a video on a repeated cycle. Most shopping centres are crowded with customers and attain a high level of environmental noise, this is irrelevant to an interactive video feature due to the caption overlays providing information in place of the audio. The additon of information overlays at certain points adds another layer of interactivity as the user will have to scroll back the video to view the caption, adding video playback at the viewers discretion, not the media’s.</p> </div> <div id=”container2”>

</body> </html> CSS - VIDEO-JS.CSS /*! Video.js Default Styles (http://videojs.com) Version 4.2.2 Create your own skin at http://designer.videojs.com */ /* SKIN ================================================== ============================== The main class name for all skin-specific styles. To make your own skin, replace all occurances of ‘vjs-default-skin’ with a new name. Then add your new skin name to your video tag instead of the default skin. e.g. <video class=”video-js my-skin-name”> */ .vjs-default-skin { color: #cccccc; -webkit-box-reflect: below 0px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.8, transparent), to(white)) 0 fill / auto / 0px stretch;*/ }

/* Custom Icon Font ------------------------------------------------------------------------------The control icons are from a custom font. Each icon corresponds to a character (e.g. “\e001”). Font icons allow for easy scaling and coloring of icons. */ @font-face { font-family: ‘VideoJS’; src: url(‘font/vjs.eot’); src: url(‘font/vjs.eot?#iefix’) format(‘embedded-opentype’), url(‘font/vjs.woff’) format(‘woff’), url(‘font/vjs.ttf’) format(‘truetype’); font-weight: normal; font-style: normal; } /* Base UI Component Classes ------------------------------------------------------------------------------*/ /* Slider - used for Volume bar and Seek bar */ .vjs-default-skin .vjs-slider { /* Replace browser focus hightlight with handle highlight */ outline: 0; position: relative; cursor: pointer; padding: 0; /* background-color-with-alpha */ background-color: #333333; background-color: rgba(51, 51, 51, 0.7); } .vjs-default-skin .vjs-slider:focus { /* box-shadow */ -webkit-box-shadow: 0 0 2em #ffffff; -moz-box-shadow: 0 0 2em #ffffff; box-shadow: 0 0 2em #ffffff; } .vjs-default-skin .vjs-slider-handle {

position: absolute; /* Needed for IE6 */ left: 0; top: 0; } .vjs-default-skin .vjs-slider-handle:before { content: “\e009”; font-family: VideoJS; font-size: 1em; line-height: 1; text-align: center; text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; left: 0; /* Rotate the square icon to make a diamond */ /* transform */ } /* Control Bar ------------------------------------------------------------------------------The default control bar that is a container for most of the controls. */ .vjs-default-skin .vjs-control-bar { /* Start hidden */ display: none; position: absolute; /* Place control bar at the bottom of the player box/video. If you want more margin below the control bar, add more height. */ bottom: 0; /* Use left/right to stretch to 100% width of player div */ left: 0; right: 0; /* Height includes any margin you want above or below control items */ height: 3.0em; /* background-color-with-alpha */

background-color: #07141e; background-color: rgba(7, 20, 30, 0.7); } /* Show the control bar only once the video has started playing */ .vjs-default-skin.vjs-has-started .vjs-control-bar { display: block; /* Visibility needed to make sure things hide in older browsers too. */ visibility: visible; opacity: 1; /* transition */ -webkit-transition: visibility 0.1s, opacity 0.1s; -moz-transition: visibility 0.1s, opacity 0.1s; -o-transition: visibility 0.1s, opacity 0.1s; transition: visibility 0.1s, opacity 0.1s; } /* Hide the control bar when the video is playing and the user is inactive */ .vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing . vjs-control-bar { display: block; visibility: hidden; opacity: 0; /* transition */ -webkit-transition: visibility 1s, opacity 1s; -moz-transition: visibility 1s, opacity 1s; -o-transition: visibility 1s, opacity 1s; transition: visibility 1s, opacity 1s; } .vjs-default-skin.vjs-controls-disabled .vjs-control-bar { display: none; } .vjs-default-skin.vjs-using-native-controls .vjs-control-bar { display: none; } /* IE8 is flakey with fonts, and you have to change the actual content to force

fonts to show/hide properly. - “\9” IE8 hack didn’t work for this - Found in XP IE8 from http://modern.ie. Does not show up in “IE8 mode” in IE9 */ @media \0screen { .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before { content: “”; } } /* General styles for individual controls. */ .vjs-default-skin .vjs-control { outline: none; position: relative; float: left; text-align: center; margin: 0; padding: 0; height: 3.0em; width: 4em; } /* FontAwsome button icons */ .vjs-default-skin .vjs-control:before { font-family: VideoJS; font-size: 1.5em; line-height: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } /* Replacement for focus outline */ .vjs-default-skin .vjs-control:focus:before, .vjs-default-skin .vjs-control:hover:before { text-shadow: 0em 0em 1em #ffffff;

} .vjs-default-skin .vjs-control:focus { /* outline: 0; */ /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ } /* Hide control text visually, but have it available for screenreaders */ .vjs-default-skin .vjs-control-text { /* hide-visually */ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Play/Pause ------------------------------------------------------------------------------*/ .vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer; } .vjs-default-skin .vjs-play-control:before { content: “\e001”; } .vjs-default-skin.vjs-playing .vjs-play-control:before { content: “\e002”; } /* Volume/Mute ------------------------------------------------------------------------------- */ .vjs-default-skin .vjs-mute-control,

.vjs-default-skin .vjs-volume-menu-button { cursor: pointer; float: right; } .vjs-default-skin .vjs-mute-control:before, .vjs-default-skin .vjs-volume-menu-button:before { content: “\e006”; } .vjs-default-skin .vjs-mute-control.vjs-vol-0:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before { content: “\e003”; } .vjs-default-skin .vjs-mute-control.vjs-vol-1:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before { content: “\e004”; } .vjs-default-skin .vjs-mute-control.vjs-vol-2:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before { content: “\e005”; } .vjs-default-skin .vjs-volume-control { width: 3em; float: right; } .vjs-default-skin .vjs-volume-bar { width: 5em; height: 0.6em; margin: 1.1em auto 0; } .vjs-default-skin .vjs-volume-menu-button .vjs-menu-content { height: 1.9em; } .vjs-default-skin .vjs-volume-level { position: absolute; top: 0; left: 0; height: 0.5em; background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lE-

QVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat; } .vjs-default-skin .vjs-volume-bar .vjs-volume-handle { width: 0.5em; height: 0.5em; } .vjs-default-skin .vjs-volume-handle:before { font-size: 0.8em; top: -0.2em; left: -0.2em; width: 1em; height: 1em; } .vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menucontent { width: 6em; left: -4em; } /* Progress ------------------------------------------------------------------------------*/ .vjs-default-skin .vjs-progress-control { position: absolute; left: 0; right: 0; width: auto; font-size: 2em; height: 1em; /* Set above the rest of the controls. */ top: -1em; /* Shrink the bar slower than it grows. */ /* transition */ -webkit-transition: all 0.4s; transition: all 0.4s; } /* On hover, make the progress bar grow to something that’s

more clickable. This simply changes the overall font for the progress bar, and this updates both the em-based widths and heights, as wells as the icon font */ .vjs-default-skin:hover .vjs-progress-control { font-size: 5em; /* Even though we’re not changing the top/height, we need to include them in the transition so they’re handled correctly. */ /* transition */ -webkit-transition: all 0.2s; transition: all 0.2s; } /* Box containing play and load progresses. Also acts as seek scrubber. */ .vjs-default-skin .vjs-progress-holder { height: 100%; } /* Progress Bars */ .vjs-default-skin .vjs-progress-holder .vjs-play-progress, .vjs-default-skin .vjs-progress-holder .vjs-load-progress { position: absolute; display: block; height: 100%; margin: 0; padding: 0; /* Needed for IE6 */ left: 0; top: 0; } .vjs-default-skin .vjs-play-progress { /* Using a data URI to create the white diagonal lines with a transparent background. Surprisingly works in IE8. Created using http://www.patternify.com Changing the first color value will change the bar color.

Also using a paralax effect to make the lines move backwards. The -50% left position makes that happen. */ background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat; } .vjs-default-skin .vjs-load-progress { background: #646464; background: rgba(255, 255, 255, 0.4); } .vjs-default-skin .vjs-seek-handle { width: 1.5em; height: 100%; } .vjs-default-skin .vjs-seek-handle:before { padding-top: 0.1em /* Minor adjustment */; } /* Time Display ------------------------------------------------------------------------------*/ .vjs-default-skin .vjs-time-controls { font-size: 1em; /* Align vertically by making the line height the same as the control bar */ line-height: 3em; } .vjs-default-skin .vjs-current-time { float: left; } .vjs-default-skin .vjs-duration { float: left; } /* Remaining time is in the HTML, but not included in default design */

.vjs-default-skin .vjs-remaining-time { display: none; float: left; } .vjs-time-divider { float: left; line-height: 3em; } /* Fullscreen ------------------------------------------------------------------------------*/ .vjs-default-skin .vjs-fullscreen-control { width: 10em; cursor: pointer; float: right; } .vjs-default-skin .vjs-fullscreen-control:before { content: “\e000”; } /* Switch to the exit icon when the player is in fullscreen */ .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before { content: “\e00b”; } /* Big Play Button (play button at start) ------------------------------------------------------------------------------Positioning of the play button in the center or other corners can be done more easily in the skin designer. http://designer.videojs.com/ */ .vjs-default-skin .vjs-big-play-button { left:42%; top: 40%; font-size: 30px; display: block; z-index: 2; position: absolute; width: 4em;

height: 2.6em; text-align: center; vertical-align: middle; cursor: pointer; opacity: 1; /* Need a slightly gray bg so it can be seen on black backgrounds */ /* background-color-with-alpha */ background-color: #07141e; background-color: rgba(7, 20, 30, 0.7); border: 0.1em solid #3b4249; /* border-radius */ -webkit-border-radius: 0.8em; -moz-border-radius: 0.8em; border-radius: 0.8em; /* box-shadow */ -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25); box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25); /* transition */ -webkit-transition: all 0.4s; transition: all 0.4s; } /* Hide if controls are disabled */ .vjs-default-skin.vjs-controls-disabled .vjs-big-play-button { display: none; } /* Hide when video starts playing */ .vjs-default-skin.vjs-has-started .vjs-big-play-button { display: none; } /* Hide on mobile devices. Remove when we stop using native controls by default on mobile */ .vjs-default-skin.vjs-using-native-controls .vjs-big-play-button { display: none; } .vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus { outline: 0;

border-color: #fff; /* IE8 needs a non-glow hover state */ background-color: #505050; background-color: rgba(50, 50, 50, 0.75); /* box-shadow */ -webkit-box-shadow: 0 0 3em #ffffff; -moz-box-shadow: 0 0 3em #ffffff; box-shadow: 0 0 3em #ffffff; /* transition */ -webkit-transition: all 0s; -moz-transition: all 0s; -o-transition: all 0s; transition: all 0s; } .vjs-default-skin .vjs-big-play-button:before { content: â&#x20AC;&#x153;\e001â&#x20AC;?; font-family: VideoJS; /* In order to center the play icon vertically we need to set the line height to the same as the button height */ line-height: 2.6em; text-shadow: 0.05em 0.05em 0.1em #000; text-align: center /* Needed for IE8 */; position: absolute; left: 0; width: 100%; height: 100%; } /* Loading Spinner ------------------------------------------------------------------------------*/ .vjs-loading-spinner { display: none; position: absolute; top: 50%; left: 50%; font-size: 5em;

line-height: 1; width: 1em; height: 1em; margin-left: -0.5em; margin-top: -0.5em; opacity: 0.75; /* animation */ -webkit-animation: spin 1.5s infinite linear; -moz-animation: spin 1.5s infinite linear; -o-animation: spin 1.5s infinite linear; animation: spin 1.5s infinite linear; } .vjs-default-skin .vjs-loading-spinner:before { content: â&#x20AC;&#x153;\e00aâ&#x20AC;?; font-family: VideoJS; position: absolute; top: 0; left: 0; width: 1em; height: 1em; text-align: center; text-shadow: 0em 0em 0.1em #000; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } }

@-o-keyframes spin { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(359deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } /* Menu Buttons (Captions/Subtitles/etc.) ------------------------------------------------------------------------------*/ .vjs-default-skin .vjs-menu-button { float: right; cursor: pointer; } .vjs-default-skin .vjs-menu { display: none; position: absolute; bottom: 0; left: 0em; /* (Width of vjs-menu - width of button) / 2 */ width: 0em; height: 0em; margin-bottom: 3em; border-left: 2em solid transparent; border-right: 2em solid transparent; border-top: 1.55em solid #000000; /* Same width top as ul bottom */

border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */ } /* Button Pop-up Menu */ .vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content { display: block; padding: 0; margin: 0; position: absolute; width: 10em; bottom: 1.5em; /* Same bottom as vjs-menu border-top */ max-height: 15em; overflow: auto; left: -5em; /* Width of menu - width of button / 2 */ /* background-color-with-alpha */ background-color: #07141e; background-color: rgba(7, 20, 30, 0.7); /* box-shadow */ -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); } .vjs-default-skin .vjs-menu-button:hover .vjs-menu { display: block; } .vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 0; line-height: 1.4em; font-size: 1.2em; text-align: center; text-transform: lowercase; }

.vjs-default-skin .vjs-menu-button ul li.vjs-selected { background-color: #000; } .vjs-default-skin .vjs-menu-button ul li:focus, .vjs-default-skin .vjs-menu-button ul li:hover, .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus, .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { outline: 0; color: #111; /* background-color-with-alpha */ background-color: #ffffff; background-color: rgba(255, 255, 255, 0.75); /* box-shadow */ -webkit-box-shadow: 0 0 1em #ffffff; box-shadow: 0 0 1em #ffffff; } .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title { text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0; font-weight: bold; cursor: default; } /* Captions Button */ .vjs-default-skin .vjs-captions-button:before { content: â&#x20AC;&#x153;\e008â&#x20AC;?; } /* Replacement for focus outline */ .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before, .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before { /* box-shadow */ -webkit-box-shadow: 0 0 1em #ffffff; }

/* REQUIRED STYLES (be careful overriding) ================================================== ============================== When loading the player, the video tag is replaced with a DIV, that will hold the video tag or object tag for other playback methods. The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video. ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element. Otherwise you risk messing up control positioning and full window mode. ** */ .video-js { background-color: #000; position: relative; padding: 0; /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */ font-size: 10px; /* Allow poster to be vertially aligned. */ vertical-align: middle; /* display: table-cell; */ /*This works in Safari but not Firefox.*/ /* Provide some basic defaults for fonts */ font-weight: normal; font-style: normal; /* Avoiding helvetica: issue #376 */ font-family: Arial, sans-serif;

/* Turn off user selection (text highlighting) by default. The majority of player components will not be text blocks. Text areas will need to turn user selection back on. */ /* user-select */ -webkit-user-select: none; user-select: none; }

/* Playback technology elements expand to the width/height of the containing div <video> or <object> */ .video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Fullscreen Styles */ body.vjs-full-window { padding: 0; margin: 0; height: 100%; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/ fixed.html */ overflow-y: auto; } .video-js.vjs-fullscreen { position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important;

height: 100% !important; } .video-js:-webkit-full-screen { width: 100% !important; height: 100% !important; } .video-js.vjs-fullscreen.vjs-user-inactive { cursor: none; } /* Poster Styles */ .vjs-poster { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; cursor: pointer; height: 100%; margin: 0; padding: 0; position: relative; width: 100%; } .vjs-poster img { display: block; margin: 0 auto; max-height: 100%; padding: 0; width: 100%; } /* Hide the poster when native controls are used otherwise it covers them */ .video-js.vjs-using-native-controls .vjs-poster { display: none; } /* Text Track Styles */ /* Overall track holder for both captions and subtitles */ .video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em;

/* Leave padding on left and right */ left: 1em; right: 1em; } /* Individual tracks */ .video-js .vjs-text-track { display: none; font-size: 1.4em; text-align: center; margin-bottom: 0.1em; /* Transparent black background, or fallback to all black (oldIE) */ /* background-color-with-alpha */ background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } .video-js .vjs-subtitles { color: #ffffff /* Subtitles are white */; } .video-js .vjs-captions { color: #ffcc66 /* Captions are yellow */; } .vjs-tt-cue { display: block; } /* Hide disabled or unsupported controls */ .vjs-default-skin .vjs-hidden { display: none; } .vjs-lock-showing { display: block !important; opacity: 1; visibility: visible; } /* ---------------------------------------------------------------------------The original source of this file lives at https://github.com/videojs/video.js/blob/master/src/css/video-js.less */

CSS - STYLE.CSS

}

html, body { height: 77%; background-color:#000; background-image:url(../background.jpg); background-size:cover; background-attachment:fixed;*/ font-family: gothambook; }

#example_video_1:hover { min-width: 150px; display: block; } #footer { background-color: #000; width: auto; padding: 10px; height: auto; background-repeat: no-repeat; position:static; }

body }

{ margin: 0; padding: 0; color: #000000; height: 100%; font-family: gothambook; font-size: 100%; line-height: 1.4;

#container2 { background-size: cover; min-width: 150px; margin: 0 auto; display: block; background-attachment: fixed; height: inherit; min-height: 100%; padding-left: 6%; -webkit-transform: perspective(400px) rotateY(20deg); -webkit-animation-delay:1s; } #container2:hover { -webkit-transform: perspective(0px) rotateY(-20deg); -webkit-transition-duration: 2s; -webkit-animation-delay:1s;

#header2 { top: 0; width: auto; padding: 0px 0px; height: 100px; background-color: #000; background-repeat: no-repeat; background-position: 2% center; } #hold { height: auto; width: 100%; background-repeat: no-repeat; background-position: center; background-size: 90% auto; vertical-align: middle; padding: 10%; position:fixed; } #footerleft {

float: left; padding: 10px; position: 2% center; color: #424242; position:fixed; } #footerright { float:right; padding: 9px; position:fixed; } #mouseover { width: 50%; height: 70px; float: center; -webkit-background-size: cover; -webkit-transition-duration: 2s; overflow:hidden; padding-left: 40%; } #mouseover:hover { width: 50%; height: 380px; -webkit-transition-duration: 2s; -webkit-background-size: cover; overflow: hidden; padding-left: 40%; } #headerover { width: 640px%; height: 30px; float: center; background-color: rgba(102,102,102,0.6); -webkit-transition-duration: 1s;

z-index: 999999; overflow:hidden; } #headerover:hover { width: 640px%; height: 30px; float: center; -webkit-transition-duration: 1s; -webkit-background-size: cover; z-index: 999999; }

h1 { font-family: gothambook; font-size:36px; color: #000; } p{ font-family: gothambook; font-size:18px; color: #000; }

@font-face { font-family: gothambook; src:url(../GothamBook.otf); }

Gallery Page <!DOCTYPE html> <html> <head> <title>Travel Gallery</title> <link href=”slider.css” rel=”stylesheet” type=”text/css”>  <link rel=”stylesheet” type=”text/css” href=”Background/ background.css” /> <script type=”text/javascript” src=”Background/ modernizr.custom.86080.js”></script> <link href=’overlaypopup.css’ rel=’stylesheet’ type=’text/css’> <script type=”text/javascript” src=”http://ajax.googleapis. com/ajax/libs/jquery/1.9.0/jquery.min.js”></script> <script type=”text/javascript” src=”custom.js”></script> </head> <body>

<div id=”headerover”> <a href=”../../Index/index.html”> <img src=”arrow.png” width=”30” height=”30”></a> </div> </div> <br /><br /> <br /><br /> <br /><br /> <div id=”mouseover”> <h1> Image Gallery</h1><br>

<p>No doubt the most effective way to distribute and manage media attention across to the general public both analogue and digital. We believe that the technological race has far outrun the traditional aspect of advertising especially within Sydney where it is barely keeping pace with a society that has easy access to hands held technology. In response, the Age and Sydney Morning Herald changed their print dimensions from broadsheet to tabloid marked March 4th, 2013 calling it the ‘new era begins’ while devices such as the Apple Ipad have been released circa 2010. <br><br> The adaptation from traditional to digital can no longer be overlooked as advertising is now based on its ability to remain dominant and engaging in a society heavily saturated with ‘at the ready’, technological devices rather than large static displays. Ergo, our study is focused on the development of static advertising, how to retrofit current technological processes and why it is failing to retain engagement in such a technologically progressive society.<br><br> Through this we have developed a potential idea using hand gesture movement that has utilised society’s familiarity in rapid technological change as well as channelling JCDecaux’s concept of extending advertising to a global reach throught the use of “public amenities” to what we know today as bus stop advertising.</p> </div> <div class=”accordian”> <ul> <li> <div class=”image_title”> <a href=”#”> </a> </div> <a class=”show-popup2” href=”#”> <img src=”Travel/Canada.jpg” width=”640” height=”397”/> </a> <div class=”overlay-bg2”>

<div class=”overlay-content2”> <img src=”../../../tumblr_mssce2Rzin1qbyxr0o1_400.gif” width=”640” height=”600”> <br> <button class=”close-btn”>Close</button> </div> </div>

</li>

100

<div class=”image_title”> <a href=”#”> </a> </div> <a class=”show-popup” href=”#”> <img src=”Travel/Paris.jpg”/> </a> </li> <div class=”overlay-bg”> <div class=”overlay-content”> <img src=”Travel_Ad.jpg” width=”640” height=”600”> <br> <button class=”close-btn”>Close</button>

</ul> </div>

<div id=”footer”></div> </body> </html> CSS - SLIDER.CSS /*Now the styles*/ *{ margin: 0; padding: 0; background-size:cover; background-attachment:fixed; } body { /*background-color:#000;*/ background-image:url(background.jpg); background-attachment:fixed;

background-position:center; font-family: gothambook; } /*Time to apply widths for accordian to work Width of image = 640px total images = 5 so width of hovered image = 640px width of un-hovered image = 40px - you can set this to anything so total container width = 640 + 40*4 = 800px; default width = 800/5 = 160px; */ .accordian { width: 805px; height: 397px; overflow: hidden; z-index:0; /*Time for some styling*/ margin: 30px auto; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } /*A small hack to prevent flickering on some browsers*/ .accordian ul { width: 2000px; z-index:99999; }

/*This will give ample space to the last item to move instead of falling down/flickering during hovers.*/

.accordian li { position: relative; display: block; width: 160px; float: left; z-index:99999;

}

border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); /*Transitions to give animation effect*/ transition: all 0.5s; -webkit-transition: all 0.5s;

/*Reduce with of un-hovered elements*/ .accordian ul:hover li {width: 40px;} /*Lets apply hover effects now*/ /*The LI hover style should override the UL hover style*/ .accordian ul li:hover {width: 640px;}

.accordian li img { display: block; } /*Image title styles*/ .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: -4px; bottom: -1px; width: 640px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 00px; font-size: 16px; font-family: lighthouse; }

101

#mouseover { width: 80%; height: 40px; float: center; /*background-image:url(../about.png);*/ -webkit-background-size: cover; -webkit-transition-duration: 2s; /*-webkit-mask-box-image: url(entermask.png);*/ overflow:hidden; margin-left: auto ; margin-right: auto ; } #mouseover:hover { width: 80%; height: 350px; -webkit-transition-duration: 2s; overflow: hidden; left: 25%; margin-left: auto ; margin-right: auto ; } #headerover { width: 640px%; height: 30px; float: center; background-color: rgba(102,102,102,0.6); -webkit-transition-duration: 1s; z-index: 999999; overflow:hidden; } #headerover:hover { width: 640px%; height: 30px; float: center;

102

}

-webkit-transition-duration: 1s; -webkit-background-size: cover; z-index: 999999;

h1 { font-family: gothambook; font-size:36px; color: #000; } p{ font-family: gothambook; font-size:18px; color: #000; } @font-face { font-family: gothambook; src:url(../GothamBook.otf); } CSS - BACKGROUND.CSS .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; } .cb-slideshow:after { content: â&#x20AC;&#x2DC;â&#x20AC;&#x2122;; background: transparent url(../images/pattern.png) repeat top left;

} .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .cb-slideshow li div { position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .cb-slideshow li div h3 { font-family: ‘BebasNeueRegular’, ‘Arial Narrow’, Arial, sans-serif; font-size: 160px; padding: 0 30px; line-height: 120px; color: rgba(255,255,255,0.8); }

.cb-slideshow li:nth-child(1) span { background-image:url(images /193030_10151706760729820_2086735268_o.jpg) } .cb-slideshow li:nth-child(2) span { background-image:url(images/202627_10151720976354820_9 39666071_o.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { background-image:url(images/259768_10151706753814820_51 915249_o.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { background-image:url(images/977584_10151720958424820_1 384266206_o.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) span { background-image:url(images/259768_10151706753814820_51 915249_o.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .cb-slideshow li:nth-child(6) span {

103

background-image: url(../images/6.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .cb-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .cb-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .cb-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s;

104

-ms-animation-delay: 30s; animation-delay: 30s; } @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; -webkit-transform: scale(1.1); } 22% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); } 25% { opacity: 0; -webkit-transform: scale(1.1) translateY(-100%); } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out; } 17% { opacity: 1;

-moz-transform: scale(1.1); } 22% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); } 25% { opacity: 0; -moz-transform: scale(1.1) translateY(-100%); } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-transform: scale(1.05); -o-animation-timing-function: ease-out; } 17% { opacity: 1; -o-transform: scale(1.1); } 22% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); } 25% { opacity: 0; -o-transform: scale(1.1) translateY(-100%); } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0;

-ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-transform: scale(1.05); -ms-animation-timing-function: ease-out; } 17% { opacity: 1; -ms-transform: scale(1.1); } 22% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); } 25% { opacity: 0; -ms-transform: scale(1.1) translateY(-100%); } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1); } 22% { opacity: 0; -webkit-transform: scale(1.1) translateY(-20%); }

105

25% { opacity: 0; -transform: scale(1.1) translateY(-100%); } 100% { opacity: 0 } } @-webkit-keyframes titleAnimation { 0% { opacity: 0; -webkit-transform: translateY(-300%); } 8% { opacity: 1; -webkit-transform: translateY(0%); } 17% { opacity: 1; -webkit-transform: translateY(0%); } 19% { opacity: 0; -webkit-transform: translateY(100%); } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0; -moz-transform: translateY(-300%); } 8% { opacity: 1; -moz-transform: translateY(0%); } 17% { opacity: 1; -moz-transform: translateY(0%); }

106

19% { opacity: 0; -moz-transform: translateY(100%); } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0; -o-transform: translateY(-300%); } 8% { opacity: 1; -o-transform: translateY(0%); } 17% { opacity: 1; -o-transform: translateY(0%); } 19% { opacity: 0; -o-transform: translateY(100%); } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0; -ms-transform: translateY(-300%); } 8% { opacity: 1; -ms-transform: translateY(0%); } 17% { opacity: 1; -ms-transform: translateY(0%);

} 19% { opacity: 0; -ms-transform: translateY(100%); } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0; transform: translateY(-300%); } 8% { opacity: 1; transform: translateY(0%); } 17% { opacity: 1; transform: translateY(0%); } 19% { opacity: 0; transform: translateY(100%); } 25% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .cb-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .cb-slideshow li div h3 { font-size: 100px } } @media screen and (max-width: 600px) { .cb-slideshow li div h3 { font-size: 50px } }

CSS - OVERLAYPOPUP.CSS *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; z-index:99999; } body { font-family: ‘Helvetica Neue’,’Helvetica’, Arial, sans-serif; z-index: 999999; } .main-content { height: 800px; width: 1000px; margin: 0 auto; z-index:99999; } .overlay-bg { display: none; position: fixed; top: 0; left: 0; height:100%; width: 100%; cursor: pointer; z-index:99999; } .overlay-content { background: #fff; padding: 1%; width: 46.5%; position: relative;

107

top: 15%; left: 50%; margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */ cursor: default; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.9); z-index:99999; }

left: 50%; margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */ cursor: default; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.9); z-index:99999; } JAVASCRIPT - CUSTOM.JS

.close-btn { border: 1px solid #333; padding: 2% 5%; background: #a9e7f9; box-shadow: 0 0 4px rgba(0,0,0,0.3); } .close-btn:hover { background: #05abe0; } #overlay-bg2 { display: none; position: fixed; top: 0; left: 0; height:100%; width: 100%; cursor: pointer; z-index:99999; } #overlay-content2 { background: #fff; padding: 1%; width: 46.5%; position: relative; top: 15%;

108

$(document).ready(function(){ // show popup when you click on the link $(‘.show-popup’).click(function(event){ event.preventDefault(); // disable normal link function so that it doesn’t refresh the page $(‘.overlay-bg’).show(); //display your popup }); // hide popup when user clicks on close button $(‘.close-btn’).click(function(){ $(‘.overlay-bg’).hide(); // hide the overlay }); // hides the popup if user clicks anywhere outside the container $(‘.overlay-bg’).click(function(){ $(‘.overlay-bg’).hide(); }) // prevents the overlay from closing if user clicks inside the popup overlay $(‘.overlay-content’).click(function(){ return false; }); // show popup when you click on the link $(‘#mouseover’).click(function(event){ event.preventDefault(); // disable normal link function so

that it doesn’t refresh the page $(‘.overlay-bg2’).show(); //display your popup }); // hide popup when user clicks on close button $(‘.close-btn’).click(function(){ $(‘.overlay-bg2’).hide(); // hide the overlay }); // hides the popup if user clicks anywhere outside the container $(‘.overlay-bg2’).click(function(){ $(‘.overlay-bg2’).hide(); }) // prevents the overlay from closing if user clicks inside the popup overlay $(‘.overlay-content2’).click(function(){ return false; }); });

109

FINAL DELIVERABLES

110

Following is a snapshot of each webpage we have created in detail, as well as a comparison so you can view each one side by side indicated the difference and versatility interactivity and not only gesture interactivity could play a part in an upcoming age of digital advertising.

111

113

114

115

116

117

BIBLIOGRAPHY

118

119

BEATS BY DRE - SHOWYOURCOLOR Information Beats by Dre - Show Your Colors on Vimeo”. Accessed on 16/8/2013, <http://vimeo. com/62130578> Images “Beats by Dre / #showyourcolor / Contagious Magazine”. Accessed 16/8/2013, <http://www. contagiousmagazine.com/2013/04/beats_by_dre.php> “Beats by Dre - Beats by Dre #showyourcolor - R/GA - AdForum.com”. Accessed 16/8/2013, <http://www.adforum.com/agency/6646233/creative-work/34487121> FORD C-MAX - AUGMENTED REALITY Information “Ford C-Max augmented reality poster ad by Ogilvy & Mather and Grand Visual - YouTube”. Accessed on 16/8/2013, <http://www.youtube.com/watch?v=bl8T9oYO5vY> Images “Ford C-MAX Campaign AR with Gestural Interface from Inition”. Accessed 16/8/2013, <http://inition.co.uk/case-study/ford-c-max-campaign-ar-gestural-interface> NEW BALANCE 574 CUSTOM KIOSK Information & Images “New Balance 574 Custom Kiosk at Foot Locker Times Square”. Accessed on 18/8/2013, <http://sneakernews.com/2013/09/12/new-balance-574-custom-kiosk-at-foot-locker-timessquare/> 120

ASICS - RUN WITH RYAN Information & Images “ASICS Run With Ryan - YouTube”. Accessed on 18/8/2013, <http://www.youtube.com/ watch?v=lPyBMsjVG94>

INTERACTIVE MAPPING Information & Images “ASICS Run With Ryan - YouTube”. Accessed on 18/8/2013, <http://www.youtube.com/ watch?v=lPyBMsjVG94>

MINI COOPER VENDING MACHINE Information & Images “New Balance 574 Custom Kiosk at Foot Locker Times Square”. Accessed on 18/8/2013, <http://sneakernews.com/2013/09/12/new-balance-574-custom-kiosk-at-foot-locker-timessquare/>

MARK ECKO - AUGMENTED ADVERTISING Information & Images “ASICS Run With Ryan - YouTube”. Accessed on 18/8/2013, <http://www.youtube.com/ watch?v=lPyBMsjVG94>

121

MINI MAPS ONLINE DRIVING Information & Images “ASICS Run With Ryan - YouTube”. Accessed on 18/8/2013, <http://www.youtube.com/ watch?v=lPyBMsjVG94>

AR BUSINESS CARD Information & Images “New Balance 574 Custom Kiosk at Foot Locker Times Square”. Accessed on 18/8/2013, <http://sneakernews.com/2013/09/12/new-balance-574-custom-kiosk-at-foot-locker-timessquare/>

FACEAKE AUGMENTED REALITY Information & Images “ASICS Run With Ryan - YouTube”. Accessed on 18/8/2013, <http://www.youtube.com/ watch?v=lPyBMsjVG94>

LEXUS INTERACTIVE WEBSITE Information & Images “ASICS Run With Ryan - YouTube”. Accessed on 18/8/2013, <http://www.youtube.com/ watch?v=lPyBMsjVG94>

122

123

REFERENCES

124

125

ABOUT PAGE “A Simple Parallax Scrolling Technique”. Accessed 21/9/2013, <http:// net.tutsplus.com/tutorials/html-css-techniques/simple-parallaxscrolling-technique/> INDEX PAGE “Fullscreen Background Image Slideshow with CSS3”. Accessed 2/9/2013, <http://tympanus.net/codrops/2012/01/02/fullscreenbackground-image-slideshow-with-css3/>

“Coupling jquery hover with toggle access”, accessed August 15th, 2013. http://stackoverflow.com/questions/3667538/jquery-how-to-toggledisplay-on-hover/3667562#3667562 “Linking jquery to CSS”, accessed August 15th, 2013. http://stackoverflow.com/questions/9827095/is-it-possible-to-usejquery-on-and-hover “Using a callback with jquery to create a hotspot”, accessed August 15th, 2013. http://stackoverflow.com/questions/19578431/jquery-load-callback

“Creative CSS3 Animation Menus”. Accessed 4/9/2013, <http:// tympanus.net/codrops/2012/01/02/fullscreen-background-imageslideshow-with-css3/>

ABOUT MOOD BOARD

VIDEO PAGE

“Volkswagen interactive car show”, accessed August 15th, 2013. http://b.vimeocdn.com/ts/249/739/249739937_640.jpg

“HTML5 Video Player”. Accessed 15/9/2013, <http://www.videojs.com> THREESIXTY PAGE “Build a 360 view image slider with JavaScript”. Accessed 2/10/2013, <http://www.creativebloq.com/css3/build-360-view-image-sliderjavascript-3122883/>

“Pedigree interactive touch board”, accessed August 15th, 2013. http://www.campaignbrief.com/Pedigree_ITouch_WEB.jpg JCDecaux bus stop of the future”, accessed August 15th, 2013. http://www.blueskydesigngroup.com.au/wp-content/uploads/2011/08/ public_JCD_busstop.jpg

GALLERY PAGE “Make an accordian style slider in CSS3”. Accessed 8/10/2013, <http:// thecodeplayer.com/walkthrough/make-an-accordian-style-slider-incss3/>

“Augmented Reality Audi Magazine”, accessed August 15th, 2013. http://clgroupies.files.wordpress.com/2012/02/audi.jpg “VIVID 2013”, accessed August 15th, 2013. http://b.vimeocdn.com/ts/438/853/438853639_640.jpg

PANORAMA “New Zealand panorama”, accessed August 15th, 2013. http://minimalisticstudio.com/journal/360-degree-panoramic-viewplugin-for-jquery “Using the hover script in Jquery”, accessed August 15th, 2013. http://api.jquery.com/hover/

126

“Touch concept”, accessed August 15th, 2013. http://blog.raptivity.com/wp-content/uploads/2012/04/ Fotolia_33562551_Subscription_XL.jpg

PICTURES

4/15 2nd paragraph

“Wing it advertisement”, accessed September 15th, 2013. http://classickicks.com/wp-content/uploads/2011/10/Jordan-II-wing-it. jpg

“RED BULL ZERO Interactive advertising”, accessed August 15th, 2013. http://www.youtube.com/watch?v=CO2-QbEA0CQ

“Qantas airlines background”, accessed September 15th, 2013. http://www.erc.org.au/ERBEI/wp-content/uploads/Qantas_Airlines.jpg “MCA string theory”, accessed September 15th, 2013. http://www.mca.com.au/events/string-theory-artist-talks/ “Kings of Convenience at the Opera House”, accessed September 15th, 2013. http://www.curryandtulips.com/wp-content/uploads/2013/03/ IMG_2558web-640x426.jpg “Bridge climb Sydney”, accessed September 15th, 2013.

http://www.bridgeclimb.com/IgnitionSuite/uploads/images/WebCarousel-Tile---You-Havent-Seen-Sydney.jpg “Harbour Bridge NYE 2012, accessed September 15th, 2013. http://msnbcmedia4.msn.com/j/MSNBC/Components/Slideshows/_ production/ss-111231-nye/ss-111231-nye-01.ss_full.jpg DIGITAL “Fairfax changes from broadsheet to tabloid” , accessed August 15th, 2013. http://www.fairfaxmedia.com.au/shareholders/040313_Compactlaunch. pdf

“Advertising on the internet”, accessed August 14th, 2013. http://eprints.qut.edu.au/16431/1/Jennifer_Browne_Thesis.pdf “Interactive display projection”, accessed September 3rd, 2013. http://www.trendhunter.com/trends/yesyesno-night-lights “About mood board”, accessed October 26th, 2013. http://www.thebigidea.co.nz/connect/events/2013/jul/129010-tewhakakitenga-2013-tertiary-dance-festival-nz “Qantas price packaging”, accessed October 15th, 2013. http://packages.qantas.com/ “Sydney Skyline”, accessed 28/10/2013. <http://commons.wikimedia. org/wiki/File:Sydney-harbour-bei-nacht-wallpaper.JPG> “Jordan Dunk”, accessed 28/10/2013. <http://de.flash-screen.com/ free-wallpaper/michael-jordanien-tapeten/tapete-basketball-sternmichael,1990x1440,45797.jpg> “Queesntown”, Photo taken by Patrick Lu, Queenstown, NZ, 2013 “Twilight”, accessed 28/10/2013. <http://www.hdwallpapers.in/ download/monaco_in_twilight-2560x1600.jpg> “Air Jordan 1 “Shadow Grey”, accessed 28/10/2013. <http://www. nicekicks.com/2013/07/02/air-jordan-1-shadow-detailed-images/> “Skyline”, accessed 28/10/2013. <http://energysmart.enernoc.com/ Portals/202241/images/sf_skyline.jpg>

“JCDecaux as an indicator of Globalisation, Andrew Gaffney”, accessed August 15th, 2013. http://www.escholarship.org/uc/item/25t1r7x0#page-1

127

128

129

130

GRADUATION STUDIO 2013