Fun with animation

An animated effect can be easily achieved with a jquery based script and with 2 more images. The image in front might be a png image with transparent areas, whereas the background image could be a jpg image just showing some colored pattern.

image

Here we go:

html + javascript needed to achive this effect:

<img class="background_animation"
    style=" background-image: url('/blog/bg_animation/bg_animation.jpg');"
    src="/blog/bg_animation/animation_image.png" width="800" height="46"
    alt="" title="">

The javascript to be initialized looks like this:

<script>
    $(document).ready(function() {
        var offset = 0;
        // in pixels
        var backgroundheight = 800;
        function scrollbackground() {
            // decrease the offset by 1,
            // or if its less than 1 increase it by the background height minus 1
            // and apply the background position using jQuery
            offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
            $('img.background_animation').css("background-position", "50% " + offset + "px");
            // call self to continue animation...
            setTimeout(function() { scrollbackground(); }, 30);
        }
        // Start the animation...
        scrollbackground();
    });
</script>
The same animation implemented as a shortcode (for Hugo static site generator), read more...

Shortcode declaration:

As always the shortcode has a .html extension and needs to be stored under the site’s layouts/shortcodes directory.

<!-- shortcode
    initial release,
    this is a work in progress,
    uid can be done automaticly when instantiating the shortcode (maybe),
    so for the moment the code snippet more or less is a proove of concept
-->

{{- $uid := .Get "uid" -}}
{{- $foreground_img := .Get "foreground_img" -}}
{{- $background_img := .Get "background_img" -}}
{{- $bg_img_height  := .Get "bg_img_height" -}}
{{- $scroll_speed   := .Get "scroll_speed" -}}


<!-- image declaration -->
<img class="background_animation_{{ $uid }}"
    style="background-image: url('{{- $background_img -}}'); repeat;"
    src="{{- $foreground_img -}}">


<!-- required javascript code -->
<script>
    $(document).ready(function() {
        var offset = 0;
        // in pixels
        var backgroundheight = {{- $bg_img_height -}};
        function scrollbackground() {
            // decrease the offset by 1,
            // or if its less than 1 increase it by the background height minus 1
            // and apply the background position using jQuery
            offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
            $('img.background_animation_{{ $uid }}').css("background-position", "50% " + offset + "px");
            // call self to continue animation...
            setTimeout(function() { scrollbackground(); }, {{- $scroll_speed -}});
        }
        // Start the animation...
        scrollbackground();
    });
</script>

Once available, the shortcode can be initialized as following. For the moment, all arguments are mandatory.

If the shortcode is used more than once in a page, make shure, the uid is a unique number. The uid just ensures there javascript code is not clashing with other animations already up and running.

{{ % set_background_image
    uid="1"
    foreground_img="/blog/bg_animation/bg_animation_test.png"
    background_img="/blog/bg_animation/bg_animation_1.jpg"
    bg_img_height=""
    scroll_speed="40"
% }}

<!-- Please note: the space in between the double brackets and the % sighn
    is only requred for formatting reasons.
    Hugo **always** evaluates shortcode ignoring any formatting rules.
    Please remove the space when using this code in a page to initialize the shortcode -->