Simple loading animation in HTML5 canvas - javascript

I am looking for a simple image loading animation. I would like to find a short and simple sollution that only uses drawing on the canvas and plain Javascript.
Pleas help


I would use a loading GIF generated by an online tool such as Ajaxload.info or Preloaders.net and place it in a div tag that you may toggle in front of the canvas element.
For more spinner generator scripts see 5 Online Loading AJAX Spinner Generator Tools.
Hope this helps!


drawProgressIndicator: function(){
var can = this.imgCanvas;
var ctx = this.imgCtx;
ctx.save();
ctx.clearRect(0, 0, can.width, can.height);
ctx.translate(can.width / 2, can.height / 2);
ctx.scale(0.4, 0.4);
ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
var step = this.animationStep;
ctx.fillStyle = "black";
ctx.save();
ctx.rotate(step * Math.PI / 30);
ctx.strokeStyle = "#33ccff";
ctx.fillStyle = "#33ccff";
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(68, 0);
ctx.stroke();
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = 'gray';
ctx.arc(0, 0, 80, 0, Math.PI * 2, true);
ctx.stroke();
ctx.restore();
this.animationStep += 1;
},


Here is my loading which have 2 circle using canvas
var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
canvas.style.backgroundColor = "black";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var bigCircle = {
center: {
x: 100,
y: 100
},
radius: 50,
speed: 4
}
var smallCirlce = {
center: {
x: 100,
y: 100
},
radius: 30,
speed: 2
}
var progress = 0;
function loading() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
progress += 0.01;
if (progress > 1) {
progress = 0;
}
drawCircle(bigCircle, progress);
drawCircle(smallCirlce, progress);
requestAnimationFrame(loading);
}
loading();
function drawCircle(circle, progress) {
ctx.beginPath();
var start = accelerateInterpolator(progress) * circle.speed;
var end = decelerateInterpolator(progress) * circle.speed;
ctx.arc(circle.center.x, circle.center.y, circle.radius, (start - 0.5) * Math.PI, (end - 0.5) * Math.PI);
ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.fill();
ctx.stroke();
}
function accelerateInterpolator(x) {
return x * x;
}
function decelerateInterpolator(x) {
return 1 - ((1 - x) * (1 - x));
}
Hope it help


