Scrolling an element

In this recipe, we will look at how to animate the scrolling of content within a container element. We will scroll the content of a div tag, that is, the width and height that have been set to force the content to overflow, and also set that overflow to be hidden.

We can see the key steps in this animation by looking at the following selection of frames:

How to do it...

We begin by creating a PHP page to set up a basic Moodle programming environment, in this case, anim_scroll.php, with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_scroll.php');
$PAGE->requires->js('/cook/anim_scroll.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:5px;width:120px;height:200px;overflow:hidden;">
<h1>Animation: Scroll</h1>
<p>
Moodle (abbreviation...