Friday 5 April 2013

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>