try this one ..
http://jsfiddle.net/swarnendu/Ky25d/
<html>
<head>
<style type="text/css">
#layer6,#layer7,#layer8{position: absolute;left: 0px;top: 0px;}
.anim_8{-webkit-animation-duration: 1.5s;-webkit-animation-iteration-count:infinite;-webkit-transform-origin:25px 25px;-webkit-animation-name:animation_6;-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear; -moz-animation-duration: 1.5s; -moz-animation-name: animation_6; -moz-transform-origin:25px 25px; -moz-animation-iteration-count:infinite ;
-o-animation-timing-function: linear; -o-animation-duration: 1.5s; -o-animation-name: animation_6; -o-transform-origin:25px 25px; -o-animation-iteration-count:infinite ;}
#-webkit-keyframes animation_6{
0%{ -webkit-transform: rotate(0deg) ;}
100%{ -webkit-transform: rotate(360deg) ;}
}
#-o-keyframes animation_6{
0%{ -o-transform: rotate(0deg) ;}
100%{ -o-transform: rotate(360deg) ;}
}
#-moz-keyframes animation_6{
0%{ -moz-transform: rotate(0deg) ;}
100%{ -moz-transform: rotate(360deg) ;}
}
</style>
<script type="text/javascript">
window.addEventListener("load",draw_canvas,false) ;
function draw_canvas()
{
var c6=document.getElementById("layer6");var ctx6=c6.getContext("2d"); ctx6.fillStyle="#FF000


This article:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations helped me draw my own animation.


Here is an animation that uses only javascript and canvas - animation It was created using the application canvimation the help files for this are here .
However as it does not use images and it is not simple it may not be what you are looking for.
The only other way I could think would be to use context.drawImage along with setTimeout to load a series of images on after another
OR really simply use a gif image in canvas as in the code below
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function main() {
img=document.getElementById("anigif");
Ani=$("ani");
Ani.width=500;
Ani.height400;
Ani.ctx=Ani.getContext('2d');
Ani.ctx.drawImage(img,0,0)
}
</script>
</head>
<body onload="main()">
<img id="anigif" src="http://www.mathworks.com/matlabcentral/fx_files/21944/2/DancingPeaks.gif">
<canvas id="ani"></canvas>
</body>
</html>


If you are searching for a simple loading animation with html5 canvas then here it is..
http://jsfiddle.net/swarnendu/urV4p/
<html>
<head>
<style type="text/css">
#d1,#ci1,#ci2,#ci3{position:absolute;top:0px;left:0px}
.cc2{ -webkit-animation-duration: 1s; -webkit-animation-name: loading2w; -webkit-animation-iteration-count:infinite; -moz-animation-duration: 1s; -moz-animation-name: loading2m; -moz-animation-iteration-count:infinite; -o-animation-duration: 1s; -o-animation-name: loading2o; -o-animation-iteration-count:infinite;}
.cc3{ -webkit-animation-duration: 1s; -webkit-animation-name: loading3w; -webkit-animation-iteration-count:infinite; -moz-animation-duration: 1s; -moz-animation-name: loading3m; -moz-animation-iteration-count:infinite; -o-animation-duration: 1s; -o-animation-name: loading3o; -o-animation-iteration-count:infinite;}
#-webkit-keyframes loading2w{
0%{visibility:hidden;}
33%{visibility:hidden;}
33.33%{visibility:visible;}
100%{visibility:hidden;}
}
#-moz-keyframes loading2m{
0%{visibility:hidden;}
33%{visibility:hidden;}
33.33%{visibility:visible;}
100%{visibility:hidden;}
}
#-o-keyframes loading2o{
0%{visibility:hidden;}
33%{visibility:hidden;}
33.33%{visibility:visible;}
100%{visibility:hidden;}
}
#-webkit-keyframes loading3w
{
0%{visibility:hidden;}
66.33%{visibility:hidden;}
66.67%{visibility:visible;}
100%{visibility:hidden;}
}
#-moz-keyframes loading3m
{
0%{visibility:hidden;}
66.33%{visibility:hidden;}
66.67%{visibility:visible;}
100%{visibility:hidden;}
}
#-o-keyframes loading3o
{
0%{visibility:hidden;}
66.33%{visibility:hidden;}
66.67%{visibility:visible;}
100%{visibility:hidden;}
}
</style>
<script type="text/javascript">
window.addEventListener("load",win_load,false);
function win_load()
{
var c10=document.getElementById("ci1");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText("Loading .",5,15);
var c10=document.getElementById("ci2");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText(" .",5,15);
var c10=document.getElementById("ci3");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText(" .",5,15);
}
</script>
</head>
<body>
<div id="d1">
<canvas id="ci1" class="cc1" width="100" height="100"></canvas>
<canvas id="ci2" class="cc2" width="100" height="100"></canvas>
<canvas id="ci3" class="cc3" width="100" height="100"></canvas>
</div>
</body>

Related

Synchronize button on two different html pages using javascript

