Adjustments to Parallax Effect?

[Vega Nadir]

Hello. I hope I'm posting in the right place. I was asked to do a friend's website and I've been trying to create it using the first section of this tutorial. At the end of that section, the JavaScript and CSS are linked.

I pored through so many different techniques and tutorials for a good couple of weeks and this does almost everything I need. However, the scrolling only lasts as long as the mouse is moving from left to right. Would anyone please be able to advise me:

• How to adjust some of the code to make it so that it glides continuously for a fixed length of pixels depending on whether the mouse is positioned left or right of the center? That is, instead of being dependent on the precise mouse position, the movement will continue even if the pointer is not moving, just as long as it's anywhere to the left or right of the center?
• How to make certain images appear/disappear or fade in/out at a certain point in the scrolling?

Whenever I work on a new site, I tend to do something I've never tried before and I'm completely new to this type of thing. Any help anyone could offer would be greatly appreciated. Thanks.

[rnd me]

this is a guess, but i think you can replace

function getMouseXY(e)
{
	  if (IE)
	  {
		// grab the x-y pos.s if browser is IE
		tempX = event.clientX + document.body.scrollLeft
		tempY = event.clientY + document.body.scrollTop
	  } 
	  else 
	  {
		// grab the x-y pos.s if browser is NS
		tempX = e.pageX
		tempY = e.pageY
	  }  
	  // catch possible negative values in NS4
	  if (tempX < 0){tempX = 0}
	  if (tempY < 0){tempY = 0}  
	  
	  moveDiv(tempX);
	  
	  return true
}

function moveDiv(tempX)
{	
	for (var i=0;i<objectArray.length;i++)
	{
		var yourDivPositionX = objectArray[i][3] * (0.5 * windowWidth - tempX) + objectArray[i][1];
		objectArray[i][0].style.left = yourDivPositionX + 'px';
	}
}

with

var pos=0;
 if (IE){
var getMouseXY=function xy(e){

	// grab the x-y pos.s if browser is IE
	tempX = event.clientX + document.body.scrollLeft
	  
	  // catch possible negative values in NS4
	  if (tempX < 0){tempX = 0}

	  
	  pos=tempX;
	  
	  return true
}//end xy() ie


}else{

var getMouseXY=function (e){
	// grab the x-y pos.s if browser is NS
	tempX = e.pageX

	  // catch possible negative values in NS4
	  if (tempX < 0){tempX = 0}
	  
	  pos= tempX;
	  
 }//end xy() ns


}



function moveDiv(){	
   var tempX=pos;
	for (var i=0;i<objectArray.length;i++)
	{
		var yourDivPositionX = objectArray[i][3] * (0.5 * windowWidth - tempX) + objectArray[i][1];
		objectArray[i][0].style.left = yourDivPositionX + 'px';
	}
}

setInterval(moveDiv, 100);

but move the new code the top-ish part of the file, so that getMouseXY() is defined after IE and just before before calling:

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

breaking up the IE and W3 code will drastically lower the CPU usage, resulting in a smoother animation. play with the 100 to adjust the timing.


i don't know how to help you show/hide certain images at certain points....

[Vega Nadir]

Thank you very much for the suggestion. Unfortunately, I haven't got it working just yet. It no longer moves at all. I should say that my code is already a little different from the tutorial. Would you mind looking at this and letting me know how to amend it accordingly? Thanks again.

function getMouseXY(e)
{
      if (IE) { // grab the x-y pos.s if browser is IE
        tempX = event.clientX + document.body.scrollLeft
        tempY = event.clientY + document.body.scrollTop
      } else {  // grab the x-y pos.s if browser is NS
        tempX = e.pageX
        tempY = e.pageY
      }  
      // catch possible negative values in NS4
      if (tempX < 0){tempX = 0}
      if (tempY < 0){tempY = 0}  
      
      moveDiv(tempX, tempY);
      
      return true
}

function moveDiv(tempXsent, tempYsent)
{
    if (canStartParallax == true)
    {
        var tempXreceived = tempXsent;
        var tempYreceived = tempYsent;
        
        if (tempYreceived <= headerDivHeight) //limit the mouse over area
        {
            for (var i=0;i<objectArray.length;i++)
            {
                var yourDivPositionX = objectArray[i][3] * (0.5 * windowWidth - tempXreceived) + objectArray[i][1].getX();
                objectArray[i][0].style.left = yourDivPositionX + 'px';
            }
        }
    }
}

function positionDivs()
{
    var verticalParallaxFactorMultiplyNumber = 4; //the bigger this number, the vertical gap between header object animation will be bigger too
    
    for (var i=0;i<objectArray.length;i++)
    {
        objectArray[i][0].style.left = objectArray[i][1].getX() + "px";
        
        if (canPositionDivsVertically == true)
        {
            if ((objectArray[i][0] == CQcloud1Div) || (objectArray[i][0] == islandDiv) || (objectArray[i][0] == treeBranchDiv) || (objectArray[i][0] == CQcloud2Div) || (objectArray[i][0] == CQcloud3Div))
            {
                objectArray[i][0].style.top = objectArray[i][2] - ((1 + (verticalParallaxFactorMultiplyNumber * objectArray[i][3])) * windowHeight) + "px";
            }
            else if ((objectArray[i][0] == CQmoonDiv))
            {
                objectArray[i][0].style.top = objectArray[i][2] + "px";
            }
            else
            {
                objectArray[i][0].style.top = objectArray[i][2] + ((1 + (verticalParallaxFactorMultiplyNumber * objectArray[i][3])) * windowHeight) + "px";
            }
        }
    }
}

[Vega Nadir]

I've been trying to work this out for months and had no luck yet, but I know there must be someone who can tell me how to do it, so I'm trying again.

I would like to be able to create a layered parallax effect that auto scrolls left and right, at a fixed speed, depending on which edge of the display the cursor is nearest. I would also like to be able to make certain elements (images) appear and disappear at a given point. I would also like it to animate as smoothly as possible with as little choppiness as can be helped.

Here are some resources for the best layered parallax effect I know of:

http://www.rleonardi.com/
http://www.rleonardi.com/script/header.js
http://www.onextrapixel.com/2012/07/...indow-opening/

And here are a bunch of examples of how I would like it to scroll:

http://scripterlative.com/files/cursordivscroll.htm
http://www.convergent-evolution.co.u...ling-carousel/
http://www.dynamicdrive.com/dynamici...ongallery2.htm
http://www.files.riacodes.com/flash_...tical-content/
http://www.smoothdivscroll.com/#quickdemo

I don't really care if it starts off auto-scrolling or not. I imagine that'd be an easy part to identify and tweak, anyway, if needed. I don't care if it moves faster the closer to the edge you get, although it would be a nice feature. Can anyone please help me? Thanks.