Skip to content

Instantly share code, notes, and snippets.

@hadyfayed
Created January 27, 2014 17:46
Show Gist options
  • Save hadyfayed/8653595 to your computer and use it in GitHub Desktop.
Save hadyfayed/8653595 to your computer and use it in GitHub Desktop.
A Pen by Joey Hiller.
<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>

Infopoint Icons

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.

License.

// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment