Smooth-scrolling Vertical Timeline on Wordpress/ Elementor
Budget: $30 – $250 AUD
Task: Implement a smooth scrolling timeline using Elementor within Wordpress, that transitions through seven phases, each representing a stage of construction.
Requirements:
Platform:
The solution must be built in WordPress, utilising Elementor for design and layout control.
The page will consist of seven phases, each with a full-page image and text elements.
Page Landing (Phase 1):
The landing page should feature the original image "Phase 0" as a full-page background.
The left side of the screen should have an allowance for text, with space for a heading and text box (text will be added later).
Text should animate into view, sliding in from 40px to the right.
Include an upside-down caret (^) that bounces, encouraging the user to scroll down the page.
Subsequent Phases (Phases 2 to 7):
Each subsequent phase should display a full-width image of the construction progress.
A header and text box for each phase should appear halfway through the scroll as the user progresses.
The image must remain sticky during the scrolling phase, so users cannot stop halfway through or "break" the scroll effect. The scroll should feel continuous until the text for that phase appears.
Text Animation:
On the landing page (Phase 1), the text must animate in 40px from the right.
For Phases 2 through 7, the text should fade in and appear halfway through the scroll.
Sticky Images:
All phase images must be sticky and remain on the screen until the user completes the full scroll for that phase, maintaining a smooth flow between phases.
Design Considerations:
Ensure that each image maintains the same aspect ratio and dimensions as the original image.
The scroll experience should be smooth, with no interruptions or stopping points until the end of each phase.
Deliverables:
Elementor-based scroll animation, responsive on tablets and mobile devices. (bonus points: if you can detect that a user is using a mobile device and create a pop-up suggesting landscape mode)
Fully functioning page where the text animations and scroll-triggered transitions are timed appropriately for user interaction.
Each phase should feature a sticky image that does not allow for partial scrolling stops.
The design must allow for (include) future text insertion on the left of each phase, with text appearing halfway through the scroll (except for Phase 1, where it appears at the start).
Requirements:
Platform:
The solution must be built in WordPress, utilising Elementor for design and layout control.
The page will consist of seven phases, each with a full-page image and text elements.
Page Landing (Phase 1):
The landing page should feature the original image "Phase 0" as a full-page background.
The left side of the screen should have an allowance for text, with space for a heading and text box (text will be added later).
Text should animate into view, sliding in from 40px to the right.
Include an upside-down caret (^) that bounces, encouraging the user to scroll down the page.
Subsequent Phases (Phases 2 to 7):
Each subsequent phase should display a full-width image of the construction progress.
A header and text box for each phase should appear halfway through the scroll as the user progresses.
The image must remain sticky during the scrolling phase, so users cannot stop halfway through or "break" the scroll effect. The scroll should feel continuous until the text for that phase appears.
Text Animation:
On the landing page (Phase 1), the text must animate in 40px from the right.
For Phases 2 through 7, the text should fade in and appear halfway through the scroll.
Sticky Images:
All phase images must be sticky and remain on the screen until the user completes the full scroll for that phase, maintaining a smooth flow between phases.
Design Considerations:
Ensure that each image maintains the same aspect ratio and dimensions as the original image.
The scroll experience should be smooth, with no interruptions or stopping points until the end of each phase.
Deliverables:
Elementor-based scroll animation, responsive on tablets and mobile devices. (bonus points: if you can detect that a user is using a mobile device and create a pop-up suggesting landscape mode)
Fully functioning page where the text animations and scroll-triggered transitions are timed appropriately for user interaction.
Each phase should feature a sticky image that does not allow for partial scrolling stops.
The design must allow for (include) future text insertion on the left of each phase, with text appearing halfway through the scroll (except for Phase 1, where it appears at the start).