...

View Full Version : Adjustments to Parallax Effect?



Vega Nadir
11-27-2012, 06:11 AM
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 (http://www.onextrapixel.com/2012/07/06/javascript-tutorial-parallax-effect-thumbnail-shifting-and-sequential-window-opening/) tutorial. At the end of that section, the JavaScript (http://www.rleonardi.com/tutorial-animation/script/header.js) and CSS (http://www.rleonardi.com/tutorial-animation/css/header.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
11-28-2012, 07:46 PM
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
11-28-2012, 10:39 PM
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
01-07-2013, 03:31 AM
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/06/javascript-tutorial-parallax-effect-thumbnail-shifting-and-sequential-window-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.uk/resources/jquery-plugins/scrolling-carousel/
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm
http://www.files.riacodes.com/flash_auto-scrolling-vertical-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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum