Animated tile-style hyperlinks

I must admit, I begin to love jQuery. I am not JavaScript developer, yet jQuery is so easy, that even I can use it.

In this post I will explain how to create animated, scrollable box with alternating links and images. Just like this one:

1.       Start by adding these scripts inside body of your page:

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.88/jquery.cycle.all.min.js" type="text/javascript"></script>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

   <script type="text/javascript">

        $(document).ready(function () {

            var randomDelay = function () {

                var min = 1000;

                var max = 1500;

                var wait = Math.round(Math.random() * (max - min) + min);

                return wait;

            };

            $('.animated-tile').cycle({

                fx: 'scrollDown',

                easing: 'easeOutBounce',

                speed: 3000,

                delay: -3000,

                timeoutFn: randomDelay,

                random: 0,

                pause: 1,

            });

        });

    </script>

Here, in randomDelay function, set minimum and maximum time in milliseconds.

2.      Put div section where the box will be:

<div class="animated-tile" style="position: relative; width: 110px; height: 110px; overflow: hidden;">

Width and height should be the same as dimensions of images to cycle.

3.       Put multiple links with images inside. That's it!

<a href="http://goleszympansy.pl>

   <img src="myimage.jpg" height="110px" width="110px" border="0px">

</a>