changes to carousel

i have a custom carousel and i need a few changes

I'm forwarding on 4 screenshots here from the client that I think explain what's needed quite well. The first three are the issues they would like to avoid and the last is a mock-up of how they would like the 'panels' to be put together.

The first one shows a shallow screen where the 'if you like our thinking' panel is butting up over the scrolling text

The second one is at a point half way between two of the scrolling paragraphs where there is no text showing - admittedly this is partly due to my CSS as I have put some padding in here and there.

The third one shows a blank screen which occurs after the animation is complete and before the content below it starts to scroll upwards.

Looking at the mockup I can see two issues that are not defined:-

1. The height of the left hand panel with the dots, I think, should not be too flexible as it will look odd if it is crushed up vertically. If you look at the current site you can see that it does decrease in size slightly on smaller viewports but not significantly. I think that if the screen-height is not deep enough to show the full height of this panel then it should overflow off screen. There aren't really any instances where this would happen unless you made your browser height really shallow but had it really wide which would be an odd thing to do and not something we should support.

2. It does not show their preferred distance between one paragraph of text and the next, only that there is too much. After speaking with him on the phone the requirement is to just make sure that the next paragraph can be seen as the previous one is leaving.

Looking again at the mock up, we need it be so that when the user has scrolled to the end of the animation, the animation stops, is frozen and scrolls vertically (and visibly) off screen as the lower content comes in to view. Currently the animation disappears off screen leaving the screen blank (as per the 3rd screenshot below)

JavaScript

Proje NO: #14620670

Proje hakkında