Animate dot after dot from an image using CSS3 or jQuery - javascript

I want to animate dot after dot from the below image but my problem is with the curved section of the image (bottom of the image).
At the start, all dots should be hidden and then one by one each dot should be animated into view.
I have the below code:
<div id="dots1"></div>
#dots1 {
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-webkit-transition: height 1s linear;
transition: height 1s linear;
position: absolute;
left: 50%;
z-index: 1;
margin: 0 0 0 -1px;
width: 3px;
height: 0;
background: url(image/pic.png) 0 0 no-repeat;
}

You can achieve this effect using two SVG path elements like in the below snippet. Two paths in the form of the curved line that you need is created. One path (which is at the bottom) has the dot pattern for the stroke (black colored) and another duplicate path which is on top. The duplicate path stroke is set such that for one full length of the path it is white in color and for another length it is transparent.
An animation is added on the duplicate path to animate stroke's offset. As offset is animated, the white portion of the stroke slowly moves out of view and the transparent portion starts coming into view. As the white portion starts going out of view, the black dots below it start getting revealed.
It is a bit complex to understand at start but once you get familiar with path, stroke-dasharray and stroke-dashoffset it will look simple.
svg {
height: 400px;
}
path {
fill: none;
}
path.dot {
stroke: black;
stroke-dasharray: 0.1 4;
stroke-linecap: round;
}
path.top {
stroke: white;
stroke-width: 2;
stroke-dasharray: 250;
stroke-linecap: round;
animation: dash 15s linear forwards;
}
#keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -250;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox='0 0 100 100'>
<path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='dot' />
<path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='top' />
</svg>

Try the following:
HTML
<div id="dots">
<img src="http://i.stack.imgur.com/oxUh8.png">
</div>
jQuery
$("#dots").css("height", "514px");
CSS
#dots{
overflow: hidden;
height: 10px;
transition: all 3s cubic-bezier(.5, 1, 0, .5);
}
See: https://jsfiddle.net/brezkryx/

Related

Consistent filling of SVG's rectangles

How to make each of these squares filled with red colour consistently left to right; and when one filled with red, previous will have default colour?
#foo > rect {
height: 32px;
width: 32px;
}
<svg id=foo height=32 width=160>
<rect x=0 y=0 />
<rect x=64 y=0 />
<rect x=128 y=0 />
</svg>
This animation must be repeatable.
If you are open to a CSS solution you can simulate such effect using background animation where you can easily scale to any number of square but without fading:
.rect {
height: 32px;
width:calc(40px*10); /* 10 Squares*/
background:
/* This gradient will make the red color to fade from the first to the last*/
linear-gradient(red,red) 0 0/32px 100% no-repeat,
/* This gradient will create the squares (32px of black then 8px of transparent)*/
repeating-linear-gradient(to right,black 0 32px,transparent 32px 40px);
margin:0 5px;
animation:change 10s steps(10) infinite;
}
#keyframes change{
to {
background-position:calc(100% + 32px) 0,0 0;
}
}
<div class="rect"></div>
With CSS variable you can control the different values:
.rect {
--s: 32px; /* Square size */
--nb: 10; /* Square number */
--gap: 8px; /* gap between squares */
--c1:black;
--c2:red;
height: var(--s);
width:calc((var(--gap) + var(--s))*var(--nb));
background:
linear-gradient(var(--c2),var(--c2)) 0 0/var(--s) 100% no-repeat,
repeating-linear-gradient(to right,var(--c1) 0 var(--s),#fff var(--s) calc(var(--s) + var(--gap)));
margin:5px;
animation:change calc(var(--nb)*1s) steps(var(--nb)) infinite;
}
#keyframes change{
to {
background-position:calc(100% + var(--s)) 0,0 0;
}
}
<div class="rect"></div>
<div class="rect" style="--nb:8;--s:50px;--c1:green;--c2:yellow"></div>
<div class="rect" style="--nb:15;--s:10px;--c2:blue"></div>
Use CSS keyframes:
#foo > rect {
height: 32px;
width: 32px;
animation: anim 3s infinite;
}
#foo > rect:nth-of-type(1){
animation-delay: 0s;
}
#foo > rect:nth-of-type(2){
animation-delay: 1s;
}
#foo > rect:nth-of-type(3){
animation-delay: 2s;
}
#keyframes anim{
0% { fill: black; }
50% { fill: red; }
100% { fill: black; }
}
<svg id=foo height=32 width=160>
<rect x=0 y=0 />
<rect x=64 y=0 />
<rect x=128 y=0 />
</svg>

SVG doesn't fill once the animation is over

My name is Daniel Götz and i'm currently working on my portfolio website but i have a problem. My SVG animation Doesn't fill once it is over.
My website : http://20162.hosts.ma-cloud.nl/portfoliowebsite/
If you scroll down to the H1 called: "Mijn skills" You can see the Photoshop logo being animated. But i want to fill once the animation is over.
Is there some way i can let it fill once the animation is over?
HTML:
<div class="photoshop">
<svg id="mySVG" class="finishe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 486"><defs><style>.a{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>adobesave</title><path class="a" d="M321.27,328.414c-16.269,0-37.082-7.252-47.173-13.307l-9.743,39.2c13.307,7.252,33.866,12.3,56.916,12.3,50.361,0,76.376-24.124,76.376-57.012-.379-25.891-14.412-42.887-47.932-54.333C328.177,247.626,321.4,243.3,321.4,235.044c0-8.988,7.506-14.412,20.813-14.412,15.136,0,30.177,5.8,38.185,10.122l9.714-37.839c-10.817-5.424-29.168-10.091-49.76-10.091-43.58,0-71.676,24.88-71.676,57.644-.379,20.938,13.655,40.774,50.139,52.976,20.432,6.906,25.856,11.194,25.856,20.182C344.668,322.644,337.762,328.414,321.27,328.414Z" transform="translate(0.5 0.5)"/><path class="a" d="M141.687,276.194h0v86.845H87.353V123.446C104.225,120.61,128,118.4,161.489,118.4c33.9,0,58.021,6.4,74.167,19.456,15.64,12.2,25.983,32.417,25.983,56.194,0,23.744-7.881,43.957-22.42,57.643-18.6,17.6-46.417,25.479-78.834,25.479A139.4,139.4,0,0,1,141.687,276.194Zm.1-114.182h0v71.675c4.7,1.011,10.373,1.357,18.257,1.357,29.168,0,47.3-14.758,47.3-39.669-.125-22.3-15.545-35.572-43.01-35.572C153.261,159.8,145.629,160.907,141.782,162.012Z" transform="translate(0.5 0.5)"/><path class="a" d="M0,0V485H485V0ZM455,455H30V30H455Z" transform="translate(0.5 0.5)"/></svg>
</div>
CSS:
.photoshop {
height: 100px;
width: 100px;
opacity: 0;
}
.js-photoshop-animate{
opacity: 1;
}
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 4000ms ease-in-out 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
100% {
stroke-dashoffset: 0;
}
}
/* Style */
#mySVG * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#mySVG finished * {
fill-opacity: 1;
}
JAVASCRIPT:
var $photoshop = $('.photoshop');
$photoshop.waypoint(function(){
console.log('Waypoint!');
$photoshop.addClass('js-photoshop-animate rzzhgcav_0');
}, {offset: '90%'} );
/* JavaScript */
new Vivus('mySVG', {}, function (obj) {
obj.el.classList.add('finished');
});
Include multiple attributes in your animation, leave off the transition:
Start and end of the individual property animations can overlap if you leave out the property you want to "run through" a keyframe:
If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist.
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 5000ms 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
0% {
stroke-dashoffset: 27047;
fill-opacity: 0
animation-timing-function: ease-in-out
}
50% {
fill-opacity: 0
animation-timing-function: linear
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1
}
}

Is it possible to fade in radially using jQuery?

I am trying to make a logo fade in on the page load using jQuery.
You can normally accomplish it on page load by just using:
$(document).ready(function() {
$("div").fadeIn(800);
});
I am wondering if you could either manipulate the event .fadeIn(); or any jQuery to have the image fade in a circular motion. I am trying to go for a single circular motion, not multiple fade in motions. I know there are ways to manipulate the linear direction of an object fading in using top, left, right, or down. I haven't found a way to make it fade in ( or fade out ) to a webpage using a circular direction.
In words:
First, the image from the angles 0 to 90 degrees will fade in, in order.
Next, the image from the angles 90 to 180 will fade in, in order.
Then, the image from the angles 180 to 270 will fade in, in order.
Finally, you'll be able to see the image from 270 to the full image.
If you couldn't follow the words, here is a visual example of what I am trying to accomplish, but it isn't as smooth as I am going for.
So far I have tried having it fade down from the top but then maybe rotate it but that wasn't what I was looking for. I'm not very knowledgeable on how to fix problems in jQuery, but I am asking how do I accomplish this, not specifically my code.
If this can't be accomplished using jQuery, then can it be accomplished using either CSS or some sort of jQuery plugin? If it is possible, is there a way to fade the div out the same way?
If I understand you right you can try something like this:
example: http://jsfiddle.net/hju3dyot/
if you want it to appear more like a scroller
you can simple reduce time in the setTimeout function like this
HTML:
<div id="container">
<div class="img" id="left-top"></div>
<div class="img" id="right-top"></div>
<div class="img" id="left-bottom"></div>
<div class="img" id="right-bottom"></div>
</div>
CSS:
#container {
height: 900px;
width: 450px;
margin: 2% auto;
border: 1px solid #5970bb;
border-radius: 3px;
box-shadow: 10px 10px 20px rgba(35, 35, 35, 0.50);
padding: 5px;
}
.img {
background: url(http://s14.postimg.org/cdkclcbep/cat.jpg) no-repeat;
height: 250px;
width: 200px;
display: inline-block;
opacity: 0;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
#left-top {
background-position: -34px 0;
}
#right-top {
background-position: -199px -10px;
}
#left-bottom {
background-position: -25px -210px;
}
#right-bottom {
background-position: -208px -207px;
}
.visible {
opacity: 1;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
SCRIPT:
var arr = ["#left-top", "#right-top", "#right-bottom", "#left-bottom"];
var counter = 0;
$(document).ready(function () {
function makeItVisible() {
if (counter < arr.length) {
$(".img").removeClass("visible");
$(arr[counter++]).addClass("visible");
} else {
counter = 0;
return;
}
};
setInterval(makeItVisible, 2000);
});

How to add css transitions to js scroll in header?

I have a header that appears when the page scrolls down. I am trying to add css transitions to make it fade in and out because I've read that using javascript for fading is not as efficient.
.header-wrapper {
top:0;
left:0;
right:0;
position: fixed;
display:none;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
.header-wrapper.active {
display:block;
}
.header {
background-color:#000;
height:80px;
}
Here is the js fiddle
$(window).scroll(function () {
var y = $(window).scrollTop();
// if above 300 and doesn't have active class yet
if (y > 300 && !$('.header-wrapper').hasClass('active')) {
$('.header-wrapper').addClass('active');
// if below 300 has still has active class
} else if(y <= 300 && $('.header-wrapper').hasClass('active')) {
$('.header-wrapper').removeClass('active');
}
});
Transitions are added with the css3 property transition.
One common reason for confusion: you can only transition properties that accept numeric values. Thus, you can't transition between display: block and display: none.
However you can transition between opacity: 0 and opacity: 1 with:
transition: 0.5s opacity
That would look something like this:
.bottomMenu {
...
opacity: 0;
transition: 0.5s opacity;
...
}
.bottomMenu.active {
opacity: 1;
}
For your particular case, I might recommend transitioning the height between 0 and 60px.
For that you can use:
transition: 0.5s height
So:
.bottomMenu {
...
height: 0;
transition: 0.5s height;
...
}
.bottomMenu.active {
height: 80px;
}
To animate the opacity the element must be visible. So remove the display:none and make it fully transparent (opacity:0). You can then use CSS transitions to animate the opacity when the classname changes:
.bottomMenu {
...
display:block;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.bottomMenu.active {
opacity:1
}
http://jsfiddle.net/oL9ro4gL/6/
Furthermore, you're not restricted to just animating the opacity:
.bottomMenu {
...
transition: all .25s ease-in-out;
}
.bottomMenu.active {
opacity:1;
height: 60px;
background-color: blue;
transform:rotate(180deg);
color:white;
font-size:40px;
etc...
}
http://jsfiddle.net/oL9ro4gL/8/
Unfortunately, you can't animate the display property. See this question and its suggestions for workarounds.

How can I create custom shaped graphs?

I need to create a graph with a custom shape. For eg: to represent the population, I need to create a human shape inside which I would show the statistics and data. Is there any javascript library that would help me do this? would D3 js help me?
Any help is appreciated.
Thank you.
You can even try using this approach of using two images and overlaying each other.
Let's say you want a human fontawesome icon as a chart, convert the icon to .png image using http://fa2png.io/ and then use that in the below code.
http://codepen.io/FDfranklin/pen/yGbCK
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
<div class="bw"></div>
<div class="show"></div>
<div id="bar" data-total="100">
<div class="text">Currently at <br/><span>70</span><br><i>Click To Give</div>
</div>
</div>
#import url(http://fonts.googleapis.com/css?family=Concert+One);
html, body {
margin: 0 auto;
}
.container {
width:450px;
height:328px;
position:relative;
display:inline-block;
vertical-align:top;
background-clip:content-box;
}
.bw {
width:100%;
height:100%;
position:absolute;
bottom:0; background:url(http://fdfranklin.com/usf-bull-bw.png) fixed left top;
background-clip:content-box;
}
.show {
width:100%;
height:0%;
position:absolute;
bottom:0; background:url(http://fdfranklin.com/usf-bull.png) fixed left top;
background-clip:content-box;
}
#bar {
width: 100%;
height: 0%;
position: absolute;
bottom: 0;
border-top: 1px dashed black;
.load {
opacity: 1;
}
div {
position: absolute;
line-height: 22px;
width: 110px;
top: -40px;
right: -113px;
font-family: arial, sans-serif;
font-size: 16px;
text-align: center;
color: white;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 8px;
background: #2f574b;
transition: background 700ms ease-in-out;
opacity: 0;
-webkit-transition: opacity 3s ease-in, background 700ms ease-in-out;
-moz-transition: opacity 3s ease-in, background 700ms ease-in-out;
-o-transition: opacity 3s ease-in, background 700ms ease-in-out;
-ms-transition: opacity 3s ease-in, background 700ms ease-in-out;
transition: opacity 3s ease-in, background 700ms ease-in-out;
&:hover {
background: #B1A875;
}
span {
font-family: 'Concert One', sans-serif;
line-height: 30px;
font-size: 34px;
color: #white;;
}
}
}
<script>
percent = $('#bar div span').html();
total = $('#bar').attr('data-total');
percentStart = 0;
setInterval(function() {
$('.show').css('height',percentStart/total*100+'%');
$('#bar').css('height',percentStart/total*100+'%');
$('#bar div span').html('%'+percentStart);
if(percentStart<percent) {percentStart=percentStart+1;}
},35);
$("#bar div").addClass("load");
</script>
I don't know about the "human-shape" thing and I don't think there is any tool out there that does so.
However, the best and closest resource I have come across is Highcharts It has all sorts of pie, spline, bar, etc. you will need to plot your data interactively.
I also recommend taking a look at Google Charts. One thing Highcharts does not provide is map based data plotting. Google has something known as GeoMap for data plotting information with locations as specific as a small town around the globe
Alternatively, a simple way of doing this is setting a repeating background image and altering DIV width/heights based on your counts. Benefit is that there is virtually no performance hit in any browser, since DIV heights and repeating image backgrounds are fairly optimized.
Idea is to pick a tile size (ex: 25 x 11) and break it up into two DIVs. In image above, the first DIV is visually accountable for two rows, since they're not broken up (maximum width). The second DIV displays the last row, since its width represents a partial number.
function draw_guys( num, row_width ) {
var whole = Math.floor( num / row_width ) * row_width;
var rows = whole / row_width;
var remainder = num - whole;
// at this point, first div height should be 11 * rows,
// and second div width should be remainder * 25
// $("div1").css( ... etc.
}
For a working example, see this Facebook IPO calculator: http://www.voanews.com/content/how-long-would-it-take-you-to-earn-as-much-as-facebook-shareholders/667093.html
There are any number of javascript libraries that could be used to code such a thing, but I would be amazed if you found any "population graphs" that would behave as you describe out of the box.
I've done a lot of work in RaphaelJS recently, and depending on your use case you could code a simple graph from scratch with very little work. Consider this:
var figurePath = "m67.55634,478.32968c-8.13657,-2.48874 -14.5806,-8.08679 -16.4212,-14.26556c-0.73347,-2.46204 -1.08294,-52.8298 -1.08687,-156.62885l-0.00574,-152.99986l-4.12245,0l-4.12245,0l0,57.75455c0,56.61781 -0.04195,57.82326 -2.13101,61.24794c-2.70588,4.43591 -5.74459,6.5144 -11.69161,7.99719c-8.79226,2.19217 -18.40762,-1.9938 -21.86059,-9.51678c-2.22165,-4.84039 -2.07695,-133.9393 0.15908,-141.94215c5.04025,-18.03902 21.36259,-32.81751 40.39913,-36.578c10.0279,-1.98091 102.7426,-2.00536 112.74093,-0.02971c10.18434,2.01237 18.93166,6.56422 26.67169,13.87918c7.96135,7.52412 11.67772,13.62765 14.44972,23.73145c1.93217,7.04254 2.03873,10.81412 2.03873,72.15891c0,56.07582 -0.21188,65.2007 -1.58522,68.26476c-2.13536,4.76425 -4.33276,6.9068 -9.23622,9.00589c-8.13713,3.48325 -18.47925,1.24234 -23.2908,-5.04663l-2.47462,-3.23438l-0.28067,-58.8461l-0.2807,-58.84612l-4.09941,0l-4.09944,0l0,153.75127c0,168.54004 0.40904,157.34918 -5.98071,163.62524c-5.04742,4.95758 -10.19456,6.83295 -18.75407,6.83295c-8.55949,0 -13.70664,-1.87537 -18.75407,-6.83295c-6.26537,-6.1539 -5.98071,-1.38409 -5.98071,-100.21561l0,-90.34155l-4.12245,0l-4.12248,0l0,90.34155c0,73.62247 -0.25719,90.91376 -1.38974,93.4332c-2.07629,4.61884 -6.59314,9.17279 -11.33463,11.42776c-4.56992,2.17331 -14.94501,3.1835 -19.23141,1.87241zm23.18207,-395.70253c-12.45886,-4.14828 -20.1591,-10.54255 -25.6095,-21.26616c-3.01675,-5.93541 -3.23429,-7.07562 -3.23429,-16.95192c0,-9.99342 0.18727,-10.94311 3.33264,-16.8991c15.71025,-29.74877 61.06589,-29.82171 76.74945,-0.12342c3.24734,6.14913 3.39783,6.92425 3.39783,17.50292c0,10.17379 -0.23299,11.51108 -2.88087,16.53765c-4.4481,8.44392 -11.01797,14.60091 -19.99178,18.73535c-6.96733,3.21001 -8.73656,3.60972 -17.18201,3.8817c-7.08677,0.2282 -10.69254,-0.12219 -14.58147,-1.41702z";
var figure = canvas.path( figurePath )
.attr( { fill: 'red', stroke: 'black', 'stroke-width': 3, transform: 'S0.86,0.85 0,0 T0,0', 'fill-opacity': 0, 'stroke-opacity': .5 } )
.animate( { 'fill-opacity': 0.5, 'stroke-opacity': 1.0, transform: 'S1,1 0,0' }, 1000, '>', function()
{
var text = canvas.text( 100, 150, "Population:\n10,250" )
.attr( { 'font-size': 16, fill: 'black', stroke: 'none', 'font-weight': 400, 'font-family': 'Arial,Helvetica,sans-serif', 'fill-opacity': 0 } )
.animate( { 'fill-opacity': 1.0 }, 1000 );
} );
var figure2 = canvas.path( figurePath )
.attr( { fill: 'blue', stroke: 'black', 'stroke-width': 3, transform: 'S0.43,0.43 0,0 T250,125', 'fill-opacity': 0, 'stroke-opacity': .5 } )
.animate( { 'fill-opacity': 0.5, 'stroke-opacity': 1.0, transform: 'S0.6,0.6 0,0 T250,100' }, 1000, '>', function()
{
var text = canvas.text( 312, 190, "Population:\n6,632" )
.attr( { 'font-size': 12, fill: 'black', stroke: 'none', 'font-weight': 400, 'font-family': 'Arial,Helvetica,sans-serif', 'fill-opacity': 0 } )
.animate( { 'fill-opacity': 1.0 }, 1000 );
} );
Or, check out the fiddles:
- http://jsfiddle.net/kevindivdbyzero/McSzB/
- http://jsfiddle.net/kevindivdbyzero/mSX8e/2/

Categories