I just want to know if there's a way that I can synchronize the map zoom button on two different html pages?
https://i.stack.imgur.com/nrFf9.png
I want to sync all the buttons in left and right map.
Here's the code for my Left and Right Map
LEFT
var scale = 1,
panning = false,
pointX = 0,
pointY = 0,
start = { x: 0, y: 0 },
zoom1 = document.getElementById("zoom1");
zoom2 = document.getElementById("zoom2");
function setTransform() {
zoom1.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
zoom2.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}
function reset(){
event.preventDefault();
scale = 1;
pointX = 0;
pointY = 0;
start = { x: 0, y: 0 };
setTransform();
}
function zoomOut(){
document.getElementById("zoomout").click();
event.preventDefault();
var xs = (event.clientX - pointX) / scale,
ys = (event.clientY - pointY) / scale,
delta = (event.wheelDelta ? event.wheelDelta : -event.deltaY);
(delta > 0) ? (scale *= 1.04) : (scale /= 1.04);
setTransform();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEFT</title>
<style>
#vatican g path {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
stroke: gray;
stroke-width: 0.5px;
}
</style>
</head>
<body>
<div class="btn-zoom">
<div>
<button id="zoomout" onclick="zoomOut()">-</button>
</div>
<div>
<button onclick="reset()">R</button>
</div>
</div>
<div class="zoom_outer">
<div id="zoom1">
<svg id="vatican"
xmlns:mapsvg="http://mapsvg.com"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height="100%"
width="100%"
viewBox="0 300 2000 2100"
preserveAspectRatio="none"
mapsvg:geoViewBox="116.927573 20.834769 126.606549 4.640292">
<g>
<path id="VA" title="Vatican City (Holy See)" class="land" d="M473.758,317.509L486.073,391.484L578.644,421.415L578.099,480.789L575.735,515.828L573.327,572.038L573.872,588.098L583.461,593.693L591.868,602.697L601.457,614.133L605.684,621.92L610.455,639.683L612,659.392L611.728,665.231L611.546,670.827L609.592,681.777L602.32,697.106L587.551,713.652L573.872,721.195L566.237,723.871L553.922,724.602L539.471,721.195L527.064,715.599L521.384,709.759L515.612,704.649L500.025,709.272L480.983,716.572L448.536,728.981L417.452,736.037L406.092,740.417L402.683,745.526L403.047,752.583L403.683,767.182L409.908,773.508L410.408,781.294L407.455,788.837L402.683,792L393.186,785.674L347.014,767.912L346.56,778.618L340.379,778.131L266.94,767.182L241.219,762.802L235.993,752.583L223.541,747.474L200.683,744.797L191.685,740.417L179.733,737.983L165.963,736.037L150.194,736.523L150.785,748.203L126.335,753.313L109.249,755.016L104.931,750.637L98.75,743.094L103.931,737.983L109.703,732.874L94.479,718.762L78.21,705.379L66.803,697.106L48.625,681.777L40.582,692.727L17.224,679.101L0,672.287L55.351,638.952L75.574,625.326L79.709,622.406L86.344,610.97L91.525,593.693L95.433,584.204L102.522,575.201L112.521,566.928L124.018,554.762L134.47,546.488L140.741,536.998L144.877,524.102L149.648,494.902L154.011,471.299L161.146,466.188L171.598,461.809L184.095,455.969L199.274,441.368L212.089,422.875L221.224,398.541L227.858,380.047L273.575,374.208L298.343,375.667L305.932,374.208L339.788,361.554L353.694,357.173L360.783,369.097L390.322,360.337L388.913,345.493L409,339.166z"/>
</g>
</svg>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
RIGHT
var scale = 1,
panning = false,
pointX = 0,
pointY = 0,
start = { x: 0, y: 0 },
zoom1 = document.getElementById("zoom1");
zoom2 = document.getElementById("zoom2");
function setTransform() {
zoom1.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
zoom2.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}
function reset(){
event.preventDefault();
scale = 1;
pointX = 0;
pointY = 0;
start = { x: 0, y: 0 };
setTransform();
}
function zoomOut(){
document.getElementById("zoomout").click();
event.preventDefault();
var xs = (event.clientX - pointX) / scale,
ys = (event.clientY - pointY) / scale,
delta = (event.wheelDelta ? event.wheelDelta : -event.deltaY);
(delta > 0) ? (scale *= 1.04) : (scale /= 1.04);
setTransform();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RIGHT</title>
<style>
#vatican g path {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
stroke: gray;
stroke-width: 0.5px;
}
</style>
</head>
<body>
<div class="btn-zoom">
<div>
<button id="zoomout" onclick="zoomOut()">-</button>
</div>
<div>
<button onclick="reset()">R</button>
</div>
</div>
<div class="zoom_outer">
<div id="zoom2">
<svg id="vatican"
xmlns:mapsvg="http://mapsvg.com"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height="100%"
width="100%"
viewBox="0 300 2000 2100"
preserveAspectRatio="none"
mapsvg:geoViewBox="116.927573 20.834769 126.606549 4.640292">
<g>
<path id="VA" title="Vatican City (Holy See)" class="land" d="M473.758,317.509L486.073,391.484L578.644,421.415L578.099,480.789L575.735,515.828L573.327,572.038L573.872,588.098L583.461,593.693L591.868,602.697L601.457,614.133L605.684,621.92L610.455,639.683L612,659.392L611.728,665.231L611.546,670.827L609.592,681.777L602.32,697.106L587.551,713.652L573.872,721.195L566.237,723.871L553.922,724.602L539.471,721.195L527.064,715.599L521.384,709.759L515.612,704.649L500.025,709.272L480.983,716.572L448.536,728.981L417.452,736.037L406.092,740.417L402.683,745.526L403.047,752.583L403.683,767.182L409.908,773.508L410.408,781.294L407.455,788.837L402.683,792L393.186,785.674L347.014,767.912L346.56,778.618L340.379,778.131L266.94,767.182L241.219,762.802L235.993,752.583L223.541,747.474L200.683,744.797L191.685,740.417L179.733,737.983L165.963,736.037L150.194,736.523L150.785,748.203L126.335,753.313L109.249,755.016L104.931,750.637L98.75,743.094L103.931,737.983L109.703,732.874L94.479,718.762L78.21,705.379L66.803,697.106L48.625,681.777L40.582,692.727L17.224,679.101L0,672.287L55.351,638.952L75.574,625.326L79.709,622.406L86.344,610.97L91.525,593.693L95.433,584.204L102.522,575.201L112.521,566.928L124.018,554.762L134.47,546.488L140.741,536.998L144.877,524.102L149.648,494.902L154.011,471.299L161.146,466.188L171.598,461.809L184.095,455.969L199.274,441.368L212.089,422.875L221.224,398.541L227.858,380.047L273.575,374.208L298.343,375.667L305.932,374.208L339.788,361.554L353.694,357.173L360.783,369.097L390.322,360.337L388.913,345.493L409,339.166z"/>
</g>
</svg>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I am calling the same JS file for the 2 pages.
This will help me alot if you guys can help me with this. Thank you!

Irrespective you use the same JS file for the two different page, both pages will load the JS as a new version for their own. so, even if you do some script change on one page, it wont reflect on the other until you refresh it.
Instead you can use Database to handle this as one of the solution.
Lets say on default both zoom was set at 8, and zoom button has a class "zoom_btn", and data-zoom='8'
Create a DB table called zoom_change with a column zoom_value with default one row with value of '8'.
Create a page in PHP or any other backend you use to update zoom_value in zoom_change table
Create another page in PHP or any other backend you use to fetch zootem_value in zoom_change table
using JQuery :
on the common JS page :
Script #1 to Record zoom changes into DB:
$(".zoom_btn").on("click", function() {
var zoom_value = parseInt($(this).attr("data-zoom"))+1;
$.post('zoom_value_update.php',
{
value : zoom_value
}, function () {
// $(this).attr("data-zoom",zoom_value);
// Do something with the zoom value ----
});
});
Script #2 to update zoom_value from DB to data attribute :
function() {
setInterval(() => {
$.post('zoom_value_fetch.php',
{ }, function (result) {
$(".zoom_btn").attr("data-zoom",result);
// Do something with the zoom value ----
});
}, 5000);
}();
Please note that this one of the method i know of. Not the only one. Please consider other answers as well.

Changing CSS code to specific javascript codefile

I am developing a timer that needs to be a js code file.I have css code as below to implement the hour and minute hand on the clock.I need to change this specific code into separate js file using styled components using CSS animations.How can I do it?
.minute {
transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));
stroke-width: 0.6;
animation: rotateMinuteHand 3600s steps(60) infinite;
animation-delay: calc(var(--start-seconds) * -1 * 1s);
}
.hour {
transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));
animation: rotateHourHand calc(12 * 60 * 60s) linear infinite;
stroke-width: 1;
animation-delay: calc(calc(var(--start-minutes) * -60 * 1s) + calc(var(--start-seconds) * -1 * 1s));
}
keyframes rotateMinuteHand {
from {
transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));
}
to {
transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg + 360deg));
}
}
#keyframes rotateHourHand {
from {
transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));
}
to {
transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg + 360deg));
}
}
This is the code that I tried for Minute hand.However this does not seem write to me for code "animation-delay: calc(var(--start-minutes) * -1 * 1s);"
import styled, { keyframes } from 'styled-components'
const rotateMinuteHand = props => keyframes`
from {
transform: translate(20px, 20px) rotate(${(props.startMinutes-33)*6}deg);
}
to {
transform: translate(20px, 20px) rotate(${(props.startMinutes-33)*6+360}deg);
}
`
const Minute = styled.line`
transform: ${props => `translate(20px, 20px) rotate(${(props.minutes-33)*6}deg)`};
stroke-width: 0.6;
animation: ${props => {const kf = rotateMinuteHand(props); console.log(kf); return kf}} 3600s steps(60) infinite;
animation-delay: calc(var(--start-minutes) * -1 * 1s);
`
export default Minute;

