Kaleisdoscope

HTML
<!--if you click on it, it'll change speed--> <!--if you want to use the drag and drop option head over my codepen, codepad won't allow me to add the function in the html for some reason--> <div id="kalos"> <div class="kaleidoscope"> </div> <nav id="floating"> <ul> <li><span id="fullscreen">Fullscreen</span></li> </ul> </nav> </div>
SCSS
$default-prefixes: webkit moz ms o; @mixin prefix-values($property, $value, $prefixes: $default-prefixes) { @each $prefix in $prefixes { -#{$prefix}-#{$property}: #{$value}; } #{$property}: #{$value}; } @mixin transform-origin ($x: left, $y: top) { $values: #{$x} #{$y}; @include prefix-values('transform-origin', $values); } @mixin transform-rotate ($degrees) { $value: rotate($degrees); @include prefix-values('transform', $value); } @mixin transform-mirror-rotate ($degrees) { $values: scale(-1, 1) rotate($degrees); @include prefix-values('transform', $values); } body { margin: 0; padding: 0; overflow: hidden; background-color: #111; font-family: sans serif; font-size: 10pt; } .kaleidoscope { width: 100%; height: 100%; .tile { display: none; position: absolute; top: 50%; left: 0; z-index: 0; overflow: hidden; height: 100%; width: 50%; @include transform-origin(right, top); .image { position: relative; top: 0; left: 100%; height: 100%; width: 100%; background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxITEhUTExMVFhUXFRUYFxcXGBkXFRkVGBcWFxcYGBcYHiogGBolGxcWITEiJikrOi4vGh8zODMtOCgtLisBCgoKDg0OGxAQGzAlICYvLS8tLS0tLy0tMi0tLS0tLy8vLS0tLS0rLS0tLS0tLS0vLS0tLS0tLS0tLS0tLS0tLf/AABEIAK4BIgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAADBAIFBgcBAP/EAEYQAAIBAwMDAgMFBAYHBwUAAAECEQMSIQAEMQUiQRNRBjJhI0JxgZEUUqGxYpLB0eHwBxUzQ3KC0hYXJFNjk/E0RFSi4//EABkBAAMBAQEAAAAAAAAAAAAAAAABAgQDBf/EADMRAAICAQIFAgQDCAMAAAAAAAABAhEDEiEEEzFBUWGhFDJxgSKx0QVCUmKRweHwFSMz/9oADAMBAAIRAxEAPwDRhNfWaMF17br3bMtALdfFdGt19bosVC9uvCujldRK6qxUAK6iV0wV1Erp2IXI1ArpgrqJXVJioWZdQK6ZK6Gy6pMloXZdDZdMldQK6pMTQqyaGU00y6Gy6tMmhRk0Nk00y6Gy6qyGhVl1Arpll1ArqrIaFyuokaOV1C3RYqAxqJGjFdRK6AoERqNujEajGkFAo1GNGI15boHQEjUG/ED6kFgPqVGWH0HOjsuoOpjtunxbF0+LZxdPE+dTP5WVHqisFQmqkvXqdp7nRaKeflpAYBjHtj31YOOD/mR/kaql2VRK1P1EIMEfaVg9UHum4KYLHHI4geNXCjBH5/p/hOsXAf8Al9zvxHzgSNRK6KRryNbjOBI14RoxGokaTAFbr7RLdfaQzqQXXoGpjUo1gN4ONfW6JGvrdAgRXUSuj268t0WAuU1AppkrqJXVJiFimolNMldQK6pMmhYpqBTTJXUSuqsVChTQ2TTbLqBXVKQqE2TQ2TTjLoTJq0yWhRk0Nk02U1Bk1SZLQmV0Mpptk1ApqrIoUZNDK6bK6gU07JoVK68I0crqJXTFQArqJXR7deFNFjoXt15Gj26jboCgJXUHpk4UEk4ABKkk8AMMr+I40cjQ6yiDIDCDIYwpEcMYMD3xqZ/Kyorcz7bUU61ERtqeLQiuarjLYDGfvE5DDM6uwNVKVGNVFCbelZyKdMmQSTajHMQRM+TOZjV1brHwCrG16nfiN5A3TP8AL8NQK6YIx+H8j/j/AD1ArrcZ6AldRK6OV1AjQKgUa+0SNfaQ6OoBdSs0ULr23XmWb6BW6+jRrdfW6NQUBjXkaNZrwposQGNeEaMU14U07AAV1Ero5XUSuqsVC5XUCumSuolNVZNCxXUCumWp6gaemmKhVk0Nk00yagV1aYqFGTQ2TThXQ2TVKQqFGTQzT04U1App6iaE2p6gaenCmolNVqFpEjT0NqenzT1A09NSFpEDT1Arp5qehtT1SkLSKW6iV0y1PQ2WP840akFCzCOdSTbs3yicwPJJxwBk8jgHke+h/sjbpztqdtzI83EhQIIJaATI8LGDkxABye06lv8AZepTp1HsDFXWWtJRiMMOM8fy15ub9pRjJxh/Xsb8f7PyOKk19u5cfETUKG5xRrh0ADGowMqQALUEKvPy+BjTGw3a1VuUECYzGfrg8apNv8R0ZmptyCeSsQT5JKkE/pqy2vXthmL6bHyTUI/SoY1y4XiVj2vYnNhk93FplmozqDLpYdW25+XcUj/xEKf56P8AtKkAgq0yMMORE/iYKn89eiuKxPuZHikfEaiRqd/9H9DqJb+if4f366c/G+5LhIjbr7Up+h/h/fr7RzYeQ0M6rbr23TAp699PXl6jfQvGvo0x6evvT0ahULxr6NO0tkWBI8ePP6a8pbIsDDCfYyMe+lrQUxKNeFdMNtyORHjOmKfTHaCCpHuDMabml1YtJWka8jVsnSGzcY9jyPz9tL7rp1RCMXT5XOmssW6sHFiBXUSmmKlFlMEQdN7fpNRs8D66pzSVtiplUaevv2dvY/prVbTplNMnuPufH4DT5OuEuLp7IrlmAZNDKa2HVNrRc9xteCQ3uBz9GA/hqg3ewZM4K+GXI/w12x51L0JcKKs09DNPTpTUCmu+ojSJNT0Mpp809QNPVaxaRApqJTTxp6gaWnqFpEimolNOGlqJp6eoNIk9OORpXcVAvP8AjH4DP8NS6vsarf7KAZEmQLh5U8x+MHWfHRNzUUm+nhiB87dym1jDgACQ3g4PnnWPJxWVNqEGbsfBY2lKeRK/u/uH3PWkAlcgcnxyBz5EsonxIxqi3/XyTF35LnIaCCwjlRMpgyJHMWbfCRnvapUA8BlW5iFGJm1QAASZJt44J8XoHplWG3uirT5hru8digt2qeLm5ngA68/NPip/Pdex6nD4+CxtaKb9f9/sZzb7iuXVqN4M2KUlfmJhSyxJgxnwB4GrXrHwtVFKrXqhVZJN6sZfIyUK/XOR+erj4j6ruENOm1OnRItqoAbyLSyiSBaMziNe9U2itsjWrbl2qPRDKjOq0wSVGVAjz51kUevobZNvTJ9H9/f/ACZKh0+u6LU9UNcg+dboBHGZ0nX21RSARRNpz2sLszkqJI8c8aa2u3o+mpLsrQJipGf11L9nTxXq/wDuTq0jDLNPyV46ZVKyEQyQQQxGMyIP1j9NQbb9rg0RCuBlwAGIFxLcEdoxjke2rT9nbxuKn5wf7NOdF6Q1QVGNUn7Qj5QDIXmRnNwwI410x4pTemJxyZklczOrsoKzSZZ5IdRJzAQkxxb7+fw1I7WrIEVFaTI9QTbiCO4E+f4a2lLoCCZLEkCYNufJ7YJn2YtppOnUlBARQDyI7f6vA1uh+z8r6ujLLi8XaN/ZGAfZ7mTArROJdpjxMHXuuiejrzXf/jv52cvjF/Avb9Dr4p6Im2JGM/z01SemB86H8wf7dC/1hS+6yk+wOf8AA/TWJzYUA9E+2mU2AgS2TpZ+oUgwW4yTHBb88D9faDpLdfF22pMy21iUAutpMcHMkmABAJn8dV+KXyiaS6l5R24HBEEj+Gj4mBA1lqXxitRbqW3qAYCmrFNWmcqVD448ZnGqrqPxPvpBK7OguINRy5kzjtMz2n7v4TBgWGcnT/MTkkjd7iD2mIwfznGiiFHgD6a4pufivfOSPWxJyiIoInkGwN+udV286puauKlao49mdiv6TGtK4CT6yRyefwmdt3vXNrSH2temv9EsLv6oyf01m99/pD2qkin6lSRAhQoH4Fs/w1ysUoGdeMMeR+Aif79docDiXV2Q80/B1DZ/HG1CmpUkOeKagvUMRz91fzjVmPjnaFbrmmJtIAyfFxMfocedccZLRgZ+p1FlYifH6/wGqlwWJ92HNmux1T/vD25qBBcE8vEAEke4kgCfA04PjKkqgVWW6LiUysQrKFz3EhrR9QfGdcbakf10T1CFCnwTEgzkzH4TJ/EnQ+CxdhRzz7o6nueq0aoBG49B0ub7Xtpv6lzAAGQSpIyJOCIgzqpo/E9Oj2msH/esVyvnAYweY8Yzk8nnbVNQLn/DVLhYraxPO+yOoUuv7aoYvUezTb+TIQP1Efhp1AGFykMPcGR/8a5StMRN0GNeUqrcAx+cafIS6MrmeUdWKaiU1zqj1ausWVmxwJP6QedPUvindAQSpPuyZ/Dtj+WpeKQ9aNoU1ErrNJ8YuuHoqfcqxX+DA6stp8U7Z8Esh/pLj9Vn+Malxkuw9UehYFdRK6lQ3tGoYSojH2DCf050d1icH+38tTqoqhQpqBp6OtZDwwP4EY/H2Ovmr0V+eqij6kDU86KFQju5VGYCSBMRMx9JH89UVbqNcrmlYfs2UsQguDK0TUMGI+mtBverdPsKvUYg/uNUB/WnB/iNUdbr3TqQ+x2SNAm6rBUAkCZYsYkjmNY8/E3snRt4bHLtC39Cn6w3rOalWtRQKoAJLlgpYRlWZASTEXRkfWTbjZ1X25VVr1ACrLNtMCBHYBUkjk4F2SJjGvqNF+p13oPVp0raTMFCQiqbVhVBABIcdxJP1jGsH0zqO525/wDD1XUDJA7kH4qZA1jU43ZvnDO46VX07rx6Bq1MqxDGqpEyCDMn3Egz+Ok6kAk3OZ/o/wD9daKr8TbtkHr7WjWWJBKMDB9mBMflGqfe7wFj/wCFNOB3LczRmJ7gCOQMnXS8b7mXTnX7pXs6kQXP4lB7z4Y6e2e9tVgtRfLHtgwTTHzBCRgN+ulmrp5psP0/v17tqqEkWkdr8wMBGPv9P1jTWldGc3zH1j7Gk+F+oo1Ry1VfZAziRhZAuRT4nGM8E51q1WeMj6Z1y9K9Ifdb9B/fqSbmkDILKfwM/wD6634eKUI09/uZp4ZN3XsdO9PX2ubf6z/9Wp+tTX2u3xsf9ZHIl4O09J3tNaQaiEp0SAFllvuDMJJfMSbbgfwAjQ/9eLUW5SVRg/I7WKCWlywloB455OBGqbp3w4z06nqsKa3BT9oAVAVgRU7+O5ZFvMGMabT4aXb0qjUqtCpbSm53Lsr9x7BFq4iOPwxnBJLffc1JvxseUqjsZJdqkoFZalUOASAZ5LIJB57oELjGl2e0Sghqovd5imPWyFkWxluSQSY7sGDFLU61VdfRcBGWp3i5rfTQn7W5uQGCmAPYyckIVOqVCzPTOVDqHdbTYxXIkAeJ7hiY5EltyewUluaTqZLZmokugtKlgQttyBZUng5gz9fGN6/0z0KYqhWKhyhYTzmCxYCPliQInzPJut7avWJb1BVIGVpuGUMcmEWHMAx55OeQCUd5VpqaNW+4xEBlcFgLRg5MRAMGG/COmNyhumc5JS2M3R3gbyf5fro67tQItH9v+Gp7rp4WF9KoMiSwIMHHDEzJH00vU6dVdC8Oqj92CLcgMfJBIP8AHWh5Wzly2go3Inj8hOpjcr7H8idJ1OkLwa5B9z7+QRHj+P0OB5S6TTwXrRcMQZjkDNokSOP10uY30FpaHl3ST5/XXjNTmQSNDo7FI+cmB5C5yDBI8gfXyPzg+zZGgozkgGCIUfn+v8YmNS8skVosO1dfNQx+I/x14ChETP0n+wDUFpmYj0xAOeD5POf01N6B4NRlwCMCJ8Z/dkczpc6Y+WCFBPMj8M/zOiFKcRf+WY/gdMbrpoSRLyLSWcqMGfABEwB55OfE+09jTKEXZJgEsAABkktOMRj66OfPyLkpdhRaNLy4x9DopSnHawP/AC/4D+eiV+ngEi+bYErcRMAz82R4wfOhHp8kqriQR7kn+tI5P+ZGjnzGsSXY8px7A/5+h0YVh5B/Qf36hR6TUckSkqMyBExMT4ODMA59p1Kh0qsSQvosRAkPOTJgwucA/pxpPNMSgwqMjc4/Ex+Wg1ECq3fH8fpMCBp89Er2yDTETMZ4OYkrMDP6e+kep0iiCWVgyg3KTAzADEEg5meePprhxHFyhjbLWPfcV6bXDqbr27jBw0ZOARk4hvz40xt9+UW9XYQflBYDtIMED39pPOstsX+0A7u0QBaGMr5gt9Gz/kv72qbSCVHe0MQymCZ/IwfA5OvN+IzKOlSe42ld0X3UtytV7yzKzWm0khiJtJCtBGDxz2/XMW6asXFzB94+v1+v8Bqj3G7SA3c0qe1bSuIkXnuPPg/yjT+23KVNsiG0OWtwxLPgnOYBH5cgZydLDk0xeqN/U0S4nNJ/N/YsU6ULSQwluMAmO35fYyi5z5gC4zLYUKi1lspisStTs7UAlgxMsf3iTmcnEaPvUcILVuyO0KxJQmGbEYBPOp7JqtKutS1rQrIbkaIwbswSSQBzxq45YyjvGr8djVi5s3bdr1+gp1TrrJXUPQRWolpQ1FPzoDyBHBBxOpdbpbsbGoHVPTtkuXBqEM4ZRCqFMSB4wNVPxBTarXq1bT3lR5HyoF4ho+UeTz441afEHXTU2opArD202W0hxbDEghyT8vhT741MaepX9D0JY4wUJUvXrt7/AFM9sau5FGnbTplbVg3EGI869avuf/KT+vqq23WbURZ4UDgeB57/AOwa8PXDMSPxx/166I86V+CzO43GPsFxx9oMfhjGobPavXrpTekEBWoTDIQAbFaoQYmBH1P5arh1w5z/AC/6tS6f1n7VWJA7GX3yxQe88j/DnTVXuRJujZbr4R26E31WJY5UKhYg57sfNObjA4xpdPh7bKRetSAGWSV7hBUA2oLSAfBH11V1ut5RO1rr8h1YqFE/7t2BnODq+2u5pOsMoU8RHlsciOM8GP7HLjIRjtj+93+hn/7G95FK3QdnP+9X+iWpyPp8njXum2pLOQ0/QrH5Y19rl8X/ACILy+WX9LrtQFENQl7lu9R1WjTIdRyLr+PmZ/rE4De1tqMysEykP6buAheQXFq2sAbPdgSxMwSQ9O+GL6V1U0kuY23IKrtJwQpyqmVgEyQwJ9tC6jsGRKpomsijhaqineyls01UGFPkGMRnKz6D006Jtp7lvu9glQrTLep2FvUKAuyQWBR4hRdn6kAQSDoVXoaOkCtRRVPelpUFiR94GThflEce8wnX2rpt7jUKOQP95aHUCFVZhpbLZIi9uABqppboMJepDrhgxMgFlFyFgZJAbMwPOOFH5bsp9TSbbYJtgCi0m+YGolyBKQP3QXlYXBIP5jkPjrFOwM3p1wSQZJ5AYg5w3OZ+UlsjANZ0o00kGtwLQGZW7S1qgQTLRHJ/d+st+lSN7mm9QjANNCLSGLAgyoEXBecQCTGRLaHVDDdYZ2Crt1JULZcYPdbIBqZUwCMTxx4Fd1j1a5NJFrCooD2U+5DIuHgQ04mAJE+JPh6xtSQPRdIaR6sJ5M8kk8N9AfHGpN8XUSzUwXIsJNTMqwZfutgEQWlgfbEwUp0xNbFdQ+F90qI60iS8H0wQSoOSSI7TE+fYcmAuvw3vHcB6TrhVk225a0AycAAEwM/Qgwdp0xiWsd2qFlRpHabIGYEEC8EGZnx5Asf20IoRCzEAgkkEyuTLSCTbmMcnPjVc1sWkpNv8GPBv3dY3KIthSQMgZJDBRwIHAznFVtf9HRNUMd5U9OQSjfMQIkc/RSDHIGONbXZlnEsBhYkli4OQScDHEEDydCbrKLi2SR2mCMYgTEyQC2f7RM62GhMp6vSPQpH0QKtTIFRw8KLpDKTKKyiBcIyoJ1Q9P6FvO0oCLgkOCGRh4N02lYA/GfI1uNvuZkwVxFp7gAJ+5iPyyYxxGiUeooQWWFpiAe0juLGZAzdJb9DMZ0KdDcTCbvoLUqiI7g1CrFlHdgyQiqTJ4Yg4BM4POlq/RygZL5rA4WFYU0tvtmAGIWSTmBgTyOhpUfvY0mGIV5DPapxwcrk4kHuP5UNT4Pc1BNcMoe5ltsqMIGGqXSQSWJaPIiM6rmCoyg2UgAQOwk5YhYYTMFQcZ8gTiYJ04y00MEBVAMm7yDcImDIDEEjHbjltedV6RvRUdaO1LgJCXVJZFjADEheWIA/HGMPdG6UJUVkrlgq3NTBiMATTCY8iVPCjmdKWShIX2zQBUYXrDMyoodlOWQSABTMTjPyjJkaJXlStMJUvBEZKLBhF8TmfmBHEQ0RrUbfoop2rCkCAGutqCBKwYkGR7ic/gazr+19GnIBeopD34JCBSO5nUiBMALnjxOpeRVbDdGX3G8prTdVClyJLsxuVmAi0FmwMfeAwJk51RIhFITcYLHJAhfe1eQc+8kH6as+tNVqgH00pASQAczfHdOY7595Ptqk9NgfTQ3s0sJJYlZnAGTOflnMc+PL4qbm/Qfcp2qkBWtRlJZASLmI+98wPMt7yCNX3QenitdNf0XLEemyq0ITctpDL4I8DjGIOq1emvuKybZR3yUFxhLwASZwJUXc8QPfWpp/Cm/21N6bLTNAL6ruzCxSEUYbDXdgwExGPE9sb/DdWKMVKVSdLzVlh/wBjkqStWuxDTwiKc4+bJOPf2Gnujf6M9ohuurOc5aoAIPP+zAPj31z+n8TV6bU4DBWAMK557SwtOZHcv98ZuR8btTCzVDMQvaaeZJVcWgzm/wAyQFibtaNWNKlGvcnlW9pL8v8AHudBqfA2zIgK44iKjxP4MSCdLH4Apg9tauv4Mv8A0Y1n+nfHO4qYRASGKlRcjBhfIZWaRAUnI8j6gGqfGO4Ik0KkSBPdbJExNnsDOcRoTh0v2OscWb932a/Utn+Erf8A72sIHuCPzgjVL1j4dquhWnvKp/4yfTb2AzIz5/TVH1rfb/c0alakXCUGlipVVWJkMjGXMHzMew0h0z4+3CD7WiKgESyG3niQwIkwfI4OqU4PuXPDxEV0/o7Knqew3NBravqD2PqOVP8AwsGg6p69aqPvuf8Anf8Av10b/vD2zLbVoVbSIIamjKfyvz+msx1rqHT3N1C5BGUZKnMnKmTHjGui0vucHzF1TMsd3V/ff+u39+j7PeVb07nyyj5j5I+um23W38T/AFH/ALtRo7ikXS0SS64taSZHHudJ6UL8TFdrv64YNe1w/e7x+jTrSbL4wYArV26MptzSY0WABk5hpnWfFcLMoMGDhhn2+hxoi7un+43vweP140tGKXzFVkXQ0LfEGxkxtXA9oT/q19rPftdH6/1f8dfaXIw+fzFeXx7HW9l1VKFMFaYRrGioLFpsJBMor9/J4HkxjlPr1L1KC1fWNNq9VFtLtbDEJeVY9uGaSqCMScAklXoy2hq1SpSQEC1im6TsAMsqCLSEKxjnERGtM/UtuQvprSqCnDgKe8NLAMKYABOefB8TzcizIbXpVZpNS4UnWpFRVPdbaikKwAQkBjGflkgZi0pfCdQhpf06c9qNSAZmEgBnDSASD4JiOdaHd76qwBSkKpBBUwqqKh4MuDbaIwRI5MRpht86M37RTBAJtenLdhgGBAhgQ0qJwB9ABSdDoxZ6NSpsBSp7h3mncyovpgDJQTLEkqoJJgA5gE683VZ1UFyqsAFwLCLSbYEi4CPA9oBkxuNrYYNJwAHLOlOzuJTAxJkrDZnx44DU6VQr1GrFKTqqlQlv1hi2QDAAIDDBmCNJSQNHP037EANUZlGGUUw4AgxIKggEY8f26tegdNNRmrUXppI/cyrqajBfTE9slsBpIP1IOtb0N1SZKRQC4LACmER/urFo7ZGR+samdmxDcOxJLERTDYIRGKTcPlE+cDxGk3Y0JbH4ee4EbqoTC+ooRR3C4AmQfTMQuRIAIECLWl6Yyi1XAViCQJIt72S04gyOR9DHM+06oRFSs7JUlQxQEBZiwCplWtxJJ9/Gq/c13ogNQmoxqWICSUY2iFiTYyoXaQYi4gfd1Opi6F3X29NbWZwwUM4JOWIJIk5NowRnyPEAJ7hkZVKU+9iHgrbkmSFcpMkKBjmMcyJU61coXcUwTlLpVxZEC1QYXkxMzOT5BuNvWq3u1SKkqtMAgJCxJAgw01D7zGhMaRX71ywNKmvavIpsBU4EQw4yD3XQPOmKRrKVsIDKMQAVCiB4yvaRJMnjtEah1KgaQSnTqH1C5CikGuCAMVuYSJtLEYEgc40TZdPrtUlyyIbiTimVgBlkHuZyWzwBBy3GnY00PDetAWpeHAMFQC1T7zBcWvgRH04GdE/aqiwQsjl5aCv4SJIj39sRgaE2zZ2RKbuvLG5WKXKGkz8uQSLcRgjIwGp0d5YtDxLAXsAXGQLRhZJ5geOeQAqLHb1alWClVENqni/zBAB9zz/y++gdQ6wUcUstUPyqOycwxJYEIJML7xg501V2lQrAsu47iZiDALKZmQe7xPBjXj9OZ1FK6aYUBwoAkeAp5IMETg4GkTsJ/t9dY/8ADpe2FF4lpuMAk9xEDP8ASjVhuKXqU2WraVamVdQhLFWGBzzzj+WmBSpn5lGCBmCZw0ZGc/58aWeuwdkVYAQE5+05iDJAzDmQePrElgCTptBopquEloExTEiQr8qx9geGbX259LbqhqmlSUQigAADhFAXgLZ2wBxgarOudV29OlYrkOrAAU5yxW8gYg4HHuB5I1m9l1/cVGFNZNRWbiLVphOxTeP3YB4nM8zrlLJGOwUbelvlPbTEFWIChXVYPLFysLzk55+uglaT+stBFuYRUqQaakAmAKgGQCTwTk/TSu23q1Ka1K23QKwa2mLexhcxgMRd8pMwvKxmSfOndSpUkNiLLtzTVVUqVADEKYBgAdo4/XXWKcugnJLqc7+Lulbndbp1WqopI4FJVe4EsJK0roJcqpJE4g+BOnei/CarTUoy167ghzWoqWpU4DBV271LQxJSScw5IOcbPpfwnRoExV3DlyzslWoWQsTdIBGT3Ac5AzOSbDqdNmRkDFLhEpCngZEDnHOprSRabMPvN5R21Yq1Baj0bVFQkrCFRj5yxp9imGLDIwPvRpdXptt9yC0Mx3bf0T6jVHEeYhhnjnOND33w/vUJNOuaon5axJ/g0qT+Q1Rb16lP/wCo2zpIgvTLUwfAMi6mT+AB+upXzOSNuOeNKnt0AdA6hufTbaUylu4UqRUBKlvTaO5e4D6jVr8fdLo0NmrU6SU3LqDZj7jEj65AzzjVRtjtyylKpVgIisgzz99Axbn71o198SCu9ILmokEyjq6XgQPlYqmCTAAPOTqYxqLTRullg5rJB7VugO26fRsDG650Bc3v3Fh3T3ZmTqX7BQwI4mO5sTE+foP01RxuAALYAAGTHA/49Ad60yWUfT1VH86mqoxuT8mhfaUO7tHd82TnN3v7gHQa1CiASAJVTaZMjkiM+5OqBqlT95P/AHk/69QYOZmpTz/6in+3TonU/J0nom9pUdmpp06ZYs3r4DXrc2KmASI+7diWM/dYgrMftx6VIqpUEILBAUFRdIWVCzgjgAHGucncG4X1EZBabC5I4nAYMoySePOrb4eoNVICshW5vlhiqliwuVVUkAnE45iAI1yyKVXfQ4SsvG3+3n5KP9Sh/ap/nr3SdXotS4wtCJMSMxOJ7edfazfFQ8k6pHXjQoMtjKHtJUwBk4JGOPYCT4PnVX1jqqU1FNaaksuCYAQjzYRkZUcCWt8XMoOoTUYKtb0yQCWW0U1AkdycsCBhZux9CAHa9E2l99SuKjdsNcKfaokCe4hO8sSDwV5tnXp2NoA3xCqhmLlKaov+zZVY1LiStzAoAAWPtJHdMjWn6fuqdQKool5WCW8k9rEwYIAaC0+ce2g1djt3a8ESR2I7VPTmMMKYaxpljheM/hHebpoRmQ1YAmy6LIyQFxIE4B+gicjrsJJ9yFTqu2tvolU9MNTlU7hCqSRB7kClTcJjmcaht+o1XuJpdpuYo5Ze+0BjlApU+J/gTpzaJTdkdXp+kVcAJILMSCpLTJ7cnIyyx5GrL1lAYpF1oZbjBYwRicjwJPkZ99SOjMJvGQOioAIZl7iWKkSyhFHc8yeMAAEQAWYPU6QvWu1akgJNhp+msDNxfNhJNwkgkjWi27BZYG7EMSZiJbA+UxJJI1WdYqLUpsGYbckSjtbMzDArJJPzCBzP46AFthsi6KprXlgbiyg+oYUj5SAxK/Mbe6ZhRgqbJHes1WVtDGkjGRc/qfalPJNyongqUYCb7gl1ehT21Btxt6zMUSpchYN6lilajZkFuSYIuhg1xYMLDYVNtUaldWVVoLZTQuZmApZmkdxtZcRMsZIaCmxjG93jhwKoNNJFvpsHF1wtJYKSoOD5+XEZlzZ7ShHYqurwbmeoXLAQQQ/HyzA9j50nvus7c0povaEYBSi3QqmSQqoSc4gwD9JnVc/xLuWuFA0KoJ+zZzDEPUVVNpIB7pEzjtGLsFgbA1rUHYD34ESAJtJ4k91xkZP56zaDfllJ9M2FhlXBUGVk9rXAgA4M8DGdG/7QGmKaVQQwU3MIIEDAZspmf4+MjVrQcVE7fVVRyT2cWsLfxJ5gjGffR1F0Pqe+Jq+k8UxAM2i1gwNwVgYXIGDkwcaaUD7oU+zCMkTkx5Mzn+3UdtQprLAN34LG4uUA7cjI5IHk/pqp6XQC1KgWoygrVLo3f3sVdbZi4AFhwMYJ4gAa6rXdKV4pAvMm1llQYBuE/aYnA/WROg9O6mfUsFN6SlsKqNUDXJeWvUwIaT5nODIOvd7t67UGSgoNZrVFVgqqWxJFxMAQ3A8iMjSfUen7qjtVSiUqVoSmTb2lC9hJWRwtmS2bSYHGk2GwXrnxFTVmVbnc4IBKskSQuMhjgz4wTAzrE7rr/p13p0z3VQrS7C1QC6ufUckMSqrGYweTA1Z1/hrqFRGlqfcL7Q3qmq9vaJY2UgonC/MRk+S1T+Dz6VNqjAVAgJVgGUuKVryQM4BMcT+WucpS8FJLoUTdYY02Nq+nUyDCsB71CpJJOQASR5iNUf8ArCQWaoyoTL0+4pcT3NgyJInHEA61W9+G2Wg7wqOjFSikm6ArGxgscMQPHPGq+l8AbqqFhqNNmAJRvnUHglQsXWmbRgYyNZ5Kc57o5zuyj2XUxSchSHC1IUAwpDLkwcgYQET+GrelWrU6y2x6bGGWJtbuJdpYAYAm3Mz26tOq/AlanQH7PWapuEbFwVblBBhRbHBA+aMYzpHou33VAK1bZ1mK3XX2sXLBp7BfMTddEiDnuMdYqWN6qHFtrQ+ng0fS/iNICmKbk5LG4E4wH49sY9/M60lLfqfmBHuRkf3jWep0qe+2wPphGl6SWlZpPkElMGQQDn6nGNObD4YaiE9PcFlBW5HEqwkSFGbDaGOPJH4nTGd9SJ4qexdVdurCRBHMjzpSt02fOPI9x/n6a+27QXUBkYxazgETJwIwuLTnMGcwdWKquRyV5JxLMCQP5aThFkpTRjuofCG2f/dBW/eTsJ/EDtP5g6wPxN8JkMf2dmeyQymLifNpEAxxEDMxrr1anWZRaIZjBkGVEHP/AM+41VnZWi0rB+ozA0NOLpBqdWzgNRSsjIIJB5EfrkfhqO5pMApYEXC5SeCJIkfmDrvdf4d2ZcVKlNalZQCBUELPsRxUzGDMAfXXLPinoW4O4d6gVmYep9nLqEJMR5VeYu10W426W5i3U6EQdbLpfwNutwWCU7bRJNS5BxcPEiRwYg++rv4G+BmdydxtS6FXFNme2krLdJqWG6CPlYCDAIkEHQ9hLc5tXQkIfdP5M6j+AXX1IFSCpII4IJBH4Ea2nxZ8LihuhtqC1XBqEJcvlwrKgc4fz3Ykhh4J1VVuhstU0bWZx4pj1QeJtKSGiQDHB0Kgporx1jdf/kVf67f36+1qW/0eb4GP2c4/pU/+rX2p5ePwg3Nj1GhXp0/Up2p8qIvDvcwREFPwGYr3EAqSYBMHTmz6VWQFau6q1FBuKgkks3YReryFEDGAe4j72o9Q6buhUpIM0EF7EsI9QSyJCksQgBIwZLIJIka+XovUAzVlNFSzemzODcyi2KkTALEEqCMBhwJ0mdhj03SkoXbU2YhS1WoZljNoRluLEnAzI7JkQQEdTLg7dKVdmBMMXIVGDFSLlyigkjJjkAHnTh6LvB81amylCKhU1Ac3A2QSSZgEwMwRkau0aVSmixSphAahJgIAB2OsTUwQRHvMDGkBTU+jbn0jYCatqyp9FaYc5lrQTcogkybjGBiD77pVRVLColg7i7O4tIUsWUktdBtGLBE/UF+ruLg3pMFp93e6SogWErBkY8R5PE6zHVursjU0SszKKhD2BXYgMYRZhVa4qsFfvebCNFga5WJpKtyiVEGS1MkiSSQFNs3DMfLxzpDYNXevVeotJtuaalKotmobpPDNKEQ0wOFPm0ZHc7sOWC03YKafbPf2EekQKhkMGIOROMYM6lsN09ep+zoxuyb5qJZayNY6BRKXEgGIJwPB07GNfHRRdq1NZFtOqsN6d0kYIx22mR2gZBOQBrNO6VBTtXFigpTkEntPkmDNo8TE/hZ9K+Ga1aP2io1Cldc1EuBClihd0aBDW1FB5N1wOr3abvpdOsaqOZFIBQWdgqPIKokewIEzj5dRJWKr6GQbcbmjty/clxJBNMIrEuFLK5E8EZuxcJJGtD0j4eNbbkulyuSysKjdoWFFgnuMAt/zDPjTvUOp0N8v7L6qTUgh2uNpwsemYa7MQYHJmRrTTR29JKKn/ZLAmGJFwycgQbvJHH00ktyvQzfR/hP0vUavuKYa5bWUrKqst95cPcSchh3cSTrSbetSq02SmCxRkJtKta0AAhUMAgAGOJHA1z3q3VhunATatFJnYuoVWutkBSQFYweDMifcFb/4Mpi1GoCotJKjUq5LXMxVbgzUSbacEr8qyZn5eaF0NVSBq1DU9RgirZIhbz9orkzJFsSBAiZk8a+SujVStiiOSbQ1S9boIxd2rJ/4F9tJrulftWmxAaoTF+KowBdAuXtaIEEQOCAa6rvUAdCGd6Yb7YIAB6gIxUMAVOJgyQFgZK6TCjSVRBdTUYYuCqVUKi23BZEiJkzxj31mfiLrDbET3NfcPUqOilXBUdxYW2jgyc+MidUudtUpir6ruSLHptVrMsnjtGbiuBK/J963FtXV0FGl6QYC41L7yAamSQWJDVCjsDmReckZ0k7CirofH22SqFWp9mDlyTLCCFJkBveO1uAOROrbpfxOaz/+HVKiKD8ryikICFI9OF4HHFpHmAdPhXaVtvZ6ND05IGDFowCAIuYTAJPvBGmdz0YvWQCu6gow+VXuVpPc1Rmx2scj70Gc6qh2hDrHUalbb2gNTT0mZyWCvJAYBV+YO2RB4wDE6uNtumO1WpSDFmpFUwFJEABrJIAHzfN/YNE2HS1p59UkgsIYdpeDkJJzEjBiJwJ0atXWgqpDQQQAnzSfmxNxzgWzE88aVb2S0TKVPmqqgaQoIciMkgK6/kDPmeQdEWi9i3kNlWEqywBkfWYA/OeeDnKvxztkjDknuFOwkyO5jABYtEmIB8H3Wx2HUFqtffJgqFELaObghM5zjMxjgDVDG99RQIVQBVZgYAKgsCCflILcCR54MzGlttt1ao1Us4GfsxHpBVNrQSLldyZNp9if6X3U95YCXcUgbu4gyWjtmRDACQZu8RjQa22q1KWWCW2gG0NwO6wnAEhRcRjuMedIKHt/1hVrFYZoUG1ACJaec9zSqgDHM51Ubzrqt2Sr+oCpjIST3AgmQ1o+kHwZOkadU2W0kvukqyhoLFRgAN9qJMljMgeZnUK60JSlWXcLWdltdVdmksplGpqbYtgjGJkRouxqkObfqlUemrXhrm/2gNIWKIYBgpuYfU/4aHb7isSrMtqgGQeIj7zXYPmAvuPwx3W9/t9sy0D2yt6oBUaFMlu1flyl3I4wIk6H/wBtRTRy9jC77FXYW2gKCMS7KGuIaIMEiQV0dAas1O+rhaYAR6hnNouclj81oklTIOCYxkESBbSpUYOwo+kUcr3pYxAI7QQINMSDKkgwfII1QfDnXq25qOzuimjYbPUCn04F9QkKe0nHdHAxMEWG96k1VfTNMoVhgttU/K/zGApZSJ/tGNFhQcb01WG2KujOrDgoxgEhkcQAQS2A2LZ86DuNlR2oqMlW24Xt6rhkCoS8IO0BgGb73nyAIMnUaoSDbCAmT2kAAksJuu5tlT9040LdinbNevTeiDIUqIJEuAWbtPOAcfhpjryUNT4x2m32x3CmpVVq/wBheHMPbysqBCw4gEfLPLCfOmfGqOi1mr0tv6buGRkL1iriVARSrW3MIAm40xMQdZv/AEp9WesFpj1BQUoVtpdrMwcjuuCtAK/KIBJGTrn4NMhlioxUqT8qtF1pGZPzFcaBWjuv+u9oc/t1bPs1Ej8jZka+1yrb/FO1VVU0shQD2ryBB5XX2uWrJ/CTrR2fcdToUzc9diBAUEg3G3gmSSSP3jmDzqoq/GFBw/qFaag4lwC0s3csEn7oEycHAiCcT1TqtV2pUkC07/RZSswPVyARwcMAcRgYwIR2Xw+1VdynqCaLEAlRB/8AM7R5PYAfxPsNdbvoGrfY6BU+Nad1SneKYQ2kmaYKAYZSTMyCADGfoRonWlqVjTdatO2IUJl1kBsvcVtkNOBJCgkapum9EG2l6xFWoVpKWtOCRZIDsQxk8nn2HGmupfC6O4upUFYwy2BhlTkuwi+MwCCD7Dw6KvYRq9QpU6VQVKxq1SSb1qVIMPaqkTDZAk2gEAcwDrFw1SQiwcSMXzMCPczxHtrWbvb0dne4X1HDHtdQ1O0t6dqsCrKIDe/McHFZ0XYPv6reiKdHksuYHkQwEuc+QNcZ3exFWP8Awtem8pW0iPTn1gwKsKTLZLcEgVAsCCDkZ8a6huKtxqUUoKzfPUeyQr4C9rWqpgN81zQCU86fpiltqdJaaXM7Cne1t5suU1GZRJdrc5/TVVstpQVHakhL7l3IDnsWqtP1ViJKCGm4SZJAwBFrZFJCVfamtXq0a4Z6kKDUpyB3C4ZwSS4IiIFp/DU9h8G7elTqDdsHQkCiDbTYCFcoM8hhbA4GAe5tXlDf1zSa5afq/wCzkE2lvTdwZjsAgj5Tz+uYrfDpr0P2t9xULqBWoD5URAphPTNygQCDHOM6q/ANFP1bpNCvTqNsGsNKoVEOAjVIgpTJN90d03fiBIOhts6tSoh6lWZi6MqCkQTNNGqSQ0oYIk9plivsNWv+jWmy0CVqMpq1KjNKrU7i8Ay2SYt5J86vOtoxW31XLMwtDQUVrwogCDbJ+uNc3LekNRVWyq+BVYVqtUqBQF1q24FRQQjI5gFrSpacklvbROn72otfeU6YDfao5ZiVpio23pLcGJEtmSi5OfBBAfgnqW59TeohRVpbioWWBAiUJTt/oCBj3OTq1+FatT0jVrOxTc16tW2mbWmJF7iGMU0QdpXIjjIbu2hJ9KGdsjBl9ZrnMiCTe62sZp0rQCtylTORHcSJmHUt3Qp7lKRNQPVHpw1q01zeeAYae0c5qnGdWJ6zSpkLTohZghhF3cLsmPNpB5medZj47oFAN2YDUnBtBJGIKgE8gkCZ9uPAdoLZpNt0V6TNaxF7Fi0+paSGDkTaA7AKtxB8ZE6tem7RUDOS1W4lmcgswIAyDAJ5GFAC+OJ0LpT1JRS/7xgR5P70Sf0HH4gsValrupkwIyxIEhQSBgTkGfx48g93sJVuprTCs/Z6zFQWFjFgWtp21CAsm3JCnBnGdN0upLVpytQKcAljOAe7IP7wKiPKGIjGc+M9o1ahuCzmyilwEmWYAhCc5FtwP4gziNcwp9S9N0qS9yMYIgEA5IH5+PPnRe1iex3Sv1KhTNpqLe5SDPN4sXsJJIlfyB+p0xX21LuV0DCFZuyb2gr975lEFoHH55p261TqqlEU7VdzStIDKGFNqk5zHZAPj29mXpmnZQphTa63eoS3YSoIViCSRcQOMHkaYBupdKoNDOArU4h1xa5W2+0AqrWnyMAciTpLpnSaCinUNV6jU2QIWAVlVWK01CU1UMDc5yDNxzjUK+4Ybes0Q4LUpDtlqJYSZHy3F/xET7aT3e/qbKheYdXKMDkuqvEDuPdBbyfH10BSosN71HbXKatWmVUnsqMoMMTT4OIBCkA55OMa+6V1jb+m3puasEhlAEKDYCiJGUJn3xdnEa5v1OtvK27r0NvVFNKdMsQWYSCqsxlBLNNQZOobPenc7ZXqKv7T660adYQCHdqCSwINyFawlTcJUtEnC6CbvojqFX4g2iqpNRABhSY8cLaMwQYBA4zyRKh6+O5UIdbMMrA0wzG6Ga6DOBOTEYzJqFa0ps6KrSvpqz1R3P6PazIpPLEtEkxkmCcFnrwpK9Db0qSirU7Eqkt9miq7EllN7ntbEiScnJ06bVkcxJ00J9X29eoaV4cJJJZWNrISjQ/o1JJy3zfNd7Z1kup/ES0qjLaKbTdexqPUDEMhdSUIbssybptYSBA1vN7096NJVSqzKIU3GKhEgz6oHsCIt4gSBqsr7XabtPVrUTUhQykuVYm60hrOFgpgGMcCBpdHTLvVuil6I/Tyjhdy9KkWBrBIvqMSAoLlLrSVDQJ+sZm3/wBZU2prTpeo6pVNJQLUUKuRa1FUUi2YFxnIjjWT6vR2+3r09rSoIWNYfaMB6qmo6WBagyVUMMMDmTnRqvxO21NRIvqAmcBadqs6EWpaZJtn6T7xp0CaL3q9BmSXotSUOq+rV3Jm1Vg2UzUMXEFQFEGOI5pNn1lPTLrR3NOmJanXV/VqA3faMyksAMnMEQoz50rtvjalRXu2xZqwWo49RmQkGpZAb5e4sTA88nAGLq7uyoW21SqKchlDnOVEhgCQYMgH2A86pITmbrf/ABLuKFUJt2bcIyhqYemf2kdyIy2rBX5pEAHGeI1S7r4w3FZzTqU9v9qh7xSHqTa4Xk/MHgHHzIM40z0v4oX1vWrI13pOgNOA47DdLE992ZmeBjkm7+IdstZKW8UKKdwAWLXDB+cSCIbycZjSZUd31OSmn/k86+1oT05TmFzng/36+1WpHPls/9k=); @include transform-origin(); } } $max_segments: 32; $segments: 0; @while $segments <= $max_segments { $step: 360deg / ($segments * 2); $angle: 0 - $step; $i: 0; &.n#{$segments} { .tile { display: block; @while $i < $segments * 2 { &.t#{$i} { @include transform-rotate($angle + $step); } &.t#{$i+1} { @include transform-mirror-rotate($angle + $step); } $angle: $angle + ($step * 2); $i: $i + 2; } .image { @include transform-rotate($step); } } } $segments: $segments + 1; } } nav { position: absolute; right: 0; bottom: 0; z-index: 1; color: #666; text-decoration: none; font-family: Helvetica; cursor: pointer; text-align: center; body.clean & { opacity: 0; &:hover { opacity: 1; } } ul{ list-style: none; margin-right: 2em; } li{ background-color: white; opacity: 0.6; margin: 1em auto; padding: 5px 10px; text-align: center; font-weight: bold; transition: opacity 0.5s ease; &:hover{ opacity: 1; } a:hover{ text-decoration: none; } } }
JAVASCRIPT
$( document ).ready( function () { var parameters = ( function ( src ) { var params = {}, qryStr = src.split( '?' )[ 1 ]; if( qryStr ) { $.each( qryStr.split( '&' ), function ( i, p ) { var ps = p.replace( /\/$/, '' ).split( '=' ); var k = ps[ 0 ].replace( /^\?/, '' ); params[ k ] = ps[ 1 ] || true; }); } return params; })( location.search ); var x = 0; var y = 0; var auto; var auto_x = 0; var auto_y = 0; var auto_throttle; var s = parameters.s || 3; //segnmentation var n = ~~parameters.n || 7; var tiles = ''; if ( n ) { for ( var i = 0; i <= n * 2; i++ ) { tiles += [ '<div class="tile t', i, '"><div class="image"></div></div>' ].join( '' ); } } var $kaleidescope = $( '.kaleidoscope' ) .addClass( 'n' + n ) .append( tiles ); var $image = $kaleidescope.find( '.image' ); var $fullscreen = $( '#fullscreen' ); var k = $kaleidescope[ 0 ]; // image tracker var src = parameters.src; if ( src ) { $image.css( 'background-image', [ 'url(', decodeURIComponent( src ), ')' ].join( '' ) ); } // hides link in fullscreen var clean = parameters.clean; if ( clean ) { $( 'body' ).addClass('clean'); } var opacity = parseFloat( parameters.opacity ); if ( opacity ) { $kaleidescope.css('opacity', 0).fadeTo( 3000, opacity ); } var mode = ~~parameters.mode || 2; $kaleidescope.click( function ( e ) { x++; y++; var nx = e.pageX, ny = e.pageY; switch ( mode ) { case 1: nx = -x; ny = e.pageY; break; case 2: nx = e.pageX; ny = -y; break; case 3: nx = x; ny = e.pageY; break; case 4: nx = e.pageX; ny = y; break; case 5: nx = x; ny = y; break; } move( nx, ny ); auto = auto_throttle = false; }); // full screen $fullscreen.click( function() { if ( document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled ) { if ( k.requestFullscreen ) k.requestFullscreen(); if ( k.mozRequestFullScreen ) k.mozRequestFullScreen(); if ( k.webkitRequestFullscreen ) k.webkitRequestFullscreen(); } }); // Animation window.requestAnimFrame = ( function( window ) { var suffix = "equestAnimationFrame", rAF = [ "r", "webkitR", "mozR" ].filter( function( val ) { return val + suffix in window; })[ 0 ] + suffix; return window[ rAF ] || function( callback ) { window.setTimeout( function() { callback( +new Date() ); }, 1000 / 60 ); }; })( window ); function animate() { var time = new Date().getTime() * [ '.0000', s ].join( '' ); auto_x = Math.sin( time ) * document.body.clientWidth; auto_y++; move( auto_x, auto_y ); if ( auto ) requestAnimFrame( animate ); } function move( x, y ) { $image.css( 'background-position', [ x + "px", y + "px" ]. join( ' ' ) ); } // automatic start (function timer() { setTimeout( function() { timer(); if( auto && !auto_throttle ) { animate(); auto_throttle = true; } else { auto = true; } }, 0000 ); })(); }); $(document).ready(function(){ var kalos = document.getElementById('kalos'); kalos.addEventListener('drop', drop, false); function drop(evt) { evt.stopPropagation(); evt.preventDefault(); var imageUrl = evt.dataTransfer.getData('text/html'); if($(imageUrl).children().length > 0 ){ var url = $(imageUrl).find('img').attr('src'); }else{ var url = $(imageUrl).attr('src'); } $('.image').css('background-image', 'url("' + url + '")'); //alert(url); } });
Expand for more options Login