How To Autoscroll Background

Good morning,

On my landing page, I have a background image of a map. It can be scrolled manually. Is it possible to make it scroll continuously and automatically upon page load? Thanks.

I expect it’s possible, but is it desirable?

Note

Animation should almost always be user controlled or very short in duration . Images that continually animate can cause the rest of the page to be more difficult, or for users with very high levels of distractibility, totally inaccessible.

WCAG 2.0 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.

https://webaim.org/techniques/images/

2 Likes

While I really like the answer from @TechnoBear, I should ask you @Engine44 if you have links to any websites that demonstrate that a scrolling background map is a good idea.

2 Likes

lol. I would like to give it a try.

No, I have no links. This is a map. It seems logical to me that the user could see the whole map. The scroll speed would be slow. Perhaps the user could start and stop the scroll. Anyway the user would be at that landing page for only a short period of time.

Here are 3 screenshots that show the whole map:

What would you think if it was a single slow scroll down the map?

I’ve seen CSS before where scrolling down the page causes the image to scroll, giving the user full control about scrolling it up and down. That might be a viable solution, and as a bonus uses no JavaScript at all.

2 Likes

Yes, that could work. What would the code be like?

Yes, currently, the user can scroll it manually.

I’ve moved this to the HTML&CSS forum so that people with more CSS skills can weigh in on the issue.

Hi there Engine44,

as there would be no loss of functionality if JavaScript
was disabled, I would consider using it as a solution…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

html, body {
    height: 100%;
 }
 
body {
    min-height: 200%;
    font: normal 1em / 150% sans-serif;
 }
 
 body::before {
    content: '';
    position:absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 134.7%;
    background-image: url( https://global.discourse-cdn.com/sitepoint/original/3X/8/1/815a6ffa3a879edff3694b22bbfcb40877b7de71.jpeg );
    background-size: 100% auto;
 }
 
</style>

</head>
<body> 

<script>
( function( w, d ) {

   var c = 0, 
      ph = d.body.offsetHeight, 
     num = ph/60, /* adust value to suit */
   delay = 100; /* adust value to suit */

function downUp( c ) {
   w.scrollTo( 0, c );
   c = c + num;
   if ( c > ph ) { 
        num = -num;
     }
   if ( c < num ) { 
        num = Math.abs( num );
     }
   setTimeout(
      function() { 
            downUp( c ); 
         }, delay );
 }
   downUp( c );
   
} ( window, document ) );

</script>

</body>
</html>

coothead

1 Like

I think that would generally be considered acceptable in terms of accessibility. I might still struggle to use it, but I’m probably an extreme case. smile (I find it very hard to read text against an image, and a moving image will just add to my woes.)

1 Like

Yes difficult to read and concentrate.

Here’s a CSS only example.:slight_smile:

3 Likes

Much better - ( smooooooother    :winky: )
than the javascript example.

coothead

2 Likes

I fully agree. As a JavaScript expert, it’s almost always the case that the less JavaScript the better.
No JavaScript being best of all :slight_smile:

4 Likes

The only text to read is the title of the website.

People that have no trouble, find it very difficult to understand about people that have a hard time.

3 Likes

Here’s a toggle added to turn the animation off.

I also added the prefers-reduced-motion: reduce media query.

Thanks, looks great. Have not got it working yet so I need to go into some detail: You are using “wrap class” in the header. I assume this is because you have the title and Welcome button that you want to set up with flex. There is no Welcome button on this page so perhaps the wrap and flex are not needed? If this is true, then there would be no change to my HTML?

The flexbox allows the button to sit at the bottom of the viewport but if you don’t require that feature then you may not need the flexbox. However as wrap is fixed positioned so that it doesn’t scroll with the document then you will still need .wrap in the original example.

In my new example where I just scroll the background-position then you can probably just get away without the wrap as there is no actual page scrolling.

If all you have is the heading then yes you could just have the heading tag on its own. However if you want the heading centred vertically in the viewport you may want to use flex once again.

Of course it does all depend on what else is going on but feel free to play around with it and see if you can work out yourself how to modify it. In the end the more you practice and test the more you will learn. :slight_smile:

2 Likes