Skip to content

Instantly share code, notes, and snippets.

@beshanoe

beshanoe/WillWheel_.idea_.name

Created August 12, 2013 15:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save beshanoe/6211808 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save beshanoe/6211808 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
WillWheel_.idea_.name
scrollSensitive
Raw
WillWheel_.idea_encodings.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding" useUTFGuessing="true" native2AsciiForPropertiesFiles="false" />
</project>
Raw
WillWheel_.idea_misc.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager" version="2" />
</project>
Raw
WillWheel_.idea_modules.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/scrollSensitive.iml" filepath="$PROJECT_DIR$/.idea/scrollSensitive.iml" />
</modules>
</component>
</project>
Raw
WillWheel_.idea_scopes_scope_settings.xml
<component name="DependencyValidationManager">
<state>
<option name="SKIP_IMPORT_STATEMENTS" value="false" />
</state>
</component>
Raw
WillWheel_.idea_scrollSensitive.iml
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
Raw
WillWheel_.idea_vcs.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="" />
</component>
</project>
Raw
WillWheel_index.html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="style.css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.WillWheel.js"></script>
</head>
<body>
<div id="area" class="scroll-area">
<div id="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
WillWheel_jquery.WillWheel.js
(function(window, $){
/*
Implementing WillWheelAnimation class
*/
var WillWheelAnimation = function(el, cssProperty, options){
this.el = el;
this.prop = cssProperty;
this.calcNext = function(){};
options = $.extend({
value: 0,
target: 0,
units: 'px'
}, options);
$.extend(this, options);
};
WillWheelAnimation.prototype.animate = function(deltas){
this.calcNext(deltas);
this.el.style[this.prop] = this.value + this.units;
};
var createWillWheelAnimation = function(options){
if (!options.el) {
return;
}
var el = options.el;
if (el instanceof jQuery) {
el = el.get(0);
}
options = $.extend({
cssProperty: '',
currentValue: 0,
targetValue: 0, //Can be number(e.g 300 or '300px') or offset with sign(e.g. '+50px' or '-20em')
units: 'px',
divider: 1,
direction: '>',
axis: 'y',
invert: false,
loopMode: false
}, options);
if (!options.currentValue) { //If there is no defined value of property, get current value
options.currentValue = parseFloat(window.getComputedStyle(el)[options.cssProperty]);
}
if (typeof options.targetValue === 'string'){ //Convert target value to number
if (!isNaN(parseFloat(options.targetValue))) {
var parsedTargetValue = parseFloat(options.targetValue);
if ((options.targetValue[0] === '+') || (options.targetValue[0] === '-')) {
options.targetValue = options.currentValue + parsedTargetValue;
}
}
}
var animation = new WillWheelAnimation(el, options.cssProperty, {
value: options.currentValue,
target: options.targetValue
});
var calcDelta = (function(axis){ //Generating function for calculation offset delta based on chosen axis
switch (axis) {
case 'x':
return function(deltas){
return deltas.dx;
};
break;
case 'y':
return function(deltas){
return deltas.dy;
};
break;
case 'both':
return function(deltas){
return deltas.dboth;
};
break;
}
})(options.axis);
animation.calcNext = function(deltas){
var delta = calcDelta(deltas);
this.value = this.value + delta;
if (this.value > this.target) {
this.value = this.target/options.divider;
}
};
var sizeProperties = ['width', 'height', 'top', 'right', 'left', 'bottom'];
if (~sizeProperties.indexOf(options.cssPoperty)) {
}
return animation;
};
/*
Implementing WillWheelAnimationManager class
*/
var WillWheelAnimationManager = function(){
this.animations = [];
};
WillWheelAnimationManager.prototype.addAnimation = function(options){
var animation = createWillWheelAnimation(options);
if (animation) {
this.animations.push(animation);console.log(animation);
}
};
WillWheelAnimationManager.prototype.animate = function(index, deltas){
if (this.animations[index]) {
this.animations[index].animate(deltas);
}
};
WillWheelAnimationManager.prototype.animateAll = function(deltas){
for (var i = 0; i < this.animations.length; i++) {
this.animations[i].animate(deltas);
}
};
/*
Implementing WillWheel jQuery plugin
*/
$.fn.WillWheel = function(action, options){
var args = arguments;
return this.each(function(){
if (action === 'init') {
if (!this.wWAnimationManager) {
this.wWAnimationManager = new WillWheelAnimationManager();
}
var initOptions = $.extend({
mode: 'wheel',
preventDefault: false,
keyframesCount: 100
}, options);
if (initOptions.mode === 'wheel') {
var handler = function(event){
if (initOptions.preventDefault) {
event.preventDefault();
}
if (this.wWAnimationManager) {
var am = this.wWAnimationManager;
am.animateAll({
dx: event.wheelDeltaX,
dy: event.wheelDeltaY,
dboth: event.wheelDelta
});
}
};
if (this.addEventListener) {
if ('onwheel' in document) {
// IE9+, FF17+
this.addEventListener ("wheel", handler, false);
} else if ('onmousewheel' in document) {
// устаревший вариант события
this.addEventListener ("mousewheel", handler, false);
} else {
// 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
this.addEventListener ("MozMousePixelScroll", handler, false);
}
} else { // IE<9
this.attachEvent ("onmousewheel", handler);
}
}
}
//Getting current animation manager
var animationManager = this.wWAnimationManager;
//if animation manager somehow have not been initiated, do return;
if (!animationManager) {
return;
}
/*
"Add animation" action takes an options object argument that defines animation
*/
if (action === 'add') {
var animationOptions = $.extend({
type: 'css'
}, options);
animationManager.addAnimation(options);
}
});
};
})(window, jQuery);
Raw
WillWheel_reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Raw
WillWheel_script.js
(function(){
$('#area').WillWheel('init', {
preventDefault: true
});
$('#area').WillWheel('add', {
el: $('#box'),
cssProperty: 'left',
targetValue: '+300px'
});
$('#area').WillWheel('add', {
el: $('#box'),
cssProperty: 'top',
targetValue: '+50px',
divider: 15
});
}());
Raw
WillWheel_style.css
html, body {
height: 100%;
}
.scroll-area {
display: block;
position: relative;
width: 100%;
height: 100%;
background-color: lightyellow;
overflow: hidden;
}
#box {
position: absolute;
top: 50px;
left: 696px;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment