Skip to content

Commit 320456f

Browse files
ArtforgeArtforge
committed
Nice new images
1 parent 04d6aa0 commit 320456f

12 files changed

+101
-37
lines changed

‎public/zoom_to_background/boots_350.png

120 KB
Loading

‎public/zoom_to_background/boots_bkg_350.png

8.73 KB
Loading

‎public/zoom_to_background/boots_hover_350.png

13.1 KB
Loading

‎public/zoom_to_background/brain_450.png

101 KB
Loading

‎public/zoom_to_background/brain_bkg_450.png

7.87 KB
Loading

‎public/zoom_to_background/brain_hover_450.png

12.8 KB
Loading

‎public/zoom_to_background/home_bkg.jpg

34.8 KB
Loading

‎public/zoom_to_background/home_logo.png

14.8 KB
Loading

‎public/zoom_to_background/index.html

Lines changed: 101 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,32 @@
88
<script type="text/javascript" src="/javascripts/jquery.easing.1.3.js"></script>
99

1010
<style>
11+
body{
12+
13+
}
1114
#actions{
1215
position:absolute;
1316
top:25px;
1417
right:25px;
1518
}
19+
20+
#canvas{
21+
background:url(home_bkg.jpg);
22+
position:relative;
23+
width:1100px;
24+
/* height:600px;*/
25+
border:1px dashed #ccc;
26+
margin:0 auto;
27+
overflow:hidden;
28+
}
1629
#container{
17-
background:#fafafa;
30+
/* background:#fafafa;*/
1831
position:relative;
1932
width:960px;
20-
height:500px;
21-
border:1px solid #ccc;
22-
margin:50px auto;
23-
overflow:hidden;
33+
height:550px;
34+
border:1px dashed #ccc;
35+
margin:25px auto 0;
36+
/* overflow:hidden;*/
2437
}
2538

2639
#logo_menu{
@@ -29,16 +42,40 @@
2942
}
3043
#boots{
3144
position:absolute;
32-
top:150px;
33-
left:150px;
45+
top:130px;
46+
left:25px;
3447
}
35-
.has_background:hover{
36-
background:url(boots_glow.png);
48+
#boots.has_background{
49+
background:url(boots_bkg_350.png);
3750
}
38-
#boots:hover{
39-
/* background:url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3Eboots_glow%3C/span%3E.png);*/
51+
#boots.has_background:hover{
52+
background:url(boots_hover_350.png);
4053
}
4154

55+
#brain{
56+
position:absolute;
57+
top:40px;
58+
left:350px;
59+
}
60+
#brain.has_background{
61+
background:url(brain_bkg_450.png);
62+
}
63+
#brain.has_background:hover{
64+
background:url(brain_hover_450.png);
65+
}
66+
67+
#plane{
68+
position:absolute;
69+
top:275px;
70+
left:550px;
71+
}
72+
#plane.has_background{
73+
background:url(plane_bkg_410.png);
74+
}
75+
#plane.has_background:hover{
76+
background:url(plane_hover_410.png);
77+
}
78+
4279
#explore_header{
4380
display:block;
4481
position:relative;
@@ -51,7 +88,7 @@
5188
width:585px;
5289
text-align:center;
5390
margin:50px auto 0;
54-
left:800px;
91+
left:1200px;
5592
}
5693

5794
.post-it{
@@ -78,29 +115,41 @@
78115
.clr{
79116
clear:both;
80117
}
118+
119+
#logo{
120+
position:absolute;
121+
left:270px;
122+
top:240px;
123+
}
81124
</style>
82125

83126
</head>
84127

