I have a mock up I’m working from which has a line graph/chart on it. This is purely presentational and doesn’t work off any data. You can see the idea here: http://tinypic.com/r/mn1cwl/8
I tried to put this together using CSS, it was simple enough to plot the points. I just set each dot as
position:absolute; with a left value ranging from 0% – 100%. And also varying bottom values to get the ‘peak’ effect. Now, I thought I could use css rotating for the lines but this seems impossible as it is a responsive layout.
Ideally I’d like the dots to fade in one by one (this is fine in the CSS) but how would I get the line to draw from 1 dot to the other?
Thanks for reading and I hope someone can shed some light or point me in the right direction of how to approach this.
Essentially this effect on-load but will work responsively?
Its the rotation of the lines that I can’t get as you need a pixel value for the degree in the CSS.
@Soronbe on my first attempt I could line up the lines/dots but as soon as I resized the browser nothing lined up and the angle seemingly needed to change and possibly the line length. I’ll create a codepen.
@Paulie_D that would be right, the height could be fixed if its easier – I’m not that precious about the height of each ‘peak’ staying the same and the points just moving closer together when the browser is resized.
It might be just me, but I see no lines at all in the second version
EDIT: found the problem: you can’t just delete the -moz- properties, and keep the -webkit- as this will bug your site in firefox. (-moz- is for firefox). Alternativly you can just delete them both and
/* -webkit-animation:move 1s linear forwards; -moz-animation:move 1s linear forwards;*/ //becomes animation:move 1s linear forwards;
The downside of this is that a few old browsers might not read the code properly.
This wont solve your problem, but it’s a step forward.
EDIT2: I just looked into it and saw you made the x-coordinates of the points variable using
%. Are you planning to do the same with the y-coordinates? The solution will be similar, but it will require other input numbers. Also, are the coordinates randomly generated, or fixed? (if fixed, just pass them, allows for way easier math although it is possible with variable coordinates).
Sorry I did chop out some of the -moz animation css!
Yeah I used
% so the dots are spaced out evening over the page. On my version they are set from 0% and at 10% intervals all the way to 100%. They y-coordinates I was just going to have a fixed pixel value but % would be fine, whatever would be easier!
I do not known if px or % would be easier, but if you use px and your height gets a bit low, your design wouldn’t be as responsive anymore, would it?
The coordinates will always be the same. There will be 11 ‘dots’ in total (the first being at 0% and the last at 100% from the left), always at 10% intervals. The heights will also be fixed as either pixel or the same percentage values.
Yeah I don’t think pixel for the height of each peak would be as responsive but I could sacrifice it if needed – depending on how it looked!
The line will be positioned absolute at the bottom of a container which will be 100% height & width of the browser window. There will be a vertically & horizontally centred title and short paragraph so I don’t think the line chart will ever be very tall. Maybe 300px max!
Sure, shall I just added it to the Codepen? And remove the transform-origins for now so it only has dots in there correct positions?
EDIT: I’ve just created I stripped-back forked version on Codepen. Figured it might be best to see it with a little less mark-up/css – might be clearer ;)
I’ve quickly set some
bottom values for the position to get some different heights but I might change these – guessing it doesn’t matter right now as I can tweak it later.
Just make a bit of progress on this and decided to rewrite a big part of the css because it just wasn’t fit for responsive design (atleast as far as I could see) because I need the width of the container, which I can’t rely on to be the full page.
I hope you dont mind I’m not conserving the original idea of the graph? I wont be done today as I have plenty of other work to do.
Thats fine, it was just an example that was really close to what I was after. I’m not precious over the mark-up/css how it was. Essentially all I need is a series of dots – set at 10% horizontal intervals and varying vertical values. With a line animating to each one. No ‘pulse’ or bubble on hover.
Of course! I totally understand its not a priority and I really, really appreciate you looking at this for me :)
This is what I have so far: http://jsfiddle.net/368dw/
On resizing the screen, the lines are a little bit off (restart button fixes it). Also sometimes the restart button does seem to bug at random times. I suspect changing the delay from 10 to something higher might solve this, but as I havn’t been capable of finding this bugs reproduction steps I can’t know for sure.
If anyone could help me with either of these 2 issues, that would save me some time next time I look into it.
I only tested this in firefox, so if this doesn’t work properly in Chrome, check if all the -webkits- are there first.
Thanks to the
.line-box divs, this required less rewriting than I expected. Bless them.
The pulses are also slightly off, but I trust that is something you can fix yourself :).
You must be logged in to reply to this topic.