Repeatedly change background colour of picture onMouseOver

I have a picture and wish its background to change and repeatedly take random colours sequencially from all over the spectrum till the user's mouse exits the picture. I guess the solution should use setInterval (see this) and the following shall help:
var red = Math.round(Math.random() * 255);
var green = Math.round(Math.random() * 255);
var blue = Math.round(Math.random() * 255);
var bg = "background-color: rgb(" + red + "," + green + "," + blue + ");";
x.style = bg;
Here is a fiddle trying to implement what I have in mind: The first smiley should change colour onMouseOver and return to normal onMouseOut.
Here is what I have in mind: I want to implement what FontAwesome.com do on their logo at their footer: it changes colours onmouseover and stops otherwise. But that's not a picture, it's a font(?). Instead, I have a logo that I made transparent, and I want to change the background dynamically so that it replicates the nice trick of Fontawesome. Any ideas?
* Updated *
I am posting a detailed solution to my question below based on the answers of the community. Looks like I followed Leo's way but Rakibul's solution worked well too.

I achieved what I want.
I wanted my logo to change colours "nicely" when a user's mouse hovers over it (like magic and similar to FontAwesome's logo at their footer).
.OAlogo {
background-color: transparent;
animation-play-state: paused;
}
.OAlogo:hover {
animation: colorReplace 10s infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
#keyframes colorReplace {
0% {
background-color: rgb(44, 132, 231);
}
10% {
background-color: rgb(61, 192, 90);
}
20% {
background-color: rgb(255, 211, 59);
}
30% {
background-color: rgb(253, 136, 24);
}
40% {
background-color: rgb(243, 129, 174);
}
50% {
background-color: rgb(34, 138, 230);
}
60% {
background-color: rgb(62, 192, 89);
}
70% {
background-color: rgb(255, 211, 59);
}
80% {
background-color: rgb(71, 193, 86);
}
90% {
background-color: rgb(253, 126, 20);
}
100% {
background-color: rgb(233, 109, 132);
}
}
<img class="OAlogo" src="http://www.stouras.com/OperationsAcademia.github.io/images/OA-logo-solo.png" style="background: black;" width="100">

You have to declare setInterval() with your required time interval (In the example below 500 is set) for the color to be changed randomly on definite interval. And onmouseover is used to simply detect the hover on the image and then it sets the color randomly. Finally, when onmouseout is detected, the color changes to no-color.
var randomColor = function() {
var r = Math.floor(Math.random() * 12);
var g = Math.floor(Math.random() * 128);
var b = Math.floor(Math.random() * 100);
return "#" + r + g + b;
};
var colorChange;
document.getElementById("myImage").onmouseover = function() {
colorChange = setInterval(function() {
document.getElementById("myImage").style.backgroundColor = randomColor();
}, 500);
};
document.getElementById("myImage").onmouseout = function() {
this.style.backgroundColor = "";
clearInterval(colorChange);
};
<img id="myImage" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley">

Use CSS animation to change colors and use the animation-play-state: pause on hover.
.button {
width:100px;
height:20px;
background-color: red;
animation: colorReplace 5s infinite;
}
.button:hover {
animation-play-state: paused;
}
#keyframes colorReplace
{
0% {background-color:red;}
30% {background-color:green;}
60% {background-color:blue;}
100% {background-color:red;}
}
<input type="submit" value="submit" class="button" />

You can just use the setInterval function to run your code over and over. You also had some minor errors in your code which I have fixed. See your updated fiddle here: https://jsfiddle.net/zvebco3r/3/
You can change the interval time (currently 25ms) to your desired length.
HTML:
<img id="img" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="32" height="32">
JS:
var img = document.getElementById('img');
img.onmouseover = function() {
changeIt = setInterval(function(){
var red = Math.floor(Math.random() * 255);
var green = Math.floor(Math.random() * 255);
var blue = Math.floor(Math.random() * 255);
img.style.backgroundColor="rgb("+red+","+green+","+blue+")";
},25);
}
img.onmouseout = function() {
this.style.backgroundColor="transparent";
clearInterval(changeIt);
}

Javascript Text Rotate

