How can I make the image fade out the grayscale when I mouseover the div?
This is the page http://www.stirringminds.com/partners/
HTML:
<div class="col-xs-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/aws_logo_web_300px.png"/><span style="position:relative;bottom:15%;left:7%;color:#000;">Amazon Web Services</span><br><span style="position:relative;left:48.5%;bottom:50%;padding-right:-100px;">$1000 credits for 1 year.</span></div>
CSS:
.dealsdiv {
height: 100px;
}
.dealsimg {
width:150px;
height:auto;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.dealsdiv {
height: 100px;
}
.dealsimg {
width:150px;
height:auto;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
transition: filter 400ms ease-in-out; //this is optional. change the duration if you want.
}
.dealsdiv:hover .dealsimg {
filter: grayscale(0);
}
Use transition
.dealsimg {
-webkit-transition: -webkit-filter 300ms;
transition:filter 300ms;
}
.dealsdiv:hover .dealsimg{
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}
this is my first answer on StackOverflow, but I believe I can at least point you in the right direction.
One answer to this would be to use JQuery and the HTML canvas element.
// waits until all images have loaded
$(window).load(function(){
//Fade in images so there isn't a color "pop" document load and then on window load
$(".item img").fadeIn(500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
SOURCE <-- from a great walk through from Darcy Clarke, with a demo of (I think) exactly what you're looking for.
Note:
With the above code, remember:
you should set the target image (eg: .post-img, img, .gallery img, etc.)
you may change the animation speed (ie. 1000 = 1 second)
Related
I'm trying to apply a 3d rotation hover effect on the child elements of a container, but I'm having difficulty to make it work with for loop. Code works fine when I remove the loop and [i] tags, and use the effect on a single element, but it doesn't when I try to apply the effect on all child elements. Do you know what part I'm doing wrong?
let rotate = document.getElementsByClassName("group")[0].getElementsByTagName("a");
var i;
for (i=0; i<rotate.length; i++) {
const height = rotate[i].clientHeight;
const width = rotate[i].clientWidth;
rotate[i].addEventListener('mousemove', handleMove)
function handleMove(e) {
const xVal = e.layerX;
const yVal = e.layerY;
const yRotation = 20 * ((xVal - width / 2) / width);
const xRotation = -20 * ((yVal - height / 2) / height);
const string = 'perspective(500px) scale(1.1) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)';
rotate[i].style.transform = string;
}
rotate[i].addEventListener('mouseout', function() {rotate[i].style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'})
rotate[i].addEventListener('mousedown', function() {rotate[i].style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)'})
rotate[i].addEventListener('mouseup', function() {rotate[i].style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)'})
}
https://codepen.io/technokami/pen/abojmZa
You can use querySelectorAll() to get an array of selected elements (use css selector) then use forEach() loop on your previously created array.
Here's a working demo.
/* Get elements and loop on*/
let elements = document.querySelectorAll(".group > a");
elements.forEach((el) => {
/* Get the height and width of the element */
const height = el.clientHeight;
const width = el.clientWidth;
/*
* Add a listener for mousemove event
* Which will trigger function 'handleMove'
* On mousemove
*/
el.addEventListener("mousemove", handleMove);
/* Define function a */
function handleMove(e) {
/*
* Get position of mouse cursor
* With respect to the element
* On mouseover
*/
/* Store the x position */
const xVal = e.layerX;
/* Store the y position */
const yVal = e.layerY;
/*
* Calculate rotation valuee along the Y-axis
* Here the multiplier 20 is to
* Control the rotation
* You can change the value and see the results
*/
const yRotation = 20 * ((xVal - width / 2) / width);
/* Calculate the rotation along the X-axis */
const xRotation = -20 * ((yVal - height / 2) / height);
/* Generate string for CSS transform property */
const string =
"perspective(500px) scale(1.1) rotateX(" +
xRotation +
"deg) rotateY(" +
yRotation +
"deg)";
/* Apply the calculated transformation */
el.style.transform = string;
}
/* Add listener for mouseout event, remove the rotation */
el.addEventListener("mouseout", function() {
el.style.transform = "perspective(500px) scale(1) rotateX(0) rotateY(0)";
});
/* Add listener for mousedown event, to simulate click */
el.addEventListener("mousedown", function() {
el.style.transform = "perspective(500px) scale(0.9) rotateX(0) rotateY(0)";
});
/* Add listener for mouseup, simulate release of mouse click */
el.addEventListener("mouseup", function() {
el.style.transform = "perspective(500px) scale(1.1) rotateX(0) rotateY(0)";
});
});
html {
display: flex;
justify-content: center;
align-items: center;
align-contents: center;
height: 100%;
}
/* Styling purpose */
.group {
display: block
}
/* Styles for the tilt block */
.group>a {
display: inline-block;
height: 200px;
width: 300px;
background-color: grey;
margin: 0 auto;
transition: box-shadow 0.1s, transform 0.1s;
/*
* Adding image to the background
* No relation to the hover effect.
*/
background-image: url(http://unsplash.it/300/200);
background-size: 100%;
background-repeat: no-repeat;
}
.group a:hover {
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
cursor: pointer;
}
<div class="group">
<a href="#" target="_blank">
<!-- Container for our block -->
</a>
<a href="#" target="_blank">
<!-- Container for our block -->
</a>
</div>
<div class="group">
<a href="#" target="_blank">
<!-- Container for our block -->
</a>
<a href="#" target="_blank">
<!-- Container for our block -->
</a>
</div>
Instead of trying to retrieve data using an array and index (which have problems with scope) You should query the element itself when the event is handled. The below code does this via the this keyword, which in this context, with an event handler added via code, can be considered to refer to the element which triggered the event currently being handled.
So, I've grabbed the element's width and height each time the mousemove handler fires and in the other 3 handlers, i've used this in-place of self.rotate[i].
"use strict";
function qsa(sel,parent=document){return parent.querySelectorAll(sel)}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
let targets = qsa('div');
targets.forEach(
function(curTgt, index, collection)
{
curTgt.addEventListener('mousemove', onMouseMove);
curTgt.addEventListener('mouseout', function(evt) {this.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'})
curTgt.addEventListener('mousedown', function(evt) {this.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)'})
curTgt.addEventListener('mouseup', function(evt) {this.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)'})
}
);
function onMouseMove(evt)
{
let height = this.clientHeight;
let width = this.clientWidth;
let xVal = evt.layerX;
let yVal = evt.layerY;
let yRotation = 20 * ((xVal - width / 2) / width);
let xRotation = -20 * ((yVal - height / 2) / height);
let string = 'perspective(500px) scale(1.1) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)';
this.style.transform = string;
}
}
div
{
display: inline-block;
border: solid 1px #999;
padding: 16px;
margin: 8px;
}
<div>2</div><div>1</div><div>4</div><div>3</div><div>6</div>
I'm building a transition where I want to scale up a thumbnail to fill the viewport on click.
Currently I got the calculations right on finding the right scale ratio based on the viewport and it's size, but I'm having problems on centring the image in the viewport after it's scaled/expanded.
I only have the problem when I'm using transform-origin: center center; and the image is centered in a fixed full screen container. Here is a jsfiddle showing my problem.
I've also made a jsfiddle showing how it is without the centering. This is close to what I want, except I want to be able to transition the image from other positions rather than the top left corner.
Here is the code I have so far
// Helper fucntions
const getWindowWidth = () => {
return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
}
const getWindowHeight = () => {
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}
// Get element
const El = document.getElementById('test');
// Add listener
El.addEventListener('click', () => {
// Viewport size
const viewH = getWindowHeight();
const viewW = getWindowWidth();
// El size
const elHeight = El.offsetHeight;
const elWidth = El.offsetWidth;
// Scale ratio
let scale = 1;
// Get how much element need to scale
// to fill viewport
// Based on https://stackoverflow.com/a/28475234/1719789
if ((viewW / viewH) > (elWidth / elHeight)) {
scale = viewW / elWidth;
} else {
scale = viewH / elHeight;
}
// Center element
const x = ((viewW - ((elWidth) * scale)) / 2);
const y = ((viewH - ((elHeight) * scale)) / 2);
// matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
El.style.transform = 'matrix(' + scale + ', 0, 0, ' + scale + ', ' + x + ', ' + y + ')';
});
And some css:
.Container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#El {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
transform-origin: center center;
transform: translate(-50%, -50%);
transition: transform .3s ease-in-out;
}
The best solution would be getting the current position of the clicked thumbnail (not always centered) and from that scale it to fill the screen. But I'm not really sure where to start to be able to do that.
Is this the effect you are looking for?
CSS:
.Container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#test {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
transform: translate(-50%, -50%);
transition: all 3.3s ease-in-out;
}
#test.rdy{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
JS:
// Helper fucntions
const getWindowWidth = () => {
return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
}
const getWindowHeight = () => {
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}
const El = document.getElementById('test');
El.addEventListener('click', () => {
const viewH = getWindowHeight();
const viewW = getWindowWidth();
const elHeight = El.offsetHeight;
const elWidth = El.offsetWidth;
let scale = 1;
if ((viewW / viewH) > (elWidth / elHeight)) {
scale = viewW / elWidth;
} else {
scale = viewH / elHeight;
}
El.style.width = elWidth * scale + 'px';
El.style.height = elHeight * scale + 'px';
//Add .rdy class in case that position needs resetting :)
document.getElementById('test').className += ' rdy';
});
//A hack to make height transition work :)
window.onload = function(){
El.style.height = El.offsetHeight + 'px';
};
I want to know if there is a way to rotate images without using fotoshop, i want to use css or javascript
The result that im looking for is here
The following solution works but i want to rotate my image without hover property , if i remove the hover here the image dont rotate
<style>
#card img:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(180deg);
transition-duration: 1.5s;
-webkit-transition-duration:1s;
}
</style>
if found the efect that i want here here
Use CSS' rotate, rotateX, rotateY, rotateZ. Little example:
img {
transform: inherit;
transition: all 0.3s;
width: 100px;
}
img:hover {
transform: rotateX(45deg)
rotateY(45deg)
rotateZ(45deg);
}
Fiddle
rotate is 2D transform method and rotateX, rotateY, rotateZ are 3D transform methods.
W3Schools references:
2D transforms
3D transforms
img {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
I think you are looking like following code and Here is the fiddle Link and Other Link
This might help you!!
<img class="image" src="https://www.arxan.com/wp-content/uploads/assets1/images/demo.png" alt="" width="120" height="120">
<style>
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
Look at this class :
var ImgRotator = {
angle: parseInt(45),
image: {},
src: "",
canvasID: "",
intervalMS: parseInt(500),
jump: parseInt(5),
start_action: function (canvasID, imgSrc, interval, jumgAngle) {
ImgRotator.jump = jumgAngle;
ImgRotator.intervalMS = interval;
ImgRotator.canvasID = canvasID;
ImgRotator.src = imgSrc;
var image = new Image();
var canvas = document.getElementById(ImgRotator.canvasID);
image.onload = function () {
ImgRotator.image = image;
canvas.height = canvas.width = Math.sqrt(image.width * image.width + image.height * image.height);
window.setInterval(ImgRotator.keepRotating, ImgRotator.intervalMS);
//theApp.keepRotating();
};
image.src = ImgRotator.src;
},
keepRotating: function () {
ImgRotator.angle += ImgRotator.jump;
var canvas = document.getElementById(ImgRotator.canvasID);
var ctx = canvas.getContext("2d");
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(ImgRotator.angle * Math.PI / 180);
ctx.drawImage(ImgRotator.image, -ImgRotator.image.width / 2, -ImgRotator.image.height / 2);
ctx.restore();
}
}
Usage :
ImgRotator.start_action(canvasID, image_url, intervalInMilliseconds, jumgAngle);
HTML (just provide a canvas where you want to rotate the image):
<canvas id="canva" width="350" height="350"></canvas>
Infact Using CSS and jquery we can do better, I mean rotate the whole body on load
function bodyRotate() {
var angleX = 0, angleY = 0, angleZ = 0;
var incX = -1, incY = -1, incZ = -1;
var xStop = -180, yStop = -180, zStop = -180;
var timerID =
window.setInterval(function () {
angleX += incX; angleY += incY; angleZ += incZ;
var angle = "rotateX(_X_deg) rotateY(_Y_deg) rotateZ(_Z_deg)";
angle = angle.replace("_X_", angleX).replace("_Y_", angleY).replace("_Z_", angleZ)
$("body").css({ "transform": angle });
if (angleX < xStop && angleY < yStop && angleZ < zStop) {
incX *= -1; incY *= -1; incZ *= -1;
}
if (angleX > 0 && angleY > 0 && angleZ > 0) {
window.clearInterval(timerID);
$("body").css({ "transform": "rotateX(0deg) rotateY(0deg) rotateZ(0deg)" });
}
}, 10);
}
$(document).ready(bodyRotate);
I'd like to know if there's a way to explore the content of a div by moving mouse? like for example having a 1000px*1000px pic inside a 500px*500px div content in overflow:hidden and being able to see the rest of the picture by putting the cursor in the right-bottom side of the div.
And if there's a way how should I proceed ?
Something nice and smooth?
jQuery(function($) {
const $mmGal = $('#mmGal'),
$mmImg = $('#mmImg'),
damp = 10; // 1 = immediate, higher number = smoother response
let X = 0, Y = 0,
mX = 0, mY = 0,
wDiff = 0, hDiff = 0,
zeno, tOut;
// Get image size after it's loaded
$mmImg.one('load', function() {
wDiff = (this.width / $mmGal.width()) - 1;
hDiff = (this.height / $mmGal.height()) - 1;
}).each(function() {
if (this.complete) $(this).trigger("load");
});
$mmGal.on({
mousemove(ev) {
mX = ev.pageX - this.offsetLeft;
mY = ev.pageY - this.offsetTop;
},
mouseenter() {
clearTimeout(tOut);
clearInterval(zeno);
zeno = setInterval(function() { // Zeno's paradox "catching delay"
X += (mX - X) / damp;
Y += (mY - Y) / damp;
// Use CSS transition
$mmImg.css({transform: `translate(${-X * wDiff}px, ${-Y * hDiff}px)`});
// If instead you want to use scroll:
// $mmGal[0].scrollTo(X * wDiff, Y * hDiff);
}, 26);
},
mouseleave() {
// Allow the image to move for some time even after mouseleave
tOut = setTimeout(function() {
clearInterval(zeno);
}, 1200);
}
});
});
#mmGal {
position: relative;
margin: 0 auto;
width: 500px;
height: 220px;
overflow: hidden;
background: #eee;
}
#mmImg {
display: block;
}
<div id="mmGal">
<img id="mmImg" src="https://i.stack.imgur.com/BfcTY.jpg">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Here's another similar approach to mousemove element in opposite direction
http://en.wikipedia.org/wiki/Zeno%27s_paradoxes
give widht and height to div wrapped for the image
here is the DEMO
on :hover add overflow: visible; to the div
This is almost what you want. See this fiddle http://jsfiddle.net/sajith/RM9wK/
HTML
<div id="container"><img src="http://farm4.staticflickr.com/3668/12858161173_8daa0b7e54_b.jpg"/></div>
CSS
#container {
width:300px;
height:300px;
overflow: hidden;
}
#container img {
position: relative;
}
Javascript
$(function() {
$( "#container" ).mousemove(function( event ) {
var width = $("#container img").width();
var height = $("#container img").height();
var divWidth = $("#container").width();
var divHeight = $("#container").height();
var xPos = (width / divWidth - 1) * event.pageX
var yPos = (height / divHeight -1) * event.pageY
$("#container img").css('left', '-'+ xPos+'px');
$("#container img").css('top', '-'+ yPos+'px');
});
});
I would use "triggers" (hot spot) ~ add some small div element and set their position as you want, now when mouse enter trigger some events....
Simple Example: jsfiddle
CSS
div.container {
position:relative;
width:100px;
height:100px;
overflow:hidden;
}
.trigger {
right:0;
bottom:0;
position:absolute;
z-index:2;
width:10px;
height:10px;
background-color:transparent;
}
HTML
<div class='container'>
<img src='http://static.adzerk.net/Advertisers/12f0cc69cd9742faa9c8ee0f7b0d210e.jpg' />
<div class='trigger'></div>
</div>
jQuery
$('.trigger').mouseenter(
function(){
$(this).parent('.container').css({
'width':'220px',
'height':'250px'
});
});
$('.container').mouseleave(
function(){
$(this).css({
'width':'100px',
'height':'100px'
});
});
I have to show progress graphs exactly in following way where percentage would be in center of circular graph
How can i do this using javascript/jQuery?
Can it be done using Google Chart?
There's a plugin for this at:
http://anthonyterrien.com/knob/
Demo
jQuery Knob
canvas based ; no png or jpg sprites.
touch, mouse and mousewheel, keyboard events implemented.
downward compatible ; overloads an input element...
I searched and know there are at least 5 ways to create Circular progress indicator:
They include:
jquery.polartimer.js
jQuery Knob
CSS3 pie graph timer with jquery
circular progressBar by jQuery andCSS3
ProgressBar.js
I would recommend Highcharts JS for all of your JavaScript graphing needs
Browse through more of the demos; I think you're looking for the Donut Chart :)
You can use CSS sprites (google) for this purpose, if you want to show multiples of 10 (0%, 10%, 20% etc). I guess you need to be a graphics guru to create the sprite..
The sprite is one image containing more than one image. For your purpose, you can create an image, say 16x160px. Imagine that this image is divided into ten 16x16px "slices" and draw the corresponding percentage on that slice. You can then use CSS and JavaScript to show one "frame" from this sprite.
If you are not targeting old browsers, you can easily do that by drawing on a canvas element. This gives you the freedom to do whatever you need with the chart.
That means this solution's only requirement is jQuery and any browser that supports the canvas element...IE9+
Here's a code snippet that demonstrates it...
//input
var dimens = 256;
var color = "rgba(54, 162, 235, 0.9)";
var padding = 12;
var width = 10;
var value = 80;
var maxValue = 100;
var countFontRatio = 0.25; //ratio in relation to the dimens value
$(function() {
$(".chart-total").each(function(idx, element) {
var _render = function() {
var startingPoint = -0.5;
var pointValue = startingPoint;
var currentPoint = startingPoint;
var timer;
var _ctx;
var $canvas = $(element).find("canvas");
var canvas = $canvas.get(0);
pointValue = (value / (maxValue / 20) * 0.1) - 0.5;
canvas.height = dimens;
canvas.width = dimens;
if (!countFontRatio)
$canvas.parent().find(".legend-val").css("font-size", dimens / value.toString().length);
else
$canvas.parent().find(".legend-val").css("font-size", dimens * countFontRatio);
_ctx = canvas.getContext("2d");
var _draw = function() {
_ctx.clearRect(0, 0, dimens, dimens);
_ctx.beginPath();
_ctx.arc(dimens / 2, dimens / 2, (dimens / 2) - padding, startingPoint * Math.PI, 1.5 * Math.PI);
_ctx.strokeStyle = "#ddd";
_ctx.lineWidth = 2;
_ctx.lineCap = "square";
_ctx.stroke();
_ctx.beginPath();
_ctx.arc(dimens / 2, dimens / 2, (dimens / 2) - padding, startingPoint * Math.PI, currentPoint * Math.PI);
_ctx.strokeStyle = color;
_ctx.lineWidth = width;
_ctx.lineCap = "round";
_ctx.stroke();
currentPoint += 0.1;
if (currentPoint > pointValue) {
clearInterval(timer)
}
};
timer = setInterval(_draw, 100);
};
_render();
$(window).resize(function() {
_render();
});
});
})
body {
font-family: 'Open Sans', sans-serif;
color: #757575;
}
.chart-total {
position: relative;
margin: 0 auto;
}
.chart-total-legend {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.legend-val {
font-size: 4em;
display: block;
text-align: center;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.legend-desc {
display: block;
margin-top: 5px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300,400" rel="stylesheet">
<div class="chart-total" style="max-width: 256px;">
<canvas height="256" width="256"></canvas>
<div class="chart-total-legend">
<span class="legend-val" value="3933" style="font-size: 64px;">3,933</span>
<span class="legend-desc">Total Progress</span></div>
</div>
I don't think you can do it with javascript/jquery/css alone. You need to render different images, for each step one and display the proper one.
It could be made with flash (probably there are ready made components) or with svg or html5 canvas element or an api which uses one of the above backends.