0

I am trying to achieve the effect of an origami bird image seemingly extending down from a logo which carries on down the page as the viewer scrolls. I have managed to get this working fairly well using z-axis and fixed positioning but the effect is ruined as soon as the page is zoomed in or resized, causing horizontal scrolling to kick in. I am very much an amateur and have spent hours reading very similar questions and answers but have not managed to get anything to work.

This is the idea I want to create http://www.debbiekate.com/indextest.html (I have posted the specific site as opposed to a JFiddle to make it more clear what I am trying to achieve).

The closest I have come is by changing the positioning of the 'bird' element to absolute and scrolling it in JavaScript. (You can see this in action by removing the comment tags for the js in and changing the position style of #bird to absolute). This works as I would like - the bird remains fixed in position when scrolling vertically but scrolls to the left when required, keeping it in line with the header logo and not obscuring the rest of the page. The problem is that the scrolling performance is pretty choppy, due the JS taking longer to catch up with the scrolling event as I understand it. I would like the effect to be as smooth as when using position:fixed.

I have read lots of similar topics, I think the closest one is here:

Fixing a menu in one direction in jquery

This sounds like an identical problem and the perfect solution but adding Jsarma's code to my site seems to have no effect whatsoever, I can't figure out what I'm doing wrong. I have no formal training in web development and am not much use with JavaScript, any help and your patience with a newcomer would be massively appreciated.

Community
  • 1
  • 1
user3213168
  • 1

1 Answers1

0

You could change the position of the bird to absolute instead of fixed.

Then build in a jquery function to listen for a window scroll and change the top position of the bird on scrolls.

$(document).ready(function(){
    $(window).scroll(function(){
        //get the current scroll position
        var scrollPosition=$(window).scrollTop();
        //change the top of the bird
        $('#bird').css('top',(-1*scrollPosition)+"px");
    })
});
rgbflawed
  • 1,957
  • 1
  • 22
  • 28
  • Hi rgbflawed, thanks for taking the time to have a look. Unfortunately your answer seems to have the same effect as I mentioned in the previous js solution - it does work but the performance is really laggy, especially on mobile devices. I have updated the page with your code so you can see what I mean. I think what I need is for the position to remain fixed but to implement a script which takes care of the horizontal thing as a separate issue. It seems that Jsarma describes this exact idea in the link I mentioned but I cannot get this to work. – user3213168 Jan 19 '14 at 23:50
  • @user3213168 First, turns out you do need to do (-1*scrollPosition). I've updated my answer. Second, I've tried on both my chrome desktop browser and my chrome mobile browser and both seem to work very smoothly. – rgbflawed Jan 20 '14 at 00:08
  • I inserted your code exactly but it seems the bird actually moves in the opposite direction (up) when I scroll? I tried (+1*scrollPosition) instead which did fix this and the bird now follows the scroll direction again but it definitely still lags. I am testing on an iPad (both Chrome and Safari) and it is very noticeable - it's worse when scrolling back up to the top as the bird actually hangs at the bottom, breaking the effect of the line extending past the top of the viewport. Sorry if I am missing something! – user3213168 Jan 20 '14 at 00:27
  • @user3213168 any chance this can just be solved by turning off horizontal scrolling in css (overflow-x: hidden;)? Then perhaps some jquery to detect the window width and if it's a very narrow window it will know to adjust the content to fit inside the narrow window. – rgbflawed Jan 20 '14 at 00:35
  • that sounds like a good solution but won't the bird still 'detach' itself from the logo when the viewport is zoomed (again thinking of mobile/tablet devices in particular)? – user3213168 Jan 20 '14 at 00:45
  • @user3213168 no, I don't think so. With this solution you're turning #bird back to being fixed, getting rid of all scrolling jquery, and putting the overflow-x: hidden in the body. Then when someone zooms in, there won't be any horizontal scrolling so both images SHOULD stay where you want them. – rgbflawed Jan 20 '14 at 01:02