How to Create Social Share Icon’s circle with jQuery
How we can create a sharing widget with a circular layout using HTML CSS JS? Solution: See this CSS Circular Sharing Widget With jQuery, Social Share Icon Circle.
Basically this type of circular widget contains social media links or profiles and shows it on click. After clicking, the social media icons will reveal with circular layout and circle animation.
Today you will learn to create Social Share Icon’s Circle program. Basically, there is a round button with a text when you will click on that button then there will appear 8 different social media icons. And all the social icons placed around the button with circle layout. On second click all icons will hide again.
So, Today I am sharing CSS Circular Sharing Widget With jQuery. There the whole layout is base on pure CSS and I have used jQuery for the toggle feature. And as we know jQuery is a JS library, that’s why I am putting this in the JavaScript category. And this program will a good practice for you about CSS, you can also use it on your website.
CSS Circular Sharing Widget With jQuery Source Code
Before sharing source code, let’s talk about it. First, I have created a listand placed input and label inside the list items using HTML. I have created a separate list, checkbox input, and label for different icons. And I have put ID named serial-wise in numerical value, like 1,2,3, etc. All these times I have placed inside the main div, and all other files like CSS, JS I have linked in the HTML file.
Now using CSS, I have placed all the items in the right place as you can see in the preview. I have created as circle all the items using CSS border-radius command (info). All the icons are powered by the font-awesome library, I have linked the CDN in the HTML and put class names in the labels. And many other basic things I have done using CSS.
jQuery handling there the toggle feature and the circular rotate reveal animation. In the same way of reveal it hides on the second click, check live demo for understanding what I am talking about. Rotating hide and show animation is created using JS for() loop function. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Animated Circular Share | Webdevtrick.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class='circle'>
<ul>
<li>
<input id='1' type='checkbox'>
<label for='1'><a href="#"><i class="fab fa-facebook"></i></a></label>
</li>
<li>
<input id='2' type='checkbox'>
<label for='2'><a href="#"><i class="fab fa-dribbble"></i></a></label>
</li>
<li>
<input id='3' type='checkbox'>
<label for='3'><a href="#"><i class="fab fa-pinterest"></i></a></label>
</li>
<li>
<input id='4' type='checkbox'>
<label for='4'><a href="#"><i class="fab fa-stumbleupon-circle"></i></a></label>
</li>
<li>
<input id='5' type='checkbox'>
<label for='5'><a href="#"><i class="fab fa-reddit"></i></i></a></label>
</li>
<li>
<input id='6' type='checkbox'>
<label for='6'><a href="#"><i class="fab fa-telegram"></i></a></label>
</li>
<li>
<input id='7' type='checkbox'>
<label for='7'><a href="#"><i class="fab fa-google-plus"></i></a></label>
</li>
<li>
<input id='8' type='checkbox'>
<label for='8'><a href="#"><i class="fab fa-twitter"></i></a></label>
</li>
</ul>
<button>Share</button>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="function.js"></script>
</body>
</html>
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
html, body {
height: 100%;
}
body {
margin: 0;
background: linear-gradient(#eee, #ccc);
overflow: hidden;
}
.circle {
position: absolute;
left: 50%;
top: 50%;
width: 140px;
height: 140px;
margin-top: -70px;
margin-left: -70px;
}
.circle, .circle button {
font-family: 'Oswald', sans-serif;
font-weight: 300;
}
.circle button {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background: #428bca;
border-radius: 50%;
border: 0;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
transition: all .1s;
}
.circle button:hover {
background: #3071a9;
}
.circle button:focus {
outline: none;
}
.circle ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
.circle li {
position: absolute;
width: 0;
height: 100%;
margin: 0 50%;
-webkit-transform: rotate(-360deg);
transition: all 0.8s ease-in-out;
}
.circle li input {
display: none;
}
.circle li input + label {
position: absolute;
left: 50%;
bottom: 100%;
width: 0;
height: 0;
line-height: 1px;
margin-left: 0;
background: #fff;
border-radius: 50%;
text-align: center;
font-size: 1px;
overflow: hidden;
cursor: pointer;
box-shadow: none;
transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}
.circle li input + label:hover {
background: #f3f3f3;
}
.circle.open li input + label {
width: 80px;
height: 80px;
line-height: 80px;
margin-left: -40px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
.fab {
font-size: 50px;
line-height: 80px;
}
.fa-facebook {
color: #3a559f;
}
.fa-dribbble {
color: #e74d89;
}
.fa-pinterest {
color:#bd081c;
}
.fa-stumbleupon-circle {
color: #eb4823;
}
.fa-reddit {
color: #ff4500;
}
.fa-telegram {
color: #2a9fd1;
}
.fa-google-plus {
color: #d74c3e;
}
.fa-twitter {
color: #53a8e6;
}
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
var angleStart = -360;
// rotate animation
function rotate(li,d) {
$({d:angleStart}).animate({d:d}, {
step: function(now) {
$(li)
.css({ transform: 'rotate('+now+'deg)' })
.find('label')
.css({ transform: 'rotate('+(-now)+'deg)' });
}, duration: 0
});
}
// show / hide
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
for(var i=0; i<li.length; i++) {
var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
$(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
}
}
$('.circle button').click(function(e) {
toggleOptions($(this).parent());
});
setTimeout(function() { toggleOptions('.circle'); }, 100);
That’s It. Now you have successfully created CSS Circular Sharing Widget With jQuery, Social Share Icon’s Circle Layout. If you have any doubt or question comment down below.
Thanks for reading ! I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.
#javascript #css #html #jQuery #wevdev
