Website Development Resources
CHouseLive

Animated Scrolling

Statue of Liberty

Statue of Liberty
The statue's complete name is Liberty Enlightening the World.

History

The statue of Liberty is a majestic copper sculpture that towers above Liberty Island at the entrance to New York Harbor in Upper New York Bay. This famous figure of a robed woman holding a torch is one of the largest statues ever built.

The people of France gave the Statue of Liberty to the people of the United States in 1884. This gift was an expression of friendship and of the ideal of liberty shared by both peoples. French citizens donated the money to build the statue, and people in the United States raised the funds to construct the foundation and the base. The French sculptor Frederic Auguste Bartholdi designed the statue and chose its site.

The Statue of Liberty is a monumental feat of sculpture, engineering, and architecture. It attracts visitors from all over the world. The Statue of Liberty and a former immigration station at Ellis Island make up the Statue of Liberty National Monument, which is administered by the National Park Service.

Fact File

Height - foundation to torch
92.99 metres
Height - feet to torch
46.05 metres
Total weight
204 metric tons
Weight of copper skin
91 metric tons
Weight of framework
113 metric tons
Number of steps in the statue
162
Date presented to the United States
4 July 1884
Date dedicated
28 October 1886

Using Ariel Flesler's LocalScroll jQuery plugin this page demonstrates how an animated scroll can add pizazz to a page with anchor links.

Required scripts

  1. Attach the JQuery library

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    You can also download your own copy of the JQuery library.

  2. Attach the LocalScroll script

    <script src="jquery.localscroll-min.js" type="text/javascript"></script>

  3. Initialize the LocalScroll script

    <script type="text/javascript">
  $(document).ready(function(){
    $.localScroll({
      duration:1000
    });
  });
</script>
CSS
Advanced mouse-over
Buttons
Centre page horizontally and vertically
Cross browser transparency
CSS3 techniques
Drop caps
Links with image prompts
MLA essay formatting
The Power of unordered lists & CSS
Simple link list
Simpe mouse-over
Web safe fonts
Pictures
Automated CSS & javascript image viewer with sliding thumbnail strip
Enhance Photographs with a caption, border & drop shadow
Fancybox photograph gallery
Lightbox photograph gallery
Image Placement and Styling
Image Rotator
Magnify images with Gzoom
Magnify photographs with jqZoom
Random photograph gallery
Shadowbox photograph gallery
Simple CSS & javascript image viewer with centred thumbnail strip
Simple CSS & javascript image viewer with sliding thumbnail strip
Zoom in on an image using MooZoom
JavaScript
Animated Scrolling
Equal column heights
Show / Hide text
Tabbed Content
Validaiting target="_blank"
PHP
Easy to implement PHP e-mail contact form
Use CSS to style your e-mail PHP form

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org