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 h 2 { |
021 |
font-size : 22px ; |
022 |
font-weight : normal ; |
023 |
left : 40% ; |
024 |
margin-left : -300px ; |
025 |
padding : 22px 0 ; |
026 |
position : absolute ; |
027 |
width : 1000px ; |
028 |
} |
029 |
header a.stuts,a.stuts:visited{ |
030 |
border : none ; |
031 |
color : #FCFCFC ; |
032 |
font-size : 14px ; |
033 |
left : 50% ; |
034 |
line-height : 31px ; |
035 |
margin : 23px 0 0 110px ; |
036 |
position : absolute ; |
037 |
text-decoration : none ; |
038 |
top : 0 ; |
039 |
} |
040 |
header .stuts span { |
041 |
font-size : 22px ; |
042 |
font-weight : bold ; |
043 |
margin-left : 5px ; |
044 |
} |
045 |
/* demo */ |
046 |
.container { |
047 |
background : url ( "../images/scene.jpg" ) no-repeat scroll center top transparent ; |
048 |
color : #000000 ; |
049 |
height : 535px ; |
050 |
margin : 20px auto ; |
051 |
overflow : hidden ; |
052 |
position : relative ; |
053 |
width : 1030px ; |
054 |
} |
055 |
.dialog { |
056 |
background-color : rgba( 163 , 154 , 77 , 0.9 ); |
057 |
color : #FFFFFF ; |
058 |
display : none ; |
059 |
height : 140px ; |
060 |
left : 343px ; |
061 |
line-height : 24px ; |
062 |
padding : 100px 30px ; |
063 |
position : absolute ; |
064 |
text-align : center ; |
065 |
top : 97px ; |
066 |
width : 280px ; |
067 |
z-index : 10 ; |
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 |
cursor : pointer ; |
077 |
font-size : 22px ; |
078 |
font-weight : bold ; |
079 |
height : 36px ; |
080 |
line-height : 36px ; |
081 |
position : absolute ; |
082 |
right : 10px ; |
083 |
top : 60px ; |
084 |
width : 36px ; |
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 |
display : none ; |
093 |
} |
094 |
.labels a { |
095 |
background-color : rgba( 203 , 189 , 58 , 0.8 ); |
096 |
color : #FFFFFF ; |
097 |
display : none ; |
098 |
height : 50px ; |
099 |
padding : 30px 0 0 ; |
100 |
position : absolute !important ; |
101 |
text-align : center ; |
102 |
text-decoration : none ; |
103 |
width : 80px ; |
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( 203 , 189 , 58 , 0.8 ); |
112 |
-moz-transition: . 3 s; |
113 |
-ms-transition: . 3 s; |
114 |
-o-transition: . 3 s; |
115 |
-webkit-transition: . 3 s; |
116 |
transition: . 3 s; |
117 |
} |
118 |
.labels a:hover { |
119 |
background-color : rgba( 128 , 128 , 128 , 0.8 ); |
120 |
} |
121 |
.labels a span { |
122 |
border-left : 10px solid transparent ; |
123 |
border-right : 10px solid transparent ; |
124 |
border-top : 15px solid rgba( 203 , 189 , 58 , 0.8 ); |
125 |
bottom : -14px ; |
126 |
height : 0 ; |
127 |
left : 30px ; |
128 |
position : absolute ; |
129 |
width : 0 ; |
130 |
-moz-transition: . 3 s; |
131 |
-ms-transition: . 3 s; |
132 |
-o-transition: . 3 s; |
133 |
-webkit-transition: . 3 s; |
134 |
transition: . 3 s; |
135 |
} |
136 |
.labels a:hover span { |
137 |
border-top : 15px solid rgba( 128 , 128 , 128 , 0.8 ); |
138 |
} |
139 |
#label 1 { |
140 |
left : 720px ; |
141 |
top : 215px ; |
142 |
} |
143 |
#label 2 { |
144 |
left : 495px ; |
145 |
top : 290px ; |
146 |
} |
147 |
#label 3 { |
148 |
left : 450px ; |
149 |
top : 115px ; |
150 |
} |
151 |
#label 4 { |
152 |
left : 270px ; |
153 |
top : 170px ; |
154 |
} |
155 |
#label 5 { |
156 |
left : 570px ; |
157 |
top : 65px ; |
158 |
} |
159 |
#label 6 { |
160 |
left : 275px ; |
161 |
top : 30px ; |
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!