This commit is contained in:
parent
ced91131a3
commit
97c795a972
|
@ -17,6 +17,11 @@ body {
|
|||
|
||||
.condensed { font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal !important;}
|
||||
|
||||
/* smooth scroll */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* WRAPPER STYLES
|
||||
-------------------------------------------------- */
|
||||
.content-wrap { max-width: 80%; position: relative; margin: 0 auto; clear: both; }
|
||||
|
|
|
@ -3,17 +3,6 @@ function getRandomInt(min, max) {
|
|||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
// scroll top?
|
||||
var toTop = document.getElementById('toTop'),
|
||||
toTopTween = KUTE.to( window, { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500 } );
|
||||
|
||||
function topHandler(e){
|
||||
e.preventDefault();
|
||||
toTopTween.start();
|
||||
}
|
||||
toTop.addEventListener('click',topHandler,false);
|
||||
|
||||
|
||||
// toggles utility
|
||||
var toggles = document.querySelectorAll('[data-function="toggle"]');
|
||||
|
||||
|
|
|
@ -11,3 +11,13 @@ button.addEventListener('click', function(e){
|
|||
!scrollTween.playing && scrollTween.start()
|
||||
},false);
|
||||
/* SCROLL EXAMPLE */
|
||||
|
||||
// scroll top?
|
||||
var toTop = document.getElementById('toTop'),
|
||||
toTopTween = KUTE.to( window, { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500 } );
|
||||
|
||||
function topHandler(e){
|
||||
e.preventDefault();
|
||||
toTopTween.start();
|
||||
}
|
||||
toTop.addEventListener('click',topHandler,false);
|
||||
|
|
|
@ -22,6 +22,10 @@
|
|||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
html {scroll-behavior: auto;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -149,7 +153,8 @@ KUTE.to('#myElement',{scroll: 0 }).start()
|
|||
<li>The scroll animation is not as smooth as with transform animations, it has no access at sub-pixel level, but you can play around
|
||||
with various easing functions and durations to find the best possible outcome.</li>
|
||||
<li>All pages in this documentation have a <code><a>Back to top</a></code> button at the bottom, just in case you didn't notice.</li>
|
||||
<li>The component is an essential part in ALL KUTE.js distributions.</li>
|
||||
<li>The component is only bundled with the <code>demo/src/kute-extra.js</code> file. That is thanks to <code>scroll-behavior</code>, but you can
|
||||
use this component to enable scrolling for legacy browsers.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
@ -170,7 +175,7 @@ KUTE.to('#myElement',{scroll: 0 }).start()
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<script src="./src/polyfill.min.js"></script>
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<script src="./src/kute-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
|
||||
<script src="./assets/js/scrollProperty.js"></script>
|
||||
|
|
109
src/kute-base.js
109
src/kute-base.js
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* KUTE.js Base v2.0.2 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Base v2.0.3 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
|
@ -9,7 +9,7 @@
|
|||
(global = global || self, global.KUTE = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var version = "2.0.2";
|
||||
var version = "2.0.3";
|
||||
|
||||
var defaultOptions = {
|
||||
duration: 700,
|
||||
|
@ -474,114 +474,9 @@
|
|||
functions: {onStart: onStartOpacity}
|
||||
};
|
||||
|
||||
function on (element, event, handler, options) {
|
||||
options = options || false;
|
||||
element.addEventListener(event, handler, options);
|
||||
}
|
||||
|
||||
function off (element, event, handler, options) {
|
||||
options = options || false;
|
||||
element.removeEventListener(event, handler, options);
|
||||
}
|
||||
|
||||
function one (element, event, handler, options) {
|
||||
on(element, event, function handlerWrapper(e){
|
||||
if (e.target === element) {
|
||||
handler(e);
|
||||
off(element, event, handlerWrapper, options);
|
||||
}
|
||||
}, options);
|
||||
}
|
||||
|
||||
var supportPassive = (function () {
|
||||
var result = false;
|
||||
try {
|
||||
var opts = Object.defineProperty({}, 'passive', {
|
||||
get: function() {
|
||||
result = true;
|
||||
}
|
||||
});
|
||||
one(document, 'DOMContentLoaded', function (){}, opts);
|
||||
} catch (e) {}
|
||||
return result;
|
||||
})();
|
||||
|
||||
var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
|
||||
|
||||
var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints)||false;
|
||||
|
||||
var touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement;
|
||||
var passiveHandler = supportPassive ? { passive: false } : false;
|
||||
function preventScroll(e) {
|
||||
this.scrolling && e.preventDefault();
|
||||
}
|
||||
function getScrollTargets(){
|
||||
var el = this.element;
|
||||
return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
|
||||
}
|
||||
function scrollIn(){
|
||||
var targets = getScrollTargets.call(this);
|
||||
if ( 'scroll' in this.valuesEnd && !targets.el.scrolling) {
|
||||
targets.el.scrolling = 1;
|
||||
on( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
|
||||
on( targets.el, touchOrWheel, preventScroll, passiveHandler);
|
||||
targets.st.style.pointerEvents = 'none';
|
||||
}
|
||||
}
|
||||
function scrollOut(){
|
||||
var targets = getScrollTargets.call(this);
|
||||
if ( 'scroll' in this.valuesEnd && targets.el.scrolling) {
|
||||
targets.el.scrolling = 0;
|
||||
off( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
|
||||
off( targets.el, touchOrWheel, preventScroll, passiveHandler);
|
||||
targets.st.style.pointerEvents = '';
|
||||
}
|
||||
}
|
||||
function onStartScroll(tweenProp){
|
||||
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.scrollTop = (numbers(a,b,v))>>0;
|
||||
};
|
||||
}
|
||||
}
|
||||
function onCompleteScroll(tweenProp){
|
||||
scrollOut.call(this);
|
||||
}
|
||||
var baseScrollOps = {
|
||||
component: 'scrollProperty',
|
||||
property: 'scroll',
|
||||
Interpolate: {numbers: numbers},
|
||||
functions: {
|
||||
onStart: onStartScroll,
|
||||
onComplete: onCompleteScroll
|
||||
},
|
||||
Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
|
||||
};
|
||||
|
||||
function getPrefix() {
|
||||
var thePrefix, prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
|
||||
for (var i = 0, pfl = prefixes.length; i < pfl; i++) {
|
||||
if (((prefixes[i]) + "Transform") in document.body.style) {
|
||||
thePrefix = prefixes[i]; break;
|
||||
}
|
||||
}
|
||||
return thePrefix;
|
||||
}
|
||||
|
||||
function trueProperty(property) {
|
||||
return !(property in document.body.style)
|
||||
? getPrefix() + (property.charAt(0).toUpperCase() + property.slice(1))
|
||||
: property;
|
||||
}
|
||||
|
||||
var transformProperty = trueProperty('transform');
|
||||
var supportTransform = transformProperty in document.body.style ? 1 : 0;
|
||||
|
||||
var BaseTransform = new AnimationBase(baseTransformOps);
|
||||
var BaseBoxModel = new AnimationBase(baseBoxModelOps);
|
||||
var BaseOpacity = new AnimationBase(baseOpacityOps);
|
||||
var BaseScroll = new AnimationBase(baseScrollOps);
|
||||
var indexBase = {
|
||||
Animation: AnimationBase,
|
||||
Components: {
|
||||
|
|
4
src/kute-base.min.js
vendored
4
src/kute-base.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* KUTE.js Extra v2.0.2 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Extra v2.0.3 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
|
@ -9,7 +9,7 @@
|
|||
(global = global || self, global.KUTE = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var version = "2.0.2";
|
||||
var version = "2.0.3";
|
||||
|
||||
var supportedProperties = {};
|
||||
|
||||
|
|
4
src/kute-extra.min.js
vendored
4
src/kute-extra.min.js
vendored
File diff suppressed because one or more lines are too long
4
src/kute.min.js
vendored
4
src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue