How to customize?
Icon
You can use predefined hybrid icons with data-hybicon attribute.
<div data-hybicon="icon1-icon2"></div>
github
star
github-star
Positioning
The icons can be positioned with data-hybicon-positioning attribute.
<div data-hybicon="github-star" data-hybicon-positioning="topright|center|topleft"></div>
default
center
topleft
Hover mode
The icons animated on hover when set data-hybicon-hovermode attribute.
<div data-hybicon="code-fave" data-hybicon-hovermode="show|rotate|switch"></div>
default
rotate
switch
Click mode
The icons animated on click when set data-hybicon-clickmode attribute.
<div data-hybicon="icon1-icon2" data-hybicon-clickmode="show|rotate|switch"></div>
default
rotate
switch
Info mode
The info field appears when set data-hybicon-infomode attribute.
<div data-hybicon="download-code"
data-hybicon-infomode="show|right-*width*"
data-hybicon-infotext="*your text*">
</div>
default
right
right-300
Hyperlink
Simple add an anchor tag around hybicon's div.
<a href="documentation.html#hyperlink"><div data-hybicon="link"></div></a>
JavaScript disabled
Add a HTML element into div if you want to treat that case when JavaScript disabled.
<div data-hybicon="github-star" data-hybicon-hovermode="switch" style="text-align:center;">
<img src="hybicon.sample.png" alt="GitHub stargazers" />
</div>
try it without JS
Accessibility
SVG may be accessible with data-hybicon-alt attribute.
It provides an alternative text to SVG and hybicon will be read out by assistive technologies.
It provides an alternative text to SVG and hybicon will be read out by assistive technologies.
<div data-hybicon="noview-view"
data-hybicon-hovermode="switch"
data-hybicon-alt="Go to The Accessibility Project">
</div>
Keyboard
In click mode, hybicon is able to get focus and do the animation with keyboard. Default key is space bar and you can override it with data-hybicon-keycode attribute.
Furthermore when you use the onmousedown event on the div it fired by keydown also.
Generated SVG supports WAI-ARIA with aria-pressed attribute.
Furthermore when you use the onmousedown event on the div it fired by keydown also.
Generated SVG supports WAI-ARIA with aria-pressed attribute.
<div data-hybicon="switch-circle"
data-hybicon-clickmode
data-hybicon-keycode="72"
onmousedown="alert('It appears after mousedown and keydown.');">
</div>
try it with 'h' key
Advanced mode
Hybicon works on a 100x100 matrix. Positioning and animation are based on the following formula:
"centerX, centerY, size, rotate"
You can also set the time and easing of animation.
"centerX, centerY, size, rotate"
You can also set the time and easing of animation.
<div data-hybicon="arrowright-arrowright"
data-hybicon-icon1init="20,50,25,0" <!-- default: "45,55,77,0" -->
data-hybicon-icon1anim="35,50,30,180" <!-- default: "45,55,77,0" -->
data-hybicon-icon2init="80,50,25,180" <!-- default: "80,20,33,0" -->
data-hybicon-icon2anim="65,50,30,0" <!-- default: "80,20,33,0" -->
data-hybicon-animtime="600" <!-- default: "200" -->
data-hybicon-animease="bounce" <!-- default: "linear" -->
data-hybicon-clickmode>
</div>
click it
3rd party icon
Icons are predefined SVG paths. You can use your own icons with data-hybicon-iconclass attribute.
In this case only hybicon.core.min.js necessary.
In this case only hybicon.core.min.js necessary.
var myIcons = {
triangle: "M0,100,L100,100,L50,20,z",
rectangle: "M0,0,L100,0,L100,100,L0,100,z"
}
<div data-hybicon-iconclass="myIcons"
data-hybicon="triangle-rectangle"
data-hybicon-clickmode="rotate">
</div>
<script src="js/required/raphael.min.js"></script>
<script src="js/hybicon.core.min.js"></script>
click it
Style settings
Alignment
<div data-hybicon="icons" data-hybicon-align="left|center|right""></div>
left
default
right
Size
<div data-hybicon data-hybicon-size="unit in px|'css' for responsive behaviour""></div>
40
60
80
default
120
140
Background
<div data-hybicon="github-star" data-hybicon-background="as CSS background"></div>
#FFF
Border
<div data-hybicon="github-star" data-hybicon-border="as CSS border"></div>
solid 3px #333
Border's radius
<div data-hybicon="github-star" data-hybicon-borderradius="as CSS border-radius"></div>
15%
Color
<div data-hybicon="github-star" data-hybicon-color="as CSS color(-icon2 color)"></div>
#4183C4
#4183C4-#333
Style
<div data-hybicon="github-star" data-hybicon-style="fill|stroke(-icon2 style)"></div>
default
stroke
fill-stroke
stroke-fill
CSS
The parts of hybicon can be styled with following ids.
<div id="myHybicon"
data-hybicon="user-idea"
data-hybicon-hovermode="switch"
data-hybicon-infomode
data-hybicon-size="css">
</div>
#myHybicon {
width: 222px;
height: 222px;
}
#myHybicon-svg {
background: #FFF;
border-radius: 15%;
}
#myHybicon-icon1 {
fill: #333;
}
#myHybicon-icon2 {
fill: #FFF;
stroke: #F6921E;
stroke-width: 2;
}
#myHybicon-info {
fill: #604c3b;
stroke: #604c3b;
stroke-width: 3;
}
#myHybicon-infotext {
fill: #FFF;
font: 11px Impact, sans-serif;
}
See the Pen hybicon.js template by Gábor Berkesi (@softwaretailoring) on CodePen.