Some fun animated icons to draw attention to areas of an image - or even a map! Some of these could also be used as loaders.
A Pen by Joey Hiller on CodePen.
<div class="wrapper"> | |
<h1>Infopoint Icons</h1> | |
<h2>Fun animated icons to draw attention to areas of an image.</h2> | |
<p>Click to see the icons on top of the image.</p> | |
<div class="icons"> | |
<div class="box"> | |
<div class="plusDrop"></div> | |
</div> | |
<div class="box"> | |
<div class="circlePulse"></div> | |
</div> | |
<div class="box"> | |
<!--<div class="arrowDrop"></div>--> | |
</div> | |
<div class="box"> | |
<div class="scope"> | |
<div class="glass"></div> | |
</div> | |
</div> | |
<div class="box"> | |
<div class="bounceDrop"></div> | |
</div> | |
</div> | |
</div> | |
<div class="demo"> | |
<div class="plusDrop"><div class="glass"></div></div> | |
<div class="plusDrop" style="left: 34em; top: 16.5em;"><div class="glass"></div></div> | |
<img src="https://dl.dropboxusercontent.com/u/127825508/SFGoogleMap.png" /> | |
</div> |
Some fun animated icons to draw attention to areas of an image - or even a map! Some of these could also be used as loaders.
A Pen by Joey Hiller on CodePen.
// To toggle the points on an image | |
$('.box').click(function() { | |
var type = $(this).children('div').attr('class'); | |
$('.demo>div').removeClass().addClass(type); | |
}); | |
// Just the Webfont Loader | |
WebFontConfig={google:{families:["Source+Sans+Pro::latin"]}},function(){var t=document.createElement("script") | |
t.src=("https:"==document.location.protocol?"https":"http")+"://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js",t.type="text/javascript",t.async="true" | |
var e=document.getElementsByTagName("script")[0] | |
e.parentNode.insertBefore(t,e)}() |
@import "compass"; | |
$scale: 150%; //Scale the icons here | |
$color: #48658B; //changes document color | |
html { | |
margin: 0; | |
padding: 0; | |
background-color: $color; | |
color: lighten($color, 50); | |
font-family: 'Source Sans Pro', sans-serif; | |
} | |
h1,h2,p { | |
margin: 0; | |
color: lighten($color, 50); | |
text-align: center; | |
font-weight: 200; | |
} | |
h1 { | |
padding: 0.25em; | |
font-size: 2.5em; | |
} | |
h2 { | |
padding: 0.125em; | |
font-size: 1.125em; | |
} | |
p { | |
padding: 0.5em; | |
font-size: 0.75rem; | |
} | |
::-moz-selection { | |
background: rgba(lighten($color, 90), 0.5); | |
text-shadow: none; | |
} | |
::selection { | |
background: rgba(lighten($color, 90), 0.5); | |
text-shadow: none; | |
} | |
.wrapper { | |
margin: 0 auto; | |
padding: 2em 0; | |
max-width: 39rem; | |
border: 1px solid lighten($color, 50); | |
border-top: none; | |
box-shadow: 0 0 1px 0 lighten($color, 30); | |
} | |
.icons { | |
margin: 3rem 0 1rem 0; | |
} | |
.box { | |
position: relative; | |
display: inline-block; | |
margin: 2.5em; | |
padding: 1em; | |
width: 0.5rem; | |
height: 0.5rem; | |
border: 1px solid lighten($color, 30); | |
background: lighten($color, 3); | |
vertical-align: top; | |
cursor: pointer; | |
transition: background 0.3s ease, border 0.3s ease; | |
&:hover { | |
border: 1px solid lighten($color, 45); | |
background: lighten($color, 6); | |
} | |
div { | |
font-size: $scale; | |
div { | |
font-size: inherit; | |
} | |
} | |
} | |
.plusDrop { | |
margin: 0 auto; | |
width: 0; | |
height: 0; | |
border-radius: 100%; | |
border-bottom-left-radius: 0; | |
background-color: transparent; | |
transform: rotate(-45deg) translate3d(0, 1em, 0); | |
animation-name: wag; | |
animation-duration: 0.75s; | |
animation-timing-function: ease-in-out; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
&:before { | |
position: relative; | |
top: -2em; | |
display: block; | |
box-sizing: border-box; | |
margin: 0 auto; | |
width: 2em; | |
height: 2em; | |
border: 0.2em solid lighten($color, 90); | |
border-radius: 100%; | |
border-bottom-left-radius: 0; | |
content: ""; | |
} | |
&:after { | |
position: relative; | |
display: block; | |
width: 1em; | |
height: 1em; | |
color: lighten($color,90); | |
content: '\00D7'; | |
font-size: 2.5em; | |
opacity: 1; | |
transition: all 0.2s ease; | |
transform: translate3d(0.15em, -1.85em, 0); | |
transform-origin: center; | |
} | |
&:hover, &:focus { | |
animation-play-state: paused; | |
} | |
&:hover:before, &:focus:before { | |
background: rgba(255,255,255,0.3); | |
} | |
&:hover:after, &:focus:after { | |
opacity: 0; | |
} | |
} | |
$wiggle: 9deg; | |
@keyframes wag | |
{ | |
from {transform: rotateZ(-45deg - $wiggle);} | |
to {transform: rotateZ(-45deg + $wiggle);}; | |
} | |
.circlePulse { | |
position: relative; | |
margin: 0 auto; | |
padding: 0; | |
width: 0; | |
height: 0; | |
&:before { | |
position: relative; | |
top: -0.8em; | |
left: -1em; | |
display: block; | |
box-sizing: border-box; | |
margin: 0 auto; | |
width: 2em; | |
height: 2em; | |
border: 0.5em solid lighten($color, 90); | |
border-radius: 100%; | |
content: ""; | |
transform-origin: center; | |
animation-name: inOut; | |
animation-duration: 1s; | |
animation-timing-function: ease-in-out; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
} | |
&:after { | |
position: absolute; | |
top: -0.8em; | |
left: -1em; | |
display: block; | |
box-sizing: border-box; | |
margin: 0 auto; | |
width: 2em; | |
height: 2em; | |
border: 0.2em solid lighten($color, 90); | |
border-radius: 100%; | |
content: ""; | |
transform-origin: center; | |
animation-name: inOut; | |
animation-duration: 1s; | |
animation-timing-function: ease; | |
animation-delay: -0.5s; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
} | |
} | |
@keyframes inOut { | |
from {transform: scale(0);} | |
to {transform: scale(1);}; | |
} | |
.arrowDrop { | |
position: relative; | |
margin: 0 auto; | |
padding: 0; | |
width: 0; | |
height: 0; | |
&:before { | |
position: relative; | |
display: block; | |
top: -1.25em; | |
left: -0.5em; | |
width: 1em; | |
height: 1em; | |
color: white; | |
text-align: center; | |
content: "v"; | |
font-size: 1.5em; | |
line-height: 1em; | |
opacity: 1; | |
transition: all 0.2s ease; | |
animation-name: arrowOne; | |
animation-duration: 2s; | |
animation-delay: -2s; | |
animation-timing-function: ease-in-out; | |
animation-iteration-count: infinite; | |
//animation-direction: alternate; | |
} | |
&:after { | |
position: relative; | |
top: -2.5em; | |
left: -.75em; | |
display: block; | |
width: 1.5em; | |
height: 1em; | |
border-radius: 100%; | |
background: rgba(lighten($color, 90), 0.5); | |
content: ""; | |
animation-name: explode; | |
animation-duration: 2s; | |
animation-timing-function: ease-in-out; | |
animation-iteration-count: infinite; | |
} | |
} | |
@keyframes arrowOne { | |
0% {transform: translateY(-1em) scale(1.5); opacity: 1;} | |
50% {transform: translateY(0); opacity: 1;} | |
58% {transform: translateY(0) scale(1.3); opacity: 0.5;} | |
58.1% {transform: translateY(0) scale(1.3); opacity: 0;} | |
60% {transform: translateY(-1em) scale(1); opacity: 0;} | |
100% {transform: translateY(-1em); opacity: 0;} | |
} | |
@keyframes explode | |
{ | |
0% {transform: scale(0); opacity: 0;} | |
50% {transform: scale(0.75); opacity: 1;} | |
60% {transform: scale(0.8); opacity: 0.5;} | |
90% {transform: scale(2.75); opacity: 0;} | |
100% {transform: scale(0); opacity: 0;} | |
} | |
.bounceDrop { | |
position: relative; | |
margin: 0 auto; | |
width: 0; | |
height: 0; | |
border-radius: 100%; | |
border-bottom-left-radius: 0; | |
background-color: transparent; | |
&:before { | |
position: relative; | |
top: -2.5em; | |
left: -1em; | |
display: block; | |
box-sizing: border-box; | |
margin: 0 auto; | |
width: 2em; | |
height: 2em; | |
border: 0.2em solid lighten($color, 90); | |
border-radius: 100%; | |
border-bottom-left-radius: 0; | |
content: ""; | |
transform: rotate(-45deg) translate3d(0, 1em, 0); | |
animation-name: bounce; | |
animation-duration: 0.75s; | |
animation-timing-function: ease-in-out; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
} | |
&:after { //oval | |
position: relative; | |
top: -2.5em; | |
left: -.75em; | |
display: block; | |
width: 1.5em; | |
height: 1em; | |
border-radius: 100%; | |
background: rgba(lighten($color, 90), 0.5); | |
content: ""; | |
animation-name: bounceShadow; | |
animation-duration: 0.75s; | |
animation-timing-function: ease-in-out; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
} | |
} | |
@keyframes bounce | |
{ | |
0% {transform: translateY(-0.25em) rotate(-45deg);} | |
50% {transform: translateY(-0.5em) rotate(-45deg);} | |
100% {transform: translateY(0) rotate(-45deg);} | |
} | |
@keyframes bounceShadow | |
{ | |
0% {opacity: 0.75; transform: scale(0.75);} | |
50% {opacity: 0.5; transform: scale(0.5);} | |
100% {opacity: 1; transform: scale(0.8);} | |
} | |
.scope { | |
position: relative; | |
margin: 0 auto; | |
width: 0; | |
height: 0; | |
border-radius: 100%; | |
border-bottom-left-radius: 0; | |
background-color: transparent; | |
font-size: $scale*(6/5) !important; //Lazy scale up | |
.glass { | |
height: 1em; | |
width: 1em; | |
top: -0.5em; | |
left: -0.65em; | |
border: 0.2em solid lighten($color, 90); | |
border-radius: 100%; | |
position: relative; | |
animation-name: zoom; | |
animation-duration: .75s; | |
animation-timing-function: ease-in-out; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
transform-origin: 0.5em 0.5em; | |
&:before { | |
height: 0.25em; | |
width: 1em; | |
top: 0.75em; | |
left: 0.75em; | |
transform: rotate(45deg); | |
transform-origin: left bottom; | |
content: ""; | |
background: lighten($color, 90); | |
display: block; | |
position: relative; | |
} | |
&:after { | |
position: relative; | |
display: block; | |
top: -0.33em; | |
left: -0.16em; | |
width: 1em; | |
height: 1em; | |
color: white; | |
text-align: center; | |
content: "+"; | |
font-size: 1.5em; | |
line-height: 1em; | |
opacity: 1; | |
transition: all 0.2s ease; | |
animation-name: zoomPlus; | |
animation-duration: .75s; | |
animation-timing-function: ease-in-out; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
} | |
} | |
} | |
@keyframes zoom | |
{ | |
0% {transform: scale(0.9);} | |
50% {transform: scale(0.85);} | |
100% {transform: scale(1);} | |
} | |
@keyframes zoomPlus | |
{ | |
0% {transform: scale(0.9);} | |
50% {transform: scale(0.8);} | |
100% {transform: scale(1.1);} | |
} | |
.demo { | |
position: relative; | |
margin: 2rem auto; | |
padding: 0; | |
max-width: 39rem; | |
border: 1px solid lighten($color, 30); | |
.plusDrop, .circlePulse, .bounceDrop, .scope, .arrowDrop { | |
position: absolute; | |
top: 9.3rem; | |
left: 17.8rem; | |
&:before { | |
border-color: saturate($color, 20%); | |
color: saturate($color, 20%); | |
} | |
&:after { | |
border-color: saturate($color, 20%); | |
color: saturate($color, 20%); | |
} | |
div { | |
border-color: saturate($color, 20%); | |
&:before { | |
background: saturate($color, 20%); | |
} | |
&:after { | |
color: saturate($color, 20%); | |
} | |
} | |
} | |
.bounceDrop { | |
&:after { | |
background: transparentize(saturate($color, 20%), 0.2); | |
} | |
} | |
img { | |
margin: 0; | |
padding: 0; | |
width: 39rem; | |
vertical-align: top; | |
} | |
} |