first commit
This commit is contained in:
845
libraries/cre-animate/css/bootstrap.min.css
vendored
Normal file
845
libraries/cre-animate/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1382
libraries/cre-animate/css/icomoon.css
Normal file
1382
libraries/cre-animate/css/icomoon.css
Normal file
File diff suppressed because it is too large
Load Diff
169
libraries/cre-animate/css/style.css
Normal file
169
libraries/cre-animate/css/style.css
Normal file
@@ -0,0 +1,169 @@
|
||||
/* GOOGLE FONT IMPORT */
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,900);
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: #555;
|
||||
background-color: #F5F5F5;
|
||||
line-height: 1.64;
|
||||
margin: 0;
|
||||
padding-top: 100px;
|
||||
}
|
||||
a, a:visited {
|
||||
color: #1dc6df;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.animation-demo {
|
||||
border-radius: 3px;
|
||||
padding: 20px 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
select, input, textarea {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
color: #777;
|
||||
width: 400px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E2E2E2;
|
||||
}
|
||||
input {
|
||||
width: 200px;
|
||||
}
|
||||
textarea {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
/* ================================= */
|
||||
/* ========== ICON FEATURE BOXES STYLES ========== */
|
||||
/* ================================= */
|
||||
|
||||
/* === Vertical 3 Column === */
|
||||
.icon-feature-3column {
|
||||
|
||||
}
|
||||
.icon-feature-3column i {
|
||||
font-size: 100px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* === Vertical 4 Column === */
|
||||
.icon-feature-4column {
|
||||
}
|
||||
.icon-feature-4column i {
|
||||
font-size: 70px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* === Vertical 3 Column - With Background === */
|
||||
.icon-feature-3column-alt {
|
||||
}
|
||||
.icon-feature-3column-alt i {
|
||||
font-size: 70px;
|
||||
border-radius: 100px;
|
||||
padding: 35px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* === Vertical 4 Column - With Background === */
|
||||
.icon-feature-4column-alt {
|
||||
}
|
||||
.icon-feature-4column-alt i {
|
||||
font-size: 50px;
|
||||
border-radius: 100px;
|
||||
padding: 25px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* === Horizontal 3 Column === */
|
||||
.icon-feature-3column-horizontal {
|
||||
display: table;
|
||||
}
|
||||
.icon-feature-3column-horizontal .icon {
|
||||
display: table-cell;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.icon-feature-3column-horizontal .icon i {
|
||||
font-size: 40px;
|
||||
}
|
||||
.icon-feature-3column-horizontal .content {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
/* === Horizontal 2 Column === */
|
||||
.icon-feature-2column-horizontal {
|
||||
display: table;
|
||||
}
|
||||
.icon-feature-2column-horizontal .icon {
|
||||
display: table-cell;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.icon-feature-2column-horizontal .icon i {
|
||||
font-size: 60px;
|
||||
}
|
||||
.icon-feature-2column-horizontal .content {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
padding-left: 30px;
|
||||
}
|
||||
/* === Horizontal 3 Column - With Background === */
|
||||
.icon-feature-3column-horizontal-alt {
|
||||
display: table;
|
||||
}
|
||||
.icon-feature-3column-horizontal-alt .icon {
|
||||
display: table-cell;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.icon-feature-3column-horizontal-alt .icon i {
|
||||
border-radius: 100px;
|
||||
padding: 12px;
|
||||
font-size: 24px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.icon-feature-3column-horizontal-alt .content {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
/* === Horizontal 2 Column - With Background === */
|
||||
.icon-feature-2column-horizontal-alt {
|
||||
display: table;
|
||||
}
|
||||
.icon-feature-2column-horizontal-alt .icon {
|
||||
display: table-cell;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.icon-feature-2column-horizontal-alt .icon i {
|
||||
border-radius: 100px;
|
||||
padding: 16px;
|
||||
font-size: 32px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.icon-feature-2column-horizontal-alt .content {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
318
libraries/cre-animate/js/jquery.cre-animate.js
Normal file
318
libraries/cre-animate/js/jquery.cre-animate.js
Normal file
@@ -0,0 +1,318 @@
|
||||
/*!
|
||||
* jQuery Cre-animate - Scrolling Animations - v1.1
|
||||
* Copyright (c) 2014 CreativelyCoded
|
||||
* support@creativelycoded.com
|
||||
*
|
||||
* http://www.creativelycoded.com/
|
||||
*/
|
||||
|
||||
(function($) { "use strict";
|
||||
|
||||
var disablePoint = 1024;
|
||||
|
||||
if ($(window).width() < disablePoint) {
|
||||
// Do nothing //
|
||||
}
|
||||
else {
|
||||
|
||||
var dataanimation = {
|
||||
fadein: 'fade-in',
|
||||
fadeout: 'fade-out',
|
||||
slidedownfromtop: 'slide-down-from-top',
|
||||
slideinfromright: 'slide-in-from-right',
|
||||
slideupfrombottom: 'slide-up-from-bottom',
|
||||
slideinfromleft: 'slide-in-from-left',
|
||||
scaleup: 'scale-up',
|
||||
scaledown: 'scale-down',
|
||||
rotate: 'rotate',
|
||||
flipyaxis: 'flip-y-axis',
|
||||
flipxaxis: 'flip-x-axis'
|
||||
};
|
||||
|
||||
var cssEase = {
|
||||
'ease': 'ease',
|
||||
'in': 'ease-in',
|
||||
'out': 'ease-out',
|
||||
'in-out': 'ease-in-out',
|
||||
'snap': 'cubic-bezier(0,1,.5,1)',
|
||||
// Penner equations
|
||||
'easeOutCubic': 'cubic-bezier(.215,.61,.355,1)',
|
||||
'easeInOutCubic': 'cubic-bezier(.645,.045,.355,1)',
|
||||
'easeInCirc': 'cubic-bezier(.6,.04,.98,.335)',
|
||||
'easeOutCirc': 'cubic-bezier(.075,.82,.165,1)',
|
||||
'easeInOutCirc': 'cubic-bezier(.785,.135,.15,.86)',
|
||||
'easeInExpo': 'cubic-bezier(.95,.05,.795,.035)',
|
||||
'easeOutExpo': 'cubic-bezier(.19,1,.22,1)',
|
||||
'easeInOutExpo': 'cubic-bezier(1,0,0,1)',
|
||||
'easeInQuad': 'cubic-bezier(.55,.085,.68,.53)',
|
||||
'easeOutQuad': 'cubic-bezier(.25,.46,.45,.94)',
|
||||
'easeInOutQuad': 'cubic-bezier(.455,.03,.515,.955)',
|
||||
'easeInQuart': 'cubic-bezier(.895,.03,.685,.22)',
|
||||
'easeOutQuart': 'cubic-bezier(.165,.84,.44,1)',
|
||||
'easeInOutQuart': 'cubic-bezier(.77,0,.175,1)',
|
||||
'easeInQuint': 'cubic-bezier(.755,.05,.855,.06)',
|
||||
'easeOutQuint': 'cubic-bezier(.23,1,.32,1)',
|
||||
'easeInOutQuint': 'cubic-bezier(.86,0,.07,1)',
|
||||
'easeInSine': 'cubic-bezier(.47,0,.745,.715)',
|
||||
'easeOutSine': 'cubic-bezier(.39,.575,.565,1)',
|
||||
'easeInOutSine': 'cubic-bezier(.445,.05,.55,.95)',
|
||||
'easeInBack': 'cubic-bezier(.6,-.28,.735,.045)',
|
||||
'easeOutBack': 'cubic-bezier(.175, .885,.32,1.275)',
|
||||
'easeInOutBack': 'cubic-bezier(.68,-.55,.265,1.55)'
|
||||
};
|
||||
|
||||
//GLOBAL TRANSITION VARIABLES
|
||||
var opacityZero = {
|
||||
'opacity': '0',
|
||||
'-ms-opacity': '0',
|
||||
'-webkit-opacity': '0',
|
||||
'-moz-opacity': '0',
|
||||
'-o-opacity': '0',
|
||||
};
|
||||
var opacityFull = {
|
||||
'opacity': '1',
|
||||
'-ms-opacity': '1',
|
||||
'-webkit-opacity': '1',
|
||||
'-moz-opacity': '1',
|
||||
'-o-opacity': '1',
|
||||
};
|
||||
|
||||
// DEFAULT ATTRIBUTES FOR ELEMENTS BASED ON ANIMATION TYPE
|
||||
$(document).ready(function() {
|
||||
$('html, body').css('overflow-x', 'hidden');
|
||||
$('html').css('height', '100%');
|
||||
$('.cre-animate').css({'position': 'relative'});
|
||||
$('.cre-animate').each(function() {
|
||||
var dataanimationUser = $(this).data('animation');
|
||||
|
||||
if (dataanimationUser == dataanimation.fadein) {
|
||||
$(this).css(opacityZero);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.fadeout) {
|
||||
$(this).css(opacityFull);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.slideinfromright) {
|
||||
$(this).css({'right': '-400px'}).css(opacityZero);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.slideinfromleft) {
|
||||
$(this).css({'left': '-400px'}).css(opacityZero);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.slideupfrombottom) {
|
||||
$(this).css({'bottom': '-200px'}).css(opacityZero);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.slidedownfromtop) {
|
||||
$(this).css({'top': '-200px'}).css(opacityZero);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.rotate) {
|
||||
$(this).css(opacityZero);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.scaleup) {
|
||||
var datastartscale = 0;
|
||||
var startScale = {
|
||||
'transform': 'scale(' + datastartscale + ')',
|
||||
'-ms-transform': 'scale(' + datastartscale + ')',
|
||||
'-webkit-transform': 'scale(' + datastartscale + ')',
|
||||
'-moz-transform': 'scale(' + datastartscale + ')',
|
||||
'-o-transform': 'scale(' + datastartscale + ')'
|
||||
};
|
||||
$(this).css(startScale).css(opacityZero);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.scaledown) {
|
||||
var datastartscale2 = 2;
|
||||
var startScale2 = {
|
||||
'transform': 'scale(' + datastartscale2 + ')',
|
||||
'-ms-transform': 'scale(' + datastartscale2 + ')',
|
||||
'-webkit-transform': 'scale(' + datastartscale2 + ')',
|
||||
'-moz-transform': 'scale(' + datastartscale2 + ')',
|
||||
'-o-transform': 'scale(' + datastartscale2 + ')'
|
||||
};
|
||||
$(this).css(startScale2).css(opacityZero);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.flipyaxis) {
|
||||
var flipY = {
|
||||
'transform': 'rotateY(180deg)',
|
||||
'-ms-transform': 'rotateY(180deg)',
|
||||
'-webkit-transform': 'rotateY(180deg)',
|
||||
'-moz-transform': 'rotateY(180deg)',
|
||||
'-o-transform': 'rotateY(180deg)'
|
||||
};
|
||||
$(this).css(flipY).css(opacityZero);
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.flipxaxis) {
|
||||
var flipX = {
|
||||
'transform': 'rotateX(180deg)',
|
||||
'-ms-transform': 'rotateX(180deg)',
|
||||
'-webkit-transform': 'rotateX(180deg)',
|
||||
'-moz-transform': 'rotateX(180deg)',
|
||||
'-o-transform': 'rotateX(180deg)'
|
||||
};
|
||||
$(this).css(flipX).css(opacityZero);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ONSCROLL ANIMATION OF ELEMENTS
|
||||
$(window).on('scroll load', function() {
|
||||
$('.cre-animate').each(function() {
|
||||
// GET ANIMATION TYPE FROM ELEMENT
|
||||
var dataanimationUser = $(this).data('animation');
|
||||
|
||||
// CALCULATES THE TRIGGER POINT USING THE OFFSET
|
||||
var dataoffset = $(this).data('offset');
|
||||
var parsePercent = parseFloat(dataoffset);
|
||||
var decimal = parsePercent / 100;
|
||||
var triggerpoint = $(window).height() * decimal + $(window).scrollTop(); // Call point in Viewport: viewport height * decimal(%) + pixels to top of window
|
||||
var element = $(this).offset().top;
|
||||
|
||||
if (dataanimationUser == dataanimation.slidedownfromtop) {
|
||||
element = element + 200;
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.slideupfrombottom) {
|
||||
element = element - 200;
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.scaleup) {
|
||||
element = element - $(this).height() / 2;
|
||||
}
|
||||
|
||||
if (dataanimationUser == dataanimation.scaledown) {
|
||||
element = element + $(this).height() / 2;
|
||||
}
|
||||
|
||||
// ASSIGNS VALUES FOR THE EASING TYPES
|
||||
var dataeasing = $(this).data('easing');
|
||||
if (cssEase[dataeasing]) {
|
||||
dataeasing = cssEase[dataeasing];
|
||||
}
|
||||
|
||||
// TRANSITION OPTIONS ARE CREATED
|
||||
var datadelay = $(this).data('delay');
|
||||
var dataspeed = $(this).data('speed');
|
||||
var transitionOptions = {
|
||||
'transition-duration': dataspeed + 'ms',
|
||||
'-ms-transition-duration': dataspeed + 'ms',
|
||||
'-webkit-transition-duration': dataspeed + 'ms',
|
||||
'-moz-transition-duration': dataspeed + 'ms',
|
||||
'-o-transition-duration': dataspeed + 'ms',
|
||||
'transition-timing-function': dataeasing,
|
||||
'-ms-transition-timing-function': dataeasing,
|
||||
'-webkit-transition-timing-function': dataeasing,
|
||||
'-moz-transition-timing-function': dataeasing,
|
||||
'-o-transition-timing-function': dataeasing,
|
||||
'transition-delay': datadelay + 'ms',
|
||||
'-ms-transition-delay': datadelay + 'ms',
|
||||
'-webkit-transition-delay': datadelay + 'ms',
|
||||
'-moz-transition-delay': datadelay + 'ms',
|
||||
'-o-transition-delay': datadelay + 'ms'
|
||||
};
|
||||
|
||||
// TRIGGERS THE ANIMATIONS
|
||||
if (element < triggerpoint) {
|
||||
// FADE IN
|
||||
if (dataanimationUser == dataanimation.fadein) {
|
||||
$(this).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
|
||||
// FADE OUT
|
||||
if (dataanimationUser == dataanimation.fadeout) {
|
||||
$(this).css(opacityZero).css(transitionOptions);
|
||||
}
|
||||
|
||||
// SLIDE DOWN FROM TOP
|
||||
if (dataanimationUser == dataanimation.slidedownfromtop) {
|
||||
$(this).css({'top': '0'}).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
|
||||
// SLIDE UP FROM BOTTOM
|
||||
if (dataanimationUser == dataanimation.slideupfrombottom) {
|
||||
$(this).css({'bottom': '0'}).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
|
||||
// SLIDE IN FROM RIGHT
|
||||
if (dataanimationUser == dataanimation.slideinfromright) {
|
||||
$(this).css({'right': '0'}).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
|
||||
// SLIDE IN FROM LEFT
|
||||
if (dataanimationUser == dataanimation.slideinfromleft) {
|
||||
$(this).css({'left': '0'}).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
|
||||
// SCALE UP
|
||||
if (dataanimationUser == dataanimation.scaleup) {
|
||||
var dataendscale = 1;
|
||||
var endScale = {
|
||||
'transform': 'scale(' + dataendscale + ')',
|
||||
'-ms-transform': 'scale(' + dataendscale + ')',
|
||||
'-webkit-transform': 'scale(' + dataendscale + ')',
|
||||
'-moz-transform': 'scale(' + dataendscale + ')',
|
||||
'-o-transform': 'scale(' + dataendscale + ')'
|
||||
};
|
||||
$(this).css(endScale).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
|
||||
// SCALE DOWN
|
||||
if (dataanimationUser == dataanimation.scaledown) {
|
||||
var dataendscale2 = 1;
|
||||
var endScale2 = {
|
||||
'transform': 'scale(' + dataendscale2 + ')',
|
||||
'-ms-transform': 'scale(' + dataendscale2 + ')',
|
||||
'-webkit-transform': 'scale(' + dataendscale2 + ')',
|
||||
'-moz-transform': 'scale(' + dataendscale2 + ')',
|
||||
'-o-transform': 'scale(' + dataendscale2 + ')'
|
||||
};
|
||||
$(this).css(endScale2).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
|
||||
// ROTATE
|
||||
if (dataanimationUser == dataanimation.rotate) {
|
||||
var degrees = 360;
|
||||
var rotation = {
|
||||
'transform': 'rotate(' + degrees + 'deg)',
|
||||
'-ms-transform': 'rotate(' + degrees + 'deg)',
|
||||
'-webkit-transform': 'rotate(' + degrees + 'deg)',
|
||||
'-moz-transform': 'rotate(' + degrees + 'deg)',
|
||||
'-o-transform': 'rotate(' + degrees + 'deg)'
|
||||
};
|
||||
$(this).css(rotation).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
|
||||
// FLIP Y AXIS
|
||||
if (dataanimationUser == dataanimation.flipyaxis) {
|
||||
var flipY = {
|
||||
'transform': 'rotateY(360deg)',
|
||||
'-ms-transform': 'rotateY(360deg)',
|
||||
'-webkit-transform': 'rotateY(360deg)',
|
||||
'-moz-transform': 'rotateY(360deg)',
|
||||
'-o-transform': 'rotateY(360deg)'
|
||||
};
|
||||
$(this).css(flipY).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
|
||||
// FLIP X AXIS
|
||||
if (dataanimationUser == dataanimation.flipxaxis) {
|
||||
var flipX = {
|
||||
'transform': 'rotateX(360deg)',
|
||||
'-ms-transform': 'rotateX(360deg)',
|
||||
'-webkit-transform': 'rotateX(360deg)',
|
||||
'-moz-transform': 'rotateX(360deg)',
|
||||
'-o-transform': 'rotateX(360deg)'
|
||||
};
|
||||
$(this).css(flipX).css(opacityFull).css(transitionOptions);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}(jQuery));
|
||||
1
libraries/cre-animate/js/jquery.cre-animate.min.js
vendored
Normal file
1
libraries/cre-animate/js/jquery.cre-animate.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user