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
4
votes
1 answer

Principles for vertical scrolling through SVG elements so it looks parallax?

I have a real nice scene in SVG consisting of some clouds and a landscape, sort of like this: Now I would like to work it in React.js and make it so you can scroll vertically through the scene, and it has sort of parallax effects. That is, say you…
Lance
  • 75,200
  • 93
  • 289
  • 503
4
votes
1 answer

How to make parallax scrolling work properly with a camera that stops at edges pygame

Say we have a game made in pygame, and in this game, we have "scroll" objects which basically boxes the camera scrolls within, stopping at the edges. When the player leaves a scroll and enters a new one, the camera moves from one scroll to the…
Evelyn
  • 192
  • 7
4
votes
1 answer

jQuery; Parallax page - Get the click event go through DIV layers

DEMO The idea now is to (instead of transp. .png images) fill the layers with standard HTML elements, like making a nice moving 2d-3d page. You can guess my first problem. Whatever I tried I cannot make the click event go through the 100x100% div…
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
4
votes
3 answers

How do i subscribe to onscroll event in Blazor?

I am trying to react to the onscroll event in Blazor to animate an image when the user scrolls down the web page (something like the brand logo on this website: https://lebenswelten-stgabriel.at/). I have tried the native onscroll events and also…
JP-P
  • 151
  • 1
  • 5
4
votes
3 answers

Side by side parallax images while keeping aspect-ratio

I am trying to accomplish placing two parallax background-images side by side while keeping their aspect ratio. The issue I am running into is that each image appears to be getting cut in half vertically. I have tried using different values in both…
Painguin
  • 1,027
  • 14
  • 26
4
votes
0 answers

SwiftUI tvOS Button - Parallax?

Working with the landmark-Sample code from Apple. I got my app running like this: https://youtu.be/CLL_oknQEDI?t=1118 However, how is it possible to achieve the "parallax"-effect on the buttons/navigationLinks? If you are on the focused button, you…
samecat
  • 335
  • 1
  • 11
4
votes
1 answer

React and Parallax : Misplaced parallax image when clicking on in-page navigation link

I am using a React library called Rellax for a parallax effect on my site. It works nicely when I scroll towards that section of the page. But, when I click on the navbar and navigate to a particular #section, this very parallax image is floating in…
Axblert
  • 556
  • 4
  • 19
4
votes
1 answer

Desktop momentum style scrolling and parallax

I see this style of momentum style scrolling on desktop a lot using transform: translate and I really like the smoothness of the effect. I have attempted this using requestAnimationFrame and css transitions for the easing effect. In webkit…
Steve K
  • 8,505
  • 2
  • 20
  • 35
4
votes
2 answers

How to make a parallax effect using Three.js

I want to make a parallax effect on mouse move using three.js. Basically I want to generate bunch of clouds to canvas and want them to move on x axis when mouse is moved. So I have already tried to add clouds to the scene as images. How could I…
JacobCacka
  • 41
  • 1
  • 2
4
votes
5 answers

Full page scroll to a particular section

I have a header, footer and two body sections. I wanted to do a full page scroll only to my parallax container. I managed to come up with markup and styling to the parallax but didn't have success with the script.
Benjamin
  • 2,612
  • 2
  • 20
  • 32
4
votes
2 answers

Changing Position of DOM Elements on jQuery.scroll() creates Choppy Scrolling

I created a site that uses some hot jQuery parallax scrolling a while back and it used to be pretty smooth, but recently (update of browsers?) it has gotten choppy. I think it has to do with the firing frequency of the jQuery scroll event. Here is a…
Dave
  • 41
  • 3
4
votes
2 answers

How do I stop the text from moving in transition?

so I want my background to be an animation so I researched a little bit but it resulted in both the text and background moving. How can I stop the text from moving? Here's where I got the css animation :Side-scrolling parallax Heres my code: .not…
Beans
  • 43
  • 4
4
votes
2 answers

What is the name of this effect when scrolling the first section?

What is the name of this effect when scrolling the first section? http://www.beargrylls.com/ I think it's something like a parallax, but I did not find anything like it.
Vitaliy
  • 57
  • 6
4
votes
0 answers

Owl carousel and parallax backgrounds

I have to use parallax.js to background images in owl carousel. For example I wanna use http://pixelcog.github.io/parallax.js/ with https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html How can I do it? pen:…
Natalia
  • 1,009
  • 2
  • 11
  • 24
4
votes
1 answer

Why is my hero image zoomed in? Parallax scrolling

The effect works fine, but the image is zoomed in on. Any clue as to why? #hero{ background-image:url(../images/metalWorx_hero.jpg); width:1020px; min-height:398px; background-attachment: fixed; background-position: center; …
theBartender
  • 127
  • 2
  • 12