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

Responsively animate page elements while scrolling using JavaScript [EDIT: Parallax Scrolling]

I'm certain this has been brought up in the past; however I'm at a loss for a term. On this web page for square, the user scrolls through the section titled "At Square, different disciplines collaborate to design beautifully simple solutions."and…
Ryan Rich
  • 11,637
  • 8
  • 22
  • 31
6
votes
2 answers

How do I animate though a PNG sequence using jQuery (either by scrolling or triggered animation)

More and more I am seeing an effect where pngs are loaded into a series of DIVs (or one div) and then sequenced though frame by frame either based on button click or based on scroll. I've tried to peek at the code, and I understand that javascript…
user379468
  • 3,989
  • 10
  • 50
  • 68
6
votes
1 answer

How do I use Rellax.js with React?

I am trying to use Rellax.js with React but am not able to understand how to use it. All I can find is https://www.npmjs.com/package/rellax#target-node. In that link, they give this code.
{ this.rellaxRef = ref }}> I’m that…
Aniket Gargya
  • 818
  • 1
  • 11
  • 21
6
votes
0 answers

react-spring: Can I really only set height by viewport heights (via `pages` attribute)?

I'm attempting to use react-spring to create a parallax effect on my site. I want the parallax container to be the background of the entire site, plus a 100vh "footer" at the bottom. Here's a simple diagram of what I mean: My issue is, according to…
damon
  • 2,687
  • 8
  • 25
  • 35
6
votes
1 answer

Choppy parallax in React. What's best practice?

This is a general question about how to best produce parallax effects in React! I want to directly update the position of an element based on the scroll position. The goal is to have the element appear fixed. I've tried some different methods but…
OskarEngstroem
  • 81
  • 5
6
votes
1 answer

Android: Custom bottom sheet dialog

How can I implement following design functionality with android standard component bottom sheet: Image when Bottom sheet dialog fragment will appear: Image when user scrolled to up to view bottom of content: I will use ViewPager to scrolling…
SBotirov
  • 13,872
  • 7
  • 59
  • 81
6
votes
2 answers

CollapsingToolbarLayout image with zoom

I've been reading around all day without any success on this. Basically want to be able to set an ImageView inside a android.support.design.widget.CollapsingToolbarLayout to change it's height depending on the onOffsetChanged change detected so that…
George
  • 1,224
  • 12
  • 21
6
votes
1 answer

Janky parallax text with GSAP

I've tried to make a text with parallax and failed. Code seems innocuous and doesn't seem to be doing anything wrong, yet the scroll look&feel is quite wrong. Markup is like this:
Antonio Laguna
  • 8,973
  • 7
  • 36
  • 72
6
votes
3 answers

Pinning a section when you scroll to showcase features

I am trying to fix Section 2 once it comes to the viewport and on every scroll the next paragraph on the left highlights to the other one and the phone screen on the right slides to next one. So on every scroll i want to highlight the next text and…
undefinedtoken
  • 921
  • 1
  • 8
  • 26
6
votes
0 answers

Scroll to the bottom of a CoordinatorLayout that contains a NestedScrollView and an AppBarLayout

Is there a way (programatically or by xml) to scroll to the bottom of the following CoordinatorLayout (see below), so the last element in the NestedScrollView is visible when the screen is displayed? Attached are the actual screen displayed and the…
Fer
  • 1,956
  • 2
  • 28
  • 35
6
votes
2 answers

Parallax and Pin collapse modes not working in Collapsing Toolbar Layout

This is my code of my test project:- Main Activity package com.invento.defcomm.collapsingtoolbarlayout; import android.support.design.widget.CollapsingToolbarLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import…
Midhun
  • 744
  • 2
  • 15
  • 31
6
votes
0 answers

Best way to create a parallax, CSS or js?

I am making a website with a parallax header. This header needs to contain both images and video. I wanted to make a pure css approach, however that creates new "problems". I tried…
Croos
  • 61
  • 2
6
votes
2 answers

Add a sticky header to parallax scrolling - android

I want to have a parallax scroll in my application much like the spotify app with the 'sticky' header. This means the header will be pinned to the top of the screen. I've found plenty of ScrollView libraries which do these functions separately, I…
Brendan Henry
  • 99
  • 1
  • 9
6
votes
1 answer

Pure CSS parallax effect with video background

I am trying to create a parallax effect using pure CSS that also has a video background on the first frame. The effect works fine in Firefox and IE9+ but Chrome has a tearing effect on all the frames with "background-attachment: fixed". I did manage…
Cluke009
  • 63
  • 1
  • 6
6
votes
1 answer

Facebook News paper app, full size image parallax effect

I was playing with the Facebook paper app, and realized the parallax effect on the full size image is very cool. So i went to try it on my own app. but the parallax was not moving as smooth as the facebook paper app. here is the code i…
user3286623
  • 63
  • 3
1 2 3
…
99 100