0

I'm trying to write a custom parallax effect function with jQuery that only moves the transform property on that section.

The steps I think this should follow is as follows:

  1. Have a class on the div/section I want to "translate" or "parallax".
  2. Of course, that div is positioned absolute, and top by default is 0.
  3. When the div is approached on scroll, set it's top value to -72px.
  4. Then as the user is scrolling past the div begin to increase its translate ty value from 0.0% to 16%.
  5. If the user scrolls back up, reverse the transform altering from either 16%, the finished value, or whatever the current value is based on scroll, back to 0%, the starting value.

The CSS is:

.has-parallax {
  overflow: hidden;
}
.image .abs-bg + img { display: none; }
.image .abs-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.image.will-parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate3d(0px, 0%, 0px);
}

Now, when the user scrolls the page and has approached whatever div with a background image that has class of .will-parallax the transform value will begin to change only on the ty percentage of the 3d space.

An example of a website using this kind of parallax is https://www.wearecolony.com/

Can anyone assist in writing the jQuery code? Thanks.

Chathurika Senani
  • 658
  • 2
  • 9
  • 21
Kabolobari
  • 11
  • 3
  • Have you tried something? – elementzero23 Jan 20 '17 at 13:47
  • Hi, honestly, it beats me. I'm new to JS/jQuery and I feel daunted even trying. I've only written tiny bits of basic jQuery codes...this one's like a full program that just beats me. – Kabolobari Jan 20 '17 at 14:26
  • OK, I try to point you in the right direction: Step #3 check if an element is in viewport: http://stackoverflow.com/a/7557433/2905972 and setting the `top` value goes like `$("#mydiv").css("top", "-72px")`. Setting other css values is similar. If you have tried something and you are still not any further, post your code on stackoverflow and you'll get help. – elementzero23 Jan 20 '17 at 14:42
  • Because actually on stackoverflow you post questions to specific problems you have like "this is what I have tried so far but I can't get that div on the right side" or similar. – elementzero23 Jan 20 '17 at 14:43
  • And if you find out that you're too unexperienced in jQuery, google for "jquery tutorial". I got a bunch of hits. – elementzero23 Jan 20 '17 at 14:47
  • Sure, I'll try that out and post back what I find works/works not. Thanks. – Kabolobari Jan 21 '17 at 14:17

0 Answers0