Scroll page parallax when I click on navigation menu (Parallax Scrolling)

thanks it worked.

Now, can you also help me in removing the repeating image on the right hand side throughout the site.

URL to site?

its not live. Its on local.

I have uploaded above my whole project

I’m not sure which image you mean. Each section seems to have different images.

Add {background-repeat:no-repeat} to each image.

<div data-stellar-background-ratio="0.5" class="image" id="nav1" style="background-position: 0px 0px; background-repeat: no-repeat;"></div>

Curious: Why not assign these styles via a class?

Question: How does one know what values can be used to style a background image?
Answer: This is one of many resources… You should have resources bookmarked for quick easy access.
http://www.w3schools.com/cssref/css3_pr_background.asp

The horizontal repeat on all images is apparently the multiple that the OP is referring to.

thanks for replying guys.

I am referring to the image on the right hand side of the site.

see attachment.

i got it resolved.

thanks again.

How did you resolve the issue? What did you find? How does it look now?

i did no-repeat with every image.

Ah - my monitor isn’t wide enough for that to show - which at 1280px seems to me a bit of a problem. This is what I’m seeing from the last uploaded files:



Food for thought.

Does class="image" apply to more images than just these background images? (Yes or No)

IF Yes, THEN add a new class to the background images such as bgimage and apply background-position and background-repeat to class="bgimage" and remove the styles from within the tags.

example:

bgimage {
    background-position: 0px 0px; 
    background-repeat: no-repeat;
}

<div data-stellar-background-ratio="0.5" class="image bgimage" id="nav1" ></div>

IF No, THEN add background-position and background-repeat to class="image" and remove the styles from within the tags.

example:

image {
    ...other image styles...
    background-position: 0px 0px;  /* new properties added after existing properties */
    background-repeat: no-repeat;  /* new properties added after existing properties */
}

<div data-stellar-background-ratio="0.5" class="image bgimage" id="nav1" ></div>

Either way, styling the background-images as a class is easier and more efficient than styling each one inline.

Classic monitor dimensions are an inconvenience in this case but not insurmountable.

I used a pair of 1280x1024’s for years (until one died). To get the gist of a wide screen layout, one can Zoom the contents of the browser window smaller. The result is a reduced resolution widescreen renedering of the page.

Note the browser is sharp (normal rez) but the reduced size contents, esp text, may be a bit fuzzy.

1 Like

Actually, I thought it indicated that the OP had a problem, rather than that I did.

Perhaps I should have shown the whole browser window to demonstrate more clearly that I’m seeing the right-hand side of the content cut off, and no visible scroll bar.

Of course, if the site is yet to be made responsive, then this is just a red herring. :fish:

The OP does have a problem. His site is not responsive and more.

And the carefully rationalized code that I posted in #25 cannot work. My fault for not looking at his code first.

Hi everyone,

I am redesigning my project with bootstrap now.

this time I am placing the nav bar on the left and I want when I click on the menu item it should slide to left.

Below is what I have done till date.

https://www.dropbox.com/s/kzl5plkk5ndia0o/snapchat_parallax1.zip?dl=0

Please help how to move forward.

thanks again.

Which part do you require assistance with? There are numerous issues which need fixing, so you need to be clear about where your problem lies.

2 Likes

Well, my first priority is

  • to make the content of the slide to left.

i.e. when I click on a menu element it should slide to that corresponding section.

Right now, when I click on a menu element, it slides down to that section.

Sorry I may sound confused. Hope you got me.

thanks again.

New thread started here: How do I make the content Scroll to right or left, when clicked on the menu item?

This one closed to avoid confusion.

1 Like