Create Typo3 Parallax Scrolling Banner Slider
$30-250 USD
Paid on delivery
GENERAL INFORMATION
I need you to implement a Banner Slider (Image slider) that works very similar to twitters current Profile Canopy Image, except it has to be a slider that allows for many images to be rotated. It has to be implemented in our Typo3 instance.
SLIDER BEHAVIOR
The sliding effect is a quick fade from image A to B. The image time it is displayed has to be adjustable in a central configuration. Since this is in Typo3 every page needs its separate slider, because the images are different on different pages. All languages will use the same slider and should not be configurable independently. I want the first image to be displayed to be randomized, so even though the sequence is the same, the first image is random when you hit a page. The images can be manually browsed, when the user goes over the image in the left and right corner a small semitransparent arrow appears (see screenshot) that allows browsing back and forth. Make sure they scroll in parallax with the rest of the image (see below).
PARALLAX SCROLLING
When the user scrolls on the page, we move the image up 1 pixel, we crop the bottom of the image 1 pixel and we move the following text up 2 pixels. This way we have a parallax scrolling effect of the text slowly “covering” the image from the bottom while the image disappears completely behind the header slider. This behavior can be observed on twitter. Our difference is that when scrolling down at some point the image completely disappears unlike twitter where small stub remains.
IMAGE SIZING
I have attached two sample images and a sample mockup of our website with the new slider.
Native Image Size: 1920x400 Pixel
Minimum Height Displayed: 280px
Maximum Height Displayed: 400px
Minimum Image Width: 1000px
Maximum Image Width: indefinite
If the browser width exceeds 1920 pixel, we scale the width of the image and to keep the image ratio we cut off the bottom and the top of the image accordingly to stay within 400px.
If the browser width goes under 1344 pixels which means the minimum height of 280px has been reached we keep the height and crop the image on the left and right to keep the image not distorted.
Project ID: #6401333
About the project
4 freelancers are bidding on average $181 for this job
Hi, my name is Austin. I am a computer programmer, web developer, and systems admin. I have been programming the web for over 5 years. I have completed dozens of jobs for clients, helping to build their dreams into rea More