85128
<body>
86-
<div id="container">
87-
<img src="logo_menu.png" width="500" height="41" alt="Logo Menu" id="logo_menu" class="header">
88-
<img src="explore_header.png" width="753" height="92" alt="Explore Header" id="explore_header" class="header">
89-
90-
<div class="post-its">
91-
<div id="post_it_1">
92-
<img src="post_it_blue.png" alt="Post It Blue" class="post-it">
93-
</div>
94-
<div id="post_it_2">
95-
<img src="post_it_yellow.png" alt="Post It Yellow" class="post-it">
96-
</div>
97-
<div id="post_it_3">
98-
<img src="post_it_pink.png" alt="Post It Pink" class="post-it">
129+
<div id="canvas">
130+
<div id="container">
131+
<img src="logo_menu.png" width="500" height="41" alt="Logo Menu" id="logo_menu" class="header">
132+
<img src="explore_header.png" width="753" height="92" alt="Explore Header" id="explore_header" class="header">
133+
134+
<div class="post-its">
135+
<div id="post_it_1">
136+
<img src="post_it_blue.png" alt="Post It Blue" class="post-it">
137+
</div>
138+
<div id="post_it_2">
139+
<img src="post_it_yellow.png" alt="Post It Yellow" class="post-it">
140+
</div>
141+
<div id="post_it_3">
142+
<img src="post_it_pink.png" alt="Post It Pink" class="post-it">
143+
</div>
144+
<div class="clr"></div>
99145
</div>
100-
<div class="clr"></div>
146+
147+
<img id="boots" src="boots_350.png" width="350" height="350" alt="Boots" class="has_background not_brain">
148+
<img id="brain" src="brain_450.png" width="450" height="290" alt="Brain" class="has_background not_boots">
149+
<img id="plane" src="plane_410.png" width="410" height="220" alt="Plane" class="has_background not_boots">
150+
151+
<img id="logo" src="home_logo.png" width="401" height="309" alt="Home Logo" class="not_brain not_boots">
101152
</div>
102-
103-
<img id="boots" src="boots_med.png" width="250" height="250" alt="Boots" class="has_background">
104153
</div>
105154
</body>
106155

@@ -113,6 +162,7 @@
113162

114163
$('#boots').click(function() {
115164
if ($(this).css("opacity") == 1){
165+
fadeOutLogo();
116166
moveBootsToBackground();
117167
}
118168
});
@@ -129,42 +179,56 @@
129179
if ($("#boots").css("opacity") != 1){
130180
returnBootsToForeground();
131181
slideOutPostIts();
132-
fadeOutExploreHeader();
182+
133183
}
134184
});
135185

186+
function fadeOutLogo(){
187+
$('.not_boots').animate({opacity: 0.0},
188+
{queue:false, duration:350, easing: "easeOutSine"});
189+
}
190+
191+
function fadeInLogo(){
192+
$('.not_boots').animate({opacity: 1.0},
193+
{queue:false, duration:500, easing: "easeOutSine"});
194+
}
195+
136196
function fadeOutBoots(){
137197
$('#boots').removeClass("has_background");
138198
$('#boots').animate({opacity: 0.0},
139199
{queue:false, duration:350, easing: "easeOutSine"});
140200
}
141201

142202
function fadeInBoots(){
143-
$('#boots').addClass("has_background");
144203
$('#boots').animate({opacity: 1},
145-
{queue:false, duration:350, easing: "easeInSine"});
204+
{queue:true, duration:350, easing: "easeInSine",complete: returnBootBackground});
205+
}
206+
207+
function returnBootBackground(){
208+
$('#boots').addClass("has_background");
209+
fadeOutExploreHeader();
210+
fadeInLogo();
146211
}
147212

148213
function moveBootsToBackground(){
149214
$('#boots').removeClass("has_background");
150-
$('#boots').animate({opacity: 0.5, height: '+=450', width: '+=450', left: '-=550', top: '-=225'},
215+
$('#boots').animate({opacity: 0.7, height: '+=450', width: '+=450', left: '+=750', top: '-=150'},
151216
{queue:false, duration:1000, easing: "easeOutSine", complete: slideInPostIts});
152217
}
153218

154219
function returnBootsToForeground(){
155-
$('#boots').addClass("has_background");
156-
$('#boots').animate({opacity: 1.0, height: '-=450', width: '-=450', left: '+=550', top: '+=225'},
157-
{queue:false, duration:1000, easing: "easeOutBounce"});
220+
$('#boots').animate({opacity: 1.0, height: '-=450', width: '-=450', left: '-=750', top: '+=150'},
221+
{queue:false, duration:1000, easing: "easeInSine", complete: returnBootBackground});
158222
}
159223

160224
function slideInPostIts(){
161225
console.log("slide In Post-Its");
162-
$(".post-its").animate({left: '-=800'},
226+
$(".post-its").animate({left: '-=1200'},
163227
{queue:false, duration:500, easing: "easeOutSine", complete: fadeInExploreHeader});
164228
}
165229

166230
function slideOutPostIts(){
167-
$(".post-its").animate({left: '+=800'},
231+
$(".post-its").animate({left: '+=1200'},
168232
{queue:false, duration:500, easing: "easeOutSine"});
169233
}
170234

‎public/zoom_to_background/plane_410.png

21.5 KB
Loading

‎public/zoom_to_background/plane_bkg_410.png

8.83 KB
Loading

‎public/zoom_to_background/plane_hover_410.png

13.2 KB
Loading

0 commit comments

Comments
 (0)