Stack Overflow
Stack Overflow

Questions tagged [parallax]

An effect that causes the position or direction of an object to appear to change when viewed from different positions, e.g., through the viewfinder and the lens of a camera

par·al·lax

noun /ˈparəˌlaks/  parallaxes, plural

The effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g., through the viewfinder and the lens of a camera.

The angular amount of this in a particular case, esp. that of a star viewed from different points in the earth's orbit.

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.

source

2209 questions
0
votes
0 answers

Is it possible to create a parallax effect on a website, that is styled using flexbox? If so, how would that be done?

Like the question states, I have been having trouble confirming whether the use of a parallax type of effect is possible while using flexbox. Almost all examples I run across are using absolute and relative positions. Is parallax possible while…
rook21
  • 149
  • 10
0
votes
5 answers

CSS how to add fixed menu to parallax website layout

I am trying to make a parallax website with a fixed menu bar but cant figure out how to fix the menu bar at the top of the page. I tried different position values but none of them seem to work Could really use some help here! Im stuck.. Doing this…
John Doe
  • 60
  • 2
  • 8
0
votes
1 answer

parallax content offset relative to window instead of its parent

I'm practicing parallax effect and I want to apply it in my page (if mastered). Inside each #wrap, I want the .bar to be immovable when the page is scrolled up and down so I set their position to fixed and changed the z-index to 0 to make the…
jst16
  • 84
  • 9
0
votes
1 answer

Parallax Image Sizing Issue

I am trying to replace the image at https://i.stack.imgur.com/8OllW.jpg (wont let me upload it to here for some reason) with another image but whenever I do it it just seems to make the background white and not actually do anything. The way I…
Tyler Garcia
  • 51
  • 5
0
votes
1 answer

Parallax effect - Remove gap between sections

I have a problem with a parallax animation i made. The effect works as follows: There are 2 sections surrounding a parallax element. This parallax element will be moved if a scroll event was triggered. How fast the element is going to move is…
Davide Perozzi
  • 386
  • 2
  • 13
0
votes
1 answer

Pure CSS parallax with actual interactive content as 'background'?

I need to achieve a parallax effect where an assortment of things are the "background" layer, like videos, canvases or other interactive things, while walls of text scroll by, and when those texts "end" I need to be able to scroll to the next slide,…
Carlos Vergara
  • 657
  • 6
  • 19
0
votes
0 answers

How can I add a parallax scrolling effect to a standard bootstrap carousel?

I have implemented a standard bootstrap carousel as per the example from the W3Schools website (found here). Is there a way I can incorporate a vertical parallax scroll effect (found here) to this carousel? Currently I can only achieve one or the…
Riples
  • 1,167
  • 2
  • 21
  • 54
0
votes
0 answers

Parallax Effect - But on a background color

Looking to do a Parallax Effect on a skewed background. Had a look around on Google and the likes and can see everyone is doing this with an image. Just wondering if anyone has come across a solution where you can do this with a solid colour? The…
StuBlackett
  • 3,789
  • 15
  • 68
  • 113
0
votes
1 answer

Parallax with multiple images in the Materialize Library

I'm using parallax from Materialize library but it seems that i can't add an image on the parallax background. How can i do this? I would like to add logos and little images on it. on the code below, the second image is not displayed.
Romain
  • 3
  • 1
0
votes
1 answer

Content of div 'sliding' under div above it

Making a portfolio, I have a very multi-layered parallax homepage and an about section below it. Trying to set it up for one page scrolling so I'm using vh, but for some reason this div just slides under the home page when being resized to the point…
cracksix
  • 21
  • 4
0
votes
1 answer

NestedScrollView not parallaxing smoothly with AppBarLayout

I have the following layout:
Ayush Gupta
  • 8,716
  • 8
  • 59
  • 92
0
votes
1 answer

Parallax scroll choppy performance on Safari & Firefox

I'm building a onepager with a parallax intro. For the parallax effect I'm using the following piece of JS: // Parallax var layerBg = document.querySelector('.js-layer-bg'); var layerText = document.querySelector('.js-layer-text'); var sectionIntro…
Floriskoch
  • 135
  • 1
  • 8
0
votes
0 answers

How to remove a slight gap between the nav bar and first section?

I have an issue with parallax scrolling with a menu navagation bar. I can't seem to close a gap between the nav bar and first section of my page. Below is the code along with the link to my codepen at the bottom. Thank you in advance. :)
jPhizzle
  • 487
  • 1
  • 5
  • 16
0
votes
1 answer

Why is my image breaking in Edge for pure CSS parallax scrolling?

I've been working on a pure CSS parallax effect based upon Keith Clark's implementation, and I've gotten it working the way I want it to in Chrome and Firefox, but in Edge the parallax doesn't work. I would be okay with this, since it looks okay…
Beofett
  • 2,388
  • 1
  • 23
  • 37
0
votes
1 answer

Parallax image transitions into another scrolling down

Is the following possible, and what would be the easiest/cleanest way to do so? 1.) When a user scrolls down, an image (img1) starts fading into a second image (img2). The image fades in from a static position, positioned exactly the same as the…
TimVanGorp
  • 75
  • 1
  • 1
  • 7
1 2 3
…
99
100