What is the name of this image vertical movement effect?

HTML & CSS
1

Professional website designers (graphic designers specializing in website design) often give an image vertical movement effect to images in homepages or to “Hero” images; they often don’t code it in JavaScript (or CSS, if possible) but give it automatically via some frontend development automation tool like WordPress-Elementor.

This effect causes an image to move along with the user, up or down, when the user scrolls up or down, or move opposite to to the user (up when scrolling down and down when scrolling up).

I would like to try to give it to images in my homepage.
My website is built with Drupal and Drupal doesn’t have any design tools like WordPress has so I have to apply it to images from scratch.

What is the name of this image vertical movement effect?

1 Like
2

Hi @bendqh1, do you mean a parallax effect? This can indeed be achieved with CSS alone:

CC @PaulOB :-)

3 Likes
3

Indeed ! Adding the following directive to a background image made it parallaxed.

background-attachment: fixed;

:slight_smile:

It’s worth to note these two things:

  • Although the background position stayed top, the image initially appears a bit different, a bit downwards (before I start the parallax effect).
  • In a quick search I didn’t find any way to make the parallax effect reversed with CSS.
4

That on its own would make it fixed in one position and not parallax as such. The content would scroll over it but there would be no actual parallax effect.

We’d need to see what you have coded so far to give specific help but there are many parallax demos around.

Be aware that mobile devices don’t play well with background-attachment:fixed as a mobile viewport is handled differently.

2 Likes
5

Kevin Powell did a great video on this subject a couple of months ago. Breaks down what each piece does and everything…

3 Likes
6

PaulOB basically I only did that:

	background: linear-gradient( rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10) ), url("PATH");
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: fixed;

Are parallax or otherwise scrolling effects really “web accessible”? I don’t see why they won’t be but I might miss something.
I consider web accessibility textually, visually, vocally, etc, an extremely important topic, not only in and of itself but of SEO.

7

I have some neurological problems and find parallax effects quite disorientating and difficult. The only other person I know with a similar condition has the same problem with them.

4 Likes
9

Well it depend on what element you placed that background? If you only have one fixed background then place it on the body but if its a series of fixed backgrounds then they go on each element and are only visible when that element is over the point that the background would be.

background-attachment:fixed is always relative to the viewport and not the element they are attached to. They will only show if the element in question is over that part of the body where the image has been placed. As I said they won;t work with mobile devices anyway.

If you just want one background then this is a better approach that will work on mobile.

For as more complicated scrolling effect and more images you would need js (until scroll-timeline is fully supported as in Dave’s demo above).

Here’s another old demo of mine anyway.

As @technobear said above any animation can have an effect on susceptible people so you should always turn off your animations inside a prefers reduced motion media query.

@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */

  .element-in-question  {
    animation-duration: 0s;
  }
}

This other demo of mine shows it in action on an animated background:

You can put all your alterante rules in the media query and change to normal background effects etc.

.

4 Likes