Hello guys it's been bugging me all night. I've been trying to get together a word rotate feature that decreases in speed and then eventually stops. Think of it like a word roulette. So i have the words stored in an array and it looks over the words and displays them. Now, i need to decelerate the speed and slowly make it stop and a random lettter, how would i go about this ?
<?php
$json=file_get_contents('http://ddragon.leagueoflegends.com/cdn/5.18.1/data/en_US/champion.json');
$champions = json_decode($json);
?>
<?php
$championsArray = array();
foreach($champions->data as $champion){
$championsArray[] = $champion->id;
}
shuffle($championsArray);
$speed = 1000;
$count = count($championsArray);
var_dump($championsArray);
?>
<!DOCTYPE html>
<html lang="en" class="demo1 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Super Simple Text Rotator Demo 1: Default Settings</title>
<meta name="description" content="Rotating text is a very simple idea where you can add more content to a text area without consuming much space by rotating an individual word with a collection of others" />
<meta name="keywords" content="jquery text rotator, css text rotator, rotate text, inline text rotator" />
<meta name="author" content="Author for Onextrapixel" />
<link rel="shortcut icon" href="../file/favicon.gif">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<!-- Edit Below -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="jquery.wordrotator.css">
<script src="jquery.wordrotator.js"></script>
</head>
<body class="demo1">
<div class="container">
<p><span id="myWords"></span></p>
<div class="main">
Go!
</div>
</div><!-- Container -->
<script type="text/javascript">
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
function erm() {
var cont = $("#myWords");
$(function () {
$("#myWords").wordsrotator({
randomize: true,
stopOnHover: true, //stop animation on hover
words: ['Heimerdinger','Ezreal','Skarner','Nunu','Kennen','Lulu','Morgana','Sejuani','Draven','Nocturne','KogMaw','Jinx','Khazix','Cassiopeia','Fiora','Maokai','Zac','Quinn','Vladimir','RekSai','LeeSin','TwistedFate','MissFortune','Shaco','Vayne','Sivir','Urgot','Nautilus','Annie','Fizz','Janna','Irelia','Karthus','Trundle','Jax','Graves','Leona','Rengar','Amumu','Malzahar','TahmKench','MasterYi','Twitch','Rumble','Nidalee','Shyvana','Veigar','Singed','Riven','Leblanc','Katarina','Azir','Viktor','Poppy','Ahri','Yorick','Aatrox','Brand','Tryndamere','DrMundo','Hecarim','Braum','Nasus','Pantheon','Elise','Velkoz','Swain','Darius','Kayle','Thresh','Nami','Ekko','Alistar','Galio','Warwick','Orianna','Sona','Lux','Ryze','Jayce','Kassadin','Volibear','Blitzcrank','Gangplank','Karma','XinZhao','Ziggs','Malphite','Tristana','Soraka','Anivia','Xerath','Renekton','Shen','Lissandra','Ashe','Mordekaiser','Talon','Zilean','JarvanIV','Rammus','Yasuo','Vi','Bard','Sion','Udyr','MonkeyKing','Akali','Diana','Varus','Kalista','Evelynn','Teemo','Gnar','Garen','Taric','FiddleSticks','Chogath','Zed','Lucian','Caitlyn','Corki','Zyra','Syndra','Gragas','Olaf']
});
});
eventFire(document.getElementById('myWords'), 'click');
}
</script>
</body>
</html>
Can anyone figure out a solution for this?

