What is Portfolio ?
Portfolio is a jQuery plugin that allows you to create your portfolio with animation.
Create Portfolio with HTML5, CSS3 And jQuery.
Portfolio is a easy to customize with many options.
Please read this documentation carefully before start.
Features
- Easy to use
- Create portfolio with animation effect
- Easy customization, many options
- Google Webfont Support
- 6 different animation view, 4 different animation shape
- Start & stop animation control
- Compatibility : IE8+ and all modern browsers
HTML Structure
Here is the HTML Structure of Portfolio
<!--Portfolio Start-->
<div class="my_portfolio">
<div class="description"></div>
</div>
<!--Portfolio End-->
<!--Animation View Control Button Start-->
<ul class="animation_view" title="Change Animation View">
<li class="active"><span class="random"></span></li>
<li><span class="rl"></span></li>
<li><span class="rmbl"></span></li>
<li><span class="rlmr"></span></li>
<li><span class="lrml"></span></li>
<li><span class="lmbr"></span></li>
</ul>
<!--Animation View Control Button End-->
<!--Animation Shape Control Button Start-->
<ul class="animation_shape" title="Change Animation Shape">
<li><span class="box"></span></li>
<li><span class="circle"></span></li>
<li><span class="h_circle"></span></li>
<li class="active"><span class="v_circle"></span></li>
</ul>
<!--Animation Shape Control Button End-->
<!--Speed Control Button Start-->
<ul class="start_stop">
<li class="start active">Start</li>
<li class="stop">Stop</li>
</ul>
<!--Speed Control Button End-->
- Main div class name is "my_portfolio" where you can show projects animation. main div has a one child div & its class name is "description". You can show short description in this div. description is dynamically change with every animation.
- There are three more <ul> in HTML code after main <div>
- First <ul> class name is "animation_view" for change animation view.
- Second <ul> class name is "animation_shape" for change animation shape.
- Third <ul> class name is "start_stop" for start & stop animation on click.
- Notes : for design change edit style.css. please do not edit html format.
CSS & Javascript Files
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.0/jquery-migrate-3.3.2.min.js"></script>
<script type="text/javascript" src="js/portfolio.js"></script>
- There are two CSS files & two Javascript file.
- Here is google webfont api css for fonts (http://fonts.googleapis.com/css?family=Courgette)
- style.css is a custom stylesheet you can customize this stylesheet.
- jquery-1.8.2.min.js is a jQuery library.
- portfolio.js is a jQuery plugin file for animation.
Customisation
<script type="text/javascript">
$(document).ready(function() {
$('.my_portfolio').PortStyle({
'circle_size' : 200,
'animate_time' : 1500,
'fadein_speed' : 1500,
'stop_time' : 3000,
'project_detail' : ['{"name":"Project 1", "url":"http://project1.com", "img":"images/pro1.jpg", "desc":"Lorem 1 Ipsum."}',
'{"name":"Project 2", "url":"#", "img":"images/pro2.jpg", "desc":"Lorem 2 Ipsum printing...."}',
'{"name":"Project 3", "url":"http://project3.com", "img":"images/pro3.jpg", "desc":"Lorem y text..."}',
'{"name":"Project 4", "url":"http://project4.com", "img":"images/pro4.jpg", "desc":"Lorem 4 Ipsum is..."}',
'{"name":"Project 5", "url":"http://project5.com", "img":"images/pro5.jpg", "desc":"Lorem 5 Ipsum is ..."}',
'{"name":"Project 6", "url":"http://project10.com", "img":"images/pro10.jpg", "desc":"Lorem 10."}'],
'on_hover_animation_stop' : 'off',
'show_description' : 'on',
'animation_view' : 'random',
'animation_shape' : 'circle'
});
});
</script>
this is a jQuery plugin code you can edit this code as per your requirement.
circle_size
- Here you can fix animation circle size. e.g. circle size is 150 then every animation circle width & height is set with 150px
- You can set size as per your requirment.
- Default size is 200
- Notes : animated circle background images size should not be small then circle size.
animate_time
- Set animation speed time as per requirement.
- Default size is 1500
fadein_speed
- Set fadein fadeout speed time as per requirement.
- Default size is 1500
stop_time
- Set stop time between fadein & fadeout circle.
- Default size is 3000
project_detail
- Here you can set project name, URL, background image & short description. {"name":"Project Name", "url":"Project URL", "img":"Background Images Path", "desc":"Sort Description"}
- If you want to show 15 projects then you must set all projects detail.
- If there is no URL or description for any project then leave this empty like {"name":"Project Name", "url":"", "img":"Background Images Path", "desc":""}
- Notes :
- Please be carefull about code structure.
- Take care when you change detail.
- This is short description so its should not be long.
on_hover_animation_stop
- Change this option value with 'on' for stop animation control when mouse hover on any animation circle or box.
- Default value is 'off'
show_description
- Change this option value with 'off' for hide description .
- Default value is 'on'
animation_view
- Change default animation view with this option.
- Default value is 'random' you can change this value with 'rl', 'rmbl', 'rlmr', 'lrml', 'lmbr'.
animation_shape
- Change animation shape with thie option.
- Default value is 'circle' you can change this value with 'box', 'h_circle', 'v_circle'.
Advanced Options
Start & Stop Option
- Click on Stop Button for stop animation.
- Click on start Button for start animation.
Instruction
- Please do not change HTML structure if you need to change design then customize style.css
- If any reason you need to change class name for main <div> or any <ul> then find & replace this class from index.html, style.css & portfolio.js
e.g. if you change main <div> class .animation_view then replace "animation_view" class from style.css & portfolio.js
- When you customize jQuery plugin code or add projects detail then please be carefull about structure do not delete any " or , by mistake.
- Background images path is set in 'project_detail' option you can edit this path change images as per your projects. images size should not be smaller then 'circle_size'.
- If you don't want to "Change Animation View" option then delete <ul class="animation_view"> element from HTML Code.
- If you don't want to "Change Animation Shape" option then delete <ul class="animation_shape"> element from HTML Code.
- If you don't want to "Start & Stop" option then delete <ul class="start_stop"> element from HTML Code.
- If this jQuery plugin code conflict with any other jQuery code then change below line.
$(document).ready(function()
Replace this line with
jQuery(document).ready(function()
portfolio.js
(function($) {
$.fn.PortStyle = function(options) {
Replace this line with
(function(jQuery) {
jQuery.fn.PortStyle = function(options) {
- I used google webfont api font family is 'Courgette'
You can change font style as per your choice if you dont want to use google webfont then delete related css from <head> section.
Source & Credits
Thank you so much to