Fix my parallax animation
- or -
Post a project like this3635
£50(approx. $63)
- Posted:
- Proposals: 4
- Remote
- #472159
- Awarded
Description
Experience Level: Intermediate
General information for the website: Parallax
Description of requirements/features: General information for the website: Parallax
Description of requirements/features: I have been trying to build a very simple background-image parallax effect just like the ones here: http://www.infinitelycreative.be
Here is a live demo of what I have created so far: http://loai.directory/gallery - However as you might noticed, there are few parallax images at the middle and bottom of the page that does not work properly, here is why: http://stackoverflow.com/questions/23276233/full-screen-background-image-is-being-cropped?noredirect=1#comment35624650_23276233 - Note: the coded posted on stack-overflow is what I currently using .
I gave up trying to fix this as it took me 3 days with not progress! Therefore I am looking for someone who can create a simple background-parallax effect just like on here: http://www.infinitelycreative.be
The HTML structure is as follow:
<div class="wrapper parallax"
<div class="content"
<div class="parallax-fade-out"
</div
</div
</div
So using CSS I will apply a background image to .parallax which will then have the parallax effect I have shown you in the example. this parallax effect has to work no matter where it is in the page, top section or at the very bottom... as you can see, I have only managed to get it working on the top section, but the far you scroll down the parallax at the bottom are not working properly just as I have explained in the stakoverflow post.
Once this is working, I need to add another effect, to anything with the class . parallax-fade-out to have a similar effect to: http://codepen.io/arturobandini/pen/dfHgi - see the PARALLAX BOX? so basically move down against the parallax background with the website but with the same speed of the parallax background and fade out whilst scrolling.
That's it, I have a fixed budget of £35, if you are a JavaScript wizard this won't take you long... please note NO plugins to be used and you might use what I already have - but if you have something better - please do use it. ALSO if you got this working nicely as I wanted, I will add you to my contacts and will send you more work as I have more things to be done for my site and for few of my clients. And once this is done, there are few other effects I want to add. Will pay you for that as well when we get this one working.
Note: this function has to be responsive, so only runs when the screen size is above 1024 unless you can make it touch friendly?
Please make sure you have understood what I need before sending a proposal.
Extra notes:
Description of requirements/features: General information for the website: Parallax
Description of requirements/features: I have been trying to build a very simple background-image parallax effect just like the ones here: http://www.infinitelycreative.be
Here is a live demo of what I have created so far: http://loai.directory/gallery - However as you might noticed, there are few parallax images at the middle and bottom of the page that does not work properly, here is why: http://stackoverflow.com/questions/23276233/full-screen-background-image-is-being-cropped?noredirect=1#comment35624650_23276233 - Note: the coded posted on stack-overflow is what I currently using .
I gave up trying to fix this as it took me 3 days with not progress! Therefore I am looking for someone who can create a simple background-parallax effect just like on here: http://www.infinitelycreative.be
The HTML structure is as follow:
<div class="wrapper parallax"
<div class="content"
<div class="parallax-fade-out"
</div
</div
</div
So using CSS I will apply a background image to .parallax which will then have the parallax effect I have shown you in the example. this parallax effect has to work no matter where it is in the page, top section or at the very bottom... as you can see, I have only managed to get it working on the top section, but the far you scroll down the parallax at the bottom are not working properly just as I have explained in the stakoverflow post.
Once this is working, I need to add another effect, to anything with the class . parallax-fade-out to have a similar effect to: http://codepen.io/arturobandini/pen/dfHgi - see the PARALLAX BOX? so basically move down against the parallax background with the website but with the same speed of the parallax background and fade out whilst scrolling.
That's it, I have a fixed budget of £35, if you are a JavaScript wizard this won't take you long... please note NO plugins to be used and you might use what I already have - but if you have something better - please do use it. ALSO if you got this working nicely as I wanted, I will add you to my contacts and will send you more work as I have more things to be done for my site and for few of my clients. And once this is done, there are few other effects I want to add. Will pay you for that as well when we get this one working.
Note: this function has to be responsive, so only runs when the screen size is above 1024 unless you can make it touch friendly?
Please make sure you have understood what I need before sending a proposal.
Extra notes:
Leo B.
100% (2)Projects Completed
2
Freelancers worked with
2
Projects awarded
44%
Last project
14 Apr 2014
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies