A Pen by Michael Turnwall.

Dot-Navigation.markdown

Dot Navigation

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.

License.

index.html

<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>

style.scss

@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);