Skip to content

Instantly share code, notes, and snippets.

@maxstralka

maxstralka/index.html

Created March 7, 2015 16:26
Show Gist options
  • Save maxstralka/8148dada105a1d1addc3 to your computer and use it in GitHub Desktop.
Save maxstralka/8148dada105a1d1addc3 to your computer and use it in GitHub Desktop.
Download ZIP
Touch Swipe Left And Right
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>MovingBox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="draggableWrapper" id="draggable">
draggableWrapper
</div>
</body>
<!-- Importing Draggabilly. More information: http://draggabilly.desandro.com/ -->
<script type="text/javascript" src="draggabilly.pkgd.min.js"></script>
<!-- Adding custom JavaScript -->
<script type="text/javascript">
window.onload = function() {
// Getting Viewport Width & Height
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
viewPortWidth = x;
viewPortHeight = y;
// Making xEndPosition and yEndPosition globaly available
var xEndPosition = 0;
var yEndPosition = 0;
var to = 0;
// Selecting draggable Element and make it only draggable on the x axis
var elem = document.querySelector('#draggable');
var draggie = new Draggabilly( elem, {
axis: 'x'
});
// Get xStartPosition and yStartPosition on start of dragging
draggie.on( 'dragStart', function ( draggieInstance, event, pointer ) {
xStartPosition = draggieInstance.position.x;
yStartPosition = draggieInstance.position.y;
console.log('xStartPosition: ' + xStartPosition + ' | ' + 'yStartPosition: ' + yStartPosition);
});
// Get xEndPosition and yEndPosition on end of dragging and animate move back to original position when released
draggie.on( 'dragEnd', function ( draggieInstance, event, pointer ) {
xEndPosition = draggieInstance.position.x;
yEndPosition = draggieInstance.position.y;
console.log('xEndPosition: ' + xEndPosition + ' | ' + 'yEndPosition: ' + yEndPosition);
// Preparation for bounce animation
function bounce(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
}
function makeEaseOut(delta) {
return function(progress) {
return delta(1 - progress)
}
}
var bounceEaseOut = makeEaseOut(bounce)
// Animation function
function animate(opts) {
var start = new Date
var id = setInterval(function() {
var timePassed = new Date - start
var progress = timePassed / opts.duration
if (progress > 1 )
progress = 1
var delta = opts.delta(progress)
opts.step(delta)
if (progress == 1) {
clearInterval(id)
}
}, opts.delay || 10)
}
to = xEndPosition
// Checking if swiped enough to left or right to trigger actions
if (xEndPosition < 0) {
viewPortWidth = 0 - viewPortWidth;
if (xEndPosition > viewPortWidth/2) {
console.log("LEFT SIDE: Inside")
to = xEndPosition
animate({
delay: 0,
duration: 1000,
delta: bounceEaseOut,
step: function(delta) {
document.getElementById("draggable").style.left = to*delta + "px"
}
})
viewPortWidth = 0 - viewPortWidth;
} else {
console.log("LEFT SIDE: Outside");
document.getElementById("draggable").style.left = xEndPosition;
to = viewPortWidth;
animate({
delay: 0,
duration: 100,
delta: function linear(progress) {return progress},
step: function(delta) {
document.getElementById("draggable").style.left = xEndPosition + (-viewPortWidth - xEndPosition)*delta + "px";
document.getElementById("draggable").style.display = "none";
}
})
viewPortWidth = 0 - viewPortWidth;
}
} else {
if (xEndPosition > viewPortWidth/2) {
console.log("RIGHT SIDE: Outside")
document.getElementById("draggable").style.left = xEndPosition;
to = viewPortWidth;
animate({
delay: 0,
duration: 100,
delta: function linear(progress) {return progress},
step: function(delta) {
document.getElementById("draggable").style.left = xEndPosition + (viewPortWidth - xEndPosition)*delta + "px";
document.getElementById("draggable").style.display = "none";
}
})
} else {
console.log("RIGHT SIDE: Inside");
animate({
delay: 0,
duration: 1000,
delta: bounceEaseOut,
step: function(delta) {
document.getElementById("draggable").style.left = to*delta + "px";
}
})
}
};
});
}; // Closing onload function
</script>
</html>
Raw
main.css
.draggableWrapper {
font-family: Helvetica;
font-size: 22px;
text-align: center;
font-weight: 300;
padding: 20px;
height: 160px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
background-color: #F0F0F0;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment