search

marcolago / flowtime.js

Flowtime.js HTML5/CSS3/JS Websites and Presentation Framework
https://marcolago.github.io/flowtime.js/
MIT License
1.34k stars 236 forks source link

Layout questions #48

Closed markkuuu closed 8 years ago

markkuuu commented 8 years ago

Hello @marcolago

Thanks a lot for this great plugin!

I would like to ask for an advice regarding layout structure:

I have a design where the slides are 80% the width of the screen, with a padding of 5% between each slides. The slides should appear centered, and the user should be able to see next and previous section. I understand this is not so difficult to do, I just made some test in codepen with different approaches, modifying .flowtime .ft-section .ft-page and the scale of the page. But I am unsure which one to use. I see for example that modifying .flowtime and adding some padding to .ft-page would help me to achieve that, but I am unsure if this is the best way to do it. Apparently modifying the section or a page width/height is not good as it messes up the navigation. What would you recommend?

http://codepen.io/markku/debug/epoyrJ http://codepen.io/markku/debug/megpjj http://codepen.io/markku/debug/gayodB http://codepen.io/markku/debug/KdYZxK

The second point, is that it would be important for this project to define the width of the slides, but not the height. In fact, ideally, the height should adapt to the content of the slide. So for example, if I have an image that is 1200px wide and 800px tall, and these 1200 cover the width of the slide, then that slide should have this height. If the next slide has an image that is 1200px wide and 600px tall, then this slide should be 600px height. Would this be possible? If so, how would you advice to build the structure and the style?

Here is a screenshot of what I have in mind:

layout

marcolago commented 8 years ago

Hi @markkuuu. Your explanation is very clear and I’m working on a solution to achieve exactly what you need.

Your first demo is the “standard” correct way in my opinion. Your fourth demo is the quick way I used for the scrollTheSection example but I don’t suggest to use this in production because scaling content can cause graphic glitches on fonts and on thin lines.

There are two important things to consider.

If you have pages with different sizes you MUST use Flowtime.slideInPx(true);. You can check a quick implementation of your first demo here: http://codepen.io/marcolago/pen/GpLQma In this demo I've just edited a little the CSS and enabled the slideInPx option.

If you build a slide taller than the viewport you may find some scroll problems which I’m currently trying to fix.

I’ll let you know something ASAP. Please, let me work on it at least this sunday.

Thanks for the patience and for the appreciation.

marcolago commented 8 years ago

Hi @markkuuu. I've improved the solution and this could be the good one.

You can check the result in Codepen here: http://codepen.io/marcolago/pen/GpLQma or in the example page here: http://flowtime-js.marcolago.com/examples/variable-height/

The pages height, the position of the Flowtime container and the section position and margins are managed via CSS. Everything else is managed by Flowtime script.

Maybe the implementation needs more testing but if you want to play with values and let me know if something doesn't work as expected I will try to fix it. Let me know if this solution is ok for you.

Thanks marcolago

markkuuu commented 8 years ago

Wow! this is fantastic. I will test it intensively and will let you know. Many many many thanks!

marcolago commented 8 years ago

It was a pleasure. Let me know if you need further help; I will do my best to help you.