Permalink
Browse files

addinng autoreset, options and data-kui-event attribute. v0.3.0 🚀

  • Loading branch information...
afshinm committed Aug 31, 2016
1 parent 3f8559d commit b97594e9c63723f1d0bfba524c90e36bc67d40f0
Showing with 141 additions and 19 deletions.
  1. +69 −8 build/scrollanim.js
  2. +2 −2 build/scrollanim.min.js
  3. +1 −1 package.json
  4. +69 −8 scrollanim.js
View
@@ -373,32 +373,51 @@
* options
*/
var _options = {
//trigger the events on module init?
// trigger the events on module init?
triggerOnInit: true,
attribute: 'data-kui-anim'
// prefix for all `data-...` attributes
attributePrefix: 'data-kui-',
animAttribute: 'anim',
// when to trigger the animation?
eventAttribute: 'event',
// default event to trigger
defaultEvent: 'in',
// reset the animation event after element is out of the viewport?
// enabling this option triggers the event each time it appears in the viewport
autoReset: true
};
/**
* To store all available elements with their options
*/
var _elements = [];
/**
* Get the attribute name
*
*/
function __(name) {
return _options.attributePrefix + name;
};
/**
* Find elements
*/
function _populate () {
//clear old elements first
_elements = [];
var elements = document.querySelectorAll('*[' + _options.attribute + ']');
var elements = document.querySelectorAll('*[' + __(_options.animAttribute) + ']');
for (var i = 0;i < elements.length;i++) {
var param = {};
var element = elements[i];
var event = element.getAttribute(_options.attribute);
var anim = element.getAttribute(__(_options.animAttribute));
var event = element.getAttribute(__(_options.eventAttribute)) || 'in';
_add(element, {
'in': event
});
param[event] = anim;
_add(element, param);
}
};
@@ -426,6 +445,8 @@
};
}
kissuiPosition.add(element, 'out');
// add visibility: hidden to the element
element.style.opacity = '0';
@@ -500,6 +521,37 @@
}
};
/**
* Clear animation, reset `opacity` and `active` flag on an element
*
*/
function _resetElement (element) {
var elx = _find(element)
for (var e in elx.event) {
elx.event[e].active = false;
}
element.style.opacity = 0;
};
/**
* Set option
*
*/
function _setOption (name, value) {
_options[name] = value;
};
/**
* Set an object of options
*/
function _setOptions (options) {
for (var o in options) {
_setOption(o, options[o]);
}
};
/**
* Start the module
*/
@@ -510,6 +562,13 @@
_attach(_find(element), event);
});
// to manage `autoReset`
kissuiPosition.on('out', function (element) {
if (_options.autoReset) {
_resetElement(element);
}
});
kissuiPosition.init();
};
@@ -519,6 +578,8 @@
_options: _options,
_elements: _elements,
init: _init,
add: _add
add: _add,
setOption: _setOption,
setOptions: _setOptions
};
}));
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -1,6 +1,6 @@
{
"name": "kissui.scrollanim",
"version": "0.2.0",
"version": "0.3.0",
"description": "CSS3 scroll animation library",
"main": "index.js",
"scripts": {
View
@@ -19,32 +19,51 @@
* options
*/
var _options = {
//trigger the events on module init?
// trigger the events on module init?
triggerOnInit: true,
attribute: 'data-kui-anim'
// prefix for all `data-...` attributes
attributePrefix: 'data-kui-',
animAttribute: 'anim',
// when to trigger the animation?
eventAttribute: 'event',
// default event to trigger
defaultEvent: 'in',
// reset the animation event after element is out of the viewport?
// enabling this option triggers the event each time it appears in the viewport
autoReset: true
};
/**
* To store all available elements with their options
*/
var _elements = [];
/**
* Get the attribute name
*
*/
function __(name) {
return _options.attributePrefix + name;
};
/**
* Find elements
*/
function _populate () {
//clear old elements first
_elements = [];
var elements = document.querySelectorAll('*[' + _options.attribute + ']');
var elements = document.querySelectorAll('*[' + __(_options.animAttribute) + ']');
for (var i = 0;i < elements.length;i++) {
var param = {};
var element = elements[i];
var event = element.getAttribute(_options.attribute);
var anim = element.getAttribute(__(_options.animAttribute));
var event = element.getAttribute(__(_options.eventAttribute)) || 'in';
param[event] = anim;
_add(element, {
'in': event
});
_add(element, param);
}
};
@@ -72,6 +91,8 @@
};
}
kissuiPosition.add(element, 'out');
// add visibility: hidden to the element
element.style.opacity = '0';
@@ -146,6 +167,37 @@
}
};
/**
* Clear animation, reset `opacity` and `active` flag on an element
*
*/
function _resetElement (element) {
var elx = _find(element)
for (var e in elx.event) {
elx.event[e].active = false;
}
element.style.opacity = 0;
};
/**
* Set option
*
*/
function _setOption (name, value) {
_options[name] = value;
};
/**
* Set an object of options
*/
function _setOptions (options) {
for (var o in options) {
_setOption(o, options[o]);
}
};
/**
* Start the module
*/
@@ -156,6 +208,13 @@
_attach(_find(element), event);
});
// to manage `autoReset`
kissuiPosition.on('out', function (element) {
if (_options.autoReset) {
_resetElement(element);
}
});
kissuiPosition.init();
};
@@ -165,6 +224,8 @@
_options: _options,
_elements: _elements,
init: _init,
add: _add
add: _add,
setOption: _setOption,
setOptions: _setOptions
};
}));

0 comments on commit b97594e

Please sign in to comment.