Using some advanced SASS to calculate styles so that the transparency of the dots increases as the number of dots gets further away from the "active" dot.
A Pen by Michael Turnwall on CodePen.
<nav class="s5"> | |
<div id="navInner"> | |
<!-- <span id="activeItem"></span> --> | |
<span id="s1" class="navItem"></span> | |
<span id="s2" class="navItem"></span> | |
<span id="s3" class="navItem"></span> | |
<span id="s4" class="navItem"></span> | |
<span id="s5" class="navItem"></span> | |
<span id="s6" class="navItem"></span> | |
<span id="s7" class="navItem"></span> | |
<span id="s8" class="navItem"></span> | |
<span id="s9" class="navItem"></span> | |
<span id="s10" class="navItem"></span> | |
<span id="s11" class="navItem"></span> | |
</div> | |
</nav> |
@import "compass"; | |
@mixin dots($total) { | |
@for $i from 1 through $total { | |
.s#{$i} { | |
@include fadeDots($total, $i); | |
} | |
} | |
} | |
@mixin fadeDots($total, $middle) { | |
@for $i from 1 through $total { | |
@if $i < $middle { | |
@debug "#{$i} is less than #{$middle}"; | |
#s#{$i} { | |
opacity: floor(100/($i - $middle - 1)*-1)/100; | |
@include transition(opacity 800ms ease-out); | |
&:hover { | |
@include opacity(1); | |
} | |
} | |
} @else if $i > $middle { | |
// @debug "#{$i} is greater than #{$middle}"; | |
#s#{$i} { | |
opacity: floor(100/($i - $middle + 1))/100; | |
@include transition(opacity 800ms ease-out); | |
&:hover { | |
@include opacity(1); | |
} | |
} | |
} @else { | |
// @debug "#{$i} equals #{$middle}"; | |
#s#{$i} { | |
opacity: 1; | |
@include transition(opacity 800ms ease-out); | |
} | |
} | |
} | |
} | |
nav { | |
position: fixed; | |
left: 50%; | |
top: 50%; | |
z-index: 5; | |
margin: -140px 0 0 -20px; | |
#navInner { | |
position: relative; | |
width: 35px; | |
} | |
.navItem { | |
position: relative; | |
z-index: 2; | |
display: block; | |
@include border-radius(50%); | |
border-radius: 20px; | |
// border: 1px solid #fff; | |
background-color: #000; | |
margin: 0 auto 10px; | |
width: 15px; | |
height: 15px; | |
cursor: pointer; | |
// @include transition(all 250ms ease-out); | |
// &:hover { | |
// width: 13px; | |
// height: 13px; | |
// opacity: 1; | |
// } | |
} | |
#activeItem { | |
cursor: pointer; | |
position: absolute; | |
top: -4px; | |
left: 1px; | |
width: 33px; | |
height: 33px; | |
@include border-radius(50%); | |
border: 1px solid #858585; | |
z-index: 2; | |
// background-color: #000; | |
box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); | |
} | |
} | |
@include dots(11); |