Skip to content

Instantly share code, notes, and snippets.

@otengkwame

otengkwame/index.html

Created February 6, 2023 18:55
Show Gist options
  • Save otengkwame/4eeaf46b5d3266047f5829d43c58cd1a to your computer and use it in GitHub Desktop.
Save otengkwame/4eeaf46b5d3266047f5829d43c58cd1a to your computer and use it in GitHub Desktop.
Download ZIP
Services in circle slider
Raw
index.html
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="iq-features">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-3 col-md-12"></div>
<div class="col-lg-6 col-md-12">
<div class="holderCircle">
<div class="round"></div>
<div class="dotCircle">
<span class="itemDot active itemDot1" data-tab="1">
<i class="fa fa-clock-o"></i>
<span class="forActive"></span>
</span>
<span class="itemDot itemDot2" data-tab="2">
<i class="fa fa-comments"></i>
<span class="forActive"></span>
</span>
<span class="itemDot itemDot3" data-tab="3">
<i class="fa fa-user"></i>
<span class="forActive"></span>
</span>
<span class="itemDot itemDot4" data-tab="4">
<i class="fa fa-tags"></i>
<span class="forActive"></span>
</span>
<span class="itemDot itemDot5" data-tab="5">
<i class="fa fa-upload"></i>
<span class="forActive"></span>
</span>
<span class="itemDot itemDot6" data-tab="6">
<i class="fa fa-briefcase"></i>
<span class="forActive"></span>
</span>
</div>
<div class="contentCircle">
<div class="CirItem title-box active CirItem1">
<h2 class="title"><span>Automate</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<i class="fa fa-clock-o"></i>
</div>
<div class="CirItem title-box CirItem2">
<h2 class="title"><span>Chat </span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<i class="fa fa-comments"></i>
</div>
<div class="CirItem title-box CirItem3">
<h2 class="title"><span>Responses</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<i class="fa fa-user"></i>
</div>
<div class="CirItem title-box CirItem4">
<h2 class="title"><span>Tags</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<i class="fa fa-tags"></i>
</div>
<div class="CirItem title-box CirItem5">
<h2 class="title"><span>Sharing</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<i class="fa fa-upload"></i>
</div>
<div class="CirItem title-box CirItem6">
<h2 class="title"><span>Support</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<i class="fa fa-briefcase"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12"></div>
</div>
</div>
</section>
Raw
script.js
let i=2;
$(document).ready(function(){
var radius = 200;
var fields = $('.itemDot');
var container = $('.dotCircle');
var width = container.width();
radius = width/2.5;
var height = container.height();
var angle = 0, step = (2*Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
if(window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
$('.itemDot').click(function(){
var dataTab= $(this).data("tab");
$('.itemDot').removeClass('active');
$(this).addClass('active');
$('.CirItem').removeClass('active');
$( '.CirItem'+ dataTab).addClass('active');
i=dataTab;
$('.dotCircle').css({
"transform":"rotate("+(360-(i-1)*36)+"deg)",
"transition":"2s"
});
$('.itemDot').css({
"transform":"rotate("+((i-1)*36)+"deg)",
"transition":"1s"
});
});
setInterval(function(){
var dataTab= $('.itemDot.active').data("tab");
if(dataTab>6||i>6){
dataTab=1;
i=1;
}
$('.itemDot').removeClass('active');
$('[data-tab="'+i+'"]').addClass('active');
$('.CirItem').removeClass('active');
$( '.CirItem'+i).addClass('active');
i++;
$('.dotCircle').css({
"transform":"rotate("+(360-(i-2)*36)+"deg)",
"transition":"2s"
});
$('.itemDot').css({
"transform":"rotate("+((i-2)*36)+"deg)",
"transition":"1s"
});
}, 5000);
});
Raw
style.css
.holderCircle { width: 500px; height: 500px; border-radius: 100%; margin: 60px auto; position: relative; }
.dotCircle { width: 100%; height: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; z-index: 20; }
.dotCircle .itemDot { display: block; width: 80px; height: 80px; position: absolute; background: #ffffff; color: #7d4ac7; border-radius: 20px; text-align: center; line-height: 80px; font-size: 30px; z-index: 3; cursor: pointer; border: 2px solid #e6e6e6; }
.dotCircle .itemDot .forActive { width: 56px; height: 56px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; }
.dotCircle .itemDot .forActive::after { content: ''; width: 5px; height: 5px; border: 3px solid #7d4ac7; bottom: -31px; left: -14px; filter: blur(1px); position: absolute; border-radius: 100%; }
.dotCircle .itemDot .forActive::before { content: ''; width: 6px; height: 6px; filter: blur(5px); top: -15px; position: absolute; transform: rotate(-45deg); border: 6px solid #a733bb; right: -39px; }
.dotCircle .itemDot.active .forActive { display: block; }
.round { position: absolute; left: 40px; top: 45px; width: 410px; height: 410px; border: 2px dotted #a733bb; border-radius: 100%; -webkit-animation: rotation 100s infinite linear; }
.dotCircle .itemDot:hover, .dotCircle .itemDot.active { color: #ffffff; transition: 0.5s; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d4ac7+0,a733bb+100 */ background: #7d4ac7; /* Old browsers */ background: -moz-linear-gradient(left, #7d4ac7 0%, #a733bb 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #7d4ac7 0%, #a733bb 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #7d4ac7 0%, #a733bb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d4ac7', endColorstr='#a733bb', GradientType=1); /* IE6-9 */ border: 2px solid #ffffff; -webkit-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); -moz-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); }
.dotCircle .itemDot { font-size: 40px; }
.contentCircle { width: 250px; border-radius: 100%; color: #222222; position: relative; top: 150px; left: 50%; transform: translate(-50%, -50%); }
.contentCircle .CirItem { border-radius: 100%; color: #222222; position: absolute; text-align: center; bottom: 0; left: 0; opacity: 0; transform: scale(0); transition: 0.5s; font-size: 15px; width: 100%; height: 100%; top: 0; right: 0; margin: auto; line-height: 250px; }
.CirItem.active { z-index: 1; opacity: 1; transform: scale(1); transition: 0.5s; }
.contentCircle .CirItem i { font-size: 180px; position: absolute; top: 0; left: 50%; margin-left: -90px; color: #000000; opacity: 0.1; }
@media only screen and (min-width:300px) and (max-width:599px) {
.holderCircle { width: 300px; height: 300px; margin: 110px auto; }
.holderCircle::after { width: 100%; height: 100%; }
.dotCircle { width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
}
@media only screen and (min-width:600px) and (max-width:767px) { }
@media only screen and (min-width:768px) and (max-width:991px) { }
@media only screen and (min-width:992px) and (max-width:1199px) { }
@media only screen and (min-width:1200px) and (max-width:1499px) { }
.title-box .title { font-weight: 600; letter-spacing: 2px; position: relative; z-index: -1; }
.title-box span { text-shadow: 0 10px 10px rgba(0, 0, 0, .15); font-weight: 800; color: #640178; }
.title-box p {font-size: 17px; line-height: 2em; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment