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
12
votes
6 answers

Smoothing the parallax scrolling of a background image

I've done a bit of research and written a simple bit of jQuery that scrolls the background at a slightly different pace to the foreground, creating a parallaxing effect as you scroll down a website. Unfortunately it's a bit jerky. Here's the basic…
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
11
votes
1 answer

Styled-component warning suggesting I use `attrs` method even though I am?

I had a styled component that was rendering 3 times, each having a parallax effect. const ParallaxContainer = styled.section` position: absolute; left: 0; right: 0; height: 100%; opacity: 0.3; bottom: ${props =>…
damon
  • 2,687
  • 8
  • 25
  • 35
11
votes
2 answers

Adding perspective to HTML for global Parallax - Pure CSS

I have been following Keith Clark's guide to CSS Parallax. His concept it like so: HTML:
CSS: .container { width: 100%; height: 100%; overflow-x: hidden; overflow-y:…
Martyn Ball
  • 4,679
  • 8
  • 56
  • 126
11
votes
1 answer

Issue with CoordinatorLayout and ImageView that adjusts width while scrolling

I'm attempting to put an ImageView in a CollapsingToolbarLayout in which it takes up the full screen on load and as you scroll the content, the 16x9 resolution image width resizes until the image takes up the full width of the screen. At that…
hooked82
  • 6,336
  • 4
  • 41
  • 46
11
votes
3 answers

Move the background image on mouse over (Single Parallax)

I would like to make the background image move slightly on the X and Y axis when the mouse is in the "landing-content" DIV, it should move with the movement of the mouse. it should move inverse. EG. Mouse move down, "landing-content" image moves up.…
Simon
  • 653
  • 3
  • 14
  • 25
10
votes
2 answers

Extremely slow nSyncAndDrawFrame when drawing large Bitmaps

I want to optimize a parallax scrolling view with multiple large Bitmaps. On my Nexus 5, everything is smooth and the Traceview dump looks like this: The doFrame() method uses ~18 ms to finish. However, when using my Nexus 7 or an Android 6…
Ulrich Scheller
  • 11,800
  • 5
  • 28
  • 32
10
votes
1 answer

Mousemove parallax effect moves position of div

I'm trying to create a slight parallax effect (I'm not sure if it really constitutes parallax but it's a similar idea). Where there are four layers which all move around at a slightly different rate when the mouse moves. I have found a great example…
Francesca
  • 26,842
  • 28
  • 90
  • 153
10
votes
6 answers

Disable Skrollr for mobile device ( <767px )

Firstly would like to thanks @prinzhorn for such an amazing and powerful library. My question: I have implemented a Skrollr parallax background to the header of my website but I would like to disable this feature when viewed on a mobile device,…
Petef1n
  • 105
  • 1
  • 1
  • 8
10
votes
1 answer

Real-time Scrolling Events using "-webkit-overflow-scrolling: touch"

While using the CSS "-webkit-overflow-scrolling: touch" I'm not able to get real-time scrollLeft positions while on iOS. Here's a fiddle to demonstrate: http://jsfiddle.net/WaMUq/ While scrolling on a desktop, I'm getting realtime scrollLeft data…
matthoiland
  • 912
  • 11
  • 24
9
votes
2 answers

CSS: "overflow: hidden" alternative that doesn't break 3D transforms

I'm trying to make a horizontal section with a parallax effect. In the background there should be an image that scrolls at a different speed than the page. The problem is: I want the parallax element to be contained in the parent element, so the…
Radosław Rzeczkowski
  • 91
  • 2
9
votes
0 answers

React-Spring — Parallax Issue incorporating a nav and footer due to height constraints

I am using Parallax from react-spring to create a parallax effect. I understand that the can use the height of its parent to set its area. This solution, however, is causing a strange behaviour when scrolling by keeping the and visible on the…
Diego Oriani
  • 1,647
  • 5
  • 22
  • 31
9
votes
1 answer

CSS background attachment fixed fix for chrome 67

I just wanted to post a quick question concerning any parallax background image that has dissapeared upon the new version 67 chrome update. Currently there are two fixes that I have found online that work. Are there any others that may work better,…
Digggid
  • 297
  • 2
  • 10
9
votes
1 answer

Multi-layer Parallax, Mathematics issues

I have got a multi-layered parallax script currently semi-working. If lets say the elements with the parallax effect is placed at the top of the website then the effect works spot on, as it scrolled out of view you can't see the layers moving out of…
Martyn Ball
  • 4,679
  • 8
  • 56
  • 126
9
votes
2 answers

Parallax effect on each item in a recycler view?

I'm trying to play with Parallax and getting some weird bugs, wondering if anyone can add some input to it. The only app I've seen implement parallax effectively is soundcloud. It's quite subtle, but each item has an image background and it has he…
RED_
  • 2,997
  • 4
  • 40
  • 59
9
votes
7 answers

Paralax effect in app background

Im new in Android world. I want to put some parallax background effects in my app. How can I do it? How to approach to this in Android? Is there any productive way to create 2-3 layer parallax background? Is there some tool, or class in android…
Kamil
  • 13,363
  • 24
  • 88
  • 183
1 2
3
…
99 100