Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Adjustments to Parallax Effect?

    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.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    this is a guess, but i think you can replace

    Code:
    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
    Code:
    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:
    Code:
    // 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....
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    Vega Nadir (11-30-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    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.

    Code:
    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";
                }
            }
        }
    }

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •