I’m designing a “timeline” like page, that I’d like to appear like this:
Blocs seems like it would be a good fit for this design, but I haven’t figured out how to create the center red time line that runs through the entire length of the page. Any ideas?
Thanks…
It can be achieved in Blocs, but you may need to use some external apps to achieve the effect of the animated numbers in the circles.
Essentially, the basic structure is very simple. First you need to create your line graphic. This can be done in any good vector graphics app. It’s only a single vertical line on a transparent background. This could be exported as an SVG or a PNG.
In Blocs, just create a three column row for each bloc. Adjust the width of the columns so that you have a very narrow column in the centre, and a wide column on each side. You then add your line graphic to the centre column. Remove all padding from the Bloc. What you get is something like this:
You can now duplicate this box as many times as needed to create your timeline page.
Note: if each timeline bloc is going to be a different height, you will need to create a number of timeline graphics of varying heights. Therefore, it would be best to create your content first and then see how high each bloc will be and create the graphic files once the page is complete.
To create the animation effect of the line extending as the page scrolls, just apply a fade-in animation to each graphic. Be sure to set the direction as top to bottom.
Once you have the content prepared for the left and right columns. you can create a custom class to add some margins to the top of each content area so that it sits nicely within each bloc.
Finally, if the background is to be consistent in every bloc, Add the background graphic to each bloc and make it parallax. This will maintain the static background whilst allowing the page content to float over the background. However, be aware that this may not have the desired effect on mobile devices.
Excellent … this is more than enough info and ideas to get me started on this project. I’ve used Blocs enough to understand what you’re suggesting, so will get started on it this week.
I’m not too concerned about achieving the effect of the animated numbers in the circles (although it does look very cool!).
Thanks very much for your help.
Just to illustrate one way to do this, I’ve uploaded a timeline demo and instructions HERE Of course, there would be other ways to achieve the effect, particularly if you needed an image background to to the blocs rather than a solid colour. But, the example should be sufficient food for thought if anyone else is trying to create a timeline page.
Will you please give some suggestions for apps to animate the graphics?
Thanks
Bill
The only app I can recommend is Tumult Hype. It’s a perfect compliment to blocks and allows you to create anything from a small animated graphic all the way up to a fully animated website.
You can see an example of a pulsating Pin HERE .This is four identical pins in 4 different blocs, each with a different background (the animations are transparent). The pulse activates on mouse over or mouse-click (tap on a touch screen)
Attached is a zip containing the sample page, the blocs file and the Hype-generated html and resources. Download and see how its been added to the blocs project.
pulse.zip (951.0 KB)
Thanks for the Dot. I really want to get into Hype but have not really had the time to play with it. But as soon as I think of a good use and I pursue I will upload to the community.
Fantastic! Thank you much, hendon52…
