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="" type="text/javascript"></script>
    <script src="" type="text/javascript"></script>
    <script src="" 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;

                fx: 'scrollDown',
                easing: 'easeOutBounce',
                speed: 3000,
                delay: -3000,
                timeoutFn: randomDelay,
                random: 0,
                pause: 1,


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=">
   <img src="myimage.jpg" height="110px" width="110px" border="0px">

No comments:

Post a Comment