Scrolling a scroll/parchment using HTML5/CSS3 instead of JavaScript

Question

Is there a way to create a frame that visually acts as a scroll/parchment using only HTML5 and CSS3? For now I have achieved it through using JavaScript, but the scroll event does not trigger that often on a mobile device which makes the header and footer of the scroll stutter.

var paperHeight = 1710;
var viewHeight = 0;
var scrollTopOffset = 240 - paperHeight;
var scrollBottomOffset = scrollTopOffset - paperHeight;

$(function() {
  $(window)
    .on('resize', function() {
      viewHeight = $(window).height() - $('.container').outerHeight() + viewHeight - $('.footer').outerHeight();
      $('.scroll-view')
        .height(viewHeight)
    })
    .trigger('resize');

  $('.scroll-view')
    .on('scroll', function() {
      $('.scroll-top')
        .css("background-position", "0 " + (paperHeight - scrollTopOffset + $(this).scrollTop()) + "px");

      $('.scroll-bottom')
        .css("background-position", "0 " + (viewHeight + scrollBottomOffset + $(this).scrollTop()) + "px");
    })
    .trigger('scroll');
})

Website: https://pendrokar.github.io/magia-ts/index.html

Source code: https://github.com/Pendrokar/magia-ts/

In case your browser does not scroll smoothly, the best way I know on how to view the scrolling animation is by using the middle mouse button on the content and then moving the mouse up and down.

So the scroll acts in the following way. When scrolling the content up or down, the header and footer scroll to the opposite direction. The header and footer show a reversed image of what is to come or what was before. The JavaScript version uses a background image that is simply the original copied and reversed, with CSS3 transform matrix only one image would be required.

I thought this could be possible using display 'absolute' or 'fixed' elements within a overflow 'scroll' element, but neither would make the elements stay in their spots as the content gets scrolled.

HTML5 Canvas is another option, but it might still be as slow as the JavaScript one.

Answer 1

Your scroll-image is well over a half-megabyte in size.

That size is probably too much for a mobile browser to handle without stuttering.

(Especially since it's drawn 3 times.)

Try using this downsampled version of your scroll that weighs in at 56K:

If you can't get mobile to trigger the scroll event often enough for your design, then you can use html5 canvas which will give you finer control over redrawing rates. But first try using the smaller image and see if that solves your mobile stuttering.

Good luck with your game!

Answer 2

Did you success to do what you wanted ? Because it is exactly what I try to do (and I don't know anything about javascript so that I would like to use only css and html), and I didn't find anything else about this on the web.