Make a draggable viewing area

Sony is showing off its new range of Xperia Z Series phones by teaming up with e2save mobiles with a micro site entitled ‘If only it was 4K’. The idea is that the user can select semi-mythical events that have been captured in history, such as the image of the Loch Ness monster.These usually originate from low-resolution recording devices, and therefore leave some ambiguity as to the authenticity of the event. The nice, interactive element here is that the user can drag a line version of the phone over the screen and the image underneath becomes clear,asifviewedinthefullresolutionof4Kvideo.There is an alternative way to view the photo with a draggable full-screen view to move between the clear image and the grainy image, and this is the technique that we will be exploring further. 

Demo Link: e2save.com/if-only-it-was-4k/

Technique

1. Create the HTML tag

In order to re-create the viewer experience for ourselves, all that needs to be added to the HTML is one div tag with a unique id. In this case it’s named ‘view’ to be the viewport of the mobile phone in the ‘If only it was 4K’ site.

<div id="view"></div>

2. Style the page

In either style tags in the head section or in a separate CSS file, add the styling for the main page. This just adds a background image that fills the entire browser viewport. In this case the image is slightly blurry so that the viewport will be sharp.

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url(img/splash2.jpg) no-repeat
center center fixed;
background-size: cover;
}

3. Add the view 

The view section will allow the user to drag a clipped section around the screen when the dragging functionality is added later in the JavaScript. As you can see here, it again fills the full browser viewport but is clipped to a smaller section.

#view {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: red;
background: url(img/splash.jpg) no-repeat
center center fixed;
background-size: cover;
clip: rect(0px, 300px, 200px, 0px);
}

4. Add the functionality 

Now add script tags before the closing body section of the page or add a link to an external JS page. Add the following code. This holds some variables and stores the ‘view’ div in the variable named ‘div’.

var mousePosition;
var div;
var isDown = false;
div = document.getElementById("view");

5. Check for up and down 

The code needs to know when the user has pressed and released the mouse, so two event listeners are added to the div to check if it is down or not. This is recorded as a Boolean value of true or false in the is Down variable.

div.addEventListener('mousedown', function
(e) {
isDown = true;
}, true);
document.addEventListener('mouseup', function
() {
isDown = false;
}, true);



6. Update the view 

Another event listener is added and this checks if the mouse is pressed down. When it is, the mouse position is updated and then the clipping rectangle in CSS is updated with the new position so that it follows the mouse. Save and view it in the browser to test.

document.addEventListener('mousemove',
function (event) {
event.preventDefault();
if (isDown) {
mousePosition = { x: event.clientX, y:
event.clientY };
div.style.clip = "rect(" + (mousePosition.y
- 150) + "px, " + (mousePosition.x + 230) +
"px, " + (mousePosition.y + 150) + "px, " +
(mousePosition.x - 230) + "px )";
}
}, true);


Source From Web Designer Magazine


Tweet