You could modify a bit the wordrotator plugin so that it allows to change the speed on each rotate.
You'll have to tweak the animation and the speed increment, but this should give you some ideas:
(function ($) {
$.fn.wordsrotator = function (options) {
var defaults = {
autoLoop: true,
randomize: false,
stopOnHover: false,
changeOnClick: false,
words: null,
animationIn: "flipInY",
animationOut: "flipOutY",
speed: 40,
onRotate: function () {},//you add these 2 methods to allow the effetct
stopRotate: function () {}
};
var settings = $.extend({}, defaults, options);
var listItem
var array_bak = [];
var stopped = false;
settings.stopRotate = function () {//you call this one to stop rotate
stopped = true;
}
return this.each(function () {
var el = $(this)
var cont = $("#" + el.attr("id"));
var array = [];
//if array is not empty
if ((settings.words) || (settings.words instanceof Array)) {
array = $.extend(true, [], settings.words);
//In random order, need a copy of array
if (settings.randomize) array_bak = $.extend(true, [], array);
listItem = 0
//if randomize pick a random value for the list item
if (settings.randomize) listItem = Math.floor(Math.random() * array.length)
//init value into container
cont.html(array[listItem]);
// animation option
var rotate = function () {
cont.html("<span class='wordsrotator_wordOut'><span>" + array[listItem] + "</span></span>");
if (settings.randomize) {
//remove printed element from array
array.splice(listItem, 1);
//refill the array from his copy, if empty
if (array.length == 0) array = $.extend(true, [], array_bak);
//generate new random number
listItem = Math.floor(Math.random() * array.length);
} else {
//if reached the last element of the array, reset the index
if (array.length == listItem + 1) listItem = -1;
//move to the next element
listItem++;
}
$("<span class='wordsrotator_wordIn'>" + array[listItem] + "</span>").appendTo(cont);
cont.wrapInner("<span class='wordsrotator_words' />");
cont.find(".wordsrotator_wordOut").addClass("animated " + settings.animationOut);
cont.find(".wordsrotator_wordIn").addClass("animated " + settings.animationIn);
settings.onRotate();//this callback will allow to change the speed
if (settings.autoLoop && !stopped) {
//using timeout instead of interval will allow to change the speed
t = setTimeout(function () {
rotate()
}, settings.speed, function () {
rotate()
});
if (settings.stopOnHover) {
cont.hover(function () {
window.clearTimeout(t)
}, function () {
t = setTimeout(rotate, settings.speed, rotate);
});
};
}
};
t = setTimeout(function () {
rotate()
}, settings.speed, function () {
rotate()
})
cont.on("click", function () {
if (settings.changeOnClick) {
rotate();
return false;
};
});
};
});
}
}(jQuery));
function eventFire(el, etype) {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
function erm() {
var cont = $("#myWords");
$(function () {
$("#myWords").wordsrotator({
animationIn: "fadeOutIn", //css class for entrace animation
animationOut: "fadeOutDown", //css class for exit animation
randomize: true,
stopOnHover: true, //stop animation on hover
words: ['Heimerdinger', 'Ezreal', 'Skarner', 'Nunu', 'Kennen', 'Lulu', 'Morgana', 'Sejuani', 'Draven', 'Nocturne', 'KogMaw', 'Jinx', 'Khazix', 'Cassiopeia', 'Fiora', 'Maokai', 'Zac', 'Quinn', 'Vladimir', 'RekSai', 'LeeSin', 'TwistedFate', 'MissFortune', 'Shaco', 'Vayne', 'Sivir', 'Urgot', 'Nautilus', 'Annie', 'Fizz', 'Janna', 'Irelia', 'Karthus', 'Trundle', 'Jax', 'Graves', 'Leona', 'Rengar', 'Amumu', 'Malzahar', 'TahmKench', 'MasterYi', 'Twitch', 'Rumble', 'Nidalee', 'Shyvana', 'Veigar', 'Singed', 'Riven', 'Leblanc', 'Katarina', 'Azir', 'Viktor', 'Poppy', 'Ahri', 'Yorick', 'Aatrox', 'Brand', 'Tryndamere', 'DrMundo', 'Hecarim', 'Braum', 'Nasus', 'Pantheon', 'Elise', 'Velkoz', 'Swain', 'Darius', 'Kayle', 'Thresh', 'Nami', 'Ekko', 'Alistar', 'Galio', 'Warwick', 'Orianna', 'Sona', 'Lux', 'Ryze', 'Jayce', 'Kassadin', 'Volibear', 'Blitzcrank', 'Gangplank', 'Karma', 'XinZhao', 'Ziggs', 'Malphite', 'Tristana', 'Soraka', 'Anivia', 'Xerath', 'Renekton', 'Shen', 'Lissandra', 'Ashe', 'Mordekaiser', 'Talon', 'Zilean', 'JarvanIV', 'Rammus', 'Yasuo', 'Vi', 'Bard', 'Sion', 'Udyr', 'MonkeyKing', 'Akali', 'Diana', 'Varus', 'Kalista', 'Evelynn', 'Teemo', 'Gnar', 'Garen', 'Taric', 'FiddleSticks', 'Chogath', 'Zed', 'Lucian', 'Caitlyn', 'Corki', 'Zyra', 'Syndra', 'Gragas', 'Olaf'],
onRotate: function () {
//on each rotate you make the timeout longer, until it's slow enough
if (this.speed < 600) {
this.speed += 20;
} else {
this.stopRotate();
}
}
});
});
eventFire(document.getElementById('myWords'), 'click');
}
#charset"utf-8";
.wordsrotator_words {
display: inline-block;
position: relative;
white-space:nowrap;
-webkit-transition: width 100ms;
-moz-transition: width 100ms;
-o-transition: width 100ms;
transition: width 100ms;
}
.wordsrotator_words .wordsrotator_wordOut, .wordsrotator_words .wordsrotator_wordIn {
position: relative;
display: inline-block;
-webkit-animation-duration: 50ms;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 50ms;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: 50ms;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
}
.wordsrotator_words .wordsrotator_wordOut {
left: 0;
top: 0;
position: absolute;
display: inline-block;
}
.wordsrotator_words .wordsrotator_wordOut span {
width: auto;
position: relative;
}
.wordsrotator_words .wordsrotator_wordIn {
opacity: 0;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
#-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<p><span id="myWords"></span>
</p>
<div class="main"> Go!
</div>
</div>

css animation loader to homepage

i'm new to making web stuff so sorry in advance for my newbyness... anyways
Ive created a SVG animation with css,
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 271.25 232.5" style="enable-background:new 0 0 271.25 232.5;" xml:space="preserve">
<defs>
<style type="text/css">
.st0{fill:#fff;stroke:#000000;stroke-width:8;stroke-miterlimit:5;}
.st0 {
stroke-dasharray: 800;
stroke-dashoffset: 0;
-webkit-animation: dash 2s linear forwards;
-o-animation: dash 2s linear forwards;
-moz-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
#logo {
cursor:pointer;
}
#logo:hover .st0{
fill:#000;
transition: .8s;
}
#logo.clickit .st0 {
fill: grey;
stroke: grey;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<script type="text/javascript">
var clicker = document.querySelector('#logo');
clicker.addEventListener('click', function (){
this.classList.toggle('clickit');
});
</script>
</defs>
<path class="st0" d="M14.872,26.016c0.347,1.109,0.539,1.82,0.79,2.511c12.477,34.228,24.958,68.452,37.44,102.679
c10.294,28.223,20.59,56.445,30.883,84.67c0.501,1.373,0.697,2.684,2.854,2.678c30.238-0.082,60.478-0.068,90.716-0.02
c1.515,0.002,2.172-0.516,2.715-1.867c3.9-9.707,7.819-19.406,11.884-29.045c0.846-2.006,0.83-3.67,0.09-5.686
c-18.811-51.182-37.568-102.383-56.285-153.598c-0.636-1.74-1.439-2.373-3.355- 2.369C94.2,26.031,55.798,26.016,17.396,26.016
C16.652,26.016,15.908,26.016,14.872,26.016z M202.77,162.303c18.564-45.643,36.941-90.824,55.349- 136.08
c-35.402,0-70.482,0-105.825,0C169.125,71.6,185.857,116.709,202.77,162.303z"/>
</svg>
Id like to be able to run this animation while my website loads/refreshes but instead the animation plays through and stays onto the page not redirecting to some basic three.js code i was testing...
the index file looks like this...
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>TEST</title>
<script src="../build/three.min.js"></script>
<script src="../build/jquery-1.9.0.js"></script>
<meta charset="UTF-8">
<meta name="description" content="coolstuff">
<meta name="keywords" content="Keywords, blah">
<meta name="author" content="My name">
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div style="text-align:center;padding:150px 0;">
<object>
<embed src="vlogo.svg" width="30%" height="30%">
</object>
</div>
<div id="WebGL-output">
</div>
<script type="text/javascript">
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth /window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
sphereGeometry = new THREE.SphereGeometry(10, 20, 20);
sphereMaterial = new THREE.MeshLambertMaterial({wireframe: true, color: 0x000000});
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = -30;
camera.lookAt(scene.position);
$("#Webgl-output").append(renderer.domElement);
render();
function render(){
sphere.rotation.x += 0.02;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
});
</script>
</body>
</html>
All help is needed - thanks in advance!

Categories