Allows to manipulate the cube created using CSS and HTML.
31 |author: Artur Kot (artur.kot@xhtmlized.com)
32 | 33 |
36 | /*jshint browser: true, smarttabs: false, indent: 4, undef: true, unused: true, strict: true, trailing: true, onevar: true, white: true */
37 | /*globals requestAnimationFrame, cancelAnimationFrame*/
38 |
39 | (function () {
40 | 'use strict';
41 |
42 | var Test, Cube; Test = {Checks if ‘requestAnimationFrame’ is available
70 | animationFrame: function () {
77 | return !!window.requestAnimationFrame;
78 | },Checks if CSS 3d transforms can be used
91 | css3d: function () {
98 | if (document.querySelector === undefined) { return false; }
99 |
100 | var EL_ID = 'temporaryCubeCSS3dElement',
101 | STYLE_ID = 'temporaryCubeCSS3dStyle',
102 | $body = document.body,
103 | $el,
104 | $style,
105 | docStyles = document.documentElement.style,
106 | prefixes = ['webkit', 'moz', 'ms', ''],
107 | testResult,
108 | i,
109 | j; function testPreserve3d() {
131 | for (i = 0, j = prefixes.length; i < j; i += 1) {
132 | if (prefixes[i].length > 0) {
133 | if (docStyles[prefixes[i] + 'TransformStyle'] !== undefined) {
134 | docStyles[prefixes[i] + 'TransformStyle'] = 'preserve-3d';
135 | if (docStyles[prefixes[i] + 'TransformStyle'].length > 0) {
136 | docStyles[prefixes[i] + 'TransformStyle'] = '';
137 | return true;
138 | }
139 | }
140 | } else {
141 | if (docStyles.transformStyle !== undefined) {
142 | docStyles.transformStyle = 'preserve-3d';
143 | if (docStyles.transformStyle.length > 0) {
144 | docStyles.transformStyle = '';
145 | return true;
146 | }
147 | }
148 | }
149 | }
150 |
151 | return false;
152 | }
153 |
154 | testResult = testPreserve3d(); if (testResult && docStyles.webkitPerspective !== undefined) {
176 | $style = document.createElement('style');
177 | $el = document.createElement('div');
178 |
179 | $style.id = STYLE_ID;
180 | $el.id = EL_ID;
181 |
182 | $body.appendChild($style);
183 | $body.appendChild($el);
184 |
185 | $style.textContent = [
186 | '@media (transform-3d), (-webkit-transform-3d) {',
187 | ' #' + EL_ID + '{',
188 | ' left: 9px;',
189 | ' position: absolute;',
190 | ' height: 5px;',
191 | ' margin: 0;',
192 | ' padding: 0;',
193 | ' border: 0',
194 | ' }',
195 | '}'
196 | ].join('\n');
197 |
198 | testResult = $el.offsetLeft === 9 && $el.offsetHeight === 5;
199 |
200 | $body.removeChild($style);
201 | $body.removeChild($el);
202 | }
203 |
204 | return testResult;
205 | }
206 | };Adds class at the top of the document. 219 | Useful for applying fallback if Cube cannot be fired.
220 | 221 | if (Test.animationFrame() && Test.css3d()) {
224 | document.documentElement.className += ' cube-3d-available';
225 | }Allows to create new Cube instance in the following fashion 238 | (note that ‘new’ is not necessary as it’s added inside 239 | the function below):
240 |var myCube = Cube('.my .selector');
241 | and later use any of the available public classes, e.g.:
242 |myCube.rotate();
243 | The function is revealed using window object.
selector string Any CSS selector that will work with querySelector.props object The cube’s options passed to the constructor.Cube will return new instance of Cube.instance constructor else it will return object with empty methods. Cube = function (selector, props) {
256 | if (Test.animationFrame() && Test.css3d()) {
257 | return new Cube.instance(selector, props || {});
258 | }
259 |
260 | return {
261 | applyRotation: function () { return false; },
262 | rotate: function () { return false; },
263 | focusOn: function () { return false; },
264 | spinTo: function () { return false; }
265 | };
266 | };
267 |
268 | window.Cube = Cube;selector string Any CSS selector that will work with querySelector.props object The cube’s options. Cube.instance = function (selector, props) {The only option that can be currently passed to the constructor 302 | is perspective.
303 | 304 | props.perspective = props.perspective || 1100;$cube object A DOM element which is supposed to be a cube. this.$cube = document.querySelector(selector || '#the-cube');props object Options publicly available for methods. this.props = props;rotatePropsSet boolean True if rotate properties (posX, posY, posZ, speedX, speedY, speedZ) has been set. See rotate method below. this.rotatePropsSet = false;rotateDir string The cube’s rotation direction. Can be either ‘left’ or ‘right’. this.rotateDir = 'right';speed[axis] number Determines how fast the cube should rotate 360 degrees. Value is in ‘iterations’, not milliseconds. this.speedX = 0;
405 | this.speedY = 0;
406 | this.speedZ = 0;pos[axis] number The cube’s rotation value from 0 to 360. this.posX = 0;
424 | this.posY = 0;
425 | this.posZ = 0;snapshot[axis] number The cube’s rotation value from 0 to 360. Used to ‘remember’ last values. See ‘focusOn’ method. this.snapshotX = 0;
443 | this.snapshotY = 0;
444 | this.snapshotZ = 0;isRotating boolean True if cube is being rotated at the moment (rotate method is in use). See rotate. this.isRotating = false;isFocusing boolean True if cube is being focused at the moment (rotates to show selected side). See rotate, spinTo, and focusOn methods. this.isFocusing = false;hasFocused boolean True if cube has rotated to the selected side. See focusOn method. this.hasFocused = false;iterators object Stores iterators for each axis. See spinTo method. this.iterators = {};timers object Stores timers (requestAnimationFrame). this.timers = {};
530 | };
531 |
532 | Cube.instance.prototype = {xyz and XYZ array ‘x’, ‘y’, ‘z’ prefixes. xyz: ['x', 'y', 'z'],
550 | XYZ: ['X', 'Y', 'Z'],sides object Predefined cube’s sides coordinates. sides: {
568 | 'side-1': [0, 90, 0],
569 | 'side-2': [90, 0, 0],
570 | 'side-3': [0, 0, 0],
571 | 'side-4': [270, 0, 0],
572 | 'side-5': [0, 270, 0],
573 | 'side-6': [0, 180, 0]
574 | },Set rotation of the cube.
600 |parameters: props object Rotation of each axis in the following format:
{
603 | x: [number from 0 to 360],
604 | y: [number from 0 to 360],
605 | z: [number from 0 to 360]
606 | }
607 | or predefined side string:
608 |{ side: 'side-3' }
609 | Usage examples:
612 |var myCube = Cube('.my .selector');
613 |
614 | // Set the cube's position
615 | myCube.applyRotation({
616 | x: 45,
617 | y: 30,
618 | z: 270
619 | });
620 | var myCube = Cube('.my .selector');
621 |
622 | // Set the cube's position
623 | myCube.applyRotation({ side: 'side-4' });
624 | applyRotation: function (props) {
628 | var prefix = this._getPrefix(),
629 | styles = 'perspective(' + this.props.perspective + 'px)',
630 | currentDeg,
631 | axes = 0;
632 |
633 | props = props || {};
634 |
635 | if (props.x && props.y && props.z) {
636 | while (axes < 3) {
637 | currentDeg = props[this.xyz[axes]];
638 | currentDeg = isNaN(currentDeg) ? 0 : currentDeg;
639 |
640 | this['pos' + this.XYZ[axes]] = currentDeg;
641 |
642 | axes += 1;
643 | }
644 | } else if (props.side) {
645 | if (!this.sides[props.side]) { throw 'You\'ve probably entered wrong string as a "side" in "applyRotation". Try "side-1", "side-2", "side-3", "side-4", "side-5", or "side-6"'; }
646 |
647 | while (axes < 3) {
648 | currentDeg = this.sides[props.side][axes];
649 |
650 | this['pos' + this.XYZ[axes]] = currentDeg;
651 |
652 | axes += 1;
653 | }
654 | }
655 |
656 | axes = 0;
657 | while (axes < 3) {
658 | currentDeg = this['pos' + this.XYZ[axes]];
659 |
660 | styles += ' rotate' + this.XYZ[axes] + '(' + currentDeg + 'deg)';
661 |
662 | axes += 1;
663 | }
664 |
665 | this.$cube.style[prefix ? prefix + 'Transform' : 'transform'] = styles;
666 | },Start infinite rotation animation.
679 |parameters: props object Rotate options:
startSide string Specify from which side should the cube start to animate.
683 | Possible options:
speed[axis] number Time in milliseconds in which the cube rotate around one axis (from 0 to 360 degrees).
rotateDir string Can be ‘left’ or ‘right’.Usage example:
695 |var myCube = Cube('.my .selector');
696 |
697 | // Cube will start rotating
698 | myCube.rotate({
699 | startSide: 'side-1',
700 | speedX: 5000, // 5 seconds
701 | speedY: 20000, // 20 seconds
702 | speedZ: 10000 // 10 seconds
703 | rotateDir: 'left'
704 | });
705 | rotate: function (props) {
709 | var i = 0,
710 | dir = 0,
711 | XYZ = this.XYZ,
712 | self = this,
713 | currentSpeed;
714 |
715 | props = props || {};
716 |
717 | self.rotateDir = props.rotateDir || self.rotateDir;
718 |
719 | self.isRotating = true;
720 |
721 | if (props.startSide && self.sides[props.startSide] === undefined) { throw 'You\'ve typed wrong value for "startSide" option.'; }
722 |
723 | self.isFocusing = false;
724 |
725 | if (!self.rotatePropsSet) {
726 | while (i < 3) {
727 | if (props.startSide) {
728 | props['start' + XYZ[i]] = self.sides[props.startSide][i];
729 | }
730 |
731 | self['pos' + XYZ[i]] = props['start' + XYZ[i]] || 0;
732 |
733 | currentSpeed = props['speed' + XYZ[i]];
734 | currentSpeed = currentSpeed === 0 ? 0 : (currentSpeed || 360);
735 | self['speed' + XYZ[i]] = currentSpeed;
736 | i += 1;
737 | }
738 |
739 | self.rotateDir = props.rotateDir || self.rotateDir;
740 |
741 | self.rotatePropsSet = true;
742 | }
743 |
744 | if (self.rotateDir === 'left') { dir = -360; }
745 | if (self.rotateDir === 'right') { dir = 360; }
746 |
747 | self._spinTo({
748 | spinToX: props.startX ? props.startX + dir : dir,
749 | spinToY: props.startY ? props.startY + dir : dir,
750 | spinToZ: props.startZ ? props.startZ + dir : dir,
751 | speedX: self.speedX,
752 | speedY: self.speedY,
753 | speedZ: self.speedZ,
754 | timer: 'rotate',
755 | repeat: true,
756 | easing: 'linear'
757 | });
758 | },Animate to the specified side of the cube on ‘mouseover’ or ‘touchstart’ event.
771 |props object focusOn options:bounceBack boolean If set to true the cube will animate back to its last position (before focusOn animation), else it will stay at the focused position.spinTo string Specify to which side should the cube animate to. Note that this option will overwrite spintTo[axis].spinTo[axis] number Specify to what degree each axis should animate to.Usage example:
780 |var myCube = Cube('.my .selector');
781 |
782 | // Cube will rotate to selected face
783 | // either on 'touchstart' or 'mouseover' event.
784 | myCube.focusOn({
785 | bounceBack: true,
786 | spinTo: 'side-6'
787 | });
788 | focusOn: function (props) {
792 | var self = this,
793 | isTouch = window.ontouchstart === null,
794 | startEvent = isTouch ? 'touchstart' : 'mouseover';
795 |
796 | props = props || {};
797 |
798 | function focus() {
799 | if (props.bounceBack) {
800 | cancelAnimationFrame(self.timers.deFocus);
801 | }
802 |
803 | if (!self.isFocusing) {
804 | self.snapshotX = self.posX;
805 | self.snapshotY = self.posY;
806 | self.snapshotZ = self.posZ;
807 | }
808 |
809 | if (props.spinTo && self.sides[props.spinTo] === undefined) { throw 'You\'ve typed wrong value for "spinTo" option.'; }
810 |
811 | if (props.spinTo && self.sides[props.spinTo] !== undefined) {
812 | props.spinToX = self.sides[props.spinTo][0];
813 | props.spinToY = self.sides[props.spinTo][1];
814 | props.spinToZ = self.sides[props.spinTo][2];
815 | }
816 |
817 | self._spinTo({
818 | spinToX: props.spinToX || 0,
819 | spinToY: props.spinToY || 0,
820 | spinToZ: props.spinToZ || 0,
821 | speed: props.speed || 2000,
822 | timer: 'spinTo',
823 | easing: 'out',
824 | callback: function () {
825 | self.$cube.className += ' focused';
826 | self.hasFocused = true;
827 | }
828 | });
829 | }
830 |
831 | function deFocus() {
832 | cancelAnimationFrame(self.timers.spinTo);
833 | cancelAnimationFrame(self.timers.rotate);
834 |
835 | self._removeClass(self.$cube, 'focused');
836 | self.hasFocused = false;
837 |
838 | if (props.bounceBack) {
839 | self._spinTo({
840 | spinToX: self.snapshotX,
841 | spinToY: self.snapshotY,
842 | spinToZ: self.snapshotZ,
843 | speed: props.speed || 2000,
844 | timer: 'deFocus',
845 | easing: 'out',
846 | callback: function () {
847 | if (self.isRotating) {
848 | self.rotate({
849 | startX: self.posX,
850 | startY: self.posY,
851 | startZ: self.posZ
852 | });
853 | }
854 | }
855 | });
856 | } else if (self.isRotating) {
857 | self.rotate({
858 | startX: self.posX,
859 | startY: self.posY,
860 | startZ: self.posZ
861 | });
862 | }
863 | }
864 |
865 | self.$cube.addEventListener(startEvent, function (e) {
866 | if (self.hasFocused) { return; }
867 | e.preventDefault();
868 | cancelAnimationFrame(self.timers.rotate);
869 | focus();
870 | });
871 |
872 | self.$cube.addEventListener('mouseout', deFocus);
873 |
874 | if (isTouch) {
875 | document.addEventListener('touchstart', function (e) {
876 | var $target = e.target;
877 | if (!self._hasParent($target, self.$cube)) { deFocus(); }
878 | });
879 | }
880 | },Animate to the specified position.
906 |props object spinTo options:spinTo[axis] number Specify to what degree each axis should animate to.speed number Time (in milliseconds) that specifies how long it will take to spin to given position. Overwrites speed[axis].speed[axis] number Time (in milliseconds) that specifies how long it will take to spin to given position for each axis.timer string Timer’s ID. It can be reset if needed thus stopping spinTo loop. Timers are attached to public variable called timers (see in constructor).easing string Name of easing function (available functions: ‘ease’, ‘out’, ‘inOut’)callback function Function which executes after spinTo is done. _spinTo: function (props) {
921 | var i = 0,
922 | self = this,
923 | start = {},
924 | speeds = [],
925 | changeInValue = {},
926 | changeInValueA = {},
927 | changeInValueB = {},
928 | dir = {},
929 | done = {},
930 | xyz = self.xyz,
931 | XYZ = self.XYZ,
932 | currentMax,
933 | currentDeg,
934 | currentSpeed,
935 | currentIterator;
936 |
937 | props.speed = self._calculateIterations(props.speed);
938 |
939 | self.isFocusing = props.repeat ? false : true;
940 |
941 | while (i < 3) {
942 | start[xyz[i]] = self['pos' + XYZ[i]];
943 |
944 | if (props['speed' + XYZ[i]]) {
945 | props['speed' + XYZ[i]] = self._calculateIterations(props['speed' + XYZ[i]]);
946 | }
947 |
948 | if (props.repeat) {
949 | changeInValue[xyz[i]] = Math.abs(start[xyz[i]] - props['spinTo' + XYZ[i]]);
950 | } else {
951 | changeInValueA[xyz[i]] = Math.abs(start[xyz[i]] - props['spinTo' + XYZ[i]]);
952 | if (start[xyz[i]] > props['spinTo' + XYZ[i]]) {
953 | changeInValueB[xyz[i]] = Math.abs(start[xyz[i]] - props['spinTo' + XYZ[i]] - 360);
954 | } else {
955 | changeInValueB[xyz[i]] = Math.abs(start[xyz[i]] - props['spinTo' + XYZ[i]] + 360);
956 | }
957 |
958 | if (changeInValueA[xyz[i]] < changeInValueB[xyz[i]]) {
959 | changeInValue[xyz[i]] = changeInValueA[xyz[i]];
960 | } else {
961 | if (start[xyz[i]] > props['spinTo' + XYZ[i]]) {
962 | props['spinTo' + XYZ[i]] += 360;
963 | } else {
964 | props['spinTo' + XYZ[i]] -= 360;
965 | }
966 |
967 | changeInValue[xyz[i]] = changeInValueB[xyz[i]];
968 | }
969 | }
970 |
971 | dir[xyz[i]] = start[xyz[i]] < props['spinTo' + XYZ[i]] ? 'right' : 'left';
972 | speeds.push(props.speed ? Math.floor(Math.abs(start[xyz[i]] - props['spinTo' + XYZ[i]]) * props.speed / 360) : props['speed' + XYZ[i]]);
973 |
974 | i += 1;
975 | }
976 |
977 | speeds.sort(function (a, b) { return b - a; });
978 | this.iterators.spinTo = { x: 0, y: 0, z: 0 };
979 | props.easing = props.easing || 'linear';
980 |
981 | function run() {
982 | i = 0;
983 |
984 | while (i < 3) {
985 | currentMax = changeInValue[xyz[i]];
986 | currentSpeed = props.speed ? speeds[0] : props['speed' + XYZ[i]];
987 |
988 | if (currentMax !== 0 && currentSpeed !== 0) {
989 | currentDeg = self['pos' + XYZ[i]];
990 | currentIterator = self.iterators.spinTo[xyz[i]];
991 |
992 | currentDeg = currentSpeed === 0 ? 0 : self._ease[props.easing](currentIterator, 0, currentMax, currentSpeed);
993 |
994 | if (dir[xyz[i]] === 'right') {
995 | currentDeg += start[xyz[i]];
996 | currentMax += start[xyz[i]];
997 |
998 | if (currentDeg < currentMax) {
999 | currentIterator += 1;
1000 | } else {
1001 | currentDeg = currentMax;
1002 | done[xyz[i]] = true;
1003 | }
1004 | } else {
1005 | currentDeg = start[xyz[i]] - currentDeg;
1006 | currentMax = start[xyz[i]] - currentMax;
1007 |
1008 | if (currentDeg > currentMax) {
1009 | currentIterator += 1;
1010 | } else {
1011 | currentDeg = currentMax;
1012 | done[xyz[i]] = true;
1013 | }
1014 | }
1015 |
1016 | self['pos' + XYZ[i]] = currentDeg;
1017 | self.iterators.spinTo[xyz[i]] = currentIterator;
1018 | } else {
1019 | done[xyz[i]] = true;
1020 | }
1021 |
1022 | i += 1;
1023 | }
1024 |
1025 | self.applyRotation();
1026 |
1027 | i = 0;
1028 |
1029 | while (i < 3) {
1030 | if (done[xyz[i]] && props.repeat) {
1031 | self['pos' + XYZ[i]] = start[xyz[i]];
1032 | self.iterators.spinTo[xyz[i]] = 0;
1033 | done[xyz[i]] = false;
1034 | }
1035 |
1036 | i += 1;
1037 | }
1038 |
1039 | if (done.x && done.y && done.z && !props.repeat) {
1040 | self.isFocusing = false;
1041 | if (props.callback) { props.callback(); }
1042 | return;
1043 | }
1044 |
1045 | self.timers[props.timer] = requestAnimationFrame(run);
1046 | }
1047 |
1048 | run();
1049 | }, _ease: {parameters (apply for all easing functions below):currentIteration number Current iteration.startValue number Start value. For example: ‘10’.changeInValue number Change in value. For example ‘40’ means that if value started at 10, it would go up to 50.totalIterations number Tells how many iterations should pass until the animation is done. linear: function (currentIteration, startValue, changeInValue, totalIterations) {
1089 | return changeInValue * currentIteration / totalIterations + startValue;
1090 | }, out: function (currentIteration, startValue, changeInValue, totalIterations) { // outCirc
1106 | currentIteration = currentIteration / totalIterations - 1;
1107 | return changeInValue * Math.sqrt(1 - Math.pow(currentIteration, 2)) + startValue;
1108 | }, inOut: function (currentIteration, startValue, changeInValue, totalIterations) { // inOutCirc
1124 | return changeInValue / 2 * (1 - Math.cos(Math.PI * currentIteration / totalIterations)) + startValue;
1125 | }
1126 | },Calculates approximate number of iterations.
1139 | Converts milliseconds into number of animation frames for the cube.
1140 | It’s assumed here that requestAnimationFrame will produce 60 frames per second.
milliseconds number Time in milliseconds. _calculateIterations: function (milliseconds) {
1149 | return milliseconds * 60 / 1000;
1150 | },Check if a browser prefix is necessary and, if it is, choose the right one.
1163 | Test is based on transform property which necessary for the script to work.
_getPrefix: function () {
1171 | var style = document.documentElement.style,
1172 | prefix;
1173 | if (style.webkitTransform !== undefined) { prefix = 'webkit'; }
1174 | if (style.mozTransform !== undefined) { prefix = 'moz'; }
1175 | if (style.msTransform !== undefined) { prefix = 'ms'; }
1176 | return prefix;
1177 | },Check if one element ($parentEl) is parent of the second one ($el)
$el object DOM element (assumed children).$parentEl object DOM element (assumed parent).$parentEl is $el parent. _hasParent: function ($el, $parentEl) {
1202 | var $parentNode = $el.parentNode;
1203 |
1204 | while ($parentNode !== $parentEl && $parentNode !== document) {
1205 | $parentNode = $parentNode.parentNode;
1206 | }
1207 |
1208 | return $parentNode === $parentEl ? true : false;
1209 | },Remove CSS class from an element.
1222 |$el object DOM elementclassName string class’ name, example: ‘my-class’ _removeClass: function ($el, className) {
1233 | var regex = new RegExp('\\b' + className + '\\b', 'g');
1234 | $el.className = $el.className.replace(regex, '');
1235 | }
1236 | };
1237 | }());cube.js is a light script which allows you to add a fancy rotating CSS3 cube to your page!
32 |Below you can see an exemplary image used on this page. Feel free to use it as an template for your own cube. You can find a PSD template here.
256 | 257 |
258 | Note:
259 | The cube texture doesn't have to have the exact size as the image presented here. You can decrease/increase its resolution as long as the image ratio is correct.
260 |
263 |