svg animation on anchor - javascript

I'm trying to make a circular timeline with steps,
I am using a fullpage.js plugin that make every sections at 100% of the windows with body in overflow so actually have only 4 steps on scroll
so the steps have to be:
section1 -->stroke 0%
section2 -->stroke 25%
section3 -->stroke 50%
section4 -->stroke 75%
In the current code I use hover for show what the effect :
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
});
});
body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
font-family: 'source_sans_proextralight';
}
/********** timeline ************/
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,0.4);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#bluecircle:hover{
stroke-dashoffset:0;
}
#smallblueleft, #smallbluebottom, #smallblueright{
opacity:0;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
opacity:1;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!---------- timeline ----------->
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/></a>
<a xlink:href="#secondPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/></a>
<a xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/></a>
<a xlink:href="#4thPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="don">
<h2></h2>
<p></p>
</div>
<div class="section" id="emploi">
<h2>fullPage.js</h2>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
</div>
<div class="section" id="section2">
<h2>Example</h2>
<p>HTML markup example to define 4 sections.</p>
</div>
<div class="section" id="section4">
<h2>Working On Tablets</h2>
<p>Designed to fit to different screen</p>
</div>
</div>


You can use the fullpage.js callback onleave(index, nextIndex, direction)
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)) );
}
However, I didn't find a way to get the anchors.length value, this would be better than hardcoded 4.
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
}
});
});
body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
font-family: 'source_sans_proextralight';
}
/********** timeline ************/
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,0.4);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright{
opacity:0;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
opacity:1;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!---------- timeline ----------->
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="don">
<h2></h2>
<p></p>
</div>
<div class="section" id="emploi">
<h2>fullPage.js</h2>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
</div>
<div class="section" id="section2">
<h2>Example</h2>
<p>HTML markup example to define 4 sections.</p>
</div>
<div class="section" id="section4">
<h2>Working On Tablets</h2>
<p>Designed to fit to different screen</p>
</div>
</div>

Related

Selecting an element with same class names using css

I have this ugly generated code and I want to pick an element and add an additional attribute. I can only use CSS to do this. I tried a few things such as #CHART_1_control div:nth-of-type and nth-child but I seem to be getting lost with all the <g> classes. I'm also not sure if that's the direction I should be heading.
I'm trying to get to the last <g> class and change the three <rect> to include an additional attribute. Is that possible to do?
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
So here we change the fill color just using css on the last 3 rect
Full Code below:
.v-datapoint rect{
fill:blue;
}
<div id="CHART_1_control" style="width:353px;height:200px" class="zenControl">
<div class="uvb-vizframe-container">
<div style="width: 353px; height: 200px; visibility: visible; position: relative;">
<div class="viz-controls-chart-holder viz-controls-common-scrollable" style="position: relative; width: 353px; height: 200px;">
<div class="viz-controls-chart-layer" style="position: absolute; width: 353px; height: 200px; visibility: visible;">
<div id="UIComp_0" class="v-info" aria-labelledby="UIComp_0-title" tabindex="0" style="height: 100%; width: 100%; position: relative; font-size: 10px; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none;">
<svg class="v-m-root" focusable="false" tabIndex="-1" style="left: 0px; top: 0px; height: 100%; width: 100%; display: block; cursor: default;">
<defs></defs>
<g class="v-m-desc-title">
<title id="UIComp_0-title">An Interactive Column Chart </title>
</g>
<g class="v-m-action-layer-group js-zen-nozoom"></g>
<g class="v-m-decoration-layer-group"></g>
<g class="v-m-background">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="353" height="200" style="fill:transparent"></rect>
</g>
<g class="v-m-title" transform="translate(48.34765625, 24)"></g>
<g class="v-m-legendGroup" transform="translate(329, 24)" role="listbox">
<g class="v-m-legend" transform="translate(0,0)">
<rect class="v-bound" width="0" height="0" visibility="hidden"></rect>
</g>
</g>
<g class="v-m-main" transform="translate(24, 24)">
<g class="v-m-plot" transform="translate(24.34765625, 0)">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="280.65234375" height="126.6" style="fill:transparent"></rect>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="0" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="280.65234375" y1="0" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="280.65234375" y2="0" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="126.6" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<clipPath id="plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732">
<rect y="-1" width="281.65234375" height="127.6"></rect>
</clipPath>
<rect class="v-plot-bound v-bound v-zoom-plot" width="280.65234375" height="126.6" fill="transparent"></rect>
<g clip-path="url(#plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732)">
<g class="v-plot-main" role="list" transform="translate(0, 0)">
<g class="v-gridline-group">
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="126.6" x2="280.65234375" y2="126.6"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="84.4" x2="280.65234375" y2="84.4"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="42.2" x2="280.65234375" y2="42.2"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="0" x2="280.65234375" y2="0"></line>
</g>
</g>
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
</g>
</g>
</g>

SVG lines full screen size

im trying to achieve the image below:
The lines coming out of each circle rotate infinitely(not hard to achieve it through css keyframes)
I tried doing this with 100s of divs and rotate 10degree each but failed to achieve my needs. so i thought about svg and i did something but it doesnt work as needed, the lines do not go fullscreen. fiddle above.
html,
body {
overflow: hidden;
}
.fw {
border-top: 1px red solid;
width: 2000px;
}
.wrapper {
overflow: hidden;
}
#-webkit-keyframes rotating
/* Safari and Chrome */
{
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.wrapper1 {
display: inline-block;
position: fixed;
-webkit-animation: rotating 10s linear infinite;
-moz-animation: rotating 10s linear infinite;
-ms-animation: rotating 10s linear infinite;
-o-animation: rotating 10s linear infinite;
animation: rotating 10s linear infinite;
}
<div class="wrapper" style="position:absolute;top:20%;left:10%;width:100%;height:100%;">
<div class="wrapper1">
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1097 1097" style="enable-background:new 0 0 1097 1097;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:red;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<g>
<line class="st0" x1="551.5" y1="0" x2="551.5" y2="1097"/>
</g>
<g>
<line class="st0" x1="1097" y1="555.5" x2="0" y2="555.5"/>
</g>
<g>
<line class="st0" x1="935.6" y1="152.6" x2="179.7" y2="947.6"/>
</g>
<g>
<line class="st0" x1="947.2" y1="931" x2="152.2" y2="175.1"/>
</g>
<g>
<line class="st0" x1="755.6" y1="41.3" x2="351" y2="1060.9"/>
</g>
<g>
<line class="st0" x1="1057.8" y1="755.8" x2="38.1" y2="351.2"/>
</g>
<g>
<line class="st0" x1="1055.4" y1="323.4" x2="59.6" y2="783.6"/>
</g>
<g>
<line class="st0" x1="781" y1="1051.6" x2="320.8" y2="55.8"/>
</g>
<g>
<line class="st0" x1="456.7" y1="13.2" x2="646.2" y2="1093.7"/>
</g>
<g>
<line class="st0" x1="1090" y1="466.2" x2="9.5" y2="655.6"/>
</g>
<g>
<line class="st0" x1="861.4" y1="97.1" x2="254.2" y2="1010.8"/>
</g>
<g>
<line class="st0" x1="1007.3" y1="861.9" x2="93.6" y2="254.7"/>
</g>
<g>
<line class="st0" x1="664.9" y1="18.6" x2="442.5" y2="1092.8"/>
</g>
<g>
<line class="st0" x1="1085.9" y1="670.2" x2="11.7" y2="447.8"/>
</g>
<g>
<line class="st0" x1="1008.9" y1="244.7" x2="107.6" y2="870"/>
</g>
<g>
<line class="st0" x1="864.4" y1="1009.4" x2="239.1" y2="108"/>
</g>
</g>
</svg>
<div style="position:fixed;top:50%;left:50%;margin:0px auto;display:block;text-align:center; width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;">Support</div>
</div>
</div>
it would be great if you could at least point me on some resources to achieve what i need.
Thanks in advance.

I would consider the circle as the main element and I would use a pseudo element that I fill with all these lines using rotated SVG background.
body {
margin::0;
overflow:hidden;
}
.circle {
height:100px;
width:100px;
margin:50px;
background:red;
border-radius:50%;
position:relative;
}
.circle:before {
content:"";
position:absolute;
top:-5000%;
left:-5000%;
right:-5000%;
bottom:-5000%;
background-image:
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(20deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(40deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(60deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(80deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(100deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(120deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(140deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(160deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>');
background-size:100% 100%;
animation:animate 6s infinite linear;
}
#keyframes animate {
from {
transform:rotate(0);
}
to {
transform:rotate(360deg);
}
}
<div class="circle">
</div>
And to make thing easier you may rely on JS to generate the code of the background:
var all = document.querySelectorAll('.circle');
for (var i = 0; i < all.length; i++) {
var c = all[i].getAttribute("data-color");
var s = parseInt(all[i].getAttribute("data-step"));
var b = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.05" /></svg>\')';
var end = 180 / s;
for (var j = 1; j < end; j++) {
b += ',url(\'data:image/svg+xml,<svg style="transform:rotate(' + s * j + 'deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.05" /></svg>\')';
}
all[i].style.setProperty("--b", b);
all[i].querySelector('span').style.setProperty("background", c);
}
body {
overflow: hidden;
}
.circle {
height: 100px;
width: 100px;
position:absolute;
}
.circle span {
position:relative;
height:100%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
border-radius: 50%;
color:#fff;
}
.circle:after {
content: "";
z-index: -1;
position: absolute;
top: -5000%;
left: -5000%;
right: -5000%;
bottom: -5000%;
background-image: var(--b);
background-size: 100% 100%;
animation: animate 10s infinite linear;
}
#keyframes animate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<!-- step will define the degree between each line -->
<div class="circle" data-color="red" data-step="10">
<span>some text</span>
</div>
<div class="circle" style="top:150px;left:150px;" data-color="green" data-step="20">
<span>text</span>
</div>
<div class="circle" style="left:250px;" data-color="orange" data-step="30">
<span>more here</span>
</div>
<div class="circle" style="right:50px;bottom:50px" data-color="cyan" data-step="10">
<span>more here</span>
</div>

My idea initially came from thinking about pseudo-elements, but since you can only have 2 per element (::before and ::after) that is never going to give you the result you want.
So (unfortunately) we'll have to use a lot of divs, but what I came up with requires the least amount of divs (if we're not using pseudo-elements) and is very easy to change if you want more or less lines, or more or less space in between the lines.
body,
html {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.circle {
height: 150px;
width: 150px;
position: relative;
border-radius: 50%;
background-color: red;
animation: spin 20s linear infinite;
}
.line {
height: 1500%;
width: 1px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
z-index: -1;
}
.line1{transform: rotate(0deg);}
.line2{transform: rotate(4deg);}
.line3{transform: rotate(8deg);}
.line4{transform: rotate(12deg);}
.line5{transform: rotate(16deg);}
.line6{transform: rotate(20deg);}
.line7{transform: rotate(24deg);}
.line8{transform: rotate(28deg);}
.line9{transform: rotate(32deg);}
.line10{transform: rotate(36deg);}
.line11{transform: rotate(40deg);}
.line12{transform: rotate(44deg);}
.line13{transform: rotate(48deg);}
.line14{transform: rotate(52deg);}
.line15{transform: rotate(56deg);}
.line16{transform: rotate(60deg);}
.line17{transform: rotate(64deg);}
.line18{transform: rotate(68deg);}
.line19{transform: rotate(72deg);}
.line20{transform: rotate(76deg);}
.line21{transform: rotate(80deg);}
.line22{transform: rotate(84deg);}
.line23{transform: rotate(88deg);}
.line24{transform: rotate(92deg);}
.line25{transform: rotate(96deg);}
.line26{transform: rotate(100deg);}
.line27{transform: rotate(104deg);}
.line28{transform: rotate(108deg);}
.line29{transform: rotate(112deg);}
.line30{transform: rotate(116deg);}
.line31{transform: rotate(120deg);}
.line32{transform: rotate(124deg);}
.line33{transform: rotate(128deg);}
.line34{transform: rotate(132deg);}
.line35{transform: rotate(136deg);}
.line36{transform: rotate(140deg);}
.line37{transform: rotate(144deg);}
.line38{transform: rotate(148deg);}
.line39{transform: rotate(152deg);}
.line40{transform: rotate(156deg);}
.line41{transform: rotate(160deg);}
.line42{transform: rotate(164deg);}
.line43{transform: rotate(168deg);}
.line44{transform: rotate(172deg);}
.line45{transform: rotate(176deg);}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="wrapper">
<div class="circle">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="line line7"></div>
<div class="line line8"></div>
<div class="line line9"></div>
<div class="line line10"></div>
<div class="line line11"></div>
<div class="line line12"></div>
<div class="line line13"></div>
<div class="line line14"></div>
<div class="line line15"></div>
<div class="line line16"></div>
<div class="line line17"></div>
<div class="line line18"></div>
<div class="line line19"></div>
<div class="line line20"></div>
<div class="line line21"></div>
<div class="line line22"></div>
<div class="line line23"></div>
<div class="line line24"></div>
<div class="line line25"></div>
<div class="line line26"></div>
<div class="line line27"></div>
<div class="line line28"></div>
<div class="line line29"></div>
<div class="line line30"></div>
<div class="line line31"></div>
<div class="line line32"></div>
<div class="line line33"></div>
<div class="line line34"></div>
<div class="line line35"></div>
<div class="line line36"></div>
<div class="line line37"></div>
<div class="line line38"></div>
<div class="line line39"></div>
<div class="line line40"></div>
<div class="line line41"></div>
<div class="line line42"></div>
<div class="line line43"></div>
<div class="line line44"></div>
<div class="line line45"></div>
</div>
</div>
To achieve this without writing every line manually I used the Text
Pastry package for Sublime.

How to automatically scroll horizontal to the middle inside a div?

I want to automatically scroll to the middle in the horizontal dimension, such that the red line (which is placed right in the middle of the svg) is in the middle.
Which values do I have to choose for scrollLeft?
var div = $('.container');
div.animate({
scrollLeft: div.width() / 2 + div.offset().left
});
.container {
height: 200px;
width: 400px;
border: 1px solid black;
overflow: scroll;
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
<svg width="1000" height="400">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="200" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="600" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="40" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="960" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<line x1="499" y1="0" x2="499" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</div>

You should be setting the scrollLeft property like below:
div.find('svg').width() / 2 - div.width() / 2
See demo below:
var div = $('.container');
div.animate({
scrollLeft: div.find('svg').width() / 2 - div.width() / 2
});
.container {
height: 200px;
width: 400px;
border: 1px solid black;
overflow: scroll;
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
<svg width="1000" height="400">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="200" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="600" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="40" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="960" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<line x1="499" y1="0" x2="499" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</div>

Position elements around a circular image

#absolute-canvas a {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
border-radius: 100%;
background: black;
}
.deg0 {
transform: translate(12em);
} /* 12em = half the width of the wrapper */
.deg45 {
transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 {
transform: translate(-12em);
}
.deg225 {
transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 {
transform: rotate(315deg) translate(12em) rotate(-315deg);
}
<section id="absolute-canvas">
<img src="./images/logoWithShadow.png" id="logo" class="img-responsive animated zoomIn" alt="" title="СП ФИНКИ" />
<div id="nav-container">
<a href='#' class='deg0'></a>
<a href='#' class='deg45'></a>
<a href='#' class='deg135'></a>
<a href='#' class='deg180'></a>
<a href='#' class='deg225'></a>
<a href='#' class='deg315'></a>
</div>
</section>
My current solution works however when the image scales down (decreases in size) I want to keep the circles around the same image. How can I accomplish this?
Image of what I'm trying to accomplish:
The central div is an image that's infact a circle.

Using SVG <circle> elements you can do this:
body {
margin: 0;
height: 100vh;
display: flex;
}
.circle-container {
flex: 1;
}
.circle {
color: #2F7285;
}
.circle--main {
color: #5E66FF;
}
<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke="currentColor" stroke-width="6" fill="currentColor" />
<circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>
If you want to include an image, you can use a SVG pattern.
body {
margin: 0;
height: 100vh;
display: flex;
}
.circle-container {
flex: 1;
}
.circle {
color: #2F7285;
}
<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<defs>
<pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 200 200">
<image x="0%" y="0%" width="200" height="200" xlink:href="http://placehold.it/200x200"></image>
</pattern>
</defs>
<circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke-width="6" fill="url(#image)" />
<circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>
Have in mind that since you are using the same shape, instead of creating different elements you could create a SVG Spritesheet and reuse the circle shape with the <use> tag, only if there is no deeper manipulation for each circle element.

make SVG as a timeline

i' m trying to make a circular timeline with SVG.
i m using a fullpage js
so i made a blue line working progressivly on scroll around the circle but now i want that my anchors dash array appears too but i can t find the solution, i want my anchors appear and stay when i scroll down ( like a timeline ) and come back to grey when scroll up
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
}
});
});
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,1);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright{
stroke-dasharray:40;
stroke-dashoffset:40;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
stroke-dashoffset:0;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
h2{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="accueil">
<h2>first</h2>
</div>
<div class="section" id="don">
<h2>second</h2>
</div>
<div class="section" id="tri">
<h2>3rd</h2>
</div>
<div class="section" id="recycle">
<h2>4th</h2>
</div>
<div class="section" id="vente">
<h2>last</h2>
</div>
</div>
my code :

Simply add an array which will contain each of your circles' id and change their css in the onleave event after looking for the object returned by the event :
var smallCircles= ['top','right','bottom','left','top'];
...
onLeave: function(...
if(direction=='up'){
$('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');
}
$('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');
var smallCircles= ['top','right','bottom','left','top'];
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
if(direction=='up'){$('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');}
$('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');
}
});
});
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,1);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright, #smallbluetop{
stroke-dasharray:40;
stroke-dashoffset:40;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft:hover, #smallbluebottom:hover, smallbluetop:hover, #smallblueright:hover{
stroke-dashoffset:0;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
h2{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="accueil">
<h2>first</h2>
</div>
<div class="section" id="don">
<h2>second</h2>
</div>
<div class="section" id="tri">
<h2>3rd</h2>
</div>
<div class="section" id="recycle">
<h2>4th</h2>
</div>
<div class="section" id="vente">
<h2>last</h2>
</div>
</div>

Categories