Isometric interactive interior guide

During browsing internet, I have noticed new interesting thing – it looked like isometric guide. Today I will show you how you can create something similar. We will create isometric interactive interior guide with CSS3 and jQuery.

 


Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML. Here is full html code of our guide page. You can see here main scene (container object), six labels on this scene (with some description), and empty dialog element.

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>Isometric interactive interior guide with CSS3 and jQuery | Script Tutorials</title>
06         <link href="css/layout.css" type="text/css" rel="stylesheet">
07         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
08         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
09         <script src="js/main.js"></script>
10     </head>
11     <body>
12         <header>
13             <h2>Isometric interactive interior guide</h2>
14             <a href="https://www.script-tutorials.com/isometric-interactive-interior-guide/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
15         </header>
16         <div class="container">
17             <div class="labels">
18                 <a id="label1" class="label" href="#">sofa
19                     <p>A sofa, is an item of furniture designed to seat more than one person, and providing support for the back and arms.</p>
20                     <span />
21                 </a>
22                 <a id="label2" class="label" href="#">television
23                     <p>Television (TV) is a telecommunication medium for transmitting and receiving moving images that can be monochrome (black-and-white) or colored, with or without accompanying sound.</p>
24                     <span />
25                 </a>
26                 <a id="label3" class="label" href="#">chest
27                     <p>In many video games, especially role-playing video games, treasure chests contain various items, currency, and sometimes monsters.</p>
28                     <span />
29                 </a>
30                 <a id="label4" class="label" href="#">workplace
31                     <p>A virtual workplace is a workplace that is not located in any one physical space.</p>
32                     <span />
33                 </a>
34                 <a id="label5" class="label" href="#">entrance
35                     <p>A door is a movable structure used to open and close off an entrance, typically consisting of a panel that swings on hinges or that slides or rotates inside of a space.</p>
36                     <span />
37                 </a>
38                 <a id="label6" class="label" href="#">safe room
39                     <p>A safe room or panic room is a fortified room which is installed in a private residence or business to provide a safe shelter, or hiding place, for the inhabitants in the event of a break-in, home invasion, tornado, or other threat.</p>
40                     <span />
41                 </a>
42             </div>
43             <div class="dialog">
44                 <p></p>
45                 <a class="close">X</a>
46             </div>
47         </div>
48     </body>
49 </html>

Step 2. CSS

Now – CSS styles. Which I have separated into two parts: common page styles and styles of our main scene.

css/layout.css

001 /* page layout styles */
002 *{
003     margin:0;
004     padding:0;
005 }
006 body {
007     background-color:#fefffa;
008     color:#fff;
009     font:14px/1.3 Arial,sans-serif;
010 }
011 header {
012     background-color:#212121;
013     box-shadow: 0 -1px 2px #111111;
014     display:block;
015     height:70px;
016     position:relative;
017     width:100%;
018     z-index:100;
019 }
020 header h2{
021     font-size22px;
022     font-weightnormal;
023     left40%;
024     margin-left-300px;
025     padding22px 0;
026     positionabsolute;
027     width1000px;
028 }
029 header a.stuts,a.stuts:visited{
030     bordernone;
031     color#FCFCFC;
032     font-size14px;
033     left50%;
034     line-height31px;
035     margin23px 0 0 110px;
036     positionabsolute;
037     text-decorationnone;
038     top0;
039 }
040 header .stuts span {
041     font-size:22px;
042     font-weight:bold;
043     margin-left:5px;
044 }
045 /* demo */
046 .container {
047     backgroundurl("../images/scene.jpg"no-repeat scroll center top transparent;
048     color#000000;
049     height535px;
050     margin20px auto;
051     overflowhidden;
052     positionrelative;
053     width1030px;
054 }
055 .dialog {
056     background-color: rgba(163154770.9);
057     color#FFFFFF;
058     displaynone;
059     height140px;
060     left343px;
061     line-height24px;
062     padding100px 30px;
063     positionabsolute;
064     text-aligncenter;
065     top97px;
066     width280px;
067     z-index10;
068     -moz-border-radius: 170px;
069     -ms-border-radius: 170px;
070     -o-border-radius: 170px;
071     -webkit-border-radius: 170px;
072     border-radius: 170px;
073 }
074 .dialog .close {
075     background-color#65683b;
076     cursorpointer;
077     font-size22px;
078     font-weightbold;
079     height36px;
080     line-height36px;
081     positionabsolute;
082     right10px;
083     top60px;
084     width36px;
085     -moz-border-radius: 18px;
086     -ms-border-radius: 18px;
087     -o-border-radius: 18px;
088     -webkit-border-radius: 18px;
089     border-radius: 18px;
090 }
091 .labels p {
092     displaynone;
093 }
094 .labels a {
095     background-color: rgba(203189580.8);
096     color#FFFFFF;
097     displaynone;
098     height50px;
099     padding30px 0 0;
100     positionabsolute !important;
101     text-aligncenter;
102     text-decorationnone;
103     width80px;
104     -moz-border-radius: 40px;
105     -ms-border-radius: 40px;
106     -o-border-radius: 40px;
107     -webkit-border-radius: 40px;
108     border-radius: 40px;
109 }
110 .labels > a {
111     background-color: rgba(203189580.8);
112     -moz-transition: .3s;
113     -ms-transition: .3s;
114     -o-transition: .3s;
115     -webkit-transition: .3s;
116     transition: .3s;
117 }
118 .labels a:hover {
119     background-color: rgba(1281281280.8);
120 }
121 .labels a span {
122     border-left10px solid transparent;
123     border-right10px solid transparent;
124     border-top15px solid rgba(203189580.8);
125     bottom-14px;
126     height0;
127     left30px;
128     positionabsolute;
129     width0;
130     -moz-transition: .3s;
131     -ms-transition: .3s;
132     -o-transition: .3s;
133     -webkit-transition: .3s;
134     transition: .3s;
135 }
136 .labels a:hover span {
137     border-top15px solid rgba(1281281280.8);
138 }
139 #label1 {
140     left720px;
141     top215px;
142 }
143 #label2 {
144     left495px;
145     top290px;
146 }
147 #label3 {
148     left450px;
149     top115px;
150 }
151 #label4 {
152     left270px;
153     top170px;
154 }
155 #label5 {
156     left570px;
157     top65px;
158 }
159 #label6 {
160     left275px;
161     top30px;
162 }

Step 3. JS

And now – our jQuery code:

js/main.js

01 jQuery(function(){
02     // initialize of labels
03     $('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
04         $('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
05             $('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
06                 $('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
07                     $('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
08                         $('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300);
09                     });
10                 });
11             });
12         });
13     });
14     // dialog close
15     $('.dialog .close').click(function() {
16         $(this).parent().fadeOut(500);
17         return false;
18     });
19     // display dialog on click by labels
20     $('.labels a').click(function() {
21         $('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
22         return false;
23     });
24     // close dialog on click outside
25     $('.container').click(function() {
26         $('.dialog').fadeOut(500);
27     });
28 });

Here are just a few event handlers of our scene objects.


Live Demo
download in package

Conclusion

I will happy if our material will useful for you, and can bring you some inspiration. Don’t forget telling thanks and leaving a comment. 🙂 Good luck!