HTML/CSSery I need help animating a div.

[givingtnt]

Hello ! I am making a website and I need to make an animation for a page, its a google geochart and I want something that will "draw" the chart.

some kind of old display thing that would slowly display one line at a time, generating the whole image.

 

a line animation that would go from top to bottom, line by line, right to left. reaviling the chart under it.

[Guest]

3 minutes ago, givingtnt said:

Hello ! I am making a website and I need to make an animation for a page, its a google geochart and I want something that will "draw" the chart.

some kind of old display thing that would slowly display one line at a time, generating the whole image.

 

a line animation that would go from top to bottom, line by line, right to left. reaviling the chart under it.

google web designer is best.

[givingtnt]

1 minute ago, lolimpol said:

google web designer is best.

ugh

im coding it myself. I don't want a click and drag thing...

 

[Guest]

1 minute ago, givingtnt said:

ugh

im coding it myself. I don't want a click and drag thing...

 

i guess

[givingtnt]

Just now, SQZY98 said:

I can't really sever you an exact code example, but have you looked at w3schools yet? There's probably a right section for you (I don't entirely get what you are going for^^).

yeah I have, 

ever saw those old looking green text display (text only) with slow pc's displaying one character at a time, line by line ?

 

like this http://codepen.io/ghepting/pen/xnezB

but the image instead.

though, I just found that. and can probablly find out how to use that

nayways, you get the point. I think.

[vorticalbox]

personally I would just the image in a div and then do a JavaScript loop to increase its height until all the image is shown.

[givingtnt]

1 minute ago, vorticalbox said:

personally I would just the image in a div and then do a JavaScript loop to increase its height until all the image is shown.

what I want is the image to display itself from top to bottom,  staying in place. the "background" would "move" and reveal the <div>

 

[Enderman]

Would making a gif not be way easier than trying to do this in css?

[Mr_KoKa]

I think to accomplish this with just html/css would involve some serous shenaniganery.

I would try to place your chart in relative container, and cover it all with absolute <canvas> element cover in black, then clear rectangless of canvas.

 

I made a little example of what I mean.

https://jsfiddle.net/sabk30d1/

 

Edit: It would be played with fps speed, so you may want to include time delta there.

[givingtnt]

3 minutes ago, Enderman said:

Would making a gif not be way easier than trying to do this in css?

no, because its a <div> reveal, in the div there is a geochart (google chart)

but for sake of animating the website I want it to be displayed with an animation, not just be there

[vorticalbox]

1 hour ago, givingtnt said:

what I want is the image to display itself from top to bottom,  staying in place. the "background" would "move" and reveal the <div>

 

 

1 hour ago, givingtnt said:

no, because its a <div> reveal, in the div there is a geochart (google chart)

but for sake of animating the website I want it to be displayed with an animation, not just be there

then make the chat dic height 0 and make a loop to expand it 10px at time till its at the image height.

 

if there is other content you want to not move it then put another div under it at image height and minus that by 10px.

 

content stays where you want it and you get a nice line by line loading effect.

[givingtnt]

3 minutes ago, vorticalbox said:

 

then make the chat dic height 0 and make a loop to expand it 10px at time till its at the image height.

 

if there is other content you want to not move it then put another div under it at image height and minus that by 10px.

 

content stays where you want it and you get a nice line by line loading effect.

thanks !