Website Functionality Development…

Screen Shot 2017-03-20 at 21.00.55

Screen Shot 2017-03-20 at 21.14.52Above: You can see a screenshot of two full page videos playing simultaneously on top of each other, I embedded them in a web page, which I coded from scratch. The videos autoplay when the web page loads and top video has its opacity set to fifty percent (or 0.5), which means you can see the video playing underneath, whilst still seeing the video playing over the top. The videos are responsive inside the web page and remain full screen when the browser window is scaled up or down. This is a great step because our final web-based documentary experience will be a web page with two full page responsive videos, so by making this prototype, it shows that the basic functionality of our website is achievable. The next step is to work out the interactivity element so the user can easily and intuitively navigate seamlessly back and forth between the two videos, by controlling the opacity of the top video on a drag and click. Check out the live version here!

Screen Shot 2017-03-20 at 21.03.06 copy

Screen Shot 2017-03-17 at 18.45.21 copy
Above: You can see two screenshots demonstrating the process involved in coding the JavaScript functionality needed to calculate the distance travelled on a click and a drag, this functionality is fundamental to this project, as the ability for the user to transition between the two videos through controlling the opacity of the top video, is the main element of interactivity for this project. We started by finding some JavaScript code on W3CSchools that enabled us to calculate the position of the cursor on the web page. We then placed that code inside a div with a specific width, we used then used the cursor position and the div width to calculate the distance travelled (‘tottaldragamount’) in pixels on the x-axis on a click and a drag, which is calculated on mouse up.

Screen Shot 2017-03-21 at 12.03.48 copy

Above: You can see I am using the console inside Google Chrome’s inspect element developer tools, to test out my JavaScript code. As you can see, the first number being displayed in the console (202) is the ‘video width’, that is going to be the width of the web page it is also the width of the div, which will be calculated when the page loads. The second value (100) is the distance travelled of the click and drag in pixels, these two values allow me to calculate the click and drag distance as a percentage using the formula: drag length ÷ video width x 100 = drag length percentage. However, we needed a percentage result that was equal to or less than 1 because the value for opacity is between 0 and 1, so we changed the formula to: drag length ÷ video width = drag length percentage. We logged the output of this JavaScript equation in the console and we did a test to see if it showed a drag of half the div displayed as 50% or 0.5, which it did, therefore, this proved that the formula we implemented was successful.

Screen Shot 2017-03-21 at 18.30.12
Above: You can see a screenshot that shows how I integrated the output from the percentage calculation using the drag length and the screen width and used it’s value to adjust the opacity level of the image inside the div. I feel I have successfully achieved what I said out to produce, which was a click and drag opacity slider inspired the ones in use on this website. The next step is to integrate the click and drag JavaScript functionality I have developed here with the two full-screen screen videos I embedded in a web page on top of one another, which I documented in an earlier blog post. Check out the live version here!

Screen Shot 2017-03-25 at 16.44.24

Screen Shot 2017-03-25 at 14.15.05

Screen Shot 2017-03-25 at 16.20.44

Above: The three screenshots show how I have integrated the two integral elements of the functionality of the opacity video slider together to produce a finished, functional and intuitive JavaScript based slider, that will be the bedrock for the interactivity of this web-based project. The process involved me combining together the first test I worked on, which was using HTML and CSS to embed two responsive fullscreen videos in a web page on top of one another, making them play simultaneously on loop and controlling the opacity of the top video. I then incorporated the code for that with the code for the JavaScript opacity slider I built to fade the opacity of an image up and down. I successfully achieved this migration and the Console in Google Chrome’s developer tools was a fundamental aspect of making this work, as I logged all of the opacity slider’s outputs in the console so I could see them working in real time and debug certain elements of its functionality, for example as you can see in the screenshot above I pushed the ‘Drag Amount’, ‘Original Div Width’, ‘New Div Width’, ‘Drag Length’, ‘Current Opacity’ and ‘Opacity Change’ to the console so it would allow me to make the slider as accessible as possible for the user’s experience. One of the main changes I made to the slider from the initial test version compared to the video opacity slider was, making the distance the cursor traveled across the screen (div) on a click and a drag have a higher opacity value than its pixel distance, for example in the initial test version, if the screen (div) width was 100px and the cursor traveled 10px that would have been the equivalent to 0.1 opacity value, however that meant that you have to have your cursor on the very edge of the screen to receive an opacity value of 1 or 100%, therefore in the second iteration of the slider for the video I made  the screen width 60% of the actual screen width so the user doesn’t have to drag the cursor so far to get the same amount of opacity change. I also chose two totally different video clips to test the translucency, I used a dark static black and white video of the Empire State building and a full-colour high definition news video clip so it would be really easy for me to see the contrast and opacity between the two clips. Test out the live version here!

Screen Shot 2017-03-20 at 22.46.55

Screen Shot 2017-03-20 at 22.33.53Above: You can see two screenshots that show the process of my development of the homepage for ‘The Parallel’ interactive and immersive web-based video experience. I wanted the homepage to be very simplistic and minimal in its design, with no buttons or menus, just the two slashes, which is the icon and logo system we’re using for the project. But also the pragmatic reason behind not having anything else on the web page to distract the user, encourages users to click on the icon as a button. I wanted them to get some feedback when they rolled their cursor over the icon, so I used a HTML’onmouseover’ commandand selected the image of the slashes icon with the images inside, one slash being an image of Bristol and the other slash an image of war-torn Syria, I think this cursor rollover change will encourage the user to click the button to take them to the main video. I also like the idea that there is a home page acting as a holding page, and the user has to click to enter the experience, because I feel it adds an element of excitement and suspense for the user, as oppose to the main video experiencing beginning when you load up the page. Check out the live version here!

Screen Shot 2017-03-20 at 22.50.11Screen Shot 2017-03-20 at 22.50.20Screen Shot 2017-03-20 at 23.02.18

Above: The three screenshots above show the process involved in producing a HTML/JavaScript animated version of our logo for this project. I produced the animation using a piece of Mac software called Tumult Hype Pro, the aim of creating a logo animation, is to have it auto play when you enter ‘The Parallel’ it will then be a static clickable logo at the top of the page, that will allow the user to restart the visual video experience. This is a small touch, as the animation duration is only 1 second, however, I think that it adds an interesting visual element to the experience and it makes the website and the project feel much for professional and polished. Check out the live version here!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s