Parallax On The Web (Part 2) – Parallax Header
Why Stack Overflow recommends it
Stack Overflow users link it when asking how parallax scrolling works or how to copy the header effect, since it walks through the scroll-position technique step by step.
Recommended by 2 people across 2 different months, 2015 to 2016.
What it is
A 29-minute DevTips tutorial that builds a parallax scrolling header for a made-up clothing store called Black Bird. It uses jQuery to read the scroll position and move layered images at different rates, with code on GitHub. It is part 2 of a series on parallax on the web.
What people said
Recommends rinkemiku · 2015-08 · Stack Overflow · on “console.log and .scroll listener does not work”
I'm trying to create this parallax effect on a landing page. Also following this tutorial [this video] (skip to 21:00) for the jquery. I am now creating the jquery side of the site, but I already have a js file for this site, and created a new one for the landing page(also tried to place the code on my main js file. But anyways, to test out the listener and console, i have this code. $(window).scroll(function(){ console.log('h1') }); Also here is the code inside my main js file $(document).ready(function(){ $("#graphics").hide(); $("#morew").hide(); //------------landing scroll---------------// $(window).scroll(function(){ console.log('h1') }); //------------Toggle---------------// $("#hideshow1"
Recommends Edison Biba · 2016-08 · Stack Overflow · on “How to get the core part - that does the trick - of parallax work?”
This is what you need for a good starting. He explains very good the way how he does it work. [this video] check this out
Cites Steinar · 2015-04 · Stack Overflow · on “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 some scrolling animation on the text so the text behaves similar to the images in this video from DevTips: [this video] I did try to put some jQuery together to target the H1 and use same technique as shown in the video, but it didn't work. Maybe my code is all wrong because the test he does where the scroll position is printed out in the console did not show for me. Here's the html and css code that I'm working with. Unfortunately I can't add screensh
Cites Caspert · 2016-08 · Stack Overflow · on “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 [LINK] at the "Photos" section. Latest code is down the page with related information. To get an overall look of the question see the rest of the details. Core parts I already know are the scrollTop() of the $window and the offsetTop of the element are important to apply the parallax effect on a DOM element as well as a factor for how sensitive the effect should be respond to the scroll speed. The end result should be some formule that will calculate the translateY or translate3d coordinates in pixe