diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..396bad5 --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "sample/vendor" +} diff --git a/.codeclimate.yml b/.codeclimate.yml new file mode 100644 index 0000000..53ab0ac --- /dev/null +++ b/.codeclimate.yml @@ -0,0 +1,5 @@ +languages: + JavaScript: true +exclude_paths: +- "sample/material-avatar.js" +- "material-avatar.min.js" diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 39b1b33..0000000 --- a/.jshintrc +++ /dev/null @@ -1,27 +0,0 @@ -{ - "node": true, - "esnext": true, - "bitwise": true, - "eqeqeq": true, - "eqnull": true, - "immed": true, - "indent": 2, - "latedef": "nofunc", - "newcap": true, - "nonew": true, - "noarg": true, - "regexp": true, - "undef": true, - "unused": false, - "trailing": true, - "sub": true, - "maxlen": 100, - "globals" : { - /* HTML5 */ - "localStorage": false, - "window": false, - "document": false, - /* jQuery+Angular */ - "$": false - } -} diff --git a/Gruntfile.coffee b/Gruntfile.coffee deleted file mode 100644 index 4002831..0000000 --- a/Gruntfile.coffee +++ /dev/null @@ -1,72 +0,0 @@ -module.exports = (grunt)-> - - ############################################################ - # Project configuration - ############################################################ - - grunt.initConfig - - coffee: - build: - options: - bare: false - sourceMap: true - files: - 'dist/jquery.logosDistort.js': 'src/jquery.logosDistort.coffee' - - compass: - build: - options: - sourcemap: true - sassDir: 'demo/assets/_scss' - cssDir: 'demo/assets/css' - environment: 'development' - outputStyle: 'expanded' - - uglify: - build: - options: - mangle: true - sourceMap: true - compress: - drop_console: true - files: - 'dist/jquery.logosDistort.min.js': 'src/jquery.logosDistort.js' - - cssmin: - build: - options: - sourceMap: true - advanced: false - compatibility: true - processImport: false - shorthandCompacting: false - files: [ - expand: true - cwd: 'demo/assets/css' - src: ['*.css', '!*.min.css', '!style.css'] - dest: 'dist/css' - ext: '.min.css' - ] - - ############################################################## - # Dependencies - ############################################################### - - grunt.loadNpmTasks('grunt-contrib-coffee') - grunt.loadNpmTasks('grunt-contrib-compass') - grunt.loadNpmTasks('grunt-contrib-cssmin') - grunt.loadNpmTasks('grunt-contrib-uglify') - - ############################################################ - # Alias tasks - ############################################################ - - grunt.registerTask('build', [ - #'coffee:build' # tmp - 'compass:build' # tmp - 'uglify:build' # public - 'cssmin:build' # public - ]) - - diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index afa82b3..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,71 +0,0 @@ -// Generated by CoffeeScript 1.9.1 -(function() { - module.exports = function(grunt) { - grunt.initConfig({ - coffee: { - build: { - options: { - bare: false, - sourceMap: true - }, - files: { - 'dist/jquery.logosDistort.js': 'src/jquery.logosDistort.coffee' - } - } - }, - compass: { - build: { - options: { - sourcemap: true, - sassDir: 'demo/assets/_scss', - cssDir: 'demo/assets/css', - environment: 'development', - outputStyle: 'expanded' - } - } - }, - uglify: { - build: { - options: { - mangle: true, - sourceMap: true, - compress: { - drop_console: true - } - }, - files: { - 'dist/jquery.logosDistort.min.js': 'src/jquery.logosDistort.js' - } - } - }, - cssmin: { - build: { - options: { - sourceMap: true, - advanced: false, - compatibility: true, - processImport: false, - shorthandCompacting: false - }, - files: [ - { - expand: true, - cwd: 'demo/assets/css', - src: ['*.css', '!*.min.css', '!style.css'], - dest: 'dist/css', - ext: '.min.css' - } - ] - } - } - }); - grunt.loadNpmTasks('grunt-contrib-coffee'); - grunt.loadNpmTasks('grunt-contrib-compass'); - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - return grunt.registerTask('build', ['compass:build', 'uglify:build', 'cssmin:build']); - }; - -}).call(this); - -//# sourceMappingURL=Gruntfile.js.map diff --git a/Gruntfile.js.map b/Gruntfile.js.map deleted file mode 100644 index e2f4efd..0000000 --- a/Gruntfile.js.map +++ /dev/null @@ -1,10 +0,0 @@ -{ - "version": 3, - "file": "Gruntfile.js", - "sourceRoot": "", - "sources": [ - "Gruntfile.coffee" - ], - "names": [], - "mappings": ";AAAA;AAAA,EAAA,MAAM,CAAC,OAAP,GAAiB,SAAC,KAAD,GAAA;AAMf,IAAA,KAAK,CAAC,UAAN,CAEE;AAAA,MAAA,MAAA,EACE;AAAA,QAAA,KAAA,EACE;AAAA,UAAA,OAAA,EACE;AAAA,YAAA,IAAA,EAAM,KAAN;AAAA,YACA,SAAA,EAAW,IADX;WADF;AAAA,UAGA,KAAA,EACE;AAAA,YAAA,6BAAA,EAA+B,gCAA/B;WAJF;SADF;OADF;AAAA,MAQA,OAAA,EACE;AAAA,QAAA,KAAA,EACE;AAAA,UAAA,OAAA,EACE;AAAA,YAAA,SAAA,EAAW,IAAX;AAAA,YACA,OAAA,EAAS,mBADT;AAAA,YAEA,MAAA,EAAQ,iBAFR;AAAA,YAGA,WAAA,EAAa,aAHb;AAAA,YAIA,WAAA,EAAa,UAJb;WADF;SADF;OATF;AAAA,MAiBA,MAAA,EACE;AAAA,QAAA,KAAA,EACE;AAAA,UAAA,OAAA,EACE;AAAA,YAAA,MAAA,EAAQ,IAAR;AAAA,YACA,SAAA,EAAW,IADX;AAAA,YAEA,QAAA,EACE;AAAA,cAAA,YAAA,EAAc,IAAd;aAHF;WADF;AAAA,UAKA,KAAA,EACE;AAAA,YAAA,iCAAA,EAAmC,4BAAnC;WANF;SADF;OAlBF;AAAA,MA2BA,MAAA,EACE;AAAA,QAAA,KAAA,EACE;AAAA,UAAA,OAAA,EACE;AAAA,YAAA,SAAA,EAAW,IAAX;AAAA,YACA,QAAA,EAAU,KADV;AAAA,YAEA,aAAA,EAAe,IAFf;AAAA,YAGA,aAAA,EAAe,KAHf;AAAA,YAIA,mBAAA,EAAqB,KAJrB;WADF;AAAA,UAMA,KAAA,EAAO;YACL;AAAA,cAAA,MAAA,EAAQ,IAAR;AAAA,cACA,GAAA,EAAK,iBADL;AAAA,cAEA,GAAA,EAAK,CAAC,OAAD,EAAU,YAAV,EAAwB,YAAxB,CAFL;AAAA,cAGA,IAAA,EAAM,UAHN;AAAA,cAIA,GAAA,EAAK,UAJL;aADK;WANP;SADF;OA5BF;KAFF,CAAA,CAAA;AAAA,IAiDA,KAAK,CAAC,YAAN,CAAmB,sBAAnB,CAjDA,CAAA;AAAA,IAkDA,KAAK,CAAC,YAAN,CAAmB,uBAAnB,CAlDA,CAAA;AAAA,IAmDA,KAAK,CAAC,YAAN,CAAmB,sBAAnB,CAnDA,CAAA;AAAA,IAoDA,KAAK,CAAC,YAAN,CAAmB,sBAAnB,CApDA,CAAA;WA0DA,KAAK,CAAC,YAAN,CAAmB,OAAnB,EAA4B,CAE1B,eAF0B,EAG1B,cAH0B,EAI1B,cAJ0B,CAA5B,EAhEe;EAAA,CAAjB,CAAA;AAAA" -} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..5244b45 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Mathew Kleppin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 6bb75b2..c8af4b3 100644 --- a/README.md +++ b/README.md @@ -3,17 +3,24 @@ ### Create a unique parallax environment to show off your work. #### Inspired by http://hellomonday.com/ -![Demo 1](demo/demo1.gif) +demo 1 I've always been a big fan of using subtitle 3d effects to give depth to UI and images. Ever since laying my eyes on the [26000 Vodka] (http://26000.resn.co.nz/flash.html) website many years ago, I've wanted to create something that can emulate that same kind of depth, without using cumbersome flash to do it. (Also, I didn't know flash, so there's that) This plugin allows you to (currently) do full-page 3d perspective transforms base on mouse position. There are a lot of options you can tweak to your liking, and I'm looking to develop the application of this effect further. -Check out the demo's to see whats possible +[Check out the demo's to see whats possible](http://hellsan631.github.io/LogosDistort/) -[^Demo 1] (http://mathew-kleppin.com/dev/logosdistort/demo/demo1.html) - [Demo 2] (http://mathew-kleppin.com/dev/logosdistort/demo/demo2.html) - [^Demo 3] (http://mathew-kleppin.com/dev/logosdistort/demo/demo3.html) +### New In v0.3 -^Demo's Work Optimally in Chrome +1. JQuery no longer a requirement. +2. Multiple element on screen now supported. [see demo5.html](http://hellsan631.github.io/LogosDistort/demo5.html) +3. Added new mouse movement listeners. [see demo5.html](http://hellsan631.github.io/LogosDistort/demo5.html) +4. _New Option:_ __perspectiveMulti__ +5. _New Option:_ __depthOverride__ +6. Fixed a few bugs, performance should be more consistant now. + +__Note: When 1.0 hits, the file name will drop the jQuery prefix__ ## Usage @@ -23,7 +30,7 @@ bower install logos-distort ``` Or by downloading the repo and using the files there -1. Include jQuery: +1. Include jQuery (optional): ```html @@ -51,12 +58,18 @@ Or by downloading the repo and using the files there 4. Call the plugin: ```javascript - $("#demo1").logosDistort(); + $("#demo1").logosDistort(options); + + //or non jquery way + + var distortion = new logosDistort(document.getElementById('demo1'), options); ``` > You can customize a number of options and send them in when starting the plugin. See "Options" for more info. -![Demo 3](demo/demo3.gif) +demo 3 + +demo 5 ## Options @@ -78,51 +91,70 @@ Or by downloading the repo and using the files there A multipler for the time it takes for the parallax effect to center on the mouse cursor. Higher means more time, lower means the animation is faster. -5. __outerBuffer:__ 1.10 _(number)_
+5. __mouseMode:__ "container" _(string)_
+ Changes how mouse movement triggers the parallax effect. This has 3 settings, _"container"_, + _"window"_, and _"magnetic"_. The default (container) binds it so that the parallaxing only + changes when the mouse is inside of the container, like wise window means that the mouse updates + will be bound to the window. __Magnetic__, however, allows tracking of the mouse on X and Y planes. + The effect will update when the mouse is on the same x or y plane as the base element. + +6. __outerBuffer:__ 1.10 _(number)_
A size multiplier for the backgrounds, so that the 3d parallax effect doesn't clip to show a static background. If you see move your mouse to the corner of the window, and you see a white background clip on the opposite corner, this value should be higher. That, or your elementDepth is set too high. -6. __elementDepth:__ 140 _(number)_
+7. __elementDepth:__ 140 _(number)_
The difference of depth between each element in px. A higher depth means a better parallax effect, but also means a higher chance that the further elements will clip. More elements means more overall scene depth, meaning that if you have more then 4-5 elements in a scene, consider leaving this setting at its default value, or making it lower. -7. __directions:__ [ 1, 1, 1, 1, -1, -1, 1, 1 ] _(array of numbers)_
+8. __depthOverride:__ false _(boolean)_
+ If there are a lot of elements in the scene, logosDistort will halve the depth for each element, + to maintain good performance (default setting of false). However, you can turn this off manually if + you don't have any performance concerns by setting this to ```true```; + +9. __perspectiveMulti:__ 1.0 _(number)_
+ Changes the perspective of the 3d parent container. This changes the focal point where the scene + will rotate around. A higher multiplier means a smaller rotation, but things will seem far away. + A lower multiplier (below 1.0) means the scene will be closer and will rotate more, which might + expose the background. + +10. __directions:__ [ 1, 1, 1, 1, -1, -1, 1, 1 ] _(array of numbers)_
Weights for the directions of the parallax effect based on mouse movement. Default is set so that the "center" of the effect moves opposite to the mouse in all directions. Changes in this can break - the effect. See the Demo3 for an example on how to set these directions. + the effect. See the Demo3 for an example on how to set these directions -8: __weights:__ [ 0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200 ] _(array of numbers)_
+11. __weights:__ [ 0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200 ] _(array of numbers)_
Effect weights for how much the effect will move in a given direction based on mouse movement. Here is each number and what they do (about). - - - [ - "distance from center", - "y plane neg to left, pos to right -> rotational", - "distance from center axis point X and Y", - "1 minus distance from center axis point", - "relative distance from center x plane, top neg, bot pos" - ] - - -9: __container:__ window _(variable)_
- The container for which the effect will be bound. Changing this option may cause unintended - side-effects, as I havn't debugged this functionality. But your welcome to try it and submit a PR :) - -10: __cssClasses:__ _(object)_
+ ```js + [ + "distance from center", + "y plane neg to left, pos to right -> rotational", + "distance from center axis point X and Y", + "1 minus distance from center axis point", + "relative distance from center x plane, top neg, bot pos" + ] + ``` + +12. __container:__ window _(variable)_
+ The container for which the effect will be bound. This can either be an element, or set to ```'self'```, + where the base element will be used as the container. See ```demo5.html``` for an example. + +13. __cssClasses:__ _(object)_
Overrides for the class names incase you want to use a similar class name for a specific element. - - - { - smartContainer: "ld-smart-container", - overlapContainer: "ld-overlap-container", - parent3d: "ld-3d-parent", - transformTarget: "ld-transform-target", - active: "ld-transform-active", - object3d: "ld-3d-object" - } - + + ```js + { + smartContainer: "ld-smart-container", + overlapContainer: "ld-overlap-container", + parent3d: "ld-3d-parent", + transformTarget: "ld-transform-target", + active: "ld-transform-active", + object3d: "ld-3d-object" + } + ``` + +### Yay diff --git a/bower.json b/bower.json index 2d0fd6c..a88ea05 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,11 @@ { "name": "LogosDistort", - "version": "0.2.1", + "version": "0.3.0", "homepage": "https://github.com/hellsan631/LogosDistort", "authors": [ "Mathew Kleppin " ], - "description": "A simple jQuery plugin that uses matrix3d to perform perspective distortions.", + "description": "A simple Javascript plugin that uses matrix3d to perform perspective distortions.", "main": "src/jquery.logosDistort.js", "ignore": [ ".jshintrc", @@ -15,9 +15,7 @@ "node_modules", "bower_components" ], - "dependencies": { - "jQuery": "~2.1.3" - }, + "dependencies": {}, "keywords": [ "jquery", "matrix3d", diff --git a/demo/assets/_scss/_default.scss b/demo/assets/_scss/_default.scss deleted file mode 100644 index ac7bb68..0000000 --- a/demo/assets/_scss/_default.scss +++ /dev/null @@ -1,123 +0,0 @@ -/* default.scss */ -HTML{ - margin:0; - padding:0; -} - -BODY { - font-family: 'Open Sans', sans-serif; - font-weight:400; - font-size: 100%; - line-height: 1.2em; - color: #313131; - margin:0; - padding:0; - - @include respondTo(retina) { font-size: 125%; } - @include respondTo(desktop) { font-size: 105%; } - @include respondTo(smallScreen) { font-size: 95%; } - @include respondTo(laptop) { font-size: 85%; } - @include respondTo(tablet) { font-size: 75%; } - @include respondTo(smartphone) { font-size: 65%; } -} - -DIV { - margin:0; - padding:0; -} - -A { - color: inherit; -} - -* { - -webkit-font-smoothing: antialiased; - -webkit-backface-visibility: hidden; - box-sizing: border-box; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - margin: 0; - padding: 0; - -webkit-user-drag: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-overflow-scrolling: touch; - /* -webkit-transform: translateZ(0); */ - -webkit-touch-callout: none; -} - -h1,h2,h3,h4,h5,h6{ - font-family: 'Open Sans', sans-serif; - //text-transform:uppercase; - font-weight:300; - padding:0; - margin:0; - display: block; - line-height:1em; - @include text-shadow(#000 0px 2px 10px); -} - -@include header(body h1, 3.2em, #fff, 1px); -@include header(body h2, 2.8em, #fff, 1px); -@include header(body h3, 2.4em, #fff, 0px); -@include header(body h4, 2.0em, #fff, 0px); -@include header(body h5, 1.6em, #fff, 0px); -@include header(body h6, 1.2em, #fff, 0px); - -p { - max-width:80em; -} - -.float-right{ - float:right; -} - -.float-left{ - float:left; -} - -.aligncenter{ - text-align: center; -} - -.alignright{ - text-align: right; -} - -.alignleft{ - text-align: left; -} - -input[type="text"], input[type="password"]{ - padding:10px 15px; - font-family: 'Roboto', sans-serif; - font-size: 15px; - line-height: 15px; - font-weight:400; - border: 1px solid #ACACAC; - border-radius: 3px; -} - -label{ - font-family: 'Roboto', sans-serif; - font-size: 15px; - line-height: 26px; - font-weight:400; - vertical-align: top; -} - -select{ - padding:8px 15px; - border: 2px solid #222; - border-radius: 3px; -} - -select, option{ - font-family: 'Roboto', sans-serif; - font-size: 15px; - line-height: 15px; - font-weight:400; -} - -option{ - padding:5px 10px; -} \ No newline at end of file diff --git a/demo/assets/_scss/_fonts.scss b/demo/assets/_scss/_fonts.scss deleted file mode 100644 index 8c98a1c..0000000 --- a/demo/assets/_scss/_fonts.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* _fonts.scss */ -@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700); \ No newline at end of file diff --git a/demo/assets/_scss/_functions.scss b/demo/assets/_scss/_functions.scss deleted file mode 100644 index 53532cd..0000000 --- a/demo/assets/_scss/_functions.scss +++ /dev/null @@ -1,226 +0,0 @@ -/* _functions.scss */ -@import "compass"; -@import "compass/support"; - -@mixin header($element, $size, $color, $letter-spacing, $margin-before-after: 0.5em){ - #{$element} { - -webkit-margin-before: #{$margin-before-after}; - -webkit-margin-after: #{$margin-before-after}; - -webkit-margin-start: 0px; - -webkit-margin-end: 0px; - font-size: #{$size}; - color: #{$color}; - letter-spacing: #{$letter-spacing}; - } -} - -@mixin materialBounce($element: all, $duration: 600ms){ - @include transition($element $duration cubic-bezier(0.620, -0.005, 0.260, 0.995)); -} - -@mixin linear-gradient($from, $to, $direction: top){ - @include filter-gradient($from, $to, vertical); // IE6-9 - @include linear-gradient($direction, $from 0%, $to 100%); -} - -@mixin calc($property, $expression) { - #{$property}: -webkit-calc(#{$expression}); - #{$property}: -moz-calc(#{$expression}); - #{$property}: -o-calc(#{$expression}); - #{$property}: calc(#{$expression}); - #{$property}: expression(#{$expression}); -} - -// keyframes mixin -@mixin keyframes($name) { - @-webkit-keyframes #{$name} { - @content; - } - @-moz-keyframes #{$name} { - @content; - } - @-ms-keyframes #{$name} { - @content; - } - @keyframes #{$name} { - @content; - } -} - -/* -## Triangle -* @include triangle within a pseudo element and add positioning properties (ie. top, left) -* $direction: up, down, left, right -*/ -@mixin triangle($direction, $size: 8px, $color: #222){ - content: ''; - display: block; - position: absolute; - height: 0; width: 0; - @if ($direction == 'up'){ - border-bottom: $size solid $color; - border-left: $size solid transparent; - border-right: $size solid transparent; - } - @else if ($direction == 'down'){ - border-top: $size solid $color; - border-left: $size solid transparent; - border-right: $size solid transparent; - } - @else if ($direction == 'left'){ - border-top: $size solid transparent; - border-bottom: $size solid transparent; - border-right: $size solid $color; - } - @else if ($direction == 'right'){ - border-top: $size solid transparent; - border-bottom: $size solid transparent; - border-left: $size solid $color; - } -} - - -/* -* Currency -*/ -%currency { - position: relative; - &:before { - content: '$'; - position: relative; - left: 0; - } -} - -.USD %currency:before { content: '$'; } -.EUR %currency:before { content: '\20AC'; } // must escape the html entities for each currency symbol -.ILS %currency:before { content: '\20AA'; } -.GBP %currency:before { content: '\00A3'; } - -/* -* Clearfix -*/ -%clearfix { - *zoom: 1; - &:after { - content: ''; - display: table; - line-height: 0; - clear: both; - } -} - -.clearfix{ - @extend %clearfix; -} - -/* -* Respond To -* Copied from UtilityBelt- https://github.com/dmtintner/UtilityBelt -* -* Example: -* @include respondTo(smartphone){ display: none; } -* -*/ - -$largeScreen: 1940px; -$desktop: 1680px; -$laptop: 1280px; -$tabletLandscape: 1024px; -$tabletPortrait: 767px; - -@mixin respondTo($media) { - @if $media == retina { - @media (min-width: $largeScreen) { @content; } - } - @else if $media == desktop { - @media (min-width: $desktop) and (max-width: $largeScreen) { @content; } - } - @else if $media == smallScreen { - @media (min-width: $laptop) and (max-width: $desktop) { @content; } - } - @else if $media == laptop { - @media (max-width: $laptop) { @content; } - } - @else if $media == tablet { - @media (min-width: $tabletPortrait) and (max-width: $tabletLandscape) { @content; } - } - @else if $media == smartphone { - @media (max-width: $tabletPortrait) { @content; } - } - -} - -/* -* Ghost Vertical Align -*/ -@mixin ghostVerticalAlign($pseudoEl: before){ - &:#{$pseudoEl} { - content: ''; - display: inline-block; - vertical-align: middle; - height: 100%; width: .1px; - } -} - -%vertical-align { - @include ghostVerticalAlign(); -} - -/* -* Truncate Text -*/ -@mixin truncateText($overflow: ellipsis){ - overflow: hidden; - white-space: nowrap; - text-overflow: $overflow; // values are: clip, ellipsis, or a string -} - -/* -* Animation -*/ -@mixin animation($name, $duration: 1000ms, $iterations: infinite, $timing-function: ease, $delay: 0ms) { - // There is a FF bug that requires all time values to have units, even 0 !!!!!! - -webkit-animation: $name $duration $iterations $timing-function $delay; - -moz-animation: $name $duration $iterations $timing-function $delay; - -o-animation: $name $duration $iterations $timing-function $delay; - animation: $name $duration $iterations $timing-function $delay; -} - - -/* -* Alerted -*/ -@include keyframes(alertMe) { - from { - border-width: 3px; - border-color: gold; - } - to { - border-width: 0; - border-color: rgba(gold, .1); - } -} - -@mixin alerted() { - &:before { - content: ''; - position: absolute; - top: 6px; right: 6px; - height: 8px; width: 8px; - border-radius: 10px; - background-color: gold; - } - &:after { - content: ''; - position: absolute; - top: 0; right: 0; - height: 20px; width: 20px; - border-radius: 20px; - background-color: transparent; - border: solid gold; - border-width: 2px; // animates - box-sizing: border-box; - @include animation($name: alertMe); - } -} diff --git a/demo/assets/_scss/normalize/_ie.scss b/demo/assets/_scss/normalize/_ie.scss deleted file mode 100644 index 5cd5b6c..0000000 --- a/demo/assets/_scss/normalize/_ie.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* Welcome to Compass. Use this file to write IE specific override styles. - * Import this file using the following HTML or equivalent: - * */ diff --git a/demo/assets/_scss/normalize/_print.scss b/demo/assets/_scss/normalize/_print.scss deleted file mode 100644 index b0e9e45..0000000 --- a/demo/assets/_scss/normalize/_print.scss +++ /dev/null @@ -1,3 +0,0 @@ -/* Welcome to Compass. Use this file to define print styles. - * Import this file using the following HTML or equivalent: - * */ diff --git a/demo/assets/_scss/normalize/_screen.scss b/demo/assets/_scss/normalize/_screen.scss deleted file mode 100644 index 81de847..0000000 --- a/demo/assets/_scss/normalize/_screen.scss +++ /dev/null @@ -1,6 +0,0 @@ -/* Welcome to Compass. - * In this file you should write your main styles. (or centralize your imports) - * Import this file using the following HTML or equivalent: - * */ - -@import "compass/reset"; diff --git a/demo/assets/_scss/perspectiveRules.scss b/demo/assets/_scss/perspectiveRules.scss deleted file mode 100644 index e61af26..0000000 --- a/demo/assets/_scss/perspectiveRules.scss +++ /dev/null @@ -1,39 +0,0 @@ -.ld-smart-container{ - position: absolute; - z-index: 2; - width: 100%; - height: 100%; - overflow:hidden; - - .ld-3d-parent{ - width: 100%; - height: 100%; - pointer-events: none; - transform-style: preserve-3d; - perspective: 9000px; - opacity: 1; - } - - .ld-transform-target{ - position: relative; - -webkit-transform-style: flat; - -webkit-backface-visibility: hidden; - -webkit-transform: translate3d(0px, 0px, 0px); - width: 100%; - height: 100%; - pointer-events: none; - transform-style: preserve-3d; - } - - .ld-3d-object{ - position: absolute; - pointer-events: none; - -webkit-transform-style: flat; - -webkit-backface-visibility: hidden; - -webkit-transform: translate3d(0px, 0px, 0px); - transform-style: preserve-3d; - -webkit-perspective: 1000; - backface-visibility: hidden; - perspective: 1000; - } -} \ No newline at end of file diff --git a/demo/assets/_scss/style.scss b/demo/assets/_scss/style.scss deleted file mode 100644 index 54b1dc1..0000000 --- a/demo/assets/_scss/style.scss +++ /dev/null @@ -1,55 +0,0 @@ -@import "functions"; -@import "default"; -@import "fonts"; - -body{ - max-width:100%; - overflow:hidden; -} - -#particle-target{ - position: absolute; - overflow:hidden; -} - -#demo-menu{ - position: absolute; - right:-400px; - top:2em; - width:auto; - padding:2em; - background:rgba(#fff,0.8); - height:auto; - display: inline-block; - z-index:20; -} - -#min-max-tag{ - position: absolute; - right:0; - top:2em; - width:auto; - padding:0.4em; - font-size: 200%; - line-height: 1em; - background:rgba(#fff,0.4); - color: rgba(#222,0.6); - height:auto; - display: inline-block; - z-index:20; - border-top-left-radius:0.5em; - border-top-right-radius:0em; - border-bottom-right-radius:0em; - border-bottom-left-radius:0.5em; - cursor:pointer; - - @include transition(all 200ms cubic-bezier(0.620, -0.005, 0.260, 0.995)); - - @include box-shadow(rgba(#000, 0.75) -0.2em 0em 2em); - - &:hover{ - background:rgba(#fff,0.8); - color: rgba(#222,0.8); - } -} - diff --git a/demo/assets/css/perspectiveRules.css b/demo/assets/css/perspectiveRules.css index 2000297..fab5755 100644 --- a/demo/assets/css/perspectiveRules.css +++ b/demo/assets/css/perspectiveRules.css @@ -1,4 +1,4 @@ -/* line 1, ../_scss/perspectiveRules.scss */ + .ld-smart-container { position: absolute; z-index: 2; @@ -6,7 +6,7 @@ height: 100%; overflow: hidden; } -/* line 8, ../_scss/perspectiveRules.scss */ + .ld-smart-container .ld-3d-parent { width: 100%; height: 100%; @@ -14,8 +14,9 @@ transform-style: preserve-3d; perspective: 9000px; opacity: 1; + position: relative; } -/* line 17, ../_scss/perspectiveRules.scss */ + .ld-smart-container .ld-transform-target { position: relative; -webkit-transform-style: flat; @@ -26,7 +27,7 @@ pointer-events: none; transform-style: preserve-3d; } -/* line 28, ../_scss/perspectiveRules.scss */ + .ld-smart-container .ld-3d-object { position: absolute; pointer-events: none; @@ -38,5 +39,3 @@ backface-visibility: hidden; perspective: 1000; } - -/*# sourceMappingURL=perspectiveRules.css.map */ diff --git a/demo/assets/css/perspectiveRules.css.map b/demo/assets/css/perspectiveRules.css.map deleted file mode 100644 index d6a0827..0000000 --- a/demo/assets/css/perspectiveRules.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": ";AAAA,mBAAmB;EACjB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAC,MAAM;;;AAEf,iCAAa;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,cAAc,EAAE,IAAI;EACpB,eAAe,EAAE,WAAW;EAC5B,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,CAAC;;;AAGZ,wCAAoB;EAClB,QAAQ,EAAE,QAAQ;EAClB,uBAAuB,EAAE,IAAI;EAC7B,2BAA2B,EAAE,MAAM;EACnC,iBAAiB,EAAE,0BAA0B;EAC7C,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,cAAc,EAAE,IAAI;EACpB,eAAe,EAAE,WAAW;;;AAG9B,iCAAa;EACX,QAAQ,EAAE,QAAQ;EAClB,cAAc,EAAE,IAAI;EACpB,uBAAuB,EAAE,IAAI;EAC7B,2BAA2B,EAAE,MAAM;EACnC,iBAAiB,EAAE,0BAA0B;EAC7C,eAAe,EAAE,WAAW;EAC5B,mBAAmB,EAAE,IAAI;EACzB,mBAAmB,EAAE,MAAM;EAC3B,WAAW,EAAE,IAAI", -"sources": ["../_scss/perspectiveRules.scss"], -"names": [], -"file": "perspectiveRules.css" -} \ No newline at end of file diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css index 760757e..3f23573 100644 --- a/demo/assets/css/style.css +++ b/demo/assets/css/style.css @@ -343,23 +343,34 @@ body { /* line 15, ../_scss/style.scss */ #demo-menu { position: absolute; - right: -400px; top: 2em; - width: auto; + width: 350px; padding: 2em; background: rgba(255, 255, 255, 0.8); height: auto; display: inline-block; z-index: 20; + -webkit-transition: all 200ms cubic-bezier(0.62, -0.005, 0.26, 0.995); + -moz-transition: all 200ms cubic-bezier(0.62, -0.005, 0.26, 0.995); + -o-transition: all 200ms cubic-bezier(0.62, -0.005, 0.26, 0.995); + transition: all 200ms cubic-bezier(0.62, -0.005, 0.26, 0.995); +} + +#demo-menu.closed{ + right: -350px; +} + +#demo-menu.open{ + right: 0px; } /* line 27, ../_scss/style.scss */ #min-max-tag { position: absolute; - right: 0; - top: 2em; - width: auto; - padding: 0.4em; + left: -40px; + top: 10px; + width: 40px; + padding: 10px; font-size: 200%; line-height: 1em; background: rgba(255, 255, 255, 0.4); diff --git a/demo/assets/js/jquery.logosDistort.min.js b/demo/assets/js/jquery.logosDistort.min.js deleted file mode 100644 index 350b442..0000000 --- a/demo/assets/js/jquery.logosDistort.min.js +++ /dev/null @@ -1,2 +0,0 @@ -(function(){var a=function(a,b){return function(){return a.apply(b,arguments)}};!function(b,c,d){var e,f,g;return g="logosDistort",f={enable:!0,effectWeight:1,enableSmoothing:!0,smoothingMultiplier:1,activeOnlyInside:!1,outerBuffer:1.1,elementDepth:140,directions:[1,1,1,1,-1,-1,1,1],weights:[31e-6,18e-5,164e-7,19e-7,12e-5],container:c,cssClasses:{smartContainer:"ld-smart-container",overlapContainer:"ld-overlap-container",parent3d:"ld-3d-parent",transformTarget:"ld-transform-target",active:"ld-transform-active",object3d:"ld-3d-object"},onInit:function(){},onDestroy:function(){}},e=function(){function e(c,d){this.element=c,this.applyTransform=a(this.applyTransform,this),this.settings=b.extend({},f,d),this._defaults=f,this._name=g,this.container=b(this.settings.container),this.$el=b(this.element),this.winW=this.container.innerWidth(),this.winH=this.container.innerHeight(),this.center=this.getCenterOfContainer(),this.outerCon=null,this.outerConParent=null,this.transformTarget=null,this.objects3d=null,this.mouseX=this.mouseY=0,this.effectX=this.effectY=0,this.has3dSupport=this.has3d(),this.paused=!1,this.raf=null,this.init()}return e.prototype.init=function(){var a;return this.createEnvironment(),this.settings.onInit(),a=this,b(d).on("mousemove",function(b){return a.mouseX=b.pageX,a.mouseY=b.pageY,!a.settings.enableSmoothing&&a.has3dSupport?a.draw():void 0}),b(c).on("resize",function(){return a.resizeHandler()}),this.has3dSupport?this.draw():void 0},e.prototype.createEnvironment=function(){var a,c,d,e,f;for(this.objects3d=this.$el.children(),this.$el.html(""),f=this.objects3d,d=0,e=f.length;e>d;d++)a=f[d],b(a).addClass(""+this.settings.cssClasses.object3d);return this.outerConParent=b("
"),this.outerCon=b("
"),c=b("
"),this.transformTarget=b("
"),this.$el.append(this.outerConParent.append(this.outerCon.append(c.append(this.transformTarget.append(this.objects3d))))),this.calculateOuterContainer(),this.calculate3dObjects()},e.prototype.setImageDefaults=function(a){var c;return c=this,a.is("img")?a.one("load",function(){return c.calculatePerspective(a)}).each(function(){return this.complete?b(this).load():void 0}):c.calculatePerspective(a)},e.prototype.calculateOuterContainer=function(){var a,b;return b=this.outerConParent.innerWidth()*this.settings.outerBuffer,a=this.outerConParent.innerHeight()*this.settings.outerBuffer,this.outerCon.css({width:b.toFixed(2),height:a.toFixed(2),left:-((b-this.winW)/2).toFixed(2),top:-((a-this.winH)/2).toFixed(2)})},e.prototype.calculate3dObjects=function(){var a,c,d,e,f;for(e=this.objects3d,f=[],c=0,d=e.length;d>c;c++)a=e[c],f.push(this.setImageDefaults(b(a)));return f},e.prototype.calculatePerspective=function(a){var c,d,e,f,g,h,i,j,k,l;return a=b(a),f=a.index()+1,this.objects3d.length>4&&(f-=this.objects3d.length/2),g=f*this.settings.elementDepth,d=this.getAspectRatio(),e=this.getAspectRatio(a),c=isNaN(e[0])||a.is("div")?d:e,i=(this.outerConParent.innerHeight()*this.settings.outerBuffer).toFixed(2),l=(i*c[0]).toFixed(2),l - - - Logos Perspective Distortion Demo 1 - - - - - - - -
- - -
- background -
- logo -
- - - - - - - - \ No newline at end of file diff --git a/demo/demo2.html b/demo/demo2.html index e86e2ba..99468ac 100644 --- a/demo/demo2.html +++ b/demo/demo2.html @@ -8,18 +8,18 @@ -
- background - ui - ui-2 -
+
+ background + ui + ui-2 +
- - - - + + + + - \ No newline at end of file + diff --git a/demo/demo3.gif b/demo/demo3.gif index 8e1c7d0..9fd45b6 100644 Binary files a/demo/demo3.gif and b/demo/demo3.gif differ diff --git a/demo/demo3.html b/demo/demo3.html index 0238a19..c0ef90e 100644 --- a/demo/demo3.html +++ b/demo/demo3.html @@ -21,8 +21,8 @@ ui - - + + - \ No newline at end of file + diff --git a/demo/demo4.html b/demo/demo4.html new file mode 100644 index 0000000..6876607 --- /dev/null +++ b/demo/demo4.html @@ -0,0 +1,83 @@ + + + + Logos Perspective Distortion Demo 2 + + + + + + + +
+ +
+ +
+ background + ui + ui-2 +
+ + + + + + + + diff --git a/demo/demo5.gif b/demo/demo5.gif new file mode 100644 index 0000000..6e6f8d8 Binary files /dev/null and b/demo/demo5.gif differ diff --git a/demo/demo5.html b/demo/demo5.html new file mode 100644 index 0000000..e0bcdc4 --- /dev/null +++ b/demo/demo5.html @@ -0,0 +1,90 @@ + + + + Logos Perspective Distortion Demo 2 + + + + + + + +
+
+ background + ui + ui-2 +
+
+ background + ui + ui-2 +
+
+ background + ui + ui-2 +
+
+ background + ui + ui-2 +
+
+ background + ui + ui-2 +
+
+ background + ui + ui-2 +
+
+ background + ui + ui-2 +
+
+ background + ui + ui-2 +
+
+ background + ui + ui-2 +
+
+ + + + + + + + diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..f343eb3 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,70 @@ + + + + Logos Perspective Distortion Demo 1 + + + + + + + + + + +
+ background +
+ logo +
+ + + + + + + + diff --git a/demo/jquery.logosDistort.js b/demo/jquery.logosDistort.js new file mode 100644 index 0000000..11d41db --- /dev/null +++ b/demo/jquery.logosDistort.js @@ -0,0 +1,577 @@ +;(function(win, doc) { + + /** + * Main function to create distortion effect. + * @param element - The element(s) to apply the distortion effect + * @param option - a set of options to override the default settings + */ + function logosDistort(elements, options) { + if (!elements) { + throw new Error('No element provided.'); + } + + this.options = options; + this.elements = elements; + + var _this = this; + + if (this.elements[0]) { + + //Turn our HTMLCollection into an array so we can iterate through it. + this.elements = [].slice.call(this.elements); + + this.elements.forEach(function(ele){ + ele.distort = new Distortion(ele, _this.options); + }); + } else { + this.elements.distort = new Distortion(elements, _this.options); + } + } + + function Distortion(element, options) { + + this._name = 'logosDistort'; + + this.options = { + enable: true, + effectWeight: 1, + enableSmoothing: true, + smoothingMultiplier: 1, + activeOnlyInside: false, + outerBuffer: 1.10, + elementDepth: 140, + perspectiveMulti: 1, + directions: [1, 1, 1, 1, -1, -1, 1, 1], + weights: [0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200], + container: win, + depthOverride: false, + mouseMode: 'container', + cssClasses: { + smartContainer: 'ld-smart-container', + overlapContainer: 'ld-overlap-container', + parent3d: 'ld-3d-parent', + transformTarget: 'ld-transform-target', + active: 'ld-transform-active', + object3d: 'ld-3d-object' + }, + beforeInit: function() {}, + onInit: function() {}, + onDestroy: function() {} + }; + + this.options.extend(options); + this.element = element; + this.eventCache = []; + + if (this.options.container === 'self') { + this.containerOverride = true; + this.options.container = this.element; + } else { + this.containerOverride = false; + } + + this.container = this.options.container; + + /* Some dom elements dont have offsetWidth (like window), so we fill that in using innerWidth, etc */ + if (!this.container.offsetWidth) { + this.container.offsetWidth = this.container.innerWidth; + } + + if (!this.container.offsetHeight) { + this.container.offsetHeight = this.container.innerHeight; + } + + this.width = this.container.offsetWidth; + this.height = this.container.offsetHeight; + this.center = this.getCenterOfContainer(); + + this.outerCon = null; + this.outerConParent = null; + this.transformTarget = null; + this.objects3d = null; + + this.mouseX = this.mouseY = 0; + this.effectX = this.effectY = 0; + + this.has3dSupport = this._has3d(); + + this.paused = false; + + this.options.beforeInit(this); + + this.init(); + } + + Distortion.prototype.init = function(){ + var _this = this; + + doc.addEventListener('mouseenter', initMouse, false); + + this.createEnvironment(); + this.options.onInit(); + + + if (this.options.mouseMode === 'container') { + + //bind mouse movement to element + this._addEvent(this.container, 'mousemove', setMousePos); + + } else if (this.options.mouseMode === 'window') { + + //bind mouse movement to window + this._addEvent(window, 'mousemove', setMousePos); + + } else if (this.options.mouseMode === 'magnetic') { + + //bind mouse movement to using the same x and y + this._addEvent(window, 'mousemove', function(e){ + var fromX = Math.abs(e.x - _this.center.x); + var fromY = Math.abs(e.y - _this.center.y); + + if(fromY < (_this.height/2) || fromX < (_this.width/2)) { + _this.mouseX = e.x; + _this.mouseY = e.y; + } + }); + } + + this._addEvent(window, 'resize', function(){ + _this.resizeHandler(); + }); + + this.start(); + + function setMousePos(e) { + _this.mouseX = e.x; + _this.mouseY = e.y; + } + + function initMouse(e) { + _this.mouseX = e.x; + _this.mouseY = e.y; + + doc.removeEventListener('mouseenter', initMouse, false); + } + }; + + Distortion.prototype.start = function() { + var _this = this; + + this.paused = false; + + if (this.has3dSupport) { + this.drawInterval = setInterval(function() { + _this.draw(); + }, 15); + } + }; + + Distortion.prototype.stop = function() { + this.paused = true; + + clearInterval(this.drawInterval); + }; + + Distortion.prototype.draw = function() { + var _this = this; + + if (this.effectX === this.mouseX || this.effectY === this.mouseY) { + return; + } + + if (!this.options.enableSmoothing) { + this.effectX = this.mouseX; + this.effectY = this.mouseY; + } else { + this.effectX += (this.mouseX - this.effectX) / (20*this.options.smoothingMultiplier); + this.effectY += (this.mouseY - this.effectY) / (20*this.options.smoothingMultiplier); + } + + if (!this.paused) { + this.changePerspective(this.transformTarget, this.effectX, this.effectY); + } + }; + + Distortion.prototype.changePerspective = function(element, appliedX, appliedY) { + var _this = this; + + requestAnimationFrame(function(){ + element.setAttribute('style', _this.generateTransformString(appliedX, appliedY)); + }); + }; + + Distortion.prototype.generateTransformString = function(appliedX, appliedY) { + var _transforms = this.calculateTransform(appliedX, appliedY); + + var _transformString = 'transform: matrix3d(' + + _transforms[0]+ ', 0, ' + _transforms[1] + ', 0, ' + + _transforms[2] + ', ' + _transforms[3] + ', ' + _transforms[4] + ', 0, ' + + _transforms[5] + ', ' + _transforms[6] + ', ' + _transforms[7] + ', 0, ' + + '0, 0, 100, 1)'; + + return _transformString; + }; + + Distortion.prototype.calculateTransform = function (appliedX, appliedY) { + var _transforms = []; + var _directions = this.options.directions; + var _temp; + + var _fromCenter = this.getDistanceFromCenter(appliedX, appliedY); + var _fromX = this.getDistanceFromCenterX(appliedY); + var _fromY = this.getDistanceFromCenterY(appliedX); + + var _fromCenterAndEdge = this.getDistanceFromEdgeCenterAndCenter(_fromCenter, _fromX, _fromY); + + // Lets add our transforms to the array + + //1 + _transforms.push(_directions[0] * (1 - (this.applyTransform(_fromCenter, 0) * this.options.effectWeight))); + + //2 + _transforms.push(_directions[1] * (this.applyTransform(_fromY, 1) * this.options.effectWeight)); + + //3 + _transforms.push(_directions[2] * (this.applyTransform(_fromCenterAndEdge, 2) * this.options.effectWeight)); + + //4 + _transforms.push(_directions[3] * (1 - (this.applyTransform(_fromCenter, 3) * this.options.effectWeight))); + + //5 + _transforms.push(_directions[4] * (this.applyTransform(_fromX, 4) * this.options.effectWeight)); + + //6 + _transforms.push(_directions[5] * _transforms[1]); + + //7 + _transforms.push(_directions[6] * _transforms[4]); + + //8 + _transforms.push(_directions[7] * Math.abs(_transforms[3])); + + _transforms.forEach(function(transform, index){ + _transforms[index] = transform.toFixed(5); + }); + + return _transforms; + }; + + Distortion.prototype.applyTransform = function(distance, effect) { + return distance * this.options.weights[effect]; + }; + + Distortion.prototype.getDistanceFromCenter = function (appliedX, appliedY) { + return this.getDistance2d(appliedX, appliedY, this.center.x, this.center.y); + }; + + Distortion.prototype.getDistanceFromCenterY = function(appliedX) { + return appliedX - this.center.x/2; + }; + + Distortion.prototype.getDistanceFromCenterX = function(appliedY) { + return appliedY - this.center.y/2; + }; + + Distortion.prototype.getDistanceFromEdgeCenterAndCenter = function(fromCenter, fromX, fromY) { + + //divide by 50 instead of 100 because distance is already divided by 2 + return -((fromCenter/100) * (fromX/50) * (fromY/50)); + }; + + + Distortion.prototype.getDistance2d = function (currX, currY, targetX, targetY) { + return Math.sqrt(Math.pow(currX - targetX, 2) + (Math.pow(currY - targetY, 2))); + }; + + Distortion.prototype.createEnvironment = function() { + var _env = doc.createDocumentFragment(); + var _this = this; + + this.objects3d = this.element.children; + this.objects3d = [].slice.call(this.objects3d); + + this.element.innerHTML = ''; + + this.objects3d.forEach(function(child){ + child.classList.add(_this.options.cssClasses.object3d); + }); + + this.outerConParent = doc.createElement('div'); + this.outerCon = doc.createElement('div'); + this.parent3d = doc.createElement('div'); + this.transformTarget = doc.createElement('div'); + + this.objects3d.forEach(function(child){ + _this.transformTarget.appendChild(child); + }); + this.parent3d.appendChild(this.transformTarget); + this.outerCon.appendChild(this.parent3d); + this.outerConParent.appendChild(this.outerCon); + _env.appendChild(this.outerConParent); + + this.outerConParent.classList.add(this.options.cssClasses.smartContainer); + this.outerCon.classList.add(this.options.cssClasses.overlapContainer); + this.parent3d.classList.add(this.options.cssClasses.parent3d); + + var perspective = 9000 * this.options.perspectiveMulti; + + this.parent3d.setAttribute('style', 'perspective: ' + perspective + 'px;'); + + this.transformTarget.classList.add(this.options.cssClasses.transformTarget, this.options.cssClasses.active); + + this.element.appendChild(_env); + + this.calculateOuterContainer(); + this.calculate3dObjects(); + }; + + Distortion.prototype.calculateOuterContainer = function() { + var width = this.outerConParent.offsetWidth * this.options.outerBuffer; + var height = this.outerConParent.offsetHeight * this.options.outerBuffer; + + this.outerCon.setAttribute('style', + 'width:' + width.toFixed(2) + 'px; ' + + 'height:' + height.toFixed(2) + 'px; ' + + 'left: -' + ((width - this.width) /2).toFixed(2) + 'px; ' + + 'top: -' + ((height - this.height) /2).toFixed(2) + 'px;' + ); + }; + + Distortion.prototype.calculate3dObjects = function() { + var _this = this; + + this.objects3d.forEach(function(node){ + _this.setImageDefaults(node); + }); + }; + + Distortion.prototype.setImageDefaults = function (element) { + var _this = this; + + if (element.tagName.toLowerCase() === 'img') { + + doc.addEventListener('DOMContentLoaded', function() { + return _this.calculatePerspective(element); + }, false); + + if (element.complete) { + _this.calculatePerspective(element); + } + } else { + _this.calculatePerspective(element); + } + }; + + Distortion.prototype.calculatePerspective = function(node) { + var index = Array.prototype.indexOf.call(node.parentNode.childNodes, node); + var aspect; + + /* + If we have a lot of elements in the array, for performance considerations, + we want to halve the depth. There is an override to stop this, but caution, + performance will be much worse. + */ + if(this.objects3d.length > 4 && !this.options.depthOverride) { + index = index - (this.objects3d.length / 2); + } + + var depth = index * this.options.elementDepth; + + var aspectDevice = this.getAspectRatio(); + var aspectElement = this.getAspectRatio(node); + + if (isNaN(aspectElement[0]) || node.tagName.toLowerCase() === "div") { + aspect = aspectDevice; + } else { + aspect = aspectElement; + } + + var height = (this.outerConParent.offsetHeight*this.options.outerBuffer).toFixed(2); + var width = (height * aspect[0]).toFixed(2); + + /* + If calculated width is less then the outerBuffer width, + i.e. element uses a height heavy aspect ratio, like on mobile, + we want to re-calculate everything using some more height-friendly maths. + */ + if (width < (this.width * this.options.outerBuffer)) { + difference = this.width / width; + width = (width * difference * this.options.outerBuffer).toFixed(2); + height = (height * difference * this.options.outerBuffer).toFixed(2); + } + + var left = -((width - this.width )/2).toFixed(2); + var top = -((height - this.height)/2).toFixed(2); + + node.setAttribute('style', + 'transform: translate3d(' + + left + 'px, ' + + top + 'px, ' + + depth + 'px);' + + 'width: ' + width + 'px; ' + + 'height: ' + height + 'px; ' + + 'z-index: ' + (index + 1) + ';' + ); + }; + + Distortion.prototype.getCenterOfContainer = function() { + this.rect = this.element.getBoundingClientRect(); + + return { + x: this.rect.left + (this.width/2), + y: this.rect.top + (this.height/2), + }; + }; + + Distortion.prototype.getAspectRatio = function(ele) { + + // Fixes bug where content was always sized to window, use container instead! + if (!ele) { + ele = this.options.container; + } + + return [ + ele.offsetWidth / ele.offsetHeight, + ele.offsetHeight / ele.offsetWidth + ]; + }; + + Distortion.prototype.getDistance2d = function (currX, currY, targetX, targetY) { + return Math.sqrt( + (Math.pow(currX - targetX, 2)) + (Math.pow(currY - targetY, 2)) + ); + }; + + Distortion.prototype.resizeHandler = function() { + + if(this.container.innerWidth && this.container.innerWidth !== this.container.offsetWidth) { + this.container.offsetWidth = null; + } + + if(this.container.innerHeight && this.container.innerHeight !== this.container.offsetHeight) { + this.container.offsetHeight = null; + } + + if (!this.container.offsetWidth) { + this.container.offsetWidth = this.container.innerWidth; + } + + if (!this.container.offsetHeight) { + this.container.offsetHeight = this.container.innerHeight; + } + + this.width = this.container.offsetWidth; + this.height = this.container.offsetHeight; + this.center = this.getCenterOfContainer(); + + this.calculateOuterContainer(); + this.calculate3dObjects(); + }; + + Distortion.prototype._has3d = function(){ + var el = document.createElement('p'); + var transforms = { + 'WebkitTransform':'-webkit-transform', + 'OTransform':'-o-transform', + 'MSTransform':'-ms-transform', + 'MozTransform':'-moz-transform', + 'transform':'transform' + }; + var has3d; + var t; + + /* Add it to the body to get the computed style. */ + document.body.insertBefore(el, document.body.lastChild); + + for(t in transforms){ + if( el.style[t] !== undefined ){ + el.style[t] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; + has3d = window.getComputedStyle(el).getPropertyValue( transforms[t] ); + } + } + + /* Remove used element from body. */ + el.parentNode.removeChild(el); + + if( has3d !== undefined ){ + return has3d !== 'none'; + } else { + return false; + } + }; + + Distortion.prototype._addEvent = function(element, type, fn) { + element.addEventListener(type, fn, false); + + this.eventCache.push({element: element, type: type, fn: fn}); + }; + + Distortion.prototype.clearEvents = function() { + this.eventCache.forEach(function(e){ + e.element.removeEventListener(e.type, e.fn, false); + }); + }; + + Distortion.prototype.destroy = function() { + this.clearEvents(); + this.element.parentNode.removeChild(this.element); + this.hook('onDestroy'); + + if (this.element.removeData) { + this.element.removeData('plugin_'+this._name); + } + }; + + Distortion.prototype.hook = function(hookName) { + if(this.options[hookName]){ + this.options[hookName].call(this.element); + } + }; + + Object.prototype.extend = function(obj) { + for (var i in obj) { + if (obj.hasOwnProperty(i)) { + this[i] = obj[i]; + } + } + }; + + // export + win.logosDistort = logosDistort; + + if (jQuery && jQuery.fn) { + jQuery.fn.logosDistort = function(options) { + return this.each(function() { + if (!jQuery.data(this, 'plugin_logosDistort')) { + jQuery.data(this, 'plugin_logosDistort', new logosDistort(this, options)); + } + }); + }; + } + +})(window, document); + +(function() { + var lastTime = 0; + var vendors = ['webkit', 'moz']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = + window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + + if (!window.cancelAnimationFrame) + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; +}()); diff --git a/dist/css/perspectiveRules.css b/dist/css/perspectiveRules.css index 2000297..fab5755 100644 --- a/dist/css/perspectiveRules.css +++ b/dist/css/perspectiveRules.css @@ -1,4 +1,4 @@ -/* line 1, ../_scss/perspectiveRules.scss */ + .ld-smart-container { position: absolute; z-index: 2; @@ -6,7 +6,7 @@ height: 100%; overflow: hidden; } -/* line 8, ../_scss/perspectiveRules.scss */ + .ld-smart-container .ld-3d-parent { width: 100%; height: 100%; @@ -14,8 +14,9 @@ transform-style: preserve-3d; perspective: 9000px; opacity: 1; + position: relative; } -/* line 17, ../_scss/perspectiveRules.scss */ + .ld-smart-container .ld-transform-target { position: relative; -webkit-transform-style: flat; @@ -26,7 +27,7 @@ pointer-events: none; transform-style: preserve-3d; } -/* line 28, ../_scss/perspectiveRules.scss */ + .ld-smart-container .ld-3d-object { position: absolute; pointer-events: none; @@ -38,5 +39,3 @@ backface-visibility: hidden; perspective: 1000; } - -/*# sourceMappingURL=perspectiveRules.css.map */ diff --git a/dist/css/perspectiveRules.min.css b/dist/css/perspectiveRules.min.css deleted file mode 100644 index 63736c3..0000000 --- a/dist/css/perspectiveRules.min.css +++ /dev/null @@ -1 +0,0 @@ -.ld-smart-container{position:absolute;z-index:2;width:100%;height:100%;overflow:hidden}.ld-smart-container .ld-3d-parent{width:100%;height:100%;pointer-events:none;transform-style:preserve-3d;perspective:9000px;opacity:1}.ld-smart-container .ld-transform-target{position:relative;-webkit-transform-style:flat;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(0px,0,0);width:100%;height:100%;pointer-events:none;transform-style:preserve-3d}.ld-smart-container .ld-3d-object{position:absolute;pointer-events:none;-webkit-transform-style:flat;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(0px,0,0);transform-style:preserve-3d;-webkit-perspective:1000;backface-visibility:hidden;perspective:1000} \ No newline at end of file diff --git a/dist/jquery.logosDistort.js b/dist/jquery.logosDistort.js index 16a44d5..11d41db 100644 --- a/dist/jquery.logosDistort.js +++ b/dist/jquery.logosDistort.js @@ -1,11 +1,38 @@ -//@ sourceMappingURL=jquery.logosDistort.map -(function() { - var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; +;(function(win, doc) { + + /** + * Main function to create distortion effect. + * @param element - The element(s) to apply the distortion effect + * @param option - a set of options to override the default settings + */ + function logosDistort(elements, options) { + if (!elements) { + throw new Error('No element provided.'); + } + + this.options = options; + this.elements = elements; + + var _this = this; + + if (this.elements[0]) { + + //Turn our HTMLCollection into an array so we can iterate through it. + this.elements = [].slice.call(this.elements); + + this.elements.forEach(function(ele){ + ele.distort = new Distortion(ele, _this.options); + }); + } else { + this.elements.distort = new Distortion(elements, _this.options); + } + } + + function Distortion(element, options) { + + this._name = 'logosDistort'; - (function($, window, document) { - var Plugin, defaults, pluginName; - pluginName = "logosDistort"; - defaults = { + this.options = { enable: true, effectWeight: 1, enableSmoothing: true, @@ -13,369 +40,538 @@ activeOnlyInside: false, outerBuffer: 1.10, elementDepth: 140, + perspectiveMulti: 1, directions: [1, 1, 1, 1, -1, -1, 1, 1], weights: [0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200], - container: window, + container: win, + depthOverride: false, + mouseMode: 'container', cssClasses: { - smartContainer: "ld-smart-container", - overlapContainer: "ld-overlap-container", - parent3d: "ld-3d-parent", - transformTarget: "ld-transform-target", - active: "ld-transform-active", - object3d: "ld-3d-object" + smartContainer: 'ld-smart-container', + overlapContainer: 'ld-overlap-container', + parent3d: 'ld-3d-parent', + transformTarget: 'ld-transform-target', + active: 'ld-transform-active', + object3d: 'ld-3d-object' }, + beforeInit: function() {}, onInit: function() {}, onDestroy: function() {} }; - Plugin = (function() { - function Plugin(element, options) { - this.element = element; - this.applyTransform = __bind(this.applyTransform, this); - this.settings = $.extend({}, defaults, options); - this._defaults = defaults; - this._name = pluginName; - this.container = $(this.settings.container); - this.$el = $(this.element); - this.winW = this.container.innerWidth(); - this.winH = this.container.innerHeight(); - this.center = this.getCenterOfContainer(); - this.outerCon = null; - this.outerConParent = null; - this.transformTarget = null; - this.objects3d = null; - this.mouseX = this.mouseY = 0; - this.effectX = this.effectY = 0; - this.has3dSupport = this.has3d(); - this.paused = false; - this.raf = null; - this.init(); - } - Plugin.prototype.init = function() { - var logos; - this.createEnvironment(); - this.settings.onInit(); - logos = this; - $(document).on('mousemove', function(e) { - logos.mouseX = e.pageX; - logos.mouseY = e.pageY; - if (!logos.settings.enableSmoothing && logos.has3dSupport) { - return logos.draw(); - } - }); - $(window).on('resize', function() { - return logos.resizeHandler(); - }); - if (this.has3dSupport) { - return this.draw(); - } else { - return console.log("Error: Browser 3d Support Not detected"); - } - }; + this.options.extend(options); + this.element = element; + this.eventCache = []; - Plugin.prototype.createEnvironment = function() { - var child, parent3d, _i, _len, _ref; - this.objects3d = this.$el.children(); - this.$el.html(""); - _ref = this.objects3d; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - child = _ref[_i]; - $(child).addClass("" + this.settings.cssClasses.object3d); - } - this.outerConParent = $("
"); - this.outerCon = $("
"); - parent3d = $("
"); - this.transformTarget = $("
"); - this.$el.append(this.outerConParent.append(this.outerCon.append(parent3d.append(this.transformTarget.append(this.objects3d))))); - this.calculateOuterContainer(); - return this.calculate3dObjects(); - }; + if (this.options.container === 'self') { + this.containerOverride = true; + this.options.container = this.element; + } else { + this.containerOverride = false; + } - Plugin.prototype.setImageDefaults = function(element) { - var logos; - logos = this; - if (element.is("img")) { - return element.one("load", function() { - return logos.calculatePerspective(element); - }).each(function() { - if (this.complete) { - return $(this).load(); - } - }); - } else { - return logos.calculatePerspective(element); - } - }; + this.container = this.options.container; - Plugin.prototype.calculateOuterContainer = function() { - var height, width; - width = this.outerConParent.innerWidth() * this.settings.outerBuffer; - height = this.outerConParent.innerHeight() * this.settings.outerBuffer; - return this.outerCon.css({ - width: width.toFixed(2), - height: height.toFixed(2), - left: -((width - this.winW) / 2).toFixed(2), - top: -((height - this.winH) / 2).toFixed(2) - }); - }; + /* Some dom elements dont have offsetWidth (like window), so we fill that in using innerWidth, etc */ + if (!this.container.offsetWidth) { + this.container.offsetWidth = this.container.innerWidth; + } - Plugin.prototype.calculate3dObjects = function() { - var child, _i, _len, _ref, _results; - _ref = this.objects3d; - _results = []; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - child = _ref[_i]; - _results.push(this.setImageDefaults($(child))); - } - return _results; - }; + if (!this.container.offsetHeight) { + this.container.offsetHeight = this.container.innerHeight; + } - Plugin.prototype.calculatePerspective = function(ele) { - var aspect, aspectDevice, aspectElement, dIndex, depth, difference, height, left, top, width; - ele = $(ele); - dIndex = ele.index() + 1; - if (this.objects3d.length > 4) { - dIndex = dIndex - (this.objects3d.length / 2); - } - depth = dIndex * this.settings.elementDepth; - aspectDevice = this.getAspectRatio(); - aspectElement = this.getAspectRatio(ele); - if ((isNaN(aspectElement[0])) || ele.is("div")) { - aspect = aspectDevice; - } else { - aspect = aspectElement; - } - height = (this.outerConParent.innerHeight() * this.settings.outerBuffer).toFixed(2); - width = (height * aspect[0]).toFixed(2); - if (width < this.winW * this.settings.outerBuffer) { - difference = this.winW / width; - width = (width * difference * this.settings.outerBuffer).toFixed(2); - height = (height * difference * this.settings.outerBuffer).toFixed(2); + this.width = this.container.offsetWidth; + this.height = this.container.offsetHeight; + this.center = this.getCenterOfContainer(); + + this.outerCon = null; + this.outerConParent = null; + this.transformTarget = null; + this.objects3d = null; + + this.mouseX = this.mouseY = 0; + this.effectX = this.effectY = 0; + + this.has3dSupport = this._has3d(); + + this.paused = false; + + this.options.beforeInit(this); + + this.init(); + } + + Distortion.prototype.init = function(){ + var _this = this; + + doc.addEventListener('mouseenter', initMouse, false); + + this.createEnvironment(); + this.options.onInit(); + + + if (this.options.mouseMode === 'container') { + + //bind mouse movement to element + this._addEvent(this.container, 'mousemove', setMousePos); + + } else if (this.options.mouseMode === 'window') { + + //bind mouse movement to window + this._addEvent(window, 'mousemove', setMousePos); + + } else if (this.options.mouseMode === 'magnetic') { + + //bind mouse movement to using the same x and y + this._addEvent(window, 'mousemove', function(e){ + var fromX = Math.abs(e.x - _this.center.x); + var fromY = Math.abs(e.y - _this.center.y); + + if(fromY < (_this.height/2) || fromX < (_this.width/2)) { + _this.mouseX = e.x; + _this.mouseY = e.y; } - left = -((width - this.winW) / 2).toFixed(2); - top = -((height - this.winH) / 2).toFixed(2); - return ele.attr('style', "transform: translate3d(" + left + "px, " + top + "px, " + depth + "px); width:" + width + "px; height:" + height + "px;"); - }; + }); + } + + this._addEvent(window, 'resize', function(){ + _this.resizeHandler(); + }); + + this.start(); + + function setMousePos(e) { + _this.mouseX = e.x; + _this.mouseY = e.y; + } + + function initMouse(e) { + _this.mouseX = e.x; + _this.mouseY = e.y; + + doc.removeEventListener('mouseenter', initMouse, false); + } + }; + + Distortion.prototype.start = function() { + var _this = this; + + this.paused = false; + + if (this.has3dSupport) { + this.drawInterval = setInterval(function() { + _this.draw(); + }, 15); + } + }; + + Distortion.prototype.stop = function() { + this.paused = true; + + clearInterval(this.drawInterval); + }; + + Distortion.prototype.draw = function() { + var _this = this; + + if (this.effectX === this.mouseX || this.effectY === this.mouseY) { + return; + } + + if (!this.options.enableSmoothing) { + this.effectX = this.mouseX; + this.effectY = this.mouseY; + } else { + this.effectX += (this.mouseX - this.effectX) / (20*this.options.smoothingMultiplier); + this.effectY += (this.mouseY - this.effectY) / (20*this.options.smoothingMultiplier); + } + + if (!this.paused) { + this.changePerspective(this.transformTarget, this.effectX, this.effectY); + } + }; + + Distortion.prototype.changePerspective = function(element, appliedX, appliedY) { + var _this = this; + + requestAnimationFrame(function(){ + element.setAttribute('style', _this.generateTransformString(appliedX, appliedY)); + }); + }; + + Distortion.prototype.generateTransformString = function(appliedX, appliedY) { + var _transforms = this.calculateTransform(appliedX, appliedY); + + var _transformString = 'transform: matrix3d(' + + _transforms[0]+ ', 0, ' + _transforms[1] + ', 0, ' + + _transforms[2] + ', ' + _transforms[3] + ', ' + _transforms[4] + ', 0, ' + + _transforms[5] + ', ' + _transforms[6] + ', ' + _transforms[7] + ', 0, ' + + '0, 0, 100, 1)'; + + return _transformString; + }; + + Distortion.prototype.calculateTransform = function (appliedX, appliedY) { + var _transforms = []; + var _directions = this.options.directions; + var _temp; + + var _fromCenter = this.getDistanceFromCenter(appliedX, appliedY); + var _fromX = this.getDistanceFromCenterX(appliedY); + var _fromY = this.getDistanceFromCenterY(appliedX); + + var _fromCenterAndEdge = this.getDistanceFromEdgeCenterAndCenter(_fromCenter, _fromX, _fromY); + + // Lets add our transforms to the array + + //1 + _transforms.push(_directions[0] * (1 - (this.applyTransform(_fromCenter, 0) * this.options.effectWeight))); + + //2 + _transforms.push(_directions[1] * (this.applyTransform(_fromY, 1) * this.options.effectWeight)); + + //3 + _transforms.push(_directions[2] * (this.applyTransform(_fromCenterAndEdge, 2) * this.options.effectWeight)); + + //4 + _transforms.push(_directions[3] * (1 - (this.applyTransform(_fromCenter, 3) * this.options.effectWeight))); + + //5 + _transforms.push(_directions[4] * (this.applyTransform(_fromX, 4) * this.options.effectWeight)); + + //6 + _transforms.push(_directions[5] * _transforms[1]); + + //7 + _transforms.push(_directions[6] * _transforms[4]); + + //8 + _transforms.push(_directions[7] * Math.abs(_transforms[3])); + + _transforms.forEach(function(transform, index){ + _transforms[index] = transform.toFixed(5); + }); - /* - Drawing Involved Functions - */ - - - Plugin.prototype.draw = function() { - var logos; - logos = this; - if (!this.settings.enableSmoothing) { - this.effectX = this.mouseX; - this.effectY = this.mouseY; - if (!this.paused) { - this.changePerspective(this.transformTarget, this.effectX, this.effectY); - return this.raf = requestAnimationFrame(function() { - return logos.draw(); + return _transforms; + }; + + Distortion.prototype.applyTransform = function(distance, effect) { + return distance * this.options.weights[effect]; + }; + + Distortion.prototype.getDistanceFromCenter = function (appliedX, appliedY) { + return this.getDistance2d(appliedX, appliedY, this.center.x, this.center.y); + }; + + Distortion.prototype.getDistanceFromCenterY = function(appliedX) { + return appliedX - this.center.x/2; + }; + + Distortion.prototype.getDistanceFromCenterX = function(appliedY) { + return appliedY - this.center.y/2; + }; + + Distortion.prototype.getDistanceFromEdgeCenterAndCenter = function(fromCenter, fromX, fromY) { + + //divide by 50 instead of 100 because distance is already divided by 2 + return -((fromCenter/100) * (fromX/50) * (fromY/50)); + }; + + + Distortion.prototype.getDistance2d = function (currX, currY, targetX, targetY) { + return Math.sqrt(Math.pow(currX - targetX, 2) + (Math.pow(currY - targetY, 2))); + }; + + Distortion.prototype.createEnvironment = function() { + var _env = doc.createDocumentFragment(); + var _this = this; + + this.objects3d = this.element.children; + this.objects3d = [].slice.call(this.objects3d); + + this.element.innerHTML = ''; + + this.objects3d.forEach(function(child){ + child.classList.add(_this.options.cssClasses.object3d); + }); + + this.outerConParent = doc.createElement('div'); + this.outerCon = doc.createElement('div'); + this.parent3d = doc.createElement('div'); + this.transformTarget = doc.createElement('div'); + + this.objects3d.forEach(function(child){ + _this.transformTarget.appendChild(child); }); - } - } else { - return setInterval((function() { - logos.calculateSmoothing(); - return logos.changePerspective(logos.transformTarget, logos.effectX, logos.effectY); - }), 15); - } - }; + this.parent3d.appendChild(this.transformTarget); + this.outerCon.appendChild(this.parent3d); + this.outerConParent.appendChild(this.outerCon); + _env.appendChild(this.outerConParent); - Plugin.prototype.start = function() { - var paused; - paused = false; - return this.draw(); - }; + this.outerConParent.classList.add(this.options.cssClasses.smartContainer); + this.outerCon.classList.add(this.options.cssClasses.overlapContainer); + this.parent3d.classList.add(this.options.cssClasses.parent3d); - Plugin.prototype.stop = function() { - var paused; - return paused = true; - }; + var perspective = 9000 * this.options.perspectiveMulti; - Plugin.prototype.changePerspective = function(element, appliedX, appliedY) { - var logos; - logos = this; - return requestAnimationFrame(function() { - return $(element).attr('style', logos.calculateTransform(appliedX, appliedY)); - }); - }; + this.parent3d.setAttribute('style', 'perspective: ' + perspective + 'px;'); - Plugin.prototype.calculateTransform = function(appliedX, appliedY) { - var transform1, transform2, transform3, transform4, transform5, transform6, transform7, transform8; - transform1 = (this.settings.directions[0] * (1 - (this.applyTransform(this.getDistanceFromCenter(appliedX, appliedY), 0)) * this.settings.effectWeight)).toFixed(5); - transform2 = (this.settings.directions[1] * (this.applyTransform(this.getDistanceFromCenterY(appliedX), 1)) * this.settings.effectWeight).toFixed(5); - transform3 = (this.settings.directions[2] * (this.applyTransform(this.getDistanceFromEdgeCenterAndCenter(appliedX, appliedY), 2)) * this.settings.effectWeight).toFixed(5); - transform4 = (this.settings.directions[3] * (1 - (this.applyTransform(this.getDistanceFromCenter(appliedX, appliedY), 3)) * this.settings.effectWeight)).toFixed(5); - transform5 = (this.settings.directions[4] * (this.applyTransform(this.getDistanceFromCenterX(appliedY), 4)) * this.settings.effectWeight).toFixed(5); - transform6 = (this.settings.directions[5] * transform2).toFixed(5); - transform7 = (this.settings.directions[6] * transform5).toFixed(5); - transform8 = (this.settings.directions[7] * (Math.abs(transform4))).toFixed(5); - return "transform: matrix3d(" + transform1 + ", 0, " + transform2 + ", 0, " + transform3 + ", " + transform4 + ", " + transform5 + ", 0, " + transform6 + ", " + transform7 + ", " + transform8 + ", 0, 0, 0, 100, 1)"; - }; + this.transformTarget.classList.add(this.options.cssClasses.transformTarget, this.options.cssClasses.active); - Plugin.prototype.applyTransform = function(distance, effect) { - return distance * this.settings.weights[effect]; - }; + this.element.appendChild(_env); - Plugin.prototype.getDistanceFromCenter = function(appliedX, appliedY) { - return this.getDistance2d(appliedX, appliedY, this.center.x, this.center.y); - }; + this.calculateOuterContainer(); + this.calculate3dObjects(); + }; - Plugin.prototype.getDistanceFromCenterY = function(appliedX) { - return appliedX - this.center.x / 2; - }; + Distortion.prototype.calculateOuterContainer = function() { + var width = this.outerConParent.offsetWidth * this.options.outerBuffer; + var height = this.outerConParent.offsetHeight * this.options.outerBuffer; - Plugin.prototype.getDistanceFromCenterX = function(appliedY) { - return appliedY - this.center.y / 2; - }; + this.outerCon.setAttribute('style', + 'width:' + width.toFixed(2) + 'px; ' + + 'height:' + height.toFixed(2) + 'px; ' + + 'left: -' + ((width - this.width) /2).toFixed(2) + 'px; ' + + 'top: -' + ((height - this.height) /2).toFixed(2) + 'px;' + ); + }; - Plugin.prototype.getDistanceFromEdgeCenterAndCenter = function(appliedX, appliedY) { - var fromCenter, fromX, fromY; - fromCenter = this.getDistanceFromCenter(appliedX, appliedY); - fromX = this.getDistanceFromCenterX(appliedY); - fromY = this.getDistanceFromCenterY(appliedX); - return -((fromCenter / 100) * (fromX / 50) * (fromY / 50)); - }; + Distortion.prototype.calculate3dObjects = function() { + var _this = this; - /* - Smoothing Functions - */ + this.objects3d.forEach(function(node){ + _this.setImageDefaults(node); + }); + }; + Distortion.prototype.setImageDefaults = function (element) { + var _this = this; - Plugin.prototype.calculateSmoothing = function() { - this.effectX += (this.mouseX - this.effectX) / (20 * this.settings.smoothingMultiplier); - return this.effectY += (this.mouseY - this.effectY) / (20 * this.settings.smoothingMultiplier); - }; + if (element.tagName.toLowerCase() === 'img') { - /* - Basic Support Functions - */ + doc.addEventListener('DOMContentLoaded', function() { + return _this.calculatePerspective(element); + }, false); + if (element.complete) { + _this.calculatePerspective(element); + } + } else { + _this.calculatePerspective(element); + } + }; + + Distortion.prototype.calculatePerspective = function(node) { + var index = Array.prototype.indexOf.call(node.parentNode.childNodes, node); + var aspect; + + /* + If we have a lot of elements in the array, for performance considerations, + we want to halve the depth. There is an override to stop this, but caution, + performance will be much worse. + */ + if(this.objects3d.length > 4 && !this.options.depthOverride) { + index = index - (this.objects3d.length / 2); + } - Plugin.prototype.getDistance2d = function(currX, currY, targetX, targetY) { - return Math.sqrt((Math.pow(currX - targetX, 2)) + (Math.pow(currY - targetY, 2))); - }; + var depth = index * this.options.elementDepth; - Plugin.prototype.getCenterOfContainer = function() { - return { - x: this.winW / 2, - y: this.winH / 2 - }; - }; + var aspectDevice = this.getAspectRatio(); + var aspectElement = this.getAspectRatio(node); - Plugin.prototype.getAspectRatio = function(ele) { - if (ele == null) { - ele = window; - } - ele = $(ele); - return [ele.innerWidth() / ele.innerHeight(), ele.innerHeight() / ele.innerWidth()]; - }; + if (isNaN(aspectElement[0]) || node.tagName.toLowerCase() === "div") { + aspect = aspectDevice; + } else { + aspect = aspectElement; + } - Plugin.prototype.resizeHandler = function() { - this.container = $(this.settings.container); - this.winW = this.container.innerWidth(); - this.winH = this.container.innerHeight(); - this.center = this.getCenterOfContainer(); - this.calculateOuterContainer(); - return this.calculate3dObjects(); - }; + var height = (this.outerConParent.offsetHeight*this.options.outerBuffer).toFixed(2); + var width = (height * aspect[0]).toFixed(2); + + /* + If calculated width is less then the outerBuffer width, + i.e. element uses a height heavy aspect ratio, like on mobile, + we want to re-calculate everything using some more height-friendly maths. + */ + if (width < (this.width * this.options.outerBuffer)) { + difference = this.width / width; + width = (width * difference * this.options.outerBuffer).toFixed(2); + height = (height * difference * this.options.outerBuffer).toFixed(2); + } - /* - Checks for browser compatibility of 'transform: Matrix3d' - Based on a Gist by Tiffany B. Brown - http://tiffanybbrown.com/2012/09/04/testing-for-css-3d-transforms-support/ - */ - - - Plugin.prototype.has3d = function() { - var el, support3d, t, transforms; - el = document.createElement('p'); - transforms = { - 'WebkitTransform': '-webkit-transform', - 'OTransform': '-o-transform', - 'MSTransform': '-ms-transform', - 'MozTransform': '-moz-transform', - 'transform': 'transform' - }; - support3d = void 0; - document.body.insertBefore(el, document.body.lastChild); - for (t in transforms) { - if (el.style[t] !== void 0) { - el.style[t] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; - support3d = window.getComputedStyle(el); - support3d = support3d.getPropertyValue(transforms[t]); - } - } - if (support3d != null) { - return support3d !== 'none'; - } else { - return false; - } - }; + var left = -((width - this.width )/2).toFixed(2); + var top = -((height - this.height)/2).toFixed(2); + + node.setAttribute('style', + 'transform: translate3d(' + + left + 'px, ' + + top + 'px, ' + + depth + 'px);' + + 'width: ' + width + 'px; ' + + 'height: ' + height + 'px; ' + + 'z-index: ' + (index + 1) + ';' + ); + }; + + Distortion.prototype.getCenterOfContainer = function() { + this.rect = this.element.getBoundingClientRect(); + + return { + x: this.rect.left + (this.width/2), + y: this.rect.top + (this.height/2), + }; + }; - Plugin.prototype.destroy = function() { - this.$el.remove(); - this.hook('onDestroy'); - return this.$el.removeData("plugin_" + pluginName); - }; + Distortion.prototype.getAspectRatio = function(ele) { - Plugin.prototype.hook = function(hookName) { - if (options[hookName] != null) { - return options[hookName].call(this.element); - } - }; + // Fixes bug where content was always sized to window, use container instead! + if (!ele) { + ele = this.options.container; + } + + return [ + ele.offsetWidth / ele.offsetHeight, + ele.offsetHeight / ele.offsetWidth + ]; + }; + + Distortion.prototype.getDistance2d = function (currX, currY, targetX, targetY) { + return Math.sqrt( + (Math.pow(currX - targetX, 2)) + (Math.pow(currY - targetY, 2)) + ); + }; + + Distortion.prototype.resizeHandler = function() { + + if(this.container.innerWidth && this.container.innerWidth !== this.container.offsetWidth) { + this.container.offsetWidth = null; + } + + if(this.container.innerHeight && this.container.innerHeight !== this.container.offsetHeight) { + this.container.offsetHeight = null; + } + + if (!this.container.offsetWidth) { + this.container.offsetWidth = this.container.innerWidth; + } + + if (!this.container.offsetHeight) { + this.container.offsetHeight = this.container.innerHeight; + } + + this.width = this.container.offsetWidth; + this.height = this.container.offsetHeight; + this.center = this.getCenterOfContainer(); + + this.calculateOuterContainer(); + this.calculate3dObjects(); + }; + + Distortion.prototype._has3d = function(){ + var el = document.createElement('p'); + var transforms = { + 'WebkitTransform':'-webkit-transform', + 'OTransform':'-o-transform', + 'MSTransform':'-ms-transform', + 'MozTransform':'-moz-transform', + 'transform':'transform' + }; + var has3d; + var t; + + /* Add it to the body to get the computed style. */ + document.body.insertBefore(el, document.body.lastChild); + + for(t in transforms){ + if( el.style[t] !== undefined ){ + el.style[t] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; + has3d = window.getComputedStyle(el).getPropertyValue( transforms[t] ); + } + } + + /* Remove used element from body. */ + el.parentNode.removeChild(el); + + if( has3d !== undefined ){ + return has3d !== 'none'; + } else { + return false; + } + }; + + Distortion.prototype._addEvent = function(element, type, fn) { + element.addEventListener(type, fn, false); + + this.eventCache.push({element: element, type: type, fn: fn}); + }; - return Plugin; + Distortion.prototype.clearEvents = function() { + this.eventCache.forEach(function(e){ + e.element.removeEventListener(e.type, e.fn, false); + }); + }; + + Distortion.prototype.destroy = function() { + this.clearEvents(); + this.element.parentNode.removeChild(this.element); + this.hook('onDestroy'); + + if (this.element.removeData) { + this.element.removeData('plugin_'+this._name); + } + }; + + Distortion.prototype.hook = function(hookName) { + if(this.options[hookName]){ + this.options[hookName].call(this.element); + } + }; + + Object.prototype.extend = function(obj) { + for (var i in obj) { + if (obj.hasOwnProperty(i)) { + this[i] = obj[i]; + } + } + }; - })(); - return $.fn[pluginName] = function(options) { + // export + win.logosDistort = logosDistort; + + if (jQuery && jQuery.fn) { + jQuery.fn.logosDistort = function(options) { return this.each(function() { - if (!$.data(this, "plugin_" + pluginName)) { - return $.data(this, "plugin_" + pluginName, new Plugin(this, options)); + if (!jQuery.data(this, 'plugin_logosDistort')) { + jQuery.data(this, 'plugin_logosDistort', new logosDistort(this, options)); } }); }; - })(jQuery, window, document); - - /* - http://paulirish.com/2011/requestanimationframe-for-smart-animating/ - http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating - requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel - CoffeeScript implementation by Mathew Kleppin - MIT license - */ - - - (function() { - var lastTime, vendor, vendorSetup, vendors, _i, _len; - lastTime = 0; - vendors = ['ms', 'moz', 'webkit', 'o']; - vendorSetup = function(vendor) { - window.requestAnimationFrame = window[vendor + 'RequestAnimationFrame']; - return window.cancelAnimationFrame = window[vendor + 'CancelAnimationFrame'] || window[vendor + 'CancelRequestAnimationFrame']; - }; - for (_i = 0, _len = vendors.length; _i < _len; _i++) { - vendor = vendors[_i]; - vendorSetup(vendor); - } - if (!window.requestAnimationFrame) { + } + +})(window, document); + +(function() { + var lastTime = 0; + var vendors = ['webkit', 'moz']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = + window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { - var currTime, id, timeToCall; - currTime = new Date().getTime(); - timeToCall = Math.max(0, 16 - (currTime - lastTime)); - id = window.setTimeout((function() { - return callback(currTime + timeToCall); - }), timeToCall); - lastTime = currTime + timeToCall; - return id; - }; - } - if (!window.cancelAnimationFrame) { - return window.cancelAnimationFrame = function(id) { - return clearTimeout(id); + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; }; - } - }); -}).call(this); + if (!window.cancelAnimationFrame) + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; +}()); diff --git a/dist/jquery.logosDistort.map b/dist/jquery.logosDistort.map deleted file mode 100644 index 298d030..0000000 --- a/dist/jquery.logosDistort.map +++ /dev/null @@ -1,10 +0,0 @@ -{ - "version": 3, - "file": "jquery.logosDistort.js", - "sourceRoot": "..\\src/", - "sources": [ - "jquery.logosDistort.coffee" - ], - "names": [], - "mappings": "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" -} \ No newline at end of file diff --git a/dist/jquery.logosDistort.min.js b/dist/jquery.logosDistort.min.js index 350b442..f30acf4 100644 --- a/dist/jquery.logosDistort.min.js +++ b/dist/jquery.logosDistort.min.js @@ -1,2 +1 @@ -(function(){var a=function(a,b){return function(){return a.apply(b,arguments)}};!function(b,c,d){var e,f,g;return g="logosDistort",f={enable:!0,effectWeight:1,enableSmoothing:!0,smoothingMultiplier:1,activeOnlyInside:!1,outerBuffer:1.1,elementDepth:140,directions:[1,1,1,1,-1,-1,1,1],weights:[31e-6,18e-5,164e-7,19e-7,12e-5],container:c,cssClasses:{smartContainer:"ld-smart-container",overlapContainer:"ld-overlap-container",parent3d:"ld-3d-parent",transformTarget:"ld-transform-target",active:"ld-transform-active",object3d:"ld-3d-object"},onInit:function(){},onDestroy:function(){}},e=function(){function e(c,d){this.element=c,this.applyTransform=a(this.applyTransform,this),this.settings=b.extend({},f,d),this._defaults=f,this._name=g,this.container=b(this.settings.container),this.$el=b(this.element),this.winW=this.container.innerWidth(),this.winH=this.container.innerHeight(),this.center=this.getCenterOfContainer(),this.outerCon=null,this.outerConParent=null,this.transformTarget=null,this.objects3d=null,this.mouseX=this.mouseY=0,this.effectX=this.effectY=0,this.has3dSupport=this.has3d(),this.paused=!1,this.raf=null,this.init()}return e.prototype.init=function(){var a;return this.createEnvironment(),this.settings.onInit(),a=this,b(d).on("mousemove",function(b){return a.mouseX=b.pageX,a.mouseY=b.pageY,!a.settings.enableSmoothing&&a.has3dSupport?a.draw():void 0}),b(c).on("resize",function(){return a.resizeHandler()}),this.has3dSupport?this.draw():void 0},e.prototype.createEnvironment=function(){var a,c,d,e,f;for(this.objects3d=this.$el.children(),this.$el.html(""),f=this.objects3d,d=0,e=f.length;e>d;d++)a=f[d],b(a).addClass(""+this.settings.cssClasses.object3d);return this.outerConParent=b("
"),this.outerCon=b("
"),c=b("
"),this.transformTarget=b("
"),this.$el.append(this.outerConParent.append(this.outerCon.append(c.append(this.transformTarget.append(this.objects3d))))),this.calculateOuterContainer(),this.calculate3dObjects()},e.prototype.setImageDefaults=function(a){var c;return c=this,a.is("img")?a.one("load",function(){return c.calculatePerspective(a)}).each(function(){return this.complete?b(this).load():void 0}):c.calculatePerspective(a)},e.prototype.calculateOuterContainer=function(){var a,b;return b=this.outerConParent.innerWidth()*this.settings.outerBuffer,a=this.outerConParent.innerHeight()*this.settings.outerBuffer,this.outerCon.css({width:b.toFixed(2),height:a.toFixed(2),left:-((b-this.winW)/2).toFixed(2),top:-((a-this.winH)/2).toFixed(2)})},e.prototype.calculate3dObjects=function(){var a,c,d,e,f;for(e=this.objects3d,f=[],c=0,d=e.length;d>c;c++)a=e[c],f.push(this.setImageDefaults(b(a)));return f},e.prototype.calculatePerspective=function(a){var c,d,e,f,g,h,i,j,k,l;return a=b(a),f=a.index()+1,this.objects3d.length>4&&(f-=this.objects3d.length/2),g=f*this.settings.elementDepth,d=this.getAspectRatio(),e=this.getAspectRatio(a),c=isNaN(e[0])||a.is("div")?d:e,i=(this.outerConParent.innerHeight()*this.settings.outerBuffer).toFixed(2),l=(i*c[0]).toFixed(2),l4&&!this.options.depthOverride&&(i-=this.objects3d.length/2);var n=i*this.options.elementDepth,o=this.getAspectRatio(),s=this.getAspectRatio(t);e=isNaN(s[0])||"div"===t.tagName.toLowerCase()?o:s;var r=(this.outerConParent.offsetHeight*this.options.outerBuffer).toFixed(2),h=(r*e[0]).toFixed(2);h=1.4" - } + "dependencies": {} } diff --git a/package.json b/package.json index 6e7f67e..781b81e 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,14 @@ { "name": "LogosDistort", - "version": "0.1.0", + "version": "0.3.0", + "scripts": { + "start": "gulp serve" + }, "devDependencies": { - "grunt": "^0.4.5", - "grunt-contrib-coffee": "0.6.4", - "grunt-contrib-compass": "1.0.1", - "grunt-contrib-cssmin": "~0.9.0", - "grunt-contrib-imagemin": "^0.9.2", - "grunt-contrib-uglify": "~0.4.0" + "gulp": "^3.9.0", + "gulp-concat": "^2.6.0", + "gulp-plumber": "^1.0.1", + "gulp-uglify": "^1.4.1", + "gulp-webserver": "^0.9.1" } } diff --git a/src/jquery.logosDistort.coffee b/src/jquery.logosDistort.coffee deleted file mode 100644 index 4a02dba..0000000 --- a/src/jquery.logosDistort.coffee +++ /dev/null @@ -1,318 +0,0 @@ -do ($ = jQuery, window, document) -> - - pluginName = "logosDistort" - - defaults = - enable: true #enable the effect - effectWeight: 1 #how much the mouse movement moves the effect - enableSmoothing: true - smoothingMultiplier: 1 - activeOnlyInside: false - outerBuffer: 1.10 #the outside buffer of the effect - elementDepth: 140 - directions: [ - 1 - 1 - 1, 1, -1 - -1, 1, 1 - ] - weights: [ - 0.0000310 #distance from center - 0.0001800 #y plane neg to left, pos to right -> rotational - 0.0000164 #distance from center axis point X and Y - 0.0000019 #1 minus distance from center axis point - 0.0001200 #relative distance from center x plane, top neg, bot pos - ] - container: window - cssClasses: - smartContainer: "ld-smart-container" - overlapContainer: "ld-overlap-container" - parent3d: "ld-3d-parent" - transformTarget: "ld-transform-target" - active: "ld-transform-active" - object3d: "ld-3d-object" - onInit: () -> - onDestroy: () -> - - class Plugin - constructor: (@element, options) -> - @settings = $.extend {}, defaults, options - @_defaults = defaults - @_name = pluginName - - @container = $(@settings.container) - @$el = $(@element) - @winW = @container.innerWidth() - @winH = @container.innerHeight() - @center = @getCenterOfContainer() - @outerCon = null - @outerConParent = null - @transformTarget = null - @objects3d = null - - @mouseX = @mouseY = 0 - @effectX = @effectY = 0 - - @has3dSupport = @has3d() - @paused = false - - @raf = null - @init() - - init: -> - @createEnvironment() - @settings.onInit() - logos = @ - - $(document).on 'mousemove', (e) -> - logos.mouseX = e.pageX - logos.mouseY = e.pageY - - if !logos.settings.enableSmoothing and logos.has3dSupport then logos.draw() - - $(window).on 'resize', () -> - logos.resizeHandler() - - if @has3dSupport then @draw() else console.log "Error: Browser 3d Support Not detected" - - - ##Create the DOM environment - createEnvironment: -> - @objects3d = @$el.children() - @$el.html "" - - $(child).addClass "#{@settings.cssClasses.object3d}" for child in @objects3d - - @outerConParent = $("
") - @outerCon = $("
") - parent3d = $("
") - @transformTarget = $("
") - - @$el.append @outerConParent.append @outerCon.append parent3d.append @transformTarget.append @objects3d - @calculateOuterContainer() - @calculate3dObjects() - - setImageDefaults: (element) -> - logos = @ - - if element.is "img" - element.one "load", () -> - logos.calculatePerspective element - .each () -> if this.complete - $(this).load() - else - logos.calculatePerspective element - - calculateOuterContainer: -> - width = @outerConParent.innerWidth()*@settings.outerBuffer - height = @outerConParent.innerHeight()*@settings.outerBuffer - @outerCon.css - width: width.toFixed(2) - height: height.toFixed(2) - left: -((width-@winW)/2).toFixed(2) - top: -((height-@winH)/2).toFixed(2) - - calculate3dObjects: -> - @setImageDefaults $(child) for child in @objects3d - - calculatePerspective: (ele) -> #Sets the perspective (left, top, depth, height and width) of the 3d elements - ele = $(ele) - - dIndex = ele.index()+1 - - if @objects3d.length > 4 - dIndex = dIndex-(@objects3d.length/2) - - depth = dIndex*@settings.elementDepth - - aspectDevice = @getAspectRatio() - aspectElement = @getAspectRatio ele - - if (isNaN aspectElement[0]) or ele.is "div" - aspect = aspectDevice - else - aspect = aspectElement - - height = (@outerConParent.innerHeight()*@settings.outerBuffer).toFixed(2) - width = (height*aspect[0]).toFixed(2) - - if width < @winW*@settings.outerBuffer - difference = @winW/width - width = (width*difference*@settings.outerBuffer).toFixed(2) - height = (height*difference*@settings.outerBuffer).toFixed(2) - - left = -((width-@winW)/2).toFixed(2) - top = -((height-@winH)/2).toFixed(2) - - ele.attr 'style', "transform: translate3d(#{left}px, #{top}px, #{depth}px); width:#{width}px; height:#{height}px;" - - ### - Drawing Involved Functions - ### - - draw: -> - logos = @ - - if !@settings.enableSmoothing - @effectX = @mouseX - @effectY = @mouseY - - if !@paused - @changePerspective @transformTarget, @effectX, @effectY - - @raf = requestAnimationFrame () -> logos.draw() - - else - setInterval ( - () -> - logos.calculateSmoothing() - logos.changePerspective logos.transformTarget, logos.effectX, logos.effectY - ), 15 - - start: -> - paused = false - @draw() - - stop: -> - paused = true - - #Applies the style of a matrix3d transform on a specific element - changePerspective: (element, appliedX, appliedY) -> - logos = @ - requestAnimationFrame () -> $(element).attr 'style', (logos.calculateTransform appliedX, appliedY) - - calculateTransform: (appliedX, appliedY) -> - transform1 = (@settings.directions[0]*(1 - (@applyTransform (@getDistanceFromCenter appliedX, appliedY), 0)*@settings.effectWeight)).toFixed(5) - transform2 = (@settings.directions[1]*(@applyTransform (@getDistanceFromCenterY appliedX), 1)*@settings.effectWeight).toFixed(5) - transform3 = (@settings.directions[2]*(@applyTransform (@getDistanceFromEdgeCenterAndCenter appliedX, appliedY), 2)*@settings.effectWeight).toFixed(5) - transform4 = (@settings.directions[3]*(1 - (@applyTransform (@getDistanceFromCenter appliedX, appliedY), 3)*@settings.effectWeight)).toFixed(5) - transform5 = (@settings.directions[4]*(@applyTransform (@getDistanceFromCenterX appliedY), 4)*@settings.effectWeight).toFixed(5) - transform6 = (@settings.directions[5]*transform2).toFixed(5) - transform7 = (@settings.directions[6]*transform5).toFixed(5) - transform8 = (@settings.directions[7]*(Math.abs transform4)).toFixed(5) - "transform: matrix3d(#{transform1}, 0, #{transform2}, 0, #{transform3}, #{transform4}, #{transform5}, - 0, #{transform6}, #{transform7}, #{transform8}, 0, 0, 0, 100, 1)" - - applyTransform: (distance, effect) => - distance*@settings.weights[effect] - - ##Get MATHS functions - getDistanceFromCenter: (appliedX, appliedY) -> - @getDistance2d appliedX, appliedY, @center.x, @center.y - - getDistanceFromCenterY: (appliedX) -> - appliedX-@center.x/2 - - getDistanceFromCenterX: (appliedY) -> - appliedY-@center.y/2 - - getDistanceFromEdgeCenterAndCenter: (appliedX, appliedY) -> - fromCenter = @getDistanceFromCenter appliedX, appliedY - fromX = @getDistanceFromCenterX appliedY - fromY = @getDistanceFromCenterY appliedX - -((fromCenter/100)*(fromX/50)*(fromY/50)) #divide by 50 instead of 100 because distance is already div 2 - - ### - Smoothing Functions - ### - - calculateSmoothing: -> - @effectX += (@mouseX - @effectX) / (20*@settings.smoothingMultiplier) - @effectY += (@mouseY - @effectY) / (20*@settings.smoothingMultiplier) - - ### - Basic Support Functions - ### - - getDistance2d: (currX, currY, targetX, targetY) -> - Math.sqrt (Math.pow currX-targetX, 2) + (Math.pow currY-targetY, 2) - - getCenterOfContainer: -> #needs to be patched to account for offset elements - { - x: @winW/2 - y: @winH/2 - } - - getAspectRatio: (ele = window) -> - ele = $(ele) - [ele.innerWidth()/ele.innerHeight(), ele.innerHeight()/ele.innerWidth()] - - ##Default Handler Functions - resizeHandler: -> - @container = $(@settings.container) - @winW = @container.innerWidth() - @winH = @container.innerHeight() - @center = @getCenterOfContainer() - @calculateOuterContainer() - @calculate3dObjects() - - ### - Checks for browser compatibility of 'transform: Matrix3d' - Based on a Gist by Tiffany B. Brown - http://tiffanybbrown.com/2012/09/04/testing-for-css-3d-transforms-support/ - ### - has3d: -> - el = document.createElement 'p' - transforms = - 'WebkitTransform': '-webkit-transform' - 'OTransform': '-o-transform' - 'MSTransform': '-ms-transform' - 'MozTransform': '-moz-transform' - 'transform': 'transform' - support3d = undefined - - document.body.insertBefore el, document.body.lastChild - - for t of transforms - if el.style[t] isnt undefined - el.style[t] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - support3d = window.getComputedStyle el - support3d = support3d.getPropertyValue transforms[t] - document.body.removeChild(el) - if support3d? then support3d isnt 'none' else false - - destroy: -> - @$el.remove() - @hook 'onDestroy' - @$el.removeData "plugin_#{pluginName}"; - - hook: (hookName) -> - if @settings[hookName]? - @settings[hookName].call @element - - $.fn[pluginName] = (options) -> - @each -> - unless $.data @, "plugin_#{pluginName}" - $.data @, "plugin_#{pluginName}", new Plugin @, options - -### -http://paulirish.com/2011/requestanimationframe-for-smart-animating/ -http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating -requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel -CoffeeScript implementation by Mathew Kleppin -MIT license -### - -() -> - lastTime = 0 - vendors = ['ms','moz','webkit','o'] - - vendorSetup = (vendor) -> - window.requestAnimationFrame = window[vendor+'RequestAnimationFrame'] - window.cancelAnimationFrame = window[vendor+'CancelAnimationFrame'] || window[vendor+'CancelRequestAnimationFrame'] - - vendorSetup vendor for vendor in vendors - - if !window.requestAnimationFrame - window.requestAnimationFrame = (callback, element) -> - currTime = new Date().getTime() - timeToCall = Math.max 0, 16 - (currTime - lastTime) - id = window.setTimeout (() -> callback currTime + timeToCall), timeToCall - - lastTime = currTime + timeToCall - - id - - if !window.cancelAnimationFrame - window.cancelAnimationFrame = (id) -> - clearTimeout(id) diff --git a/src/jquery.logosDistort.js b/src/jquery.logosDistort.js index 863d390..11d41db 100644 --- a/src/jquery.logosDistort.js +++ b/src/jquery.logosDistort.js @@ -1,11 +1,38 @@ -// Generated by CoffeeScript 1.8.0 -(function() { - var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; +;(function(win, doc) { + + /** + * Main function to create distortion effect. + * @param element - The element(s) to apply the distortion effect + * @param option - a set of options to override the default settings + */ + function logosDistort(elements, options) { + if (!elements) { + throw new Error('No element provided.'); + } + + this.options = options; + this.elements = elements; + + var _this = this; + + if (this.elements[0]) { + + //Turn our HTMLCollection into an array so we can iterate through it. + this.elements = [].slice.call(this.elements); + + this.elements.forEach(function(ele){ + ele.distort = new Distortion(ele, _this.options); + }); + } else { + this.elements.distort = new Distortion(elements, _this.options); + } + } - (function($, window, document) { - var Plugin, defaults, pluginName; - pluginName = "logosDistort"; - defaults = { + function Distortion(element, options) { + + this._name = 'logosDistort'; + + this.options = { enable: true, effectWeight: 1, enableSmoothing: true, @@ -13,383 +40,538 @@ activeOnlyInside: false, outerBuffer: 1.10, elementDepth: 140, + perspectiveMulti: 1, directions: [1, 1, 1, 1, -1, -1, 1, 1], weights: [0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200], - container: window, + container: win, + depthOverride: false, + mouseMode: 'container', cssClasses: { - smartContainer: "ld-smart-container", - overlapContainer: "ld-overlap-container", - parent3d: "ld-3d-parent", - transformTarget: "ld-transform-target", - active: "ld-transform-active", - object3d: "ld-3d-object" + smartContainer: 'ld-smart-container', + overlapContainer: 'ld-overlap-container', + parent3d: 'ld-3d-parent', + transformTarget: 'ld-transform-target', + active: 'ld-transform-active', + object3d: 'ld-3d-object' }, + beforeInit: function() {}, onInit: function() {}, onDestroy: function() {} }; - Plugin = (function() { - function Plugin(element, options) { - this.element = element; - this.applyTransform = __bind(this.applyTransform, this); - this.settings = $.extend({}, defaults, options); - this._defaults = defaults; - this._name = pluginName; - this.container = $(this.settings.container); - this.$el = $(this.element); - this.winW = this.container.innerWidth(); - this.winH = this.container.innerHeight(); - this.center = this.getCenterOfContainer(); - this.outerCon = null; - this.outerConParent = null; - this.transformTarget = null; - this.objects3d = null; - this.mouseX = this.mouseY = 0; - this.effectX = this.effectY = 0; - this.has3dSupport = this.has3d(); - this.paused = false; - this.raf = null; - this.init(); - } - Plugin.prototype.init = function() { - var logos; - this.createEnvironment(); - this.settings.onInit(); - logos = this; - $(document).on('mousemove', function(e) { - logos.mouseX = e.pageX; - logos.mouseY = e.pageY; - if (!logos.settings.enableSmoothing && logos.has3dSupport) { - return logos.draw(); - } - }); - $(window).on('resize', function() { - return logos.resizeHandler(); - }); - if (this.has3dSupport) { - return this.draw(); - } else { - return console.log("Error: Browser 3d Support Not detected"); - } - }; + this.options.extend(options); + this.element = element; + this.eventCache = []; - Plugin.prototype.createEnvironment = function() { - var child, parent3d, _i, _len, _ref; - this.objects3d = this.$el.children(); - this.$el.html(""); - _ref = this.objects3d; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - child = _ref[_i]; - $(child).addClass("" + this.settings.cssClasses.object3d); - } - this.outerConParent = $("
"); - this.outerCon = $("
"); - parent3d = $("
"); - this.transformTarget = $("
"); - this.$el.append(this.outerConParent.append(this.outerCon.append(parent3d.append(this.transformTarget.append(this.objects3d))))); - this.calculateOuterContainer(); - return this.calculate3dObjects(); - }; + if (this.options.container === 'self') { + this.containerOverride = true; + this.options.container = this.element; + } else { + this.containerOverride = false; + } - Plugin.prototype.setImageDefaults = function(element) { - var logos; - logos = this; - if (element.is("img")) { - return element.one("load", function() { - return logos.calculatePerspective(element); - }).each(function() { - if (this.complete) { - return $(this).load(); - } - }); - } else { - return logos.calculatePerspective(element); - } - }; + this.container = this.options.container; - Plugin.prototype.calculateOuterContainer = function() { - var height, width; - width = this.outerConParent.innerWidth() * this.settings.outerBuffer; - height = this.outerConParent.innerHeight() * this.settings.outerBuffer; - return this.outerCon.css({ - width: width.toFixed(2), - height: height.toFixed(2), - left: -((width - this.winW) / 2).toFixed(2), - top: -((height - this.winH) / 2).toFixed(2) - }); - }; + /* Some dom elements dont have offsetWidth (like window), so we fill that in using innerWidth, etc */ + if (!this.container.offsetWidth) { + this.container.offsetWidth = this.container.innerWidth; + } - Plugin.prototype.calculate3dObjects = function() { - var child, _i, _len, _ref, _results; - _ref = this.objects3d; - _results = []; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - child = _ref[_i]; - _results.push(this.setImageDefaults($(child))); - } - return _results; - }; + if (!this.container.offsetHeight) { + this.container.offsetHeight = this.container.innerHeight; + } - Plugin.prototype.calculatePerspective = function(ele) { - var aspect, aspectDevice, aspectElement, dIndex, depth, difference, height, left, top, width; - ele = $(ele); - dIndex = ele.index() + 1; - if (this.objects3d.length > 4) { - dIndex = dIndex - (this.objects3d.length / 2); - } - depth = dIndex * this.settings.elementDepth; - aspectDevice = this.getAspectRatio(); - aspectElement = this.getAspectRatio(ele); - if ((isNaN(aspectElement[0])) || ele.is("div")) { - aspect = aspectDevice; - } else { - aspect = aspectElement; - } - height = (this.outerConParent.innerHeight() * this.settings.outerBuffer).toFixed(2); - width = (height * aspect[0]).toFixed(2); - if (width < this.winW * this.settings.outerBuffer) { - difference = this.winW / width; - width = (width * difference * this.settings.outerBuffer).toFixed(2); - height = (height * difference * this.settings.outerBuffer).toFixed(2); - } - left = -((width - this.winW) / 2).toFixed(2); - top = -((height - this.winH) / 2).toFixed(2); - return ele.attr('style', "transform: translate3d(" + left + "px, " + top + "px, " + depth + "px); width:" + width + "px; height:" + height + "px;"); - }; + this.width = this.container.offsetWidth; + this.height = this.container.offsetHeight; + this.center = this.getCenterOfContainer(); + this.outerCon = null; + this.outerConParent = null; + this.transformTarget = null; + this.objects3d = null; - /* - Drawing Involved Functions - */ - - Plugin.prototype.draw = function() { - var logos; - logos = this; - if (!this.settings.enableSmoothing) { - this.effectX = this.mouseX; - this.effectY = this.mouseY; - if (!this.paused) { - this.changePerspective(this.transformTarget, this.effectX, this.effectY); - return this.raf = requestAnimationFrame(function() { - return logos.draw(); - }); - } - } else { - return setInterval((function() { - logos.calculateSmoothing(); - return logos.changePerspective(logos.transformTarget, logos.effectX, logos.effectY); - }), 15); + this.mouseX = this.mouseY = 0; + this.effectX = this.effectY = 0; + + this.has3dSupport = this._has3d(); + + this.paused = false; + + this.options.beforeInit(this); + + this.init(); + } + + Distortion.prototype.init = function(){ + var _this = this; + + doc.addEventListener('mouseenter', initMouse, false); + + this.createEnvironment(); + this.options.onInit(); + + + if (this.options.mouseMode === 'container') { + + //bind mouse movement to element + this._addEvent(this.container, 'mousemove', setMousePos); + + } else if (this.options.mouseMode === 'window') { + + //bind mouse movement to window + this._addEvent(window, 'mousemove', setMousePos); + + } else if (this.options.mouseMode === 'magnetic') { + + //bind mouse movement to using the same x and y + this._addEvent(window, 'mousemove', function(e){ + var fromX = Math.abs(e.x - _this.center.x); + var fromY = Math.abs(e.y - _this.center.y); + + if(fromY < (_this.height/2) || fromX < (_this.width/2)) { + _this.mouseX = e.x; + _this.mouseY = e.y; } - }; + }); + } - Plugin.prototype.start = function() { - var paused; - paused = false; - return this.draw(); - }; + this._addEvent(window, 'resize', function(){ + _this.resizeHandler(); + }); - Plugin.prototype.stop = function() { - var paused; - return paused = true; - }; + this.start(); - Plugin.prototype.changePerspective = function(element, appliedX, appliedY) { - var logos; - logos = this; - return requestAnimationFrame(function() { - return $(element).attr('style', logos.calculateTransform(appliedX, appliedY)); - }); - }; + function setMousePos(e) { + _this.mouseX = e.x; + _this.mouseY = e.y; + } - Plugin.prototype.calculateTransform = function(appliedX, appliedY) { - var transform1, transform2, transform3, transform4, transform5, transform6, transform7, transform8; - transform1 = (this.settings.directions[0] * (1 - (this.applyTransform(this.getDistanceFromCenter(appliedX, appliedY), 0)) * this.settings.effectWeight)).toFixed(5); - transform2 = (this.settings.directions[1] * (this.applyTransform(this.getDistanceFromCenterY(appliedX), 1)) * this.settings.effectWeight).toFixed(5); - transform3 = (this.settings.directions[2] * (this.applyTransform(this.getDistanceFromEdgeCenterAndCenter(appliedX, appliedY), 2)) * this.settings.effectWeight).toFixed(5); - transform4 = (this.settings.directions[3] * (1 - (this.applyTransform(this.getDistanceFromCenter(appliedX, appliedY), 3)) * this.settings.effectWeight)).toFixed(5); - transform5 = (this.settings.directions[4] * (this.applyTransform(this.getDistanceFromCenterX(appliedY), 4)) * this.settings.effectWeight).toFixed(5); - transform6 = (this.settings.directions[5] * transform2).toFixed(5); - transform7 = (this.settings.directions[6] * transform5).toFixed(5); - transform8 = (this.settings.directions[7] * (Math.abs(transform4))).toFixed(5); - return "transform: matrix3d(" + transform1 + ", 0, " + transform2 + ", 0, " + transform3 + ", " + transform4 + ", " + transform5 + ", 0, " + transform6 + ", " + transform7 + ", " + transform8 + ", 0, 0, 0, 100, 1)"; - }; + function initMouse(e) { + _this.mouseX = e.x; + _this.mouseY = e.y; - Plugin.prototype.applyTransform = function(distance, effect) { - return distance * this.settings.weights[effect]; - }; + doc.removeEventListener('mouseenter', initMouse, false); + } + }; - Plugin.prototype.getDistanceFromCenter = function(appliedX, appliedY) { - return this.getDistance2d(appliedX, appliedY, this.center.x, this.center.y); - }; + Distortion.prototype.start = function() { + var _this = this; - Plugin.prototype.getDistanceFromCenterY = function(appliedX) { - return appliedX - this.center.x / 2; - }; + this.paused = false; - Plugin.prototype.getDistanceFromCenterX = function(appliedY) { - return appliedY - this.center.y / 2; - }; + if (this.has3dSupport) { + this.drawInterval = setInterval(function() { + _this.draw(); + }, 15); + } + }; - Plugin.prototype.getDistanceFromEdgeCenterAndCenter = function(appliedX, appliedY) { - var fromCenter, fromX, fromY; - fromCenter = this.getDistanceFromCenter(appliedX, appliedY); - fromX = this.getDistanceFromCenterX(appliedY); - fromY = this.getDistanceFromCenterY(appliedX); - return -((fromCenter / 100) * (fromX / 50) * (fromY / 50)); - }; + Distortion.prototype.stop = function() { + this.paused = true; + clearInterval(this.drawInterval); + }; - /* - Smoothing Functions - */ + Distortion.prototype.draw = function() { + var _this = this; - Plugin.prototype.calculateSmoothing = function() { - this.effectX += (this.mouseX - this.effectX) / (20 * this.settings.smoothingMultiplier); - return this.effectY += (this.mouseY - this.effectY) / (20 * this.settings.smoothingMultiplier); - }; + if (this.effectX === this.mouseX || this.effectY === this.mouseY) { + return; + } + + if (!this.options.enableSmoothing) { + this.effectX = this.mouseX; + this.effectY = this.mouseY; + } else { + this.effectX += (this.mouseX - this.effectX) / (20*this.options.smoothingMultiplier); + this.effectY += (this.mouseY - this.effectY) / (20*this.options.smoothingMultiplier); + } + if (!this.paused) { + this.changePerspective(this.transformTarget, this.effectX, this.effectY); + } + }; - /* - Basic Support Functions - */ + Distortion.prototype.changePerspective = function(element, appliedX, appliedY) { + var _this = this; - Plugin.prototype.getDistance2d = function(currX, currY, targetX, targetY) { - return Math.sqrt((Math.pow(currX - targetX, 2)) + (Math.pow(currY - targetY, 2))); - }; + requestAnimationFrame(function(){ + element.setAttribute('style', _this.generateTransformString(appliedX, appliedY)); + }); + }; - Plugin.prototype.getCenterOfContainer = function() { - return { - x: this.winW / 2, - y: this.winH / 2 - }; - }; + Distortion.prototype.generateTransformString = function(appliedX, appliedY) { + var _transforms = this.calculateTransform(appliedX, appliedY); - Plugin.prototype.getAspectRatio = function(ele) { - if (ele == null) { - ele = window; - } - ele = $(ele); - return [ele.innerWidth() / ele.innerHeight(), ele.innerHeight() / ele.innerWidth()]; - }; + var _transformString = 'transform: matrix3d(' + + _transforms[0]+ ', 0, ' + _transforms[1] + ', 0, ' + + _transforms[2] + ', ' + _transforms[3] + ', ' + _transforms[4] + ', 0, ' + + _transforms[5] + ', ' + _transforms[6] + ', ' + _transforms[7] + ', 0, ' + + '0, 0, 100, 1)'; - Plugin.prototype.resizeHandler = function() { - this.container = $(this.settings.container); - this.winW = this.container.innerWidth(); - this.winH = this.container.innerHeight(); - this.center = this.getCenterOfContainer(); - this.calculateOuterContainer(); - return this.calculate3dObjects(); - }; + return _transformString; + }; + Distortion.prototype.calculateTransform = function (appliedX, appliedY) { + var _transforms = []; + var _directions = this.options.directions; + var _temp; - /* - Checks for browser compatibility of 'transform: Matrix3d' - Based on a Gist by Tiffany B. Brown - http://tiffanybbrown.com/2012/09/04/testing-for-css-3d-transforms-support/ - */ - - Plugin.prototype.has3d = function() { - var el, support3d, t, transforms; - el = document.createElement('p'); - transforms = { - 'WebkitTransform': '-webkit-transform', - 'OTransform': '-o-transform', - 'MSTransform': '-ms-transform', - 'MozTransform': '-moz-transform', - 'transform': 'transform' - }; - support3d = void 0; - document.body.insertBefore(el, document.body.lastChild); - for (t in transforms) { - if (el.style[t] !== void 0) { - el.style[t] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; - support3d = window.getComputedStyle(el); - support3d = support3d.getPropertyValue(transforms[t]); - } - } - if (support3d != null) { - return support3d !== 'none'; - } else { - return false; - } - }; + var _fromCenter = this.getDistanceFromCenter(appliedX, appliedY); + var _fromX = this.getDistanceFromCenterX(appliedY); + var _fromY = this.getDistanceFromCenterY(appliedX); - Plugin.prototype.destroy = function() { - $elem = this.$el; - var images = $elem.find('img'); - $elem.empty(); - images.each(function(){ - $(this).removeClass(); - $(this).removeAttr('style'); - $elem.append($(this)); - }); - this.hook('onDestroy'); - return this.$el.removeData("plugin_" + pluginName); - }; + var _fromCenterAndEdge = this.getDistanceFromEdgeCenterAndCenter(_fromCenter, _fromX, _fromY); - Plugin.prototype.hook = function(hookName) { - if (options[hookName] != null) { - return options[hookName].call(this.element); - } - }; + // Lets add our transforms to the array - return Plugin; + //1 + _transforms.push(_directions[0] * (1 - (this.applyTransform(_fromCenter, 0) * this.options.effectWeight))); - })(); - return $.fn[pluginName] = function(options) { - return this.each(function() { - if (typeof options === "string") { - var args = Array.prototype.slice.call(arguments, 1), - plugin = $.data(this, 'plugin_' + pluginName); - plugin[options].apply(plugin, args); - } - else if (!$.data(this, "plugin_" + pluginName)) { - return $.data(this, "plugin_" + pluginName, new Plugin(this, options)); - } - }); + //2 + _transforms.push(_directions[1] * (this.applyTransform(_fromY, 1) * this.options.effectWeight)); + + //3 + _transforms.push(_directions[2] * (this.applyTransform(_fromCenterAndEdge, 2) * this.options.effectWeight)); + + //4 + _transforms.push(_directions[3] * (1 - (this.applyTransform(_fromCenter, 3) * this.options.effectWeight))); + + //5 + _transforms.push(_directions[4] * (this.applyTransform(_fromX, 4) * this.options.effectWeight)); + + //6 + _transforms.push(_directions[5] * _transforms[1]); + + //7 + _transforms.push(_directions[6] * _transforms[4]); + + //8 + _transforms.push(_directions[7] * Math.abs(_transforms[3])); + + _transforms.forEach(function(transform, index){ + _transforms[index] = transform.toFixed(5); + }); + + return _transforms; + }; + + Distortion.prototype.applyTransform = function(distance, effect) { + return distance * this.options.weights[effect]; + }; + + Distortion.prototype.getDistanceFromCenter = function (appliedX, appliedY) { + return this.getDistance2d(appliedX, appliedY, this.center.x, this.center.y); + }; + + Distortion.prototype.getDistanceFromCenterY = function(appliedX) { + return appliedX - this.center.x/2; + }; + + Distortion.prototype.getDistanceFromCenterX = function(appliedY) { + return appliedY - this.center.y/2; + }; + + Distortion.prototype.getDistanceFromEdgeCenterAndCenter = function(fromCenter, fromX, fromY) { + + //divide by 50 instead of 100 because distance is already divided by 2 + return -((fromCenter/100) * (fromX/50) * (fromY/50)); + }; + + + Distortion.prototype.getDistance2d = function (currX, currY, targetX, targetY) { + return Math.sqrt(Math.pow(currX - targetX, 2) + (Math.pow(currY - targetY, 2))); + }; + + Distortion.prototype.createEnvironment = function() { + var _env = doc.createDocumentFragment(); + var _this = this; + + this.objects3d = this.element.children; + this.objects3d = [].slice.call(this.objects3d); + + this.element.innerHTML = ''; + + this.objects3d.forEach(function(child){ + child.classList.add(_this.options.cssClasses.object3d); + }); + + this.outerConParent = doc.createElement('div'); + this.outerCon = doc.createElement('div'); + this.parent3d = doc.createElement('div'); + this.transformTarget = doc.createElement('div'); + + this.objects3d.forEach(function(child){ + _this.transformTarget.appendChild(child); + }); + this.parent3d.appendChild(this.transformTarget); + this.outerCon.appendChild(this.parent3d); + this.outerConParent.appendChild(this.outerCon); + _env.appendChild(this.outerConParent); + + this.outerConParent.classList.add(this.options.cssClasses.smartContainer); + this.outerCon.classList.add(this.options.cssClasses.overlapContainer); + this.parent3d.classList.add(this.options.cssClasses.parent3d); + + var perspective = 9000 * this.options.perspectiveMulti; + + this.parent3d.setAttribute('style', 'perspective: ' + perspective + 'px;'); + + this.transformTarget.classList.add(this.options.cssClasses.transformTarget, this.options.cssClasses.active); + + this.element.appendChild(_env); + + this.calculateOuterContainer(); + this.calculate3dObjects(); + }; + + Distortion.prototype.calculateOuterContainer = function() { + var width = this.outerConParent.offsetWidth * this.options.outerBuffer; + var height = this.outerConParent.offsetHeight * this.options.outerBuffer; + + this.outerCon.setAttribute('style', + 'width:' + width.toFixed(2) + 'px; ' + + 'height:' + height.toFixed(2) + 'px; ' + + 'left: -' + ((width - this.width) /2).toFixed(2) + 'px; ' + + 'top: -' + ((height - this.height) /2).toFixed(2) + 'px;' + ); + }; + + Distortion.prototype.calculate3dObjects = function() { + var _this = this; + + this.objects3d.forEach(function(node){ + _this.setImageDefaults(node); + }); + }; + + Distortion.prototype.setImageDefaults = function (element) { + var _this = this; + + if (element.tagName.toLowerCase() === 'img') { + + doc.addEventListener('DOMContentLoaded', function() { + return _this.calculatePerspective(element); + }, false); + + if (element.complete) { + _this.calculatePerspective(element); + } + } else { + _this.calculatePerspective(element); + } + }; + + Distortion.prototype.calculatePerspective = function(node) { + var index = Array.prototype.indexOf.call(node.parentNode.childNodes, node); + var aspect; + + /* + If we have a lot of elements in the array, for performance considerations, + we want to halve the depth. There is an override to stop this, but caution, + performance will be much worse. + */ + if(this.objects3d.length > 4 && !this.options.depthOverride) { + index = index - (this.objects3d.length / 2); + } + + var depth = index * this.options.elementDepth; + + var aspectDevice = this.getAspectRatio(); + var aspectElement = this.getAspectRatio(node); + + if (isNaN(aspectElement[0]) || node.tagName.toLowerCase() === "div") { + aspect = aspectDevice; + } else { + aspect = aspectElement; + } + + var height = (this.outerConParent.offsetHeight*this.options.outerBuffer).toFixed(2); + var width = (height * aspect[0]).toFixed(2); + + /* + If calculated width is less then the outerBuffer width, + i.e. element uses a height heavy aspect ratio, like on mobile, + we want to re-calculate everything using some more height-friendly maths. + */ + if (width < (this.width * this.options.outerBuffer)) { + difference = this.width / width; + width = (width * difference * this.options.outerBuffer).toFixed(2); + height = (height * difference * this.options.outerBuffer).toFixed(2); + } + + var left = -((width - this.width )/2).toFixed(2); + var top = -((height - this.height)/2).toFixed(2); + + node.setAttribute('style', + 'transform: translate3d(' + + left + 'px, ' + + top + 'px, ' + + depth + 'px);' + + 'width: ' + width + 'px; ' + + 'height: ' + height + 'px; ' + + 'z-index: ' + (index + 1) + ';' + ); + }; + + Distortion.prototype.getCenterOfContainer = function() { + this.rect = this.element.getBoundingClientRect(); + + return { + x: this.rect.left + (this.width/2), + y: this.rect.top + (this.height/2), }; - })(jQuery, window, document); + }; + Distortion.prototype.getAspectRatio = function(ele) { - /* - http://paulirish.com/2011/requestanimationframe-for-smart-animating/ - http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating - requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel - CoffeeScript implementation by Mathew Kleppin - MIT license - */ + // Fixes bug where content was always sized to window, use container instead! + if (!ele) { + ele = this.options.container; + } + + return [ + ele.offsetWidth / ele.offsetHeight, + ele.offsetHeight / ele.offsetWidth + ]; + }; + + Distortion.prototype.getDistance2d = function (currX, currY, targetX, targetY) { + return Math.sqrt( + (Math.pow(currX - targetX, 2)) + (Math.pow(currY - targetY, 2)) + ); + }; + + Distortion.prototype.resizeHandler = function() { + + if(this.container.innerWidth && this.container.innerWidth !== this.container.offsetWidth) { + this.container.offsetWidth = null; + } + + if(this.container.innerHeight && this.container.innerHeight !== this.container.offsetHeight) { + this.container.offsetHeight = null; + } + + if (!this.container.offsetWidth) { + this.container.offsetWidth = this.container.innerWidth; + } - (function() { - var lastTime, vendor, vendorSetup, vendors, _i, _len; - lastTime = 0; - vendors = ['ms', 'moz', 'webkit', 'o']; - vendorSetup = function(vendor) { - window.requestAnimationFrame = window[vendor + 'RequestAnimationFrame']; - return window.cancelAnimationFrame = window[vendor + 'CancelAnimationFrame'] || window[vendor + 'CancelRequestAnimationFrame']; + if (!this.container.offsetHeight) { + this.container.offsetHeight = this.container.innerHeight; + } + + this.width = this.container.offsetWidth; + this.height = this.container.offsetHeight; + this.center = this.getCenterOfContainer(); + + this.calculateOuterContainer(); + this.calculate3dObjects(); + }; + + Distortion.prototype._has3d = function(){ + var el = document.createElement('p'); + var transforms = { + 'WebkitTransform':'-webkit-transform', + 'OTransform':'-o-transform', + 'MSTransform':'-ms-transform', + 'MozTransform':'-moz-transform', + 'transform':'transform' }; - for (_i = 0, _len = vendors.length; _i < _len; _i++) { - vendor = vendors[_i]; - vendorSetup(vendor); + var has3d; + var t; + + /* Add it to the body to get the computed style. */ + document.body.insertBefore(el, document.body.lastChild); + + for(t in transforms){ + if( el.style[t] !== undefined ){ + el.style[t] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; + has3d = window.getComputedStyle(el).getPropertyValue( transforms[t] ); + } } - if (!window.requestAnimationFrame) { - window.requestAnimationFrame = function(callback, element) { - var currTime, id, timeToCall; - currTime = new Date().getTime(); - timeToCall = Math.max(0, 16 - (currTime - lastTime)); - id = window.setTimeout((function() { - return callback(currTime + timeToCall); - }), timeToCall); - lastTime = currTime + timeToCall; - return id; - }; + + /* Remove used element from body. */ + el.parentNode.removeChild(el); + + if( has3d !== undefined ){ + return has3d !== 'none'; + } else { + return false; } - if (!window.cancelAnimationFrame) { - return window.cancelAnimationFrame = function(id) { - return clearTimeout(id); - }; + }; + + Distortion.prototype._addEvent = function(element, type, fn) { + element.addEventListener(type, fn, false); + + this.eventCache.push({element: element, type: type, fn: fn}); + }; + + Distortion.prototype.clearEvents = function() { + this.eventCache.forEach(function(e){ + e.element.removeEventListener(e.type, e.fn, false); + }); + }; + + Distortion.prototype.destroy = function() { + this.clearEvents(); + this.element.parentNode.removeChild(this.element); + this.hook('onDestroy'); + + if (this.element.removeData) { + this.element.removeData('plugin_'+this._name); } - }); + }; -}).call(this); + Distortion.prototype.hook = function(hookName) { + if(this.options[hookName]){ + this.options[hookName].call(this.element); + } + }; -//# sourceMappingURL=jquery.logosDistort.js.map + Object.prototype.extend = function(obj) { + for (var i in obj) { + if (obj.hasOwnProperty(i)) { + this[i] = obj[i]; + } + } + }; + + // export + win.logosDistort = logosDistort; + + if (jQuery && jQuery.fn) { + jQuery.fn.logosDistort = function(options) { + return this.each(function() { + if (!jQuery.data(this, 'plugin_logosDistort')) { + jQuery.data(this, 'plugin_logosDistort', new logosDistort(this, options)); + } + }); + }; + } + +})(window, document); + +(function() { + var lastTime = 0; + var vendors = ['webkit', 'moz']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = + window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + + if (!window.cancelAnimationFrame) + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; +}()); diff --git a/src/jquery.logosDistort.js.map b/src/jquery.logosDistort.js.map deleted file mode 100644 index 888ec54..0000000 --- a/src/jquery.logosDistort.js.map +++ /dev/null @@ -1,10 +0,0 @@ -{ - "version": 3, - "file": "jquery.logosDistort.js", - "sourceRoot": "", - "sources": [ - "jquery.logosDistort.coffee" - ], - "names": [], - "mappings": "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" -} \ No newline at end of file diff --git a/src/css/perspectiveRules.css b/src/perspectiveRules.css similarity index 78% rename from src/css/perspectiveRules.css rename to src/perspectiveRules.css index 2000297..fab5755 100644 --- a/src/css/perspectiveRules.css +++ b/src/perspectiveRules.css @@ -1,4 +1,4 @@ -/* line 1, ../_scss/perspectiveRules.scss */ + .ld-smart-container { position: absolute; z-index: 2; @@ -6,7 +6,7 @@ height: 100%; overflow: hidden; } -/* line 8, ../_scss/perspectiveRules.scss */ + .ld-smart-container .ld-3d-parent { width: 100%; height: 100%; @@ -14,8 +14,9 @@ transform-style: preserve-3d; perspective: 9000px; opacity: 1; + position: relative; } -/* line 17, ../_scss/perspectiveRules.scss */ + .ld-smart-container .ld-transform-target { position: relative; -webkit-transform-style: flat; @@ -26,7 +27,7 @@ pointer-events: none; transform-style: preserve-3d; } -/* line 28, ../_scss/perspectiveRules.scss */ + .ld-smart-container .ld-3d-object { position: absolute; pointer-events: none; @@ -38,5 +39,3 @@ backface-visibility: hidden; perspective: 1000; } - -/*# sourceMappingURL=perspectiveRules.css.map */