1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 5.00 out of 5)

KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS

Do you want a KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS? Check out the script below. This is a script written in JavaScript and CSS. It can tantalize the visual senses for a while. What is even more cool is that you can use your own pictures just by dragging and dropping them into your webpage.

How to implement KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS *

Implementation the easy way. *

Just copy the code below and paste it into your post. Make sure that you are in the “text view”.

KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS

KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS

The Custom Way *

Here are the codes that you will need to create KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS.

The HTML for the code

<div class='info'>
<hgroup class='about'>
<h1>Kaleidoscope</h1>
<h2>Canvas kaleidoscope implementation with drag & drop</h2>
<h3>Drop an image</h3>
</hgroup>
</div>

The CSS for the Kaleidoscope

<style>
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Quantico);
html, body {
background: #ffffff;
}
/* Info */
@keyframes show-info {
0% {
transform: rotateY(120deg);
}
100% {
transform: rotateY(0deg);
}
}
.info {
transition: all 180ms ease-out;
transform-style: preserve-3d;
transform: perspective(800px);
font-family: "Quantico", sans-serif;
position: absolute;
font-size: 12px;
opacity: 0.8;
color: #fff;
width: 240px;
left: 0px;
top: 20px;
}
.info:hover {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
opacity: 1;
}
.info h1, .info h2, .info h3 {
line-height: 1;
margin: 5px 0;
}
.info a {
transition: all 200ms ease-out;
border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
text-decoration: none;
opacity: 0.6;
color: #fff;
}
.info a:hover {
opacity: 0.99;
}
.info .about,
.info .more {
transform-origin: 0% 50%;
transform: rotateY(120deg);
margin-bottom: 1px;
background: rgba(0, 0, 0, 0.8);
padding: 12px 15px 12px 20px;
}
.info .about {
animation: show-info 500ms cubic-bezier(0.23, 1, 0.32, 1) 600ms 1 normal forwards;
padding-bottom: 15px;
}
.info .about a {
opacity: 0.9;
}
.info .about h1 {
letter-spacing: -1px;
font-weight: 300;
font-size: 19px;
opacity: 0.95;
}
.info .about h2 {
font-weight: 300;
font-size: 13px;
opacity: 0.8;
}
.info .about h3 {
text-transform: uppercase;
margin-top: 10px;
font-size: 11px;
}
.info .about h3:before {
margin-right: 2px;
font-size: 14px;
content: "›";
}
.info .more {
animation: show-info 500ms cubic-bezier(0.23, 1, 0.32, 1) 500ms 1 normal forwards;
padding: 5px 15px 10px 20px;
}
.info .more a {
text-transform: uppercase;
margin-right: 10px;
font-size: 10px;
}
</style>

The JavaScript for the Kaleidoscope

<script>
(function() {
var DragDrop, Kaleidoscope, c, dragger, gui, i, image, kaleidoscope, len, onChange, onMouseMoved, options, ref, tr, tx, ty, update,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Kaleidoscope = (function() {
Kaleidoscope.prototype.HALF_PI = Math.PI / 2;
Kaleidoscope.prototype.TWO_PI = Math.PI * 2;
function Kaleidoscope(options1) {
var key, ref, ref1, val;
this.options = options1 != null ? options1 : {};
this.defaults = {
offsetRotation: 0.0,
offsetScale: 1.0,
offsetX: 0.0,
offsetY: 0.0,
radius: 260,
slices: 12,
zoom: 1.0
};
ref = this.defaults;
for (key in ref) {
val = ref[key];
this[key] = val;
}
ref1 = this.options;
for (key in ref1) {
val = ref1[key];
this[key] = val;
}
if (this.domElement == null) {
this.domElement = document.createElement('canvas');
}
if (this.context == null) {
this.context = this.domElement.getContext('2d');
}
if (this.image == null) {
this.image = document.createElement('img');
}
}
Kaleidoscope.prototype.draw = function() {
var cx, i, index, ref, results, scale, step;
this.domElement.width = this.domElement.height = this.radius * 2;
this.context.fillStyle = this.context.createPattern(this.image, 'repeat');
scale = this.zoom * (this.radius / Math.min(this.image.width, this.image.height));
step = this.TWO_PI / this.slices;
cx = this.image.width / 2;
results = [];
for (index = i = 0, ref = this.slices; 0 <= ref ? i <= ref : i >= ref; index = 0 <= ref ? ++i : --i) {
this.context.save();
this.context.translate(this.radius, this.radius);
this.context.rotate(index * step);
this.context.beginPath();
this.context.moveTo(-0.5, -0.5);
this.context.arc(0, 0, this.radius, step * -0.51, step * 0.51);
this.context.lineTo(0.5, 0.5);
this.context.closePath();
this.context.rotate(this.HALF_PI);
this.context.scale(scale, scale);
this.context.scale([-1, 1][index % 2], 1);
this.context.translate(this.offsetX - cx, this.offsetY);
this.context.rotate(this.offsetRotation);
this.context.scale(this.offsetScale, this.offsetScale);
this.context.fill();
results.push(this.context.restore());
}
return results;
};
return Kaleidoscope;
})();
DragDrop = (function() {
function DragDrop(callback, context, filter) {
var disable;
this.callback = callback;
this.context = context != null ? context : document;
this.filter = filter != null ? filter : /^image/i;
this.onDrop = bind(this.onDrop, this);
disable = function(event) {
event.stopPropagation();
return event.preventDefault();
};
this.context.addEventListener('dragleave', disable);
this.context.addEventListener('dragenter', disable);
this.context.addEventListener('dragover', disable);
this.context.addEventListener('drop', this.onDrop, false);
}
DragDrop.prototype.onDrop = function(event) {
var file, reader;
event.stopPropagation();
event.preventDefault();
file = event.dataTransfer.files[0];
if (this.filter.test(file.type)) {
reader = new FileReader;
reader.onload = (function(_this) {
return function(event) {
return typeof _this.callback === "function" ? _this.callback(event.target.result) : void 0;
};
})(this);
return reader.readAsDataURL(file);
}
};
return DragDrop;
})();
image = new Image;
image.onload = (function(_this) {
return function() {
return kaleidoscope.draw();
};
})(this);
image.src = 'https://a1websitepro.com/wp-content/uploads/2014/09/logo200.png';
kaleidoscope = new Kaleidoscope({
image: image,
slices: 20
});
kaleidoscope.domElement.style.position = 'absolute';
kaleidoscope.domElement.style.marginLeft = -kaleidoscope.radius + 'px';
kaleidoscope.domElement.style.marginTop = -kaleidoscope.radius + 'px';
kaleidoscope.domElement.style.left = '50%';
kaleidoscope.domElement.style.top = '50%';
document.body.appendChild(kaleidoscope.domElement);
dragger = new DragDrop(function(data) {
return kaleidoscope.image.src = data;
});
tx = kaleidoscope.offsetX;
ty = kaleidoscope.offsetY;
tr = kaleidoscope.offsetRotation;
onMouseMoved = (function(_this) {
return function(event) {
var cx, cy, dx, dy, hx, hy;
cx = window.innerWidth / 2;
cy = window.innerHeight / 2;
dx = event.pageX / window.innerWidth;
dy = event.pageY / window.innerHeight;
hx = dx - 0.5;
hy = dy - 0.5;
tx = hx * kaleidoscope.radius * -2;
ty = hy * kaleidoscope.radius * 2;
return tr = Math.atan2(hy, hx);
};
})(this);
window.addEventListener('mousemove', onMouseMoved, false);
options = {
interactive: true,
ease: 0.1
};
(update = (function(_this) {
return function() {
var delta, theta;
if (options.interactive) {
delta = tr - kaleidoscope.offsetRotation;
theta = Math.atan2(Math.sin(delta), Math.cos(delta));
kaleidoscope.offsetX += (tx - kaleidoscope.offsetX) * options.ease;
kaleidoscope.offsetY += (ty - kaleidoscope.offsetY) * options.ease;
kaleidoscope.offsetRotation += (theta - kaleidoscope.offsetRotation) * options.ease;
kaleidoscope.draw();
}
return setTimeout(update, 1000 / 60);
};
})(this))();
gui = new dat.GUI;
gui.add(kaleidoscope, 'zoom').min(0.25).max(2.0);
gui.add(kaleidoscope, 'slices').min(6).max(32).step(2);
gui.add(kaleidoscope, 'radius').min(200).max(500);
gui.add(kaleidoscope, 'offsetX').min(-kaleidoscope.radius).max(kaleidoscope.radius).listen();
gui.add(kaleidoscope, 'offsetY').min(-kaleidoscope.radius).max(kaleidoscope.radius).listen();
gui.add(kaleidoscope, 'offsetRotation').min(-Math.PI).max(Math.PI).listen();
gui.add(kaleidoscope, 'offsetScale').min(0.5).max(4.0);
gui.add(options, 'interactive').listen();
gui.close();
onChange = (function(_this) {
return function() {
kaleidoscope.domElement.style.marginLeft = -kaleidoscope.radius + 'px';
kaleidoscope.domElement.style.marginTop = -kaleidoscope.radius + 'px';
options.interactive = false;
return kaleidoscope.draw();
};
})(this);
ref = gui.__controllers;
for (i = 0, len = ref.length; i < len; i++) {
c = ref[i];
if (c.property !== 'interactive') {
c.onChange(onChange);
}
}
}).call(this);
</script>

See more at codepen! 🙂

Subscribe To My YouTube Channel:
KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS was last modified: November 22nd, 2018 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

KALEIDOSCOPE-CSS-JAVASCRIPT-ANIMATION-IN-WORDPRESS-1

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.