Flick the box within the page and it returns, give it a hard flick off the top of the page and it will stay there. Gives the user more tactile feeling.
A Pen by Sebastian Thomas on CodePen.
<!-- Flick the box within the page and it returns, give it a hard flick off the top of the page and it will stay there. Gives the user more tactile feeling. 'Top of page' depends on size of page! :) --> | |
.pep |
var threshold = 30; | |
var REVERT_THRESHOLD = 150; | |
var $box = $('.pep'); | |
var initialOffset = $box.offset(); | |
var shouldRevert = false; | |
$box.pep({ | |
useCSSTranslation: false, | |
axis: 'y', | |
revert: true, | |
revertAfter: 'ease', | |
initiate: function(ev, obj) { | |
shouldRevert = false; | |
}, | |
stop: function(ev, obj) { | |
var offset = this.$el.offset(); | |
var diffTop = Math.abs( initialOffset.top - offset.top ); | |
if (diffTop < REVERT_THRESHOLD){ | |
shouldRevert = true; | |
} | |
}, | |
revertIf: function(){ | |
return shouldRevert; | |
} | |
}); |
.pep{ | |
background: #ee874e; | |
width: 80px; | |
height: 80px; | |
position: absolute; | |
bottom: 40px; | |
left: 20px | |
} |
Flick the box within the page and it returns, give it a hard flick off the top of the page and it will stay there. Gives the user more tactile feeling.
A Pen by Sebastian Thomas on CodePen.