Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/global/js/demo_pages/animations_velocity_examples.js
+286
View File
@@ -0,0 +1,286 @@
/* ------------------------------------------------------------------------------
*
* # Velocity animations - advanced examples
*
* Demo JS code for animations_velocity_examples.html page
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var AnimationsVelocityAdvanced = function() {
//
// Setup module components
//
// Velocity advanced
var _componentAnimationVelocityAdvanced = function() {
if (!$().velocity) {
console.warn('Warning - velocity.min.js is not loaded.');
return;
}
// Properties animation
$('.velocity-properties').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.card').velocity({
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
// Chained animation
$('.velocity-chained').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.card').velocity({
marginLeft: 20
}).velocity('reverse', {
delay: 1000
}).velocity({
marginRight: 20
}).velocity('reverse', {
delay: 1000
}).velocity({
opacity: 0.5
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
// Stagger animation
$('.velocity-stagger').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.card').velocity('transition.slideUpIn', {
stagger: 500
});
});
// Drag animation
$('.velocity-drag').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.card').velocity('transition.slideUpBigIn', {
duration: 1000,
drag: true
});
});
// Backwards animation
$('.velocity-backwards').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.card').velocity('transition.slideDownOut', {
stagger: 400,
backwards: true
})
.velocity({ opacity: 1 }, {
duration: 500,
display: 'block'
});
});
//
// Animation callbacks
//
// Begin callback
$('.velocity-begin').on('click', function (e) {
e.preventDefault();
$(this).parent().next('.row').velocity({
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}, {
begin: function() {
alert('Begin callback example');
}
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
// Complete callback
$('.velocity-complete').on('click', function (e) {
e.preventDefault();
$(this).parent().next('.row').velocity({
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}, {
complete: function() {
alert('Complete callback example');
}
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
// Progress callback animation
$('.velocity-progress').on('click', function (e) {
e.preventDefault();
var $percentComplete = $('#percentComplete'),
$timeRemaining = $('#timeRemaining');
$(this).parent().next('.row').velocity({
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}, {
duration: 1000,
progress: function(elements, percentComplete, timeRemaining, timeStart) {
$percentComplete.html(Math.round(percentComplete * 100) + '% complete.');
$timeRemaining.html(timeRemaining + 'ms remaining.');
}
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
//
// Animate layout on page load
//
// Hide elements first
$('.sidebar, .navbar, .navbar-brand, .navbar-text, .navbar-nav .nav-item, .page-header, .page-title, .page-header .header-elements, .breadcrumb, .breadcrumb-elements-item, .content > .card, .content .row > [class*=col-], .footer')
.css('opacity', 0);
};
// Animate layout on window load
var _componentAnimationVelocityLayout = function() {
if (!$().velocity) {
console.warn('Warning - velocity.min.js is not loaded.');
return;
}
// Layout parts - flex
$('.navbar, .page-title, .page-header .header-elements, .breadcrumb, .content > .card, .footer')
.css('opacity', 1)
.velocity('transition.slideDownIn', {
stagger: 200,
duration: 200,
display: 'flex',
complete: function(elements) {
$(this).removeAttr('style');
}
});
// Layout parts - block
$('.navbar-brand, .navbar-text, .navbar-nav .nav-item, .page-header, .content .row > [class*=col-], .breadcrumb-elements-item')
.css('opacity', 1)
.velocity('transition.slideUpIn', {
stagger: 200,
duration: 200,
complete: function(elements) {
$(this).removeAttr('style');
}
});
// Sidebar
$('.sidebar')
.css({opacity: 0, borderColor: 'transparent'})
.velocity('transition.slideUpIn', {
delay: 100,
duration: 500,
complete: function(elements) {
$(this).removeAttr('style');
}
});
// Navigation list on load
$('.nav-sidebar > .nav-item, .nav-sidebar > .nav-item-header')
.css('opacity', 0)
.velocity('transition.slideLeftIn', {
delay: 500,
stagger: 75,
duration: 200,
complete: function(elements) {
$(this).removeAttr('style')
}
});
// Navigation list on click
$('.nav-sidebar .nav-item-submenu > .nav-link').on('click', function() {
if (!$(this).parent().hasClass('nav-item-open')) {
$(this).next('.nav-group-sub').children('.nav-item').css('opacity', 0).velocity('transition.fadeIn', {
delay: 100,
stagger: 30,
duration: 200,
complete: function(elements) {
$(this).removeAttr('style')
}
});
} else {
$(this).next('.nav-group-sub').children('.nav-item').css('opacity', 0).velocity('transition.fadeOut', {
duration: 200,
complete: function(elements) {
$(this).removeAttr('style')
}
});
}
});
};
//
// Return objects assigned to module
//
return {
init: function() {
_componentAnimationVelocityAdvanced();
},
initOnLoad: function() {
_componentAnimationVelocityLayout();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
AnimationsVelocityAdvanced.init();
});
$(window).on('load', function() {
AnimationsVelocityAdvanced.initOnLoad();
});