Animated News Gallery with jQuery & CSS

3

This is a very helpful and ‘sweet’ news gallery that can be helpful for displaying your notices or news to the users. Thanks to the animate() function of Jquery that made our livess free of heavy Flash elements. Script is easy to understand and implement, still you can write to me if you face any problem.Now lets watch it working.



Live Demo. Download Script

jQuery Code

<script type="text/javascript" src="../jquery.js"></script>
<script language="javascript">
$(document).ready(function () {
    var speed = 300;
    var first = 0;
    var pause = 3000;

    setInterval(tick, pause);

    function tick() {
        first = $('ul#ticker li:first').html();
        $('ul#ticker li:first').animate({
            opacity: 0
        },
        speed).fadeOut('medium', function () {
            $(this).remove();
            last = '<li class="news">' + first + '</li>';
            $('ul#ticker').append(last);
        });
    }
});
</script>

HTML Code

<body>
<ul id="ticker">
  <li class="news"> <img src="drop.PNG" /> <a href="#" class="news-title">Sexy Drop Down</a> <span class="news-text">It is the sexy drop down menu created totally with CSS without using any Javascript. Just try it out.</span> </li>
  <li class="news"> <img src="ex2.PNG" /> <a href="#" class="news-title">Expanding TextBox</a> <span class="news-text">Facebook like expanding textbox is first choice of many web developers. Here is one for you.</span> </li>
  <li class="news"> <img src="loadmore.PNG" /> <a href="#" class="news-title">Load More Results</a> <span class="news-text">Facebook/Twitter like 'load more results' script can be found here.</span> </li>
  <li class="news"> <img src="twitlogin.PNG" /> <a href="#" class="news-title">Twitter Login</a> <span class="news-text">Twitter like login box can be helpful to you.</span> </li>
</ul>
</body>

CSS Code

body {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
}
#ticker {
    height:110px;
    width:400px;
    overflow:hidden;
    border:solid 15px #C9C9C9;
    padding:6px 10px 14px 10px;
}
#ticker li {
    border:0;
    margin:0;
    padding:0;
    list-style:none;
    height:110px;
    padding:5px;
}
#ticker a {
    color:#0D0D0D;
    text-transform: uppercase;
}
#ticker .news-title {
    display:block;
    font-weight:bold;
    margin-bottom:4px;
    font-size:16px;
}
#ticker .news-text {
    display:block;
    color:#666666;
}
#ticker img {
    float:left;
    margin-right:14px;
    padding:4px;
    border:solid 1px #DEDEDE;
 height:50px;
 width:50px;
}

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

3 thoughts on “Animated News Gallery with jQuery & CSS”

Comments are closed.