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

Get the background-image url from an lower div to add them to an higher div

Im trying to put a background-image url of an lower div and add them to an higher div. The problem is, there are many lower divs with background-images and all of them has the same classname. Overall Im trying to build a parallax theme with drupal…
4
votes
1 answer

Parallax effect delay until section reaches viewport

I am trying to do a presentation website and wanted to make an element as if it was floating in air. I have managed to get the thing working (for header section) but by the time you reach the element it is already too outset off of its original…
Žan Marolt
  • 136
  • 1
  • 3
  • 10
4
votes
1 answer

Animating Text with parallax background

I'm all new to this and I have this site that I'm using to learn the basics. I'm just put together a simple parallax scrolling effect, where the header is scrolling and contains one H1 element. I've been trying to figure out if it's possible to put…
Steinar
  • 451
  • 2
  • 7
  • 10
4
votes
2 answers

LibGDX movement not smooth

I'm making a game in LibGDX. I have 4 textures as a parallax background and some obstacles (one in the upper part and others in the bottom part of the screen), this is the movement part: //Parallax if (bckgndmiddle_x <=…
J. Arenas
  • 493
  • 1
  • 9
  • 23
4
votes
1 answer

Pure css3 parallax and mobile

I'm using transform3D to achieve a pure css parallax effect. I have a really messy demo setup here: http://codepen.io/anon/pen/nGAvw This is the main code that does the translation: transform: translateZ(-1px) scale(2); z-index: -1; transform-style:…
4
votes
1 answer

parallax scrolling is a bit jumpy

I've a small bit of parallax on a site I'm working on, it's working almost fine but the foreground divs are a bit jumpy when I scroll down the page. Near the top of the page I have a div called #top-banner, it has a fixed background image, sitting…
Holly
  • 7,462
  • 23
  • 86
  • 140
4
votes
1 answer

Jerky parallaxing with scrollwheel in WebKit

I'm having some issues with parallaxing backgrounds. I've made a little website for an event organized by some friends of mine, and on that site I have a bunch of background images alternating in between content sections. I've added some logic to…
Martin Wedvich
  • 2,158
  • 2
  • 21
  • 37
4
votes
1 answer

Adding multiple layers

I'm using the framework Cool Kitten for a parallax project (because it's responsive). This framework is using stellar.js, which supports multiple parallax layers. Cool Kitten doesn't provide any documentation, and it's not possible to use the…
holyredbeard
  • 19,619
  • 32
  • 105
  • 171
4
votes
2 answers

skrollr creates large gaps on page

I'm working on a site using scrollr.js and I get a problem with height issues as elements comes in. As a reference, I'm using the scripts found on this template. In the first screenshot, I get a large gap between my elements that fade in from both…
davewoodhall
  • 998
  • 3
  • 18
  • 43
4
votes
1 answer

Skrollr: how to start animation only once a certain point is reached?

I'm playing with skrollr plugin but can't achieve what I want so looking for assistance. I've been able to implement easy effects such as
(means that my DIV called intro-left becomes…
Greg
  • 3,025
  • 13
  • 58
  • 106
4
votes
1 answer

javascript horizontal parallax with easing and stellar.js

I'm trying to create an horizontal parallax scrolling site. For now everything is working except the easing part. Here is the code:
Henrique Gonçalves
  • 1,572
  • 3
  • 16
  • 27
4
votes
3 answers

Web Parallax Scrolling Background Image and Text

Fiddle of the issue: http://jsfiddle.net/Vy365/3/ I'm trying to create sections on a page that have a parallax scrolling effect. The main CSS I'm using to achieve this is background-attachment: fixed for the background image, and position: fixed for…
dougmacklin
  • 2,560
  • 10
  • 42
  • 69
4
votes
4 answers

Stellar.js background attachment set to fixed but crazy jitter still happening

As the title suggests, I'm using Stellar.js. I only have one parallax element, and it's very simple. It's a section with a background image. The background image is set to fixed (like the documentation says to do to avoid jitter), but the image is…
trevorhinesley
  • 845
  • 1
  • 10
  • 36
4
votes
0 answers

Is there a way of detecting if the browser will freeze the DOM while scrolling?

Is there a way of detecting if the browser will freeze the DOM or disable JavaScript while scrolling? It's known that some mobile browsers do this, and it effectively kills scrolling-based effects like parallax and animations. I'd like to…
4
votes
1 answer

Parallax scrolling without scrollbar

I wanted to know if there are some javascript libraries that handles parallax scrolling, with panes, but without using scrollbars ? My client doesn't want any scrollbars and the website works like panels that show when you scroll. I tried Skrollr,…
arlg
  • 1,128
  • 3
  • 16
  • 34