jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
Page 5 Single Page Site Page 1 This is the first page of the site Lorem ipsum dolor... Copyright © Dan Wellman 2010 Page 1 Page 2 Page 3 Page 4 Page 5 [ 191 ] Chapter 7 2. Save five copies of this page, calling them single-page-site-[1-5].html. The CSS used in this example is almost purely to get a feel for the page; it isn't decorative at all. Add the following code to a new file in your text editor: body { margin:0; overflow:hidden; } #outer-container { width:960px; margin:auto; } header { display:block; border:1px solid #000; border-top:none; -moz-border-radius-bottomright:8px; -moz-border-radius-bottomleft:8px; -webkit-border-bottom-right-radius:8px; -webkit-border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-bottom-right-radius:8px; background-color:#fff; } header h1 { margin:0 0 0 20px; float:left; line-height:2em; } header nav { display:block; margin-top:23px; }
Full Page Animations nav ul { margin:0; padding:0; float:right; } nav li { border-left:1px solid #000; padding:0 20px; float:left; list-style-type:none; } nav li:first-child { border:none; } #content { padding-left:20px; } footer { display:block; width:960px; padding:10px 0; border:1px solid #000; border-bottom:none; -moz-border-radius-topright:8px; -moz-border-radius-topleft:8px; -webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:8px; border-top-right-radius:8px; border-top-right-radius:8px; clear:both; background-color:#fff; } footer small { display:block; float:left; margin-left:20px; } footer nav { font-size:12px; } .clear-float:after { display:block; content:"."; clear:both; visibility:hidden; height:0; } .fixed { width:960px; position:fixed; z-index:1; } header.fixed { top:0; } footer.fixed { bottom:0; } #pages { position:relative; } .page { width:920px; position:absolute; } 3. Save this file as single-page-site.css in the css directory. Note that each of the five HTML pages link to this stylesheet. 4. The page will appear like this with no JS functionality added, which is how it would appear were JavaScript disabled on the client: [ 192 ]
- Page 161 and 162: Extended Animations with jQuery UI
- Page 163 and 164: Extended Animations with jQuery UI
- Page 165 and 166: Extended Animations with jQuery UI
- Page 167 and 168: Extended Animations with jQuery UI
- Page 169 and 170: Extended Animations with jQuery UI
- Page 171 and 172: Download from Wow! eBook Extended
- Page 173 and 174: Extended Animations with jQuery UI
- Page 175 and 176: Extended Animations with jQuery UI
- Page 177 and 178: Extended Animations with jQuery UI
- Page 179 and 180: Extended Animations with jQuery UI
- Page 181 and 182: Extended Animations with jQuery UI
- Page 183 and 184: Extended Animations with jQuery UI
- Page 185 and 186: Extended Animations with jQuery UI
- Page 187 and 188: Extended Animations with jQuery UI
- Page 189 and 190: Extended Animations with jQuery UI
- Page 191 and 192: Extended Animations with jQuery UI
- Page 193 and 194: Extended Animations with jQuery UI
- Page 195 and 196: Extended Animations with jQuery UI
- Page 197 and 198: Extended Animations with jQuery UI
- Page 199 and 200: Extended Animations with jQuery UI
- Page 201 and 202: Full Page Animations Can we animate
- Page 203 and 204: Full Page Animations display:block;
- Page 205 and 206: Download from Wow! eBook Full Page
- Page 207 and 208: Full Page Animations Have a go hero
- Page 209 and 210: Full Page Animations 4. Save this f
- Page 211: Full Page Animations 2. The bgpos c
- Page 215 and 216: Full Page Animations screensize = {
- Page 217 and 218: Full Page Animations What just happ
- Page 219 and 220: Full Page Animations The second sec
- Page 221 and 222: Full Page Animations Pop quiz - cre
- Page 223 and 224: Full Page Animations Time for actio
- Page 225 and 226: Full Page Animations Next we define
- Page 228 and 229: 8 Other Popular Animations This cha
- Page 230 and 231: [ 209 ] Chapter 8 } .slider #scroll
- Page 232 and 233: }), pointerText = "Use your pointer
- Page 234 and 235: [ 213 ] Chapter 8 In the previous s
- Page 236 and 237: prox.mousemove(function(ev) { goAni
- Page 238 and 239: Pop quiz - implementing proximity a
- Page 240 and 241: [ 219 ] Chapter 8 What just happene
- Page 242 and 243: 2. Save the new page as marquee.htm
- Page 244 and 245: [ 223 ] Chapter 8 1. jQuery provide
- Page 246 and 247: clear:both; } div#fadeLeft, div#fad
- Page 248 and 249: Time for action - animating the pos
- Page 250: 2. In this example we used the dele
- Page 253 and 254: CSS3 Animations The following trans
- Page 255 and 256: CSS3 Animations Units It is of crit
- Page 257 and 258: CSS3 Animations Skew Remember the t
- Page 259 and 260: CSS3 Animations Calculating the sin
- Page 261 and 262: CSS3 Animations The filter property
Page 5<br />
<br />
<br />
<br />
<br />
Single Page Site Page 1<br />
This is the first page <strong>of</strong> the site<br />
Lorem ipsum dolor...<br />
<br />
<br />
Copyright © Dan Wellman 2010<br />
<br />
<br />
<br />
Page 1<br />
<br />
Page 2<br />
<br />
Page 3<br />
<br />
Page 4<br />
<br />
Page 5<br />
<br />
<br />
<br />
<br />
[ 191 ]<br />
Chapter 7<br />
2. Save five copies <strong>of</strong> this page, calling them single-page-site-[1-5].html. The<br />
CSS used in this example is almost purely to get a feel for the page; it isn't decorative<br />
at all. Add the following code to a new file in your text editor:<br />
body { margin:0; overflow:hidden; }<br />
#outer-container { width:960px; margin:auto; }<br />
header {<br />
display:block; border:1px solid #000; border-top:none;<br />
-moz-border-radius-bottomright:8px;<br />
-moz-border-radius-bottomleft:8px;<br />
-webkit-border-bottom-right-radius:8px;<br />
-webkit-border-bottom-left-radius:8px;<br />
border-bottom-right-radius:8px; border-bottom-right-radius:8px;<br />
background-color:#fff;<br />
}<br />
header h1 { margin:0 0 0 20px; float:left; line-height:2em; }<br />
header nav { display:block; margin-top:23px; }