Create Typo3 Parallax Scrolling Banner Slider

Cancelled Posted Sep 2, 2014 Paid on delivery
Cancelled 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.

HTML5 JavaScript jQuery / Prototype Parallax Scrolling TYPO3

Project ID: #6401333

About the project

4 proposals Remote project Active Sep 21, 2014

4 freelancers are bidding on average $181 for this job

amfahsoft

Hi! I sincerely read your requirements and I am ready to endow with the solution as per your requirements. I can assure you that I will provide you high level of satisfaction and support to gain your confidence. B More

$155 USD in 3 days
(20 Reviews)
5.2
nimeshs

A proposal has not yet been provided

$222 USD in 6 days
(0 Reviews)
0.0
austinsweat

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

$147 USD in 3 days
(0 Reviews)
0.0