About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

How to create parallax scrolling

Written by Richard Heyes, RGraph author, on 1st February 2023

Ever wanted a really simple example of parallax scrolling? Personally I think that parallax scrolling is certainly not an easy thing to get your head around and I have also struggled to find a simple, bare-bones example - ideally a single html page with the css embedded in the page.

I've thought that, for a long time, it would make for a great front page to this site. Thing is - now that I've (finally) "got it" - I'm not sure that I now want to implement it on the RGraph website! I still think that it looks good - I'm just not sure that it's worth re-doing the front page for it.

There are also seo concerns with doing that - especially when it's been noted again recently that site redesigns can send your rankings a bit "wappy" (not that my rankings are worth a jot anyway). So you can download the code (and the associated image) here and the whole html is shown below.

Download the zip file here

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
          margin: 0;
        }
        
        .wrapper {
          height: 100vh;
          overflow-y: auto;
          overflow-x: hidden;
          perspective: 10px;
        }
        
        header {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 200px;
          transform-style: preserve-3d;
          z-index: -1;
        }
        
        .background {
          transform: translateZ(-10px) scale(4);
          position: absolute;
          height: 100%;
          width: 100%;
          object-fit: cover;
          z-index: -1;
        }
        
        main {
          padding: 5px 1rem 1rem 1rem;
          background-color: white;
        }
        
        main h1 {
            font-size: 3em;
            text-align: center;
            margin: 15px;
        }
    </style>
</head>
<body>
  <div class="wrapper">

    <!-- The background image at the top of the page  -->
    <header>
      <img src="Mountain.png" class="background">
    </header>

    <!-- Some boiler plate text to pad the page out -->
    <main>
        <h1>This is the main title for the page</h1>

        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
        These are some random words in English that will hopefully
        prevent Chrome from offering to translate the page.
    </main>
  </div>
</body>
</html>