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
114
votes
9 answers

iOS 7 parallax effect in my view controller

I'm developing an app for iOS 7 in Objective-C. I've got a screen in my app with a few buttons and a pretty background image. (It's a simple xib with UIButtons on top of a UIImageView.) I was thinking that it'd be cool if those buttons had the…
Dan Fabulich
  • 37,506
  • 41
  • 139
  • 175
55
votes
2 answers

Sliding up image with Official Support Library 23.x.+ bottomSheet like google maps

Update I want to accomplish the same behavior that google maps have with Support Library 23.x.+ and without ANY 3rd library NOTE: this is not a duplicated question because: I want to use Behaviors, Support Library and without ANY 3rd party library…
MiguelHincapieC
  • 5,445
  • 7
  • 41
  • 72
53
votes
8 answers

(CSS) Make a background image scroll slower than everything else

here is is my CSS code for the body: body { padding: 0; margin: 0; background-image: url("../images/background.jpg"); background-repeat: no-repeat; background-color: grey; background-size: 100%; } What I want to do is make it so that…
user4626554
44
votes
18 answers

Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

I am currently doing a parallax website theme. The background images need to be attached as fixed for certain 'div's and 'section's to avoid jquery indulging in everything. The problem was the background images of the tags below any animated item…
BlackPanther
  • 1,732
  • 1
  • 14
  • 19
40
votes
5 answers

Smooth scrolling easing effect with mouse wheel

I recently came across this website http://www.ascensionlatorre.com/home, and I love the way the mouse wheel scrolling works - the easing is very smooth. I have been searching Google but I can't find anything similar. Does anybody have any…
idbranding
  • 729
  • 3
  • 10
  • 15
31
votes
3 answers

Changing CSS transform on scroll: jerky movement vs. smooth movement

I'm dissatisfied with existing parallax libraries, so I'm trying to write my own. My current one consists of three main classes: ScrollDetector tracks an element's scroll position relative to the screen; it has functions to return a float…
75th Trombone
  • 1,364
  • 15
  • 28
31
votes
6 answers

Enable smooth scrolling for my website in all browsers

I'm developing a parallax scrolling website using the Stellar and Skrollr libraries. The website behaves perfectly in Firefox because of Firefox's smooth scrolling feature, but in Chrome, scrolling with the mouse wheel is jerky, and the parallax…
Ian
  • 5,704
  • 6
  • 40
  • 72
28
votes
4 answers

How do I create a parallax effect without using a background-image?

I am trying to create a parallax effect without using background-image with background-attachment: fixed, as background-attachment: fixed doesn't work on iOS so well. Here's what I came up with: HTML
27
votes
2 answers

How to get the core part - that does the trick - of parallax work?

I tried to experiment with parallax and started from scratch to understand the core parts of this magic. To give you an example that I like to use as inspiration, you can see it at this link here at the "Photos" section. Latest code is down the…
Caspert
  • 4,271
  • 15
  • 59
  • 104
26
votes
6 answers

How can I monitor scroll position while scrolling in Safari on iOS?

I currently use $(window).bind('scroll', foo); to monitor $(window).scrollTop() and do stuff to create a parallax effect. In all desktop browsers foo() is called for each pixel the user scrolls, and everything is nice and dandy. In Safari on iOS,…
tkalve
  • 3,066
  • 4
  • 24
  • 29
26
votes
1 answer

Horizontal CSS only parallax effect with layers greater than 100vw

How to bootstrap a site with horizontal CSS only parallax effect? Requirements CSS only parallax parent layer must have width/height == 100vw/100vh child layers must have width/height > 100vw/100vh child layers must visually align 100% with parent…
Axel
  • 3,331
  • 11
  • 35
  • 58
26
votes
1 answer

Skrollr init set height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page. The problem can be seen…
designil
  • 763
  • 3
  • 9
  • 17
24
votes
6 answers

Parallax scrolling with CSS only?

I have been working on a project and I am done with the content. For the design however, I am thinking of using the parallax scrolling technique. However, all I have been able to find out about it has been with JavaScript or Jquery, whereas I am…
Pawan
  • 1,480
  • 2
  • 18
  • 27
23
votes
5 answers

Jquery Parallax Scrolling effect - Multi directional

I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT I have the artwork ready and have found many jquery libraries that will allow…
Dancer
  • 17,035
  • 38
  • 129
  • 206
21
votes
1 answer

Keith Clark's CSS Parallax Inertial/Momentum Scrolling on Mobile

So I have built a site using Keith Clark's pure CSS parallax idea. And it looks good, but I'm curious if anyone has figured out how to allow inertial/momentum scrolling on iOS. Here is my site so far. What I know so far: Currently inertial/momentum…
Organnoise
  • 331
  • 1
  • 7
1
2 3
…
99 100