Portfolio Design and sorting with Animation Effect | 2my4edge

19 June 2014

Portfolio Design and sorting with Animation Effect

Today i'm going to tell you that, how to make simple and attractive portfolio design and sorting with Animation effects. In this post, we are going to use Jquery and CSS to make this function. this is one of the simple way. let see the coding with details.
portfolio-design-with-sorting

DOWNLOAD         LIVE DEMO

 HTML CODE
<div id="main">
<div class="container">

  <div class="sorting-container">
    <a href="#" title="" class="active-sort" data-filter=".all-sort"> All </a>
    <a href="#" title="" data-filter=".Javascript"> Java Script </a>
    <a href="#" title="" data-filter=".Jquery"> Jquery </a>
    <a href="#" title="" data-filter=".PHP"> PHP </a>
    <a href="#" title="" data-filter=".database"> Database </a>
    <a href="#" title="" data-filter=".html"> html </a>
    <a href="#" title="" data-filter=".css"> css </a>
  </div>

  <div class="portfolio-container">
    <div class="portfolio all-sort css">
      <div class="portfolio-thumb">
        <img src="images/1.gif" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Jquery">
      <div class="portfolio-thumb">
        <img src="images/2.png" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Jquery Javascript">
      <div class="portfolio-thumb">
        <img src="images/3.gif" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Javascript css">
      <div class="portfolio-thumb">
        <img src="images/4.png" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Javascript">
      <div class="portfolio-thumb">
        <img src="images/5.gif" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort css">
      <div class="portfolio-thumb">
        <img src="images/6.gif" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Jquery PHP">
      <div class="portfolio-thumb">
        <img src="images/7.png" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Jquery Javascript">
      <div class="portfolio-thumb">
        <img src="images/8.png" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Jquery html">
      <div class="portfolio-thumb">
        <img src="images/9.gif" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Jquery">
      <div class="portfolio-thumb">
        <img src="images/10.png" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort PHP database">
      <div class="portfolio-thumb">
        <img src="images/11.png" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Jquery PHP database">
      <div class="portfolio-thumb">
        <img src="images/12.png" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort css">
      <div class="portfolio-thumb">
        <img src="images/13.gif" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort Jquery css">
      <div class="portfolio-thumb">
        <img src="images/14.gif" alt="" title="">
      </div>
    </div>
    <div class="portfolio all-sort PHP database">
      <div class="portfolio-thumb">
        <img src="images/15.png" alt="" title="">
      </div>
    </div>
  </div>
</div>
</div>


in a data-filter, we have to mention the class which have to follow on check. in a div class we have to mention the class where and when portfolio will be appear on the screen. for example, see the above red highlighted code. that the portfolio will be appear in all-sort, PHP, and database.

CSS and JQUERY
highlighted jquery and css are important.
<link href="css/style.css" rel="stylesheet" media="all" />
<script src="js/jquery.js"></script>
<script src="js/isotope.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
/*Portfolio Isotope*/
var $container = jQuery('.portfolio-container');
if($container.length){
$container.isotope({
  filter: '*',
  animationOptions: { duration: 500, easing: 'linear', queue: false  }
});

  jQuery("div.sorting-container a").click(function(){
    jQuery("div.sorting-container a").removeClass("active-sort");
    var selector = jQuery(this).attr('data-filter');
    jQuery(this).addClass("active-sort");
    $container.isotope({ filter: selector, animationOptions: { duration: 100, easing: 'linear',  queue: false }});
    return false;
  });       
}
});
</script>

the highlighted Jquery are important in this. here we are using isotope.js to make this operation. and get clear idea from the above code. i hope this is very helpful to you. thank you.





RELATED POSTS:


Rotate image on hover using CSS3

Most popular posts in 2my4edge

Change text & background color while selecting text using CSS3

Marquee style in different manner with PHP and MySql

My Demos page design details with all my tutorials

Image Zoommer like E-commerce site using multizoom.js

Facebook style Scroll bar using Jquery

Change background image while page refresh using Javascript

Better and Flexible Tooltip using LiteTooltip.js

1 comment:

  1. Hi, I need them to load in a random order every time the user visits the page. How to do it?

    ReplyDelete

^