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,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);
@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);
}
});
