Infopoint Icons – Animated icons to draw attention

How to create great animated Infopoint Icons to draw attention on a particular area of an image or a map.

Animated Infopoint Icons

Created by Joey Hiller, Infopoint Icons are amazing and clearly show the future of design and interaction. These icons are created as a fun project with the idea to draw attention to areas of an image or a map. The author says that these icons can be used as loaders. Web design is changing and we are witnessing some great innovation in terms of coding, user interactions and styling.

Infopoint icons are showing us that design can be fun and still do the job. The icons can be used as a nice little touch on a location map in a corporate website for example. Or they can be used in a mobile application which is related to location. There are many implementations you can think of so have a look below at the code to see how they are done. Feel free to download the source to give them a try or just to have a little fun.

See the Pen Infopoint Icons by Joey Hiller (@jthiller) on CodePen.

How to use:

The HTML

<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="bounceDrop"></div>
 </div> 
 <div class="box">
 <div class="circlePulse"></div>
 </div> 
 <div class="box">
 <div class="circleOut"></div>
 </div> 
 <div class="box">
 <div class="scope">
 <div class="glass"></div>
 </div>
 </div> 
 </div> <!-- /icons -->
 </div> <!-- /wrapper -->
 <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>
 

The CSS

(This is the original SCSS code. If you do not feel comfortable with it you can use sassmeister to convert it to CSS).

$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: .25em;
 font-size: 2.5em;
 }
 h2 {
 padding: .125em;
 font-size: 1.125em;
 }
 p {
 padding: .5em;
 font-size: .75rem;
 }
::-moz-selection {
 background: rgba(lighten($color, 90), .5);
 text-shadow: none;
 }
 ::selection {
 background: rgba(lighten($color, 90), .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: .5rem;
 height: .5rem;
 border: 1px solid lighten($color, 30);
 background: lighten($color, 3);
 vertical-align: top;
 cursor: pointer;
 transition: background .3s ease, border .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: .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 .2s ease;
 transform: translate3d(.15em, -1.85em, 0);
 transform-origin: center;
 }
 &:hover, &:focus {
 animation-play-state: paused;
 }
 &:hover:before, &:focus:before {
 background: rgba(255,255,255,.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: -.8em;
 left: -1em;
 display: block;
 box-sizing: border-box;
 margin: 0 auto;
 width: 2em;
 height: 2em;
 border: .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: -.8em;
 left: -1em;
 display: block;
 box-sizing: border-box;
 margin: 0 auto;
 width: 2em;
 height: 2em;
 border: .2em solid lighten($color, 90);
 border-radius: 100%;
 content: "";
 transform-origin: center;
 animation-name: inOut;
 animation-duration: 1s;
 animation-timing-function: ease;
 animation-delay: -.5s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 }
 }
@keyframes inOut {
 from {transform: scale(0);}
 to {transform: scale(1);};
 }
.circleOut {
 position: relative;
 margin: 0 auto;
 padding: 0;
 width: 0;
 height: 0;
 &:before {
 position: relative;
 top: -.8em;
 left: -1em;
 display: block;
 box-sizing: border-box;
 margin: 0 auto;
 width: 2em;
 height: 2em;
 border: .5em solid lighten($color, 90);
 border-radius: 100%;
 content: "";
 transform-origin: center;
 animation-name: fadeOut;
 animation-duration: 1s;
 animation-timing-function: ease-in-out;
 animation-delay: -1s;
 animation-iteration-count: infinite;
 animation-direction: forwards;
 }
 &:after {
 position: absolute;
 top: -.8em;
 left: -1em;
 display: block;
 box-sizing: border-box;
 margin: 0 auto;
 width: 2em;
 height: 2em;
 border: .2em solid lighten($color, 90);
 border-radius: 100%;
 content: "";
 transform-origin: center;
 animation-name: fadeOut;
 animation-duration: 1s;
 animation-timing-function: ease;
 animation-delay: -.5s;
 animation-iteration-count: infinite;
 animation-direction: forwards;
 }
 }
@keyframes fadeOut {
 0% {transform: scale(0);}
 50% {opacity: 1;}
 100% {transform: scale(1); 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: .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: .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), .5);
 content: "";
 animation-name: bounceShadow;
 animation-duration: .75s;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 }
 }
@keyframes bounce
 {
 0% {transform: translateY(-.25em) rotate(-45deg);}
 50% {transform: translateY(-.5em) rotate(-45deg);}
 100% {transform: translateY(0) rotate(-45deg);}
 }
 @keyframes bounceShadow
 {
 0% {opacity: .75; transform: scale(.75);}
 50% {opacity: .5; transform: scale(.5);}
 100% {opacity: 1; transform: scale(.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: -.5em;
 left: -.65em;
 border: .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: .5em .5em;
 &:before {
 height: .25em;
 width: 1em;
 top: .75em;
 left: .75em;
 transform: rotate(45deg);
 transform-origin: left bottom;
 content: "";
 background: lighten($color, 90);
 display: block;
 position: relative;
 }
&:after {
 position: relative;
 display: block;
 top: -.33em;
 left: -.16em;
 width: 1em;
 height: 1em;
 color: white;
 text-align: center;
 content: "+";
 font-size: 1.5em;
 line-height: 1em;
 opacity: 1;
 transition: all .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(.9);}
 50% {transform: scale(.85);}
 100% {transform: scale(1);}
 }
 @keyframes zoomPlus
 {
 0% {transform: scale(.9);}
 50% {transform: scale(.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, .circleOut, .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%), .2);
 }
 }
 img {
 margin: 0;
 padding: 0;
 width: 39rem;
 vertical-align: top;
 }
 }

The JS

// 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)}()
Download Infopoint Icons Source
Divi WordPress Theme

You may also like...

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close