Hey guys!
We’ve decided to create the ‘Our Journal’ to show some of the behind the scenes here at the Programatório and share with you, some challenges that we face in our day-to-day and how we managed to solve them. Maybe our adventures can help you some way, maybe even having that "insight"... or just have some fun, lol.
Take your best tool (in our case, a good cup of coffee) and let's go out on this first challenge!
Problem situation:
We had to generate a way to make a vertical scrolling page to scroll a image section horizontally, to do so, it was necessary to recreate how the scrollbar works… When the page was scrolled down or up, it should be scrolled to the left or right.
However, there was still another challenge, this should happen only on that image section, in the rest of the page the scrollbar should still work in the conventional way, and we had less than 20% coffee in the bottle.
Journey to the solution:
Way 01 - A snap of the fingers for the browser to explode
The first alternative was to try to make a solution in pure CSS, where we would make a combination of rotations simulating that the image container was horizontal.
Did it work? Well, yes ... and no ... the scroll’s roll the way we would like, but it needs a scroll bar just for that container, and we wanted it to have just one scroll to command everything, so we had to discard this path.
Way 02 - It's been four cups since the coffee is over, but we're fine
Since in pure CSS it wouldn’t “roll” (sorry for the joke), we went to our dear Javascript!
Our idea was something like this:
Create a container with images, that were larger than the width of the screen, and grew horizontally based on the number of images inside it, then take that total width of the container and put this same value as height on the screen, so we would have a bar scrolling as high as the width of the image container.
In a middle of this all this resolution process, our support (healer) brought the bottle full of coffee, our eyes shine the hope: “Coffee never dies”. Anyway, continuing ...
Then we would create scripts to detect the vertical scroll to proportionally scroll the image container horizontally, simulating as if the user had made a horizontal scroll.
Was it difficult to understand the idea? Vini (our developer) made a drawing to help:
Can you understand now? lol… Don't worry, then we go through our translators and try to make it more didactic:
We were able to create the following logic:
1 - Create a container with the images already in the final format (horizontally and growing to infinity and beyond ... the size of the screen ...)
2 - Create another container that will act as the parent of this image container, and we call it a placeholder, where its function would basically be to "save place" on the screen.
3 - Create a script to detect the total width of this image container and set this same value as the placeholder height.
4 - Create a script for when you scroll down the screen, it will roll the image container to the side (each time you scroll down, scroll to the right, and when you scroll up, scroll to the left)
5 - Create a script to detect the position of the image container and placeholder in relation to the top of the page so that we know exactly when we should start scrolling and when to stop and release the scroll to “vertical mode” again and proceed to the next sections of the page
5 - The big thing is ... Put the "sticky" mode in the image container so that it stays "fixed" on the screen until the end of the scroll of its parent container (placeholder).
Check the live project here: https://lestebr.com/en
Well, that was one of the challenges that we face in our day-to-day, soon we will post new episodes. Did you liked it? Comment below! ;)
