I managed to do a parallax scrolling effect following a tutorial (code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641) , and it works great.
Here is my parallax script :
$(document).ready(function(){
var $window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this);
$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
var coords = '50% '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });
});
});
});
I needed that effect on several pages showing projects, so I transfered the whole CSS attributes directly in the HTML instead of having a CSS file for each page of course.
In the tutorial it was like this :
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
and the html (I didn't keep the "article" elements since I'm showing only pictures) :
<section id="home" data-type="background" data-speed="10" class="pages">
<article>I am absolute positioned</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
<article>Simple Parallax Scroll</article>
</section>
Now I have this in my HTML:
<section id="img1" data-type="background" data-speed="19" style="background: url(../../assets/img/projects/product/jorislaarman1.jpg) 0 no-repeat fixed;
min-height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: absolute background-size : cover;">
</section>
(I have one of these ^ for every picture in my page, the next sections only have a box-shadow effect on them.
I'm encountering two different problems now :
First, I have some pictures wich are different size, thus many times the content is barely visible before it disappear with the scrolling effect.
You can see it here on the first picture :
vincentleroux.fr/projects/product/jorislaarman.html
The full picture is here :
vincentleroux.fr/assets/img/projects/product/jorislaarman1.jpg
I guess a solution would be to resize every picture to the same ratio but that would be quite some work. I was hoping that there would be a way to influence the div/parallax scrolling to avoid my picture to be hidden too quick, but I couldn't make it work by myself :/ . I tried modifying the scrolling speed of both elements (containers and background) but I couldn't work it out.
The second problem I have is my picture placement inside the divs. The pictures are quite large and I'll resize them to be around 1900px wide. But still I have a problem with them not being quite in the right place.
When you loaded the page I gave the link of, you maybe saw that my picture stuttered when starting to scroll. I tried different things and I have no idea where it may come from...
You can see it also here with the first picture : http://vincentleroux.fr/projects/arcade/wolverine.html
It also illustrate well my second problem, which is that I can't manage to vertically align my pictures in the divs so that the interesting things to see in them are not cropped or hidden immediately by the scrolling.
I tried the solutions here : Is it really impossible to make a div fit its size to its content?
But none seems to work... :/
I also gave a try to the different "background-size" attributes (cover, contain...) but I don't want to lose the full page width of the pictures.
Here's a JSfiddle with all my code : http://jsfiddle.net/79D2J/
