'),
+ num = num || 0;
+
+
+ for(var i = 0; i < num; i++){
+
+ var $particle = $('
');
+
+ $particle.css({
+ 'opacity': Math.random(),
+ '-webkit-transform': 'translate3d('+Math.random() * ($content.width()-5) + 'px, '+ Math.random() * $content.height() +'px, 0px)',
+ '-webkit-animation': 'fade 1.5s infinite '+Math.random() * i/2 +'s'+ ' ease-in-out both'
+ });
+
+ $parent.append($particle);
+ }
+
+ $content.append($parent);
+
+ }
+
+ Particle.prototype = {}
+
+ return Particle;
+
+})($);
+
+
+
+$(function(){
+
+ var particle_top = new Particle('.container--space', 100);
+
+
+ var simple_1 = new Stint({
+ element: '.orbit--1',
+ property: 'rotate',
+ prop_start: 0,
+ prop_end: 1080,
+ unit: 'deg',
+ speed: .12
+ });
+
+
+ var simple_2 = new Stint({
+ element: '.orbit--2',
+ property: 'rotate',
+ prop_start: 0,
+ prop_end: 1080,
+ unit: 'deg',
+ speed: .09
+ });
+
+ var simple_3 = new Stint({
+ element: '.orbit--3',
+ property: 'rotate',
+ prop_start: 0,
+ prop_end: 1080,
+ unit: 'deg',
+ speed: .1
+ });
+
+ var simple_4 = new Stint({
+ element: '.orbit--4',
+ property: 'rotate',
+ prop_start: 0,
+ prop_end: 1080,
+ unit: 'deg',
+ speed: .15
+ });
+
+
+ var simple_5 = new Stint({
+ element: '.orbit--5',
+ property: 'rotate',
+ prop_start: 0,
+ prop_end: 1080,
+ unit: 'deg',
+ speed: .1
+ });
+
+
+ var simple_6 = new Stint({
+ element: '.orbit--6',
+ property: 'rotate',
+ prop_start: 0,
+ prop_end: 1080,
+ unit: 'deg',
+ speed: .1
+ });
+
+
+ var simple_7 = new Stint({
+ element: '.orbit--7',
+ property: 'rotate',
+ prop_start: 0,
+ prop_end: 1080,
+ unit: 'deg',
+ speed: .15
+ });
+
+ var simple_8 = new Stint({
+ element: '.orbit--8',
+ property: 'rotate',
+ prop_start: 0,
+ prop_end: 1080,
+ unit: 'deg',
+ speed: .05
+ });
+
+
+ var simple_10 = new Stint({
+ element: '.solar_sytem',
+ property: 'scale',
+ prop_start: .5,
+ prop_end: .95,
+ speed: .1
+ });
+
+ var simple_11 = new Stint({
+ element: '.solar_sytem > .content',
+ property: 'opacity',
+ prop_start: .5,
+ prop_end: .85,
+ speed: .25
+ });
+
+
+ var simple_12 = new Stint({
+ element: '.sun',
+ prop_start: 1,
+ prop_end: 1,
+ speed: .001,
+ class: 'fade',
+ timeline_end: true
+ });
+
+
+ var simple_13 = new Stint({
+ element: '.sun--happy',
+ prop_start: 1,
+ prop_end: 1,
+ speed: .001,
+ class: 'fade',
+ timeline_end: true
+ });
+
+});
\ No newline at end of file
diff --git a/demo/space/index.html b/demo/space/index.html
new file mode 100644
index 0000000..ec30b83
--- /dev/null
+++ b/demo/space/index.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
scenery.js Demostration - space
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/space/style.css b/demo/space/style.css
new file mode 100644
index 0000000..3205a61
--- /dev/null
+++ b/demo/space/style.css
@@ -0,0 +1,249 @@
+body {
+ margin: 0;
+ padding: 0;
+ background: #000; }
+
+.container--space {
+ height: 100em;
+ width: 100%;
+ background: #000; }
+ .container--space .content {
+ position: fixed;
+ height: 100%;
+ width: 100%; }
+
+.solar_sytem {
+ position: fixed;
+ height: 800px;
+ width: 800px;
+ background: #000;
+ left: 50%;
+ top: 50%;
+ margin-left: -400px;
+ -webkit-transform: translate(0, -50%) scale(0.5);
+ -moz-transform: translate(0, -50%) scale(0.5);
+ -ms-transform: translate(0, -50%) scale(0.5);
+ -o-transform: translate(0, -50%) scale(0.5);
+ transform: translate(0, -50%) scale(0.5); }
+ .solar_sytem .content {
+ opacity: 0.5; }
+
+.planet, .sun, .sun--happy {
+ position: absolute;
+ height: 50px;
+ width: 50px;
+ background-repeat: no-repeat;
+ background-position-x: center;
+ background-position-y: center;
+ background-position: center center;
+ -webkit-background-size: contain;
+ -moz-background-size: contain;
+ background-size: contain; }
+
+.sun, .sun--happy {
+ background-image: url('../images/sun.png');
+ height: 100px;
+ width: 100px;
+ left: 50%;
+ margin-left: -50px;
+ top: 50%;
+ opacity: 1;
+ -webkit-transform: translate(0, -50%);
+ -moz-transform: translate(0, -50%);
+ -ms-transform: translate(0, -50%);
+ -o-transform: translate(0, -50%);
+ transform: translate(0, -50%);
+ -webkit-transition: all, 1s, ease-in-out;
+ -moz-transition: all, 1s, ease-in-out;
+ transition: all, 1s, ease-in-out; }
+ .sun.fade, .fade.sun--happy {
+ opacity: 0; }
+
+.sun--happy {
+ background-image: url('../images/sun-happy.png');
+ opacity: 0;
+ -webkit-transition: all, 0.65s, ease-in-out;
+ -moz-transition: all, 0.65s, ease-in-out;
+ transition: all, 0.65s, ease-in-out; }
+ .sun--happy.fade {
+ opacity: 1; }
+
+.orbit, .orbit--1, .orbit--2, .orbit--3, .orbit--4, .orbit--5, .orbit--6, .orbit--7, .orbit--8 {
+ position: absolute;
+ border-radius: 100%;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translate(0, -50%);
+ -moz-transform: translate(0, -50%);
+ -ms-transform: translate(0, -50%);
+ -o-transform: translate(0, -50%);
+ transform: translate(0, -50%); }
+
+.orbit--1 {
+ width: 20%;
+ height: 20%;
+ margin-left: -10%; }
+ .orbit--1 .planet, .orbit--1 .sun, .orbit--1 .sun--happy {
+ background-image: url('../images/planet-1.png');
+ left: 125px;
+ width: 25px; }
+
+.orbit--2 {
+ width: 30%;
+ height: 30%;
+ margin-left: -15%; }
+ .orbit--2 .planet, .orbit--2 .sun, .orbit--2 .sun--happy {
+ background-image: url('../images/planet-2.png');
+ top: -22px;
+ left: 85px;
+ width: 40px;
+ -webkit-transform: rotate(275deg);
+ -moz-transform: rotate(275deg);
+ -ms-transform: rotate(275deg);
+ -o-transform: rotate(275deg);
+ transform: rotate(275deg); }
+
+.orbit--3 {
+ width: 40%;
+ height: 40%;
+ margin-left: -20%; }
+ .orbit--3 .planet, .orbit--3 .sun, .orbit--3 .sun--happy {
+ background-image: url('../images/planet-3.png');
+ bottom: -15px;
+ left: 190px;
+ width: 50px;
+ -webkit-transform: rotate(20deg);
+ -moz-transform: rotate(20deg);
+ -ms-transform: rotate(20deg);
+ -o-transform: rotate(20deg);
+ transform: rotate(20deg); }
+
+.orbit--4 {
+ width: 52%;
+ height: 52%;
+ margin-left: -26%; }
+ .orbit--4 .planet, .orbit--4 .sun, .orbit--4 .sun--happy {
+ background-image: url('../images/planet-4.png');
+ bottom: 0;
+ left: 95px;
+ width: 38px;
+ -webkit-transform: rotate(95deg);
+ -moz-transform: rotate(95deg);
+ -ms-transform: rotate(95deg);
+ -o-transform: rotate(95deg);
+ transform: rotate(95deg); }
+
+.orbit--5 {
+ width: 66%;
+ height: 66%;
+ margin-left: -33%; }
+ .orbit--5 .planet, .orbit--5 .sun, .orbit--5 .sun--happy {
+ background-image: url('../images/planet-5.png');
+ top: 20px;
+ left: 70px;
+ height: 70px;
+ width: 70px;
+ -webkit-transform: rotate(195deg);
+ -moz-transform: rotate(195deg);
+ -ms-transform: rotate(195deg);
+ -o-transform: rotate(195deg);
+ transform: rotate(195deg); }
+
+.orbit--6 {
+ width: 80%;
+ height: 80%;
+ margin-left: -40%; }
+ .orbit--6 .planet, .orbit--6 .sun, .orbit--6 .sun--happy {
+ background-image: url('../images/planet-6.png');
+ top: 265px;
+ left: -35px;
+ width: 75px;
+ -webkit-transform: rotate(75deg);
+ -moz-transform: rotate(75deg);
+ -ms-transform: rotate(75deg);
+ -o-transform: rotate(75deg);
+ transform: rotate(75deg); }
+
+.orbit--7 {
+ width: 90%;
+ height: 90%;
+ margin-left: -45%; }
+ .orbit--7 .planet, .orbit--7 .sun, .orbit--7 .sun--happy {
+ background-image: url('../images/planet-7.png');
+ top: 470px;
+ right: 0;
+ -webkit-transform: rotate(30deg);
+ -moz-transform: rotate(30deg);
+ -ms-transform: rotate(30deg);
+ -o-transform: rotate(30deg);
+ transform: rotate(30deg); }
+
+.orbit--8 {
+ width: 100%;
+ height: 100%;
+ margin-left: -50%; }
+ .orbit--8 .planet, .orbit--8 .sun, .orbit--8 .sun--happy {
+ background-image: url('../images/planet-8.png');
+ top: 64px;
+ right: 130px;
+ width: 40px;
+ -webkit-transform: rotate(330deg);
+ -moz-transform: rotate(330deg);
+ -ms-transform: rotate(330deg);
+ -o-transform: rotate(330deg);
+ transform: rotate(330deg); }
+
+.particle {
+ height: 2px;
+ width: 2px;
+ opacity: 0.85;
+ position: absolute;
+ border-radius: 100%;
+ background: #fff;
+ -webkit-animation: fade 1.5s infinite 1s ease-in-out both;
+ -webkit-transition: transform 0.25s ease-in-out; }
+
+@-webkit-keyframes fade {
+ 50% {
+ opacity: 0.15; } }
+
+@-moz-keyframes fade {
+ 50% {
+ opacity: 0.15; } }
+
+@keyframes fade {
+ 50% {
+ opacity: 0.15; } }
+
+@-webkit-keyframes fade_move {
+ 100% {
+ -webkit-transform: translate3d(100px, 75px, 1000px); } }
+
+@-moz-keyframes fade_move {
+ 100% {
+ -moz-transform: translate3d(100px, 75px, 1000px); } }
+
+@keyframes fade_move {
+ 100% {
+ -webkit-transform: translate3d(100px, 75px, 1000px);
+ -moz-transform: translate3d(100px, 75px, 1000px);
+ -ms-transform: translate3d(100px, 75px, 1000px);
+ -o-transform: translate3d(100px, 75px, 1000px);
+ transform: translate3d(100px, 75px, 1000px); } }
+
+@-webkit-keyframes rotate {
+ 50% {
+ -webkit-transform: rotateZ(360deg); } }
+
+@-moz-keyframes rotate {
+ 50% {
+ -moz-transform: rotateZ(360deg); } }
+
+@keyframes rotate {
+ 50% {
+ -webkit-transform: rotateZ(360deg);
+ -moz-transform: rotateZ(360deg);
+ -ms-transform: rotateZ(360deg);
+ -o-transform: rotateZ(360deg);
+ transform: rotateZ(360deg); } }
diff --git a/scenery.js b/scenery.js
index 0aa7b2a..14caa3b 100755
--- a/scenery.js
+++ b/scenery.js
@@ -209,23 +209,24 @@ var Thread = (function($){
})($);
// // Creating a Stint
-var Stint = (function($){
- var Stint = function(options){
+var Stint = (function($, _){
+ var Stint = function(options){
- var defaults = {
- element : '#box-1',
- property : 'opacity',
- prop_start : 1,
- prop_end : 0,
- unit : '',
- speed : .15,
- timeline_start : false,
- custom_class: false
- };
+ var defaults = {
+ element : '#box-1',
+ property : 'opacity',
+ prop_start : 1,
+ prop_end : 0,
+ unit : '',
+ speed : .15,
+ timeline : false,
+ class: false
+ };
this.options = $.extend({}, defaults, options);
this.win = {};
+ this.doc = {};
this.elm = {};
this.view = {};
@@ -233,20 +234,25 @@ var Stint = (function($){
this.$doc = $(document);
this.$elm = $(this.options.element);
+ this.computed_style = this.getComputedStyle(this.$elm);
+ this.prefix = this.getVendorPrefix(this.$elm);
this.elm.origin_top = this.getOriginalOffset();
this.diff = this.options.prop_start - this.options.prop_end;
this.distance = Math.abs(this.diff);
this.direction = this.diff > 0 ? -1 : 1;
- this.bindEvents();
+ this.transform = this.hasTransform(this.options.property);
+ this.transform_matrix = this.transform ? this.getTransformMatrix() : null;
+ this.transform_values = this.transform ? this.setTransform() : null;
+ this.bindEvents();
- };
+ };
- Stint.prototype = {
+ Stint.prototype = {
scrollElm: function() {
@@ -262,7 +268,7 @@ var Stint = (function($){
visible = this.isVisible();
- if ( visible ){
+ if (visible){
animation_top = opt.timeline_start ? ((this.elm.origin_top - this.view.top) - timeline_offset) : this.view.top;
animation_pct = Math.abs(animation_top * opt.speed / 100);
@@ -272,23 +278,37 @@ var Stint = (function($){
if ((opt.timeline_start && animation_top <= 0 && animation_counter <= this.distance) ||
!opt.timeline_start && animation_counter < this.distance) {
- if (opt.custom_class){
- this.$elm.addClass(opt.custom_class);
+ if (opt.class){
+ this.$elm.addClass(opt.class);
}
- this.$elm.css(opt.property, pos_counter + opt.unit);
+ if (this.transform){
+
+ this.$elm.css({
+ '-webkit-transform': this.transform_values +' ' + opt.property+'('+ pos_counter + opt.unit+')',
+ '-moz-transform': this.transform_values +' ' + opt.property+'('+ pos_counter + opt.unit+')',
+ '-ms-transform': this.transform_values +' ' + opt.property+'('+ pos_counter + opt.unit+')',
+ 'transform': this.transform_values +' ' + opt.property+'('+ pos_counter + opt.unit+')'
+ });
+
+ } else {
+ this.$elm.css(opt.property, pos_counter + opt.unit);
+ }
}
- if (opt.custom_class && animation_top >= 0) {
- this.$elm.removeClass(opt.custom_class);
+ if (opt.class && animation_top >= 0) {
+ this.$elm.removeClass(opt.class);
}
- }
+ if (opt.timeline_end && opt.class && (this.doc.height - this.view.bottom <= 1)){
+ this.$elm.addClass(opt.class);
+ }
- },
+ }
+ },
isVisible: function(){
@@ -296,26 +316,6 @@ var Stint = (function($){
(this.elm.left <= this.view.right) && (this.elm.right >= this.view.left);
},
- setEnvironment : function(){
-
- var elm_offset = this.$elm.offset();
-
- this.win.height = this.$win.height();
- this.win.width = this.$win.width();
-
- this.elm.height = this.$elm.height();
- this.elm.width = this.$elm.width();
- this.elm.top = elm_offset.top;
- this.elm.left = elm_offset.left;
- this.elm.bottom = this.elm.top + this.elm.height;
- this.elm.right = this.elm.left + this.elm.width;
-
- this.view.top = this.$win.scrollTop();
- this.view.left = this.$win.scrollLeft();
- this.view.bottom = (this.view.top + this.win.height);
- this.view.right = (this.view.left + this.win.width);
- },
-
bindEvents: function(){
this.$win.on('scroll', _.bind(this.scrollElm, this));
@@ -323,22 +323,182 @@ var Stint = (function($){
},
+ hasTransform: function(property) {
+
+ return property === 'translate' ||
+ property === 'rotate' ||
+ property === 'scale' ||
+ property === 'skew'
+ },
+
getOriginalOffset: function() {
return this.$elm.offset().top;
},
- getPropValue: function() {
+ getPropertyValue: function(property) {
+
+ return this.computed_style[property];
+
+ },
+
+ getComputedStyle: function(elm) {
+
+ return window.getComputedStyle(elm[0]);
+
+ },
+
+ getVendorPrefix: function(elm) {
+
+ var styles = this.computed_style,
+ prefix1 = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/))[1];
+
+ return '-' + prefix1 + '-';
+
+ },
+
+ setEnvironment : function(){
+
+ var elm_offset = this.$elm.offset();
+
+ this.win.height = this.$win.height();
+ this.win.width = this.$win.width();
+
+ this.doc.height = this.$doc.height();
+
+ this.elm.height = this.$elm.height();
+ this.elm.width = this.$elm.width();
+ this.elm.top = elm_offset.top;
+ this.elm.left = elm_offset.left;
+ this.elm.bottom = this.elm.top + this.elm.height;
+ this.elm.right = this.elm.left + this.elm.width;
+
+ this.view.top = this.$win.scrollTop();
+ this.view.left = this.$win.scrollLeft();
+ this.view.bottom = (this.view.top + this.win.height);
+ this.view.right = (this.view.left + this.win.width);
+
+ },
- var computed_style = window.getComputedStyle(this.$elm[0]);
+ setTransform: function(){
- return computed_style[this.options.property];
+ var self = this,
+ transform = [],
+ unit,
+ property;
+
+ _.each(this.transform_matrix, function(val, key){
+
+ if(self.options.property !== key){
+
+ unit = self.setUnit(key);
+
+ property = (key === 'translate') ? key+'('+ val.x + unit +', '+ val.y + unit +')' : key+'('+ val + unit +')';
+
+ transform.push(property);
+
+ }
+
+ });
+
+ return transform = transform.join(' ');
+
+ },
+
+ setUnit: function(key) {
+
+ var unit;
+
+ switch(key){
+
+ case 'translate':
+ unit = 'px';
+ break;
+
+ case 'rotate':
+ unit = 'deg';
+ break;
+
+ case 'skew':
+ unit = 'deg';
+ break;
+
+ case 'scale':
+ unit = '';
+ break;
+
+ }
+
+ return unit;
+
+ },
+
+ getTransformMatrix: function(matrix){
+
+ //unmatrixjs for help with some of the math caluculations
+ var property = (this.prefix !== '-moz-') ? this.prefix + 'transform' : 'transform',
+ transform = this.getPropertyValue(property),
+ split_start = transform.split('(')[1],
+ split_end = split_start.split(')')[0],
+ matrix = split_end.split(',');
+
+ var a = matrix[0],
+ b = matrix[1],
+ c = matrix[2],
+ d = matrix[3],
+ e = matrix[4],
+ f = matrix[5],
+ skew_a,
+ rads,
+ rotate;
+
+ var scale_x = Math.sqrt(a * a + b * b);
+ a /= scale_x;
+ b /= scale_x;
+
+
+ var skew_b = a * c + b * d;
+ c -= a * skew_b;
+ d -= b * skew_b;
+
+
+ var scale_y = Math.sqrt(c * c + d * d);
+ c /= scale_y;
+ d /= scale_y;
+ skew_b /= scale_y;
+
+
+ if ( a * d < b * c ) {
+ a = -a;
+ b = -b;
+ skew_b = -skew_b;
+ scale_x = -scale_x;
+ }
+
+
+ skew_b = Math.atan(skew_b),
+ skew_a = Math.round(skew_b * (180/Math.PI));
+ rads = Math.atan2(b, a);
+
+ if ( rads < 0 ) { rads += (2 * Math.PI); }
+
+ rotate = Math.round( rads * (180/Math.PI));
+
+ return {
+ 'rotate': rotate,
+ 'scale': scale_x,
+ 'skew': skew_a,
+ 'translate': {
+ 'x': e,
+ 'y': f
+ }
+ }
}
- }
+ }
return Stint;
-})($);
+})($, _);