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
4
votes
0 answers

Trouble making jQuery.Parallax and jQuery.Skrollr work in harmony. (Iterating through backgrounds when window scrolls.)

I'm coding the visual part of a website and I've hit a snag. I'm trying to keep it mostly CSS for greater compatibility, but I do want to use some jQuery: chiefly for when the user scrolls the window, hence Parallax and Skrollr. As you know,…
QuestionerNo27
  • 610
  • 6
  • 14
  • 30
4
votes
2 answers

CSS background image centered with Stellar JS

I'm setting a background image to an element with Stellar JS and trying to achieve a centered image that moves in parallax. However when I try to use the standard approach I realize that the background-position is updated by stellar which then…
captDaylight
  • 2,224
  • 4
  • 31
  • 42
4
votes
1 answer

iOS touchmove event - changing backgroundPosition is not smooth

I'm trying to create simple parallax effect changing backround position but the movement is not smooth in iOS Safari. Background changes its position only when I release touchscreen, but not when I scroll it. Javascript: …
Anton A
  • 41
  • 4
4
votes
3 answers

Improving Performance on Background Parallax Scrolling

Hello StackOverflow Community, what I am trying to achieve is a header that can be moved with the mouse. You klick into the header and drag the mouse and the elements inside the header will move with different speeds. I achieved the parallaxing part…
thpl
  • 5,810
  • 3
  • 29
  • 43
4
votes
1 answer

Calculate percentage of positioned elements for parallax opacity

I'm trying to calculate a percent number (0.0 - 2.0/0% - 200%) so that I can change the opacity of a div as it comes in and out of view. When the window is above the viewable area, the percent is at or less than 0 When the window is at the exact…
Steve Robbins
  • 13,672
  • 12
  • 76
  • 124
4
votes
1 answer

Animation flickers with Firefox 18.0.1 (due to RequestAnimationFrame?)

i used this http://www.netmagazine.com/tutorials/create-interactive-street-view-jquery tutorial to create an intro for one of our customers: http://f-bilandia.de/kunstmann/bronski/ It used to work really good on all browsers. When I updated to the…
Bene84
  • 66
  • 3
4
votes
3 answers

Keep oversized background image centered

I am building a single page site constructed of 4 divs, one on top of the other and each one with its own fixed background image. The images are much wider than the screen as I want to site to keep its look across a large range of screen sizes,…
Tim Wilkinson
  • 3,761
  • 11
  • 34
  • 62
4
votes
2 answers

How to move/animate elements in from the side with Stellar.js on a vertical scroll?

I'm using Stellar.js jQuery plugin to create a parallax scroll affect, but I'm not sure if Stellar supports what I am trying to accomplish. I have the basic parallax scrolling affect working properly (largely based on this tutorial from TutsPlus). …
jjfrizzle
  • 85
  • 1
  • 1
  • 6
4
votes
2 answers

Jquery.css performing unwanted flickering effect on IE and Webkit (Chrome, Safari) but Firefox is ok

I have the following code: $(document).ready(function(){ $(window).scroll(function(){ Topo = $(window).scrollTop(); ObjScrollASoda.css({ 'marginTop' : (Topo - 800)+'px' }); }); }); (note: ObjScrollASoda is the…
Ricardo Fiorani
  • 803
  • 1
  • 7
  • 19
4
votes
1 answer

Using parallax plugin multiple times on a page?

I am using this plugin that github uses for it's parallax effect: https://github.com/cameronmcefee/plax It is a great plugin but I would like to use it more than once on a page. //PLAX - ONE $('#one img').plaxify() $('#one .back').plaxify({…
seanjacob
  • 2,238
  • 1
  • 22
  • 25
3
votes
1 answer

Parallax Effect without the use of background-attachment:fixed

So I am trying to create a parallax style site much like this one. However, whereas they use background images with a 'fixed' attachment for the effect of the image not moving, I would like to use a jquery slideshow plugin. Basically, how can I…
romeboards
  • 387
  • 5
  • 19
3
votes
1 answer

jparallax upgrade from old to 1.0 version

I am having trouble updating jparallax from very old version to the 1.0 version. I inherited a half-completed site using jparallax plugin. The parallax effect was complete - the problem is that this is a very old version, using jQuery 1.2.6 which…
Thomas
  • 2,426
  • 3
  • 23
  • 38
3
votes
2 answers

Looking for the plug-in jQuery parallax

I'm searching for a this jQuery plug-in called Parallax, but i cant seam to find the link anywhere : Plug-in source: http://www.laurentiuswonen.com/jaarverslag2010/assets/js/jquery.parallax.js
canusta
  • 39
  • 4
3
votes
0 answers

scroll magic Pin() creating gap

I'm trying to have a parallax effect on my website using ScrollMagic (like this example: http://scrollmagic.io/examples/basic/section_wipes_natural.html ) my HTML code structure is like:
Mehrnaz ghaffar
  • 31
  • 3
3
votes
0 answers

background-attachment: fixed causes jump when scrolling on mobile devices

After reading lots of topics about my issue, I still can't figure out how to solve it. Here is a GIF of the problem I'm currently facing: https://s4.gifyu.com/images/20210302_235317.gif As we can see, as I start scrolling into the page, the…
Flobesst
  • 1,281
  • 1
  • 16
  • 26
1 2 3
…
99 100