Ajax Loader
×

Untitled

HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="utf-8" />
5
 
6
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
7
    Remove this if you use the .htaccess -->
8
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
9
 
10
    <title>MacroPlay Games</title>
11
    <meta name="description" content="This is the homesite for MacroPlay Games. Journalistic leader in video game and entertainment industry." />
12
    <meta name="author" content="SimKessy" />
13
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
14
 
15
    <link rel="shortcut icon" href="images/favicon/favicon.ico" />  
16
    <link rel="stylesheet" href="metroStyles.css">
17
    <link rel="stylesheet" href="macro.css">
18
  
19
    <script src="macro.js"></script>
20
    <script src="userInfo.js"></script>          
21
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
22
    <script type="text/javascript" src="canvas.js"></script>
23
</head>
24
25
<body>
26
<!--Side Menu outside of wrappers-->
27
<div id="sideMenu" >  
28
    <details id='login'>
29
        <summary id="loginSum">Login</summary>
30
    <form id='loginForm' autocomplete="off">
31
        <input type="textbox" id="logUserName" name="logUserName" placeholder="Username" autofocus />
32
        <input type="password" id="logPass" name="logPass" placeholder="Password"  />
33
        <br/>
34
        <button class="w8-button yellow" type="submit" id='signin' name="signin" value='Signin'>Log In</button>
35
    </form>
36
    </details>
37
 
38
    <details id='registerForm'>
39
        <summary id="registerSum">Register</summary>
40
        <form id="mainFormSidebar" name="mainForm" autocomplete="off">
41
            <input id="fName" name="fName" type="text" placeholder="First Name"  autofocus required/>    
42
            <input id="lName" name="lName"type="text" placeholder="Last Name" required/>          
43
            <input id="uName" name="uName" type="text" placeholder="Username" required/>      
44
            <input id="password" name="password"  type="password" placeholder="Password" required/>          
45
            <input id="email" name="email" type="email" placeholder="Email Address" required/>
46
            <input id="tel" name="tel" type="tel" placeholder="Phone Number" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="###-###-####" required />
47
            <textarea id="bio" name="bio" placeholder="Bio..." rows="4" cols="20"></textarea>    
48
            <input id="dob" name="dob" type="date" required/>
49
            <select id="school" name="school" required>
50
                <option value="" disabled selected>Which school...</option>
51
                <option value="CU">Carleton University</option>
52
                <option value="OU">University of Ottawa</option>
53
                <option value="AG">Algonquin College</option>
54
            </select>
55
            <br />
56
            <input type="radio" name="gender" value="M" required title="One day you'll get more choices here."> Male
57
            <input type="radio" name="gender" value="F" required> Female    
58
            <br />
59
            <br />
60
            <input id="terms" name="terms" value="Y" type="checkbox"  title="First rule is there are no rules." required/> Accept our TOS?
61
            <br />
62
            <br />
63
            <input class="w8-button yellow" type="submit" id="save" name="save" value="Register"/>
64
            <input class="w8-button grey" type="button" id="reset" name="reset" value="Reset"/>
65
            <br />              
66
    </form>
67
    </details>
68
  
69
    <details id="adminControls">
70
        <summary>Admin Controls</summary>
71
        <input class="w8-button grey buttonfix" type="button" id="clearAdmin" name="clearAdmin" value="Clear Admin"/>
72
        <input class="w8-button yellow buttonfix" type="button" id="dummyUsers" value="Dummy Users"/>
73
        <input class="w8-button red" type="button" id="deleteDB" name="dltDB" value="Delete DB"/>
74
    </details>
75
  
76
    <details id='styleMenu' >
77
        <summary id="stylesSum">Change Theme</summary>
78
        <div class="styleMenu">
79
        <ul class="bmenu">
80
            <li id="f1" class="w8-button green" onclick="style1()">Style 1</li>
81
            <li id='f2'class="w8-button d-blue" onclick="style2()">Style 2</li>
82
            <li id='f3'class="w8-button violet" onclick="style3()">Style 3</li>
83
        </ul>
84
        </div>
85
    </details>  
86
 
87
    <details id='googleMaps'>
88
        <summary id='findUs'>Distance</summary>
89
        <div id='maps'></div>
90
    </details>
91
</div>
92
 
93
<!--Fixed header-->
94
<div id="topWrapper">
95
    <canvas id="canvas" width="850px" height="194px"></canvas>
96
   <!-- <a href="index.html">   -->  
97
        <header href="index.html" id="top_header">
98
            <button id="canvasPlay"><img id='cPlay' src="images/canvas/play/play.png" /></button>
99
        </header>
100
   <!-- </a> -->  
101
    <nav id="topnav">
102
        <ul>
103
            <li><a href="index.html">Home</a></li>
104
            <li><a href="about.html">About</a></li>
105
            <li><a href="video.html">Trailers</a></li>
106
            <li id='adminPage'><a href="admin.html">Admin</a></li>
107
            <button id="dotMenu"><img src="images/menu/3bar.png" /></button>
108
        </ul>
109
    </nav>  
110
</div>  
111
 
112
<!--Site Main Body-->    
113
<div id="wrapper">
114
     <div id="body_div">
115
        <section id="main_section">
116
            <article class="article">
117
                <header>
118
                    <hgroup>
119
                        <h1>Resident Evil: Revelations Leaps to Consoles</h1>
120
                        <h2>Can a 3DS game effectively make its way to home consoles? Read on to find out!</h2>
121
                    </hgroup>
122
                </header>
123
                <p>Survival horror has become a loaded, dirty word in the last six months or so. Everyone seems to have a different, conveniently self-serving definition of the term, not to mention their own theory on why the genre is no longer “relevant” or “viable.” I say sit them down and make them play one mission of the console port for Resident Evil: Revelations, and if it doesn't turn them into believers, then we can all just go back to our indie PC survival horror games secure in the knowledge that we tried.</p>
124
                <p>For those late to the party, Revelations was originally released, to near universal critical praise, as a 3DS exclusive. Sporting a refreshingly traditional RE look and feel, it garnered such success that Capcom decided to port it over to the PS3, Xbox 360 and Wii U - an idea that, while exciting, sounded technically infeasible to many. But with a little ingenuity and a lot of spit-shine, the company has managed to pull it off. When you pop Revelations into your HD console, you'll believe in every way that it's a numbered entry in the series.</p>
125
                </br>              
126
                <details class="readMore">
127
                <summary>Read More</summary>
128
                <iframe width="560" height="315" src="http://www.youtube.com/embed/CdmYuGCnpoo" frameborder="0" allowfullscreen></iframe>
129
              
130
                <p>By taking the high polygon models from the 3DS version's pre-rendered cutscenes and then re-texturing them, Capcom has created a look that appears reasonably at home on current-gen consoles. I skulked carefully about the Queen Zenobia (the cruise ship on which the game takes place) for around 40 minutes, and not once did the visuals or level design make me feel as if I was playing a handheld game. The audio and control packages have been upgraded to meet console standards too, with a second analog stick being a particularly huge boon for combat sequences.</p>
131
                <p>Revelations will now be experienced by a new audience, and it's nice that Capcom has taken the time to make a number of improvements and additions for returning fans as well.  Raid Mode is back, and is available to play right out of the box rather than requiring the player to complete the campaign first. You'll still need to progress through single player in order to unlock more Raid maps, but at least players looking for quick co-op action can get some right away this time around. Additional sprinkles on the Raid sundae include new playable characters, new costumes, and ResidentEvil.net support for tracking your co-op stats on the go.</p></br>              
132
                <figure><img src="http://oyster.ignimgs.com/wordpress/stg.ign.com/2013/02/revue1st130122crscagdead0003bmpjpgcopyjpg-756577_640w.jpg">
133
  <figcaption>Ewww.</figcaption>
134
</figure></br>
135
              
136
                <p>Besides the more obvious single-player enhancements, there'll be new custom weapon parts, a new enemy type, and even an additional difficulty level, called Infernal, which features remixed enemy and item placement. Veterans of the 3DS version will be glad to hear that Infernal is available right away without any unlocking, so you can forgo replaying the standard campaign and just jump right in.</p>
137
                <p>As neat as the extra bits of content are, what's really exciting is that old school fans will get a genuine Resident Evil experience for the first time in years. You can make all the justifications and business rationalizations you'd like, but fans clearly aren't happy with the series' new direction. Now, in a most unlikely way, the roots of the franchise are getting a second chance to take hold and grow. With any luck it'll do well, and teach companies that you don't need every release to sell 5 million units in order to succeed. Just think outside of the box, set reasonable goals, and stay true to your fans. The rest will take care of itself.</p>
138
              
139
                <p>Look for Resident Evil: Revelations on Xbox 360, PS3 and Wii U on May 21.</p>
140
                </br>
141
                  
142
                </details>
143
                </br>
144
                <a class="source" href="http://ca.ign.com/articles/2013/02/14/resident-evil-revelations-leaps-to-consoles">Source</a>              
145
              
146
                <footer>Created today</footer>
147
            </article>
148
            <article class="article">
149
                <header>
150
                    <hgroup>
151
                        <h1>Microsoft: 'Majority of consumers' won't know about PlayStation 4 announcement</h1>
152
                        <h2>Xbox executives say short-term sales of Xbox 360 won't be affected by Sony announcing the PlayStation 4.</h2>
153
                    </hgroup>
154
                </header>
155
                <p>The NPD Group today reported United States industry sales for January 2013, revealing Call of Duty: Black Ops II has remained the best-selling title in the region since launch in January. Rounding out the top five titles for the month were sequels Far Cry 3, Just Dance 4, NBA 2K13, and Madden NFL 13.</p>
156
                <p>The January 2013 reporting period was actually five weeks instead of four due to the NPD Group's adherence to the National Retail Federation calendar. This extra week is a consequence of the NPD Group's 4-5-4 retail calendar and occurs only once every five or six years. As a result of including the "Leap Week," sales are inflated to a degree. Adjusted sales are in the chart below.</p>
157
                <p>Total sales for January jumped 9 percent on a five-week basis to $834.7 million, though when "corrected," sales actually dropped 13 percent to $667.6 million. According to NPD analyst Liam Callahan, this figure only truly represents 50 percent of total spend when other revenue streams are factored in.</p>
158
            </br>
159
                <details>
160
                    <summary>Read More</summary>
161
                    <iframe width="560" height="315" src="http://www.youtube.com/embed/YH_9GzaUW40" frameborder="0" allowfullscreen></iframe>
162
              
163
                <p>"These sales figures represent new physical retail sales of hardware, software and accessories, which account for roughly 50 percent of the total consumer spend on games," he said. "When you consider our preliminary estimate for other physical format sales in January such as used and rentals at $141 million, and our estimate for digital format sales including full game and add-on content downloads including microtransactions, subscriptions, mobile apps, and the consumer spend on social network games at $382 million, we would estimate the total consumer spend in January to be over $1.3 billion."</p>
164
              
165
                <p>Hardware sales fell 17 percent on an adjusted basis to $164 million during the period and were led by Microsoft's Xbox 360, which sold 281,000 units and drove $338 million during the month. Sony and Nintendo have not announced hardware sales for the month.</p></br>
166
                <figure><img src="http://image.gamespotcdn.net/gamespot/images/2012/169/BlackOpsII_82569_screen.jpg">
167
  <figcaption>Guy shooting someone</figcaption>
168
</figure></br>
169
                <p>As for software, this category dove 19 percent on an adjusted basis for January. Far Cry 3's second place performance during the month marked the first time since January 2002 (Final Fantasy X) that a December launch ranked second in the following January, Callahan said.</p>
170
              
171
                <p>In addition, Ni No Kuni: Wrath of the White Witch missed the top 10 chart by just one spot, and actually ranked seventh on an individual SKU basis.</p>
172
                <p>"While the number of new SKUs was relatively consistent for January 2013 compared to January 2012, performance of new SKUs this year versus last was six times as high, lifted by the success of titles like DmC: Devil May Cry and Ni No Kuni: Wrath of the White Witch," Callahan said.</p>
173
              
174
                <p>Accessories sales for January 2013 rose 4 percent on a normalized basis to $205 million and saw point and subscription card revenue rise.</p>
175
                <p>"January 2013 marked the best January for Point and Subscription Cards on record, another indication of the health of spending on digital content and services and how retailers can participate," Callahan said.</p>
176
                </details>
177
            </br>
178
            <a class="source" href="http://ca.ign.com/articles/2013/02/14/resident-evil-revelations-leaps-to-consoles">Source</a>
179
                <footer>Created the day b4 today</footer>
180
            </article>
181
        </section>
182
        <aside id="sidebar">
183
            <div id="side_events">
184
                <h1>Upcoming Releases</h1>
185
                 <ul id="events">
186
                    <li><a href="http://www.t3.com/news/half-life-3-rumours-trailer-news-release-date-and-screenshots" target="_blank">Half-Life 3 Release: <time>04/01/13</time></a></li>
187
                    <li><a  href="http://www.examiner.com/article/borderlands-2-writer-talks-about-possible-borderlands-3-plot-points" target="_blank">Borderlands 3 Release: <time>05/29/13</time></a></li>
188
                    <li><a href="http://www.e3expo.com/" target="_blank">E3 2013 Starting: <time>08/11/13</time></a></li>
189
                    <li><a href="http://www.theverge.com/2013/2/1/3942142/new-sony-playstation-2013" target="_blank">Playstation 4 Release: <time>08/31/13</time></a> </li>
190
                    <li><a href="http://www.theverge.com/2012/1/25/2731888/next-xbox" target="_blank">Xbox 720 Release: <time>09/01/13</time></a></li>
191
                </ul>
192
            </div>
193
          
194
            <div id="side_trailer">
195
              <a href="video.html"><img src="images/thumbnails/TbTwo.jpg" /></a>
196
            </div>
197
          
198
            <div id="side_advert"></div>                  
199
        </aside>
200
     </div>
201
     <footer id="footer">
202
        &copy; Copyright  by SimKessy
203
     </footer>
204
</div>
205
 
206
</body>
207
</html>
208
 
 
CSS 
* {
1
* {
2
    margin: 0px;
3
    padding:0px;
4
}
5
header, section, footer, aside, nav, article, hgroup{
6
    display: block;
7
}
8
html{
9
    background:black;
10
    background:url('images/bg/bg14.jpg') no-repeat center center fixed;  
11
    -webkit-background-size: cover;
12
    -moz-background-size: cover ;
13
    background-size: cover;
14
}
15
body{
16
    width: 100%; /*always specify this when using flexBox*/
17
    height:100%;
18
    display: -webkit-box;
19
    display: -moz-box;
20
    display: box;
21
    text-align:center;
22
    -webkit-box-pack:center; /*way of centering the website*/
23
    -moz-box-pack:center;
24
    box-pack:center;
25
  
26
    font-family: Arial, Helvetica, sans-serif;
27
    font-size: 13px;
28
}
29
h1{
30
    font:bold 17px  ;
31
    color: white;
32
    padding: 5px;
33
}
34
h2{
35
    font: 12px tahoma;
36
    color:#CCCCCC;
37
    margin: 10px 0px 20px 0px;
38
    padding-bottom: 8px;
39
    border-bottom: 2px solid rgba(153, 148, 0, 0.3);
40
}
41
.article h1{
42
    font-size: 22px;
43
    color:#A8281E;
44
}
45
p{
46
    text-indent:50px;
47
    text-align:justify;
48
    margin: 0px 5px;
49
}
50
nav {
51
    margin: 5px, 0px;
52
}
53
span{
54
    margin: 0px 2px;
55
}
56
 
57
/*Side Menu */
58
#sideMenu{    
59
        height:100%;
60
        position: fixed;
61
        left: -231px;
62
        top: 0px;
63
        width: 230px;      
64
        border-right: 9px solid rgba(168, 40, 30, 0.5);
65
        /*background-image: url('images/bg/side.png');*/
66
        background: rgba(0,0,0,0.7);
67
        overflow:auto;
68
        z-index:1000000;
69
        -webkit-transition-duration: 1s;
70
        -moz-transition-duration: 1s;
71
        -o-transition-duration: 1s;
72
        transition-duration: 1s;
73
        padding: 10px 0px 10px 2px;
74
    }
75
#sideMenu:hover{
76
   left: 0px;
77
   transition: height ease 1300ms;
78
   -o-transition: height ease 1300ms;
79
   -moz-transition: height ease 1300ms;
80
   -webkit-transition: height ease 1300ms;
81
}
82
#sideMenu header{
83
    text-align:left;
84
}/*Side Menu Styles --http://tympanus.net/Tutorials/BlurMenu/css/style4.css*/
85
#sideMenu details{
86
    outline: none;
87
    border-bottom: 1px solid rgba(168, 40, 30, 0.5);  
88
    padding: 8px 5px;
89
    font-size: 110%;
90
    text-align:left;
91
    color: white;
92
}
93
#sideMenu summary{
94
    outline: none;
95
    font-size: 100%;
96
    font-weight:bold;
97
    font-style: italic;
98
}
99
form{
100
    text-align: center;
101
    padding-top: 10px;
102
}
103
textarea, input:not([type="submit"]):not([type="button"]){
104
    outline: none;
105
    margin-top: 3px;
106
    margin-bottom: 3px;
107
    padding: 3px 10px;
108
    -webkit-border-radius: 15px;
109
    border-radius: 15px;
110
    background: rgba(0, 0, 0, 0);
111
    color: white;
112
    border: none;
113
}
114
textarea{
115
    box-shadow: 0px 0px 3pt 2pt rgba(168, 40, 30, 0.3);
116
    margin: 20px 0px;
117
}
118
textarea:focus{
119
    box-shadow: 0px 0px 3pt 2pt rgba(168, 40, 30, 1);
120
}
121
form select{
122
    outline: none;
123
    margin: 15px 0px 10px 0px;
124
    background: transparent;
125
    /*-webkit-appearance: none;*/
126
    color: white;
127
    outline:none;
128
    background-color: rgba(168, 40, 30, 1);
129
}
130
option{
131
    background: transparent;
132
    color: white;
133
}
134
form input:focus, select:focus{
135
    box-shadow: 0px 0px 3pt 2pt rgba(168, 40, 30, 1);
136
}
137
#signin {
138
    width: 100%;
139
    margin: 4px 0px;
140
}
141
#clearAdmin, #dummyUsers, #save, #reset{
142
    width: 49%;
143
    margin: 4px 0px;
144
}
145
#deleteDB{
146
    width:100% !important;
147
    margin: 4px 0px;
148
}
149
.buttonfix{
150
    padding-left: 7px;
151
}
152
 
153
/*Change place holder color*/
154
::-webkit-input-placeholder { /* WebKit browsers */
155
    color:    white;
156
}
157
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
158
    color:    white;
159
}
160
::-moz-placeholder { /* Mozilla Firefox 19+ */
161
    color:    white;
162
}
163
 
164
 
165
/*Style Change Menu*/
166
.bmenu{
167
    bottom: 0px;
168
    padding: 0px;
169
    margin: 0 0 0px 0;
170
    position: relative;
171
}
172
.bmenu li {
173
    display: span;
174
    font-size: 13px;
175
    cursor:pointer;
176
    text-transform: uppercase;
177
    text-shadow: 0px 0px 2px #eeb213;
178
    color: black !important;
179
    padding: 5px 10px;
180
    margin: 2px;
181
    text-align: center;
182
    background: rgba(0,0,0,0.7);
183
    letter-spacing: 1px;
184
    -webkit-transition: all 0.2s linear;
185
    -moz-transition: all 0.2s linear;
186
    -o-transition: all 0.2s linear;
187
    -ms-transition: all 0.2s linear;
188
    transition: all 0.2s linear;
189
}
190
.bmenu:hover{
191
    /*text-shadow: 0px 0px 10px #eeb213;*/
192
    color: transparent;
193
    background: rgba(0,0,0,0.7);
194
}
195
.bmenu li:hover{
196
    background: rgba(0,0,0,1.0);
197
    color:white !important;
198
    font-size: 105%;
199
    text-shadow: 0px 0px 1px #eeb213;
200
    -webkit-transition:color 100ms ease-in;
201
    -moz-transition:color 100ms ease-in;
202
    -o-transition:color 100ms ease-in;
203
    transition:color 100ms ease-in;
204
}
205
.bmenu li:active{
206
    color: #FFF814;
207
}
208
 
209
 
210
/*TOP WRAPPER*/
211
#topWrapper {
212
    background-color:#0d0d0d;
213
    text-align:center;
214
    position:absolute;
215
    z-index:9999;
216
    width:100%;
217
    max-width: 850px;
218
    margin: 0 auto; left:0px; right:0px;
219
    float:clear;
220
    background-image: url('images/headfoot/bg5.jpg');  
221
}
222
#top_header{
223
    position: relative;
224
    width: auto;
225
    height: 120px;
226
    border-bottom: 1px solid yellow;
227
    margin: 0px;
228
    margin-top:10px;
229
    padding: 2px 0px;
230
    padding-top: 4px;
231
    /*cursor:pointer;*/ /*enable if using link in header*/
232
    background: url('images/banner.png') center no-repeat;
233
    background-size: contain;
234
}
235
#topnav{
236
    border-bottom: 1px solid yellow;
237
    width: 100%;
238
}
239
#topnav  li{
240
    display:inline-block;
241
    list-style:none;
242
    padding:0px 10px 9px 10px;
243
    color: yellow;
244
    margin-bottom: 2px;  
245
}
246
 
247
/*Top Wrapper Canvas*/
248
#canvas{
249
    visibility: hidden;
250
    width:100%;
251
    padding-top: 10px;
252
    background: black;
253
    position:absolute;
254
    left:0;
255
    z-index: 1000000000;
256
    border-bottom:1px solid yellow;
257
    height: 100%;
258
}
259
#canvasPlay{  
260
    position:absolute;
261
    right:0; bottom:0;
262
    background:none;
263
    border:none;
264
    cursor: pointer;
265
    margin-right: 10px;
266
    margin-bottom:  8px;
267
}
268
#cPlay{
269
    opacity: 0.5;
270
    height:12px;
271
    width:12px;
272
}
273
#cPlay:hover{
274
    opacity: 1;
275
}
276
 
277
/*Navigation Styles -- http://www.designzzz.com/coding/menu-css3-animated-transition-effect/ */
278
#topnav ul li {
279
    list-style: none;
280
    height: 44px;
281
    padding:5px;
282
}
283
#topnav ul li a {
284
    width: 175px;
285
    height: 40px;
286
    line-height: 53px;
287
    border-bottom: 4px solid #636393;
288
    padding:0px;
289
    color: #fff;
290
    font-size:18px;
291
    font-weight:lighter;
292
    text-align:center;
293
    text-decoration: none;
294
    display: block;
295
    -webkit-transition: .1s all linear;
296
    -moz-transition: .1s all linear;
297
    transition: .1s all linear;
298
}
299
#topnav li:nth-child(1) a {
300
    border-color: #FFFA51;
301
}
302
#topnav li:nth-child(2) a {
303
    border-color: #FFF814;
304
}
305
#topnav li:nth-child(3) a {
306
    border-color: #999400;
307
}
308
#topnav li:nth-child(4) a {
309
    border-color: #A8281E;
310
}
311
#topnav li:nth-child(1) a:hover {
312
    border-bottom: 35px solid #FFFA51;
313
    height: 9px;
314
    color:black;
315
}
316
#topnav li:nth-child(2) a:hover {
317
    border-bottom: 35px solid #FFF814;
318
    height: 9px;
319
    color:black;
320
}
321
#topnav li:nth-child(3) a:hover {
322
    border-bottom: 35px solid #999400;
323
    height: 9px;
324
    color:black;
325
}
326
#topnav li:nth-child(4) a:hover {
327
    border-bottom: 35px solid #A8281E  ;
328
    height: 9px;
329
    color:black;
330
}
331
#topnav li:nth-child(n+1):nth-child(-n+4) a:active {
332
      color: white;
333
    }
334
@media (max-width:850px){
335
    #sideMenu{
336
        background:black;
337
    }
338
}
339
@media (max-width:790px){
340
    #topnav li:nth-child(n+1):nth-child(-n+4) a{
341
      width: 100%;
342
    }
343
    #topnav ul li{
344
        margin: 0px 20px;
345
    }
346
}
347
@media (max-width:500px){  
348
    aside{
349
        display:none !important;
350
    }
351
    #topnav ul li{
352
        margin: 0px 0px;
353
    }
354
}
355
 
356
/*Sidebar Menu button*/
357
#dotMenu{
358
    background: none;
359
    border: none;
360
    margin-left: 15px;
361
    cursor: pointer;
362
    opacity: 0.3;
363
    display: none;
364
}
365
#dotMenu:hover{
366
    opacity:0.6;
367
}
368
#dotMenu:active{
369
    opacity: 1;
370
}
371
 
372
/*Main Body*/
373
#wrapper{
374
    max-width: 850px;
375
    max-height:100%;
376
    display: -moz-box;
377
    display: -webkit-box; /*means this is a box with children inside*/
378
    -moz-box-orient:vertical;
379
    -moz-box-flex:1;
380
    -webkit-box-orient:vertical;
381
    -webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
382
    background: rgba(0,0,0,0.7);
383
      
384
    z-index: 1;
385
}
386
#body_div{
387
    display: -webkit-box;
388
    -webkit-box-orient:horizontal;
389
    display: -moz-box;
390
    -moz-box-orient:horizontal;
391
    color:#000000;
392
    margin-top: 190px;
393
    height: 100%;
394
}
395
#main_section{
396
   /* border:1px solid blue;*/
397
    -webkit-box-flex: 1;
398
    -moz-box-flex:1;
399
    margin: 20px;
400
    padding: 0px;
401
    height:100%;
402
    width: 100%;
403
}
404
#footer{
405
    color:white;
406
    padding: 10px;
407
    text-align:center;
408
    background-image: url('images/footer/footer.jpg');
409
    border-top: 1px solid rgba(153, 148, 0, 1);
410
}
411
.article{
412
    /*border: 1px solid #999400;*/
413
    line-height:1.5em;
414
    margin-bottom: 20px;
415
    padding: 10px 10px 0px 10px;
416
    text-align:left;
417
    overflow:auto;
418
    color: #E0E0E0;
419
    background-image: url('images/headfoot/bg5.jpg');
420
    -webkit-border-radius: 3px;
421
    -moz-border-radius: 3px;
422
    border-radius: 3px;
423
}
424
.article footer{
425
    color:#A8281E;
426
    text-align:right;
427
    padding: 10px 0px;
428
    border-top: 2px solid rgba(153, 148, 0, 0.3);
429
    -webkit-border-radius: 3px;
430
    -moz-border-radius: 3px;
431
    border-radius: 3px;
432
}
433
.source{
434
    color: #FFFA51;
435
    text-decoration: none;
436
}
437
.source:hover{
438
    color:white;
439
}
440
 
441
details,summary{
442
    outline: none;
443
}
444
summary:hover{
445
    cursor:pointer;
446
    color:yellow;
447
}
448
 
449
/* Sidebar Styles */
450
#sidebar{
451
    width: 215px;
452
    height: 685px;
453
    margin: 20px;
454
       /* border:#A8281E 1px solid;*/
455
    /*display:none;*/
456
}
457
#side_events,
458
#side_trailer{
459
    height:33.333%;
460
    display:block;
461
    margin: 5px 0px;
462
    opacity: 0.7;
463
    border: 1px solid #999400;
464
}
465
#side_events{
466
    background-image: url('images/headfoot/bg5.jpg');
467
 
468
    -webkit-border-radius: 5px;
469
    -moz-border-radius: 5px;
470
    border-radius: 5px;
471
}
472
#side_events:hover,
473
#side_trailer:hover{
474
    opacity: 1;
475
}
476
#side_trailer{
477
    cursor: pointer;
478
    -webkit-border-radius: 5px;
479
    -moz-border-radius: 5px;
480
    border-radius: 5px;
481
}
482
#side_trailer img{
483
    height:100%;
484
    width: 100%;
485
    -webkit-border-radius: 5px;
486
    -moz-border-radius: 5px;
487
    border-radius: 5px;
488
    -webkit-filter: grayscale(100%);
489
    -moz-filter: grayscale(100%);
490
    filter: grayscale(100%);        
491
}
492
#side_trailer img:hover{
493
    -webkit-filter: grayscale(0%);
494
    -moz-filter: grayscale(0%);
495
    filter: grayscale(0%);
496
}
497
#side_trailer:active{
498
    -webkit-filter: grayscale(50%);
499
    -moz-filter: grayscale(50%);
500
    filter: grayscale(50%);
501
}
502
#side_advert{
503
    height: 200px;
504
    /*border: 3px solid blue;*/
505
    background-image: url('images/blackberry.gif');
506
     -moz-background-size:100% 100%; /* Firefox 3.6 */
507
    -webkit-background-size: 100% 100%;
508
    background-size:100% 100%;
509
    -webkit-border-radius: 5px;
510
    -moz-border-radius: 5px;
511
    border-radius: 5px;  
512
}
513
#side_events h1{
514
    margin-bottom:9px;
515
    border-bottom: 1px solid rgba(153, 148, 0, 0.6);
516
    -webkit-border-radius: -3px;
517
    -moz-border-radius: -3px;
518
    border-radius: -3px;
519
    color:white;
520
}
521
#events li{
522
    list-style: none;
523
    color:white;
524
    padding: 8px 5px;
525
    text-align: left;
526
}
527
li time{
528
    color: #A8281E;
529
}
530
#side_events a{
531
    text-decoration:none;
532
    color:white;
533
}
534
#side_events a:hover{
535
  
536
    color: yellow;
537
    -webkit-transition:color 500ms ease-in;
538
    -moz-transition:color 500ms ease-in;
539
    -o-transition:color 500ms ease-in;
540
    transition:color 500ms ease-in;
541
    position: relative; top: 2px;
542
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
543
}
544
 
545
/*Rules pertaining to the video player*/
546
#video_container{
547
    -webkit-box-flex: 1;
548
    -moz-box-flex: 1;
549
    border:5px solid rgba(54,57, 62, .3);
550
    margin: 20px;
551
    padding: 5px;
552
    height: 100%;
553
    position: relative;
554
    background-color:black;
555
    -webkit-border-radius: 5px;
556
    -moz-border-radius: 5px;
557
    border-radius: 5px;
558
    z-index: 1;
559
}
560
#video_container video{
561
    width: 100%;
562
    /*height: auto;*/
563
    display: block;
564
    z-index: 9999;
565
}
566
 
567
/*Conditional formating for Firefox*/
568
@-moz-document url-prefix() {
569
 #video_container{
570
    min-height:1px;
571
    max-height:1px;
572
  }
573
}
574
  
575
/*Video Player Dim*/
576
.dim {
577
    background: none repeat scroll 0 0 black;
578
    opacity:0;
579
    bottom: 0;
580
    left: 0;
581
    position: fixed;
582
    right: 0;
583
    top: 0;
584
    z-index: 1;
585
    display:none;
586
    cursor:pointer;
587
}
588
589
590
/* Player Controls*/  
591
#controls{
592
    position: absolute;
593
    left: 0;
594
    bottom: 0;
595
    z-index: 0;
596
    opacity: 1;
597
    width:100%;
598
    padding: 0px;
599
    margin: 0px;
600
    background-color: none;
601
    background-image: url('images/bg/bg4.jpg');
602
}
603
#controls button:hover{
604
    opacity:1;
605
}
606
#controls button:active{
607
    opacity:1;
608
}
609
#defaultBar{
610
    position:relative;
611
    float:left;
612
    width:100%;
613
    height: 3px;
614
    padding:0px;
615
    border: 0px solid black;
616
    background:yellow;
617
    margin: 0px;
618
/*
619
    cursor: pointer;
620
    -webkit-border-radius: 25px;
621
    -moz-border-radius: 25px;
622
    border-radius: 25px; */
623
 
624
    bottom:0px;
625
}
626
#progressBar{
627
    position:relative;
628
    float:left;
629
    height: 100%;
630
    /*margin: 5px 0px;*/
631
    border: 0px solid black;
632
    background:#A8281E;
633
    cursor: pointer;
634
/*
635
    -webkit-border-radius: 5px;
636
    -moz-border-radius: 5px;
637
    border-radius: 5px; */
638
 
639
}
640
#defaultBar:hover{
641
    height:6px;
642
}
643
#playButton, #vol, #containTime{
644
    position:relative;
645
    float:left;
646
    width:10%;
647
    height: 23px;
648
    background:none;
649
    border:none;
650
    cursor: pointer;
651
    color:white;
652
}
653
#mute,#cc, #full{
654
    position:relative;
655
    float:right;
656
    width:10%;
657
    height: 23px;
658
    color:white;
659
    background:none;
660
    border:none;
661
    cursor: pointer;
662
    white-space:nowrap;
663
}
664
#cc{
665
    opacity: 1;
666
    font-weight:bolder;
667
}
668
#playButton:active, #vol:active,#cc:active, #full:active, #mute:active{
669
    /*color:#A8281E;*/
670
    background:black;
671
    opacity:1;
672
}
673
#controls img{
674
    height:100%;
675
    opacity: 0.3;
676
}
677
#playButton:hover img, #vol:hover img, #mute:hover img, #full:hover img{
678
    opacity: 1;
679
}
680
 
681
/* Video Playlist Rules */
682
#playlist{
683
    position:absolute;
684
    display:block;
685
   /*border:1px solid #A8281E;*/
686
    height:80%;
687
    width: 26%;
688
    top: 3%;
689
    right: 0px;
690
    z-index: 3;
691
    float:right;
692
    padding: 2px;
693
    margin: 2px;
694
    color:white;
695
    opacity: 1;
696
}
697
.thumb img{
698
    max-width: 87%;
699
    max-height: 33.333%;
700
    -webkit-border-radius: 5px;
701
    -moz-border-radius: 5px;
702
    border-radius: 5px;
703
    border: 3px solid #999400;
704
    opacity:0.1;
705
    /*margin: auto 0px;*/
706
}
707
.thumb img:hover{
708
    opacity:1;
709
    cursor:pointer;
710
}
711
.thumb img:active{
712
    border: 3px solid #A8281E;
713
    -webkit-filter: grayscale(50%);
714
    -moz-filter: grayscale(50%);
715
    filter: grayscale(50%);
716
}
717
 
718
 
719
/* Volume Slider Rules  Source: http://www.webstutorial.com/range-input-slider-html5-css3/html-5*/
720
#containSlider{
721
    display:none;
722
    background: none;
723
    border:none;
724
    height: 22px;
725
    width: 150px;
726
    padding-bottom:4px;
727
    position: relative;
728
    bottom: 0px;
729
    float:left;
730
    opacity: 1;  
731
}
732
input[type="range"] {
733
    -webkit-appearance: none;
734
    background-color: yellow;
735
    height: 2px;
736
}
737
input[type="range"]::-webkit-slider-thumb {
738
    -webkit-appearance: none;
739
    position: relative;
740
    top: -1px;
741
    z-index: 1;
742
    width: 11px;
743
    height: 11px;
744
745
    -webkit-border-radius: 40px;
746
    -moz-border-radius: 40px;
747
    border-radius: 40px;
748
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#84811E), color-stop(50%,#BEBEBA), color-stop(51%,#D4D048), color-stop(100%,#84811E));
749
}
750
 
751
/*Rules pertaining to the fullscreen video player*/
752
#video_container:-webkit-full-screen video{
753
    width: 100%;
754
    height: 100%;
755
    background:black;
756
}
757
#video_container:-moz-full-screen video{
758
    width: 100%;
759
    height: 100%;
760
    background:black;
761
}
762
#video_container:full-screen{
763
    width: 100%;
764
    height: 100%;
765
    margin:0px;
766
    padding:0px;
767
    border:none;
768
    background-color: black;
769
}
770
#video_container:-moz-full-screen{
771
    width: 100%;
772
    height: 100%;
773
    margin:0px;
774
    padding:0px;
775
    min-height:100%;
776
    max-height:100%;  
777
    border:none;
778
    background-color: black;
779
}
780
#video_container:-webkit-full-screen{
781
    width: 100%;
782
    height: 100%;
783
    margin:0px;
784
    padding:0px;
785
    border:none;
786
    background-color: black;
787
}
788
 
789
 
790
/*iFrame styling*/
791
iframe{
792
    width: 100%;
793
}
794
 
795
/*Article Styling*/
796
article img{
797
    width: 100%;
798
}
799
figcaption{
800
    text-align: center;
801
}
802
article p{
803
    margin: 12px;
804
}
805
 
806
/*Admin Page*/
807
.databoxLabel{
808
    color: white;
809
    background: black;
810
    border: 1px solid white;
811
    margin-bottom: 10px;
812
}
813
.databox{
814
    color:white;
815
    padding: 2px 10px;
816
}
817
table{
818
    width: 100%;
819
    font-size: 11px;
820
    text-transform:uppercase;
821
    padding-right: 8px;
822
}
823
tbody tr:nth-child(odd){
824
    padding-top: 3px;
825
    padding-bottom: 3px;
826
    background: rgba(255,255,255,0.1);
827
    margin-bottom: 6px;
828
}
829
tbody tr:nth-child(even){
830
    background:rgba(255,255,255,0.3);
831
    padding-top: 3px;
832
    padding-bottom: 3px;  
833
    margin-bottom: 6px;
834
}
835
thead{
836
    margin: 15px 0px;
837
    font-size: 12px;
838
}
839
thead td, th{
840
    font-weight: bold;
841
    color: yellow;
842
}
843
tbody th{
844
    color:#999400
845
}
846
tbody tr:hover, tbody th:hover{
847
  background: #A8281E;
848
  -webkit-transition: all 0.4s ease-in-out;
849
  -moz-transition: all 0.4s ease-in-out;
850
  transition: all 0.4s ease-in-out;    
851
}
852
tbody td:hover, tbody th:hover{
853
  background: #D33226;
854
  -webkit-transition: all 0.08s ease-in-out;
855
  -moz-transition: all 0.08s ease-in-out;
856
  transition: all 0.08s ease-in-out;    
857
}
858
.removeUser{
859
    -webkit-appearance: none;
860
    background: none;
861
    border: none;
862
    color:black;
863
}
864
.removeUser:hover{
865
    color: white;
866
    font-size: 15px;
867
}
868
.removeUser:active{
869
    font-size: 13px;
870
}
871
 
872
 
873
/*Scrollbar styling*/
874
/* Let's get this party started */
875
::-webkit-scrollbar {
876
    width: 12px;
877
}
878
879
/* Track */
880
::-webkit-scrollbar-track {
881
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
882
    /*
883
    -webkit-border-radius: 10px;
884
        border-radius: 10px;*/
885
  
886
}
887
888
/* Handle */
889
::-webkit-scrollbar-thumb {
890
    /*
891
    -webkit-border-radius: 10px;
892
        border-radius: 10px;*/
893
  
894
    background: rgba(168, 40, 30, 0.8);
895
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
896
}
897
::-webkit-scrollbar-thumb:window-inactive {
898
    background: rgba(168, 40, 30, 0.3);
899
}
900
::-webkit-scrollbar-thumb:hover{
901
    background: rgba(168, 40, 30, 1);
902
}
903
 
904
/*Geolocation stuff*/
905
#maps{
906
  height: 300px;
907
  width: 100%;
908
  margin: 0px;
909
  margin-top: 10px;
910
  padding: 0px;
911
  color:black;
912
}
913
 
914
 
915
 
916
 
917
 
918
 
919
 
920
 
921
 
922
 
923
/* Custom Animations used on playlist http://daneden.me/animate */
924
.animated:hover {
925
  -webkit-animation-fill-mode: both;
926
  -moz-animation-fill-mode: both;
927
  -ms-animation-fill-mode: both;
928
  -o-animation-fill-mode: both;
929
  animation-fill-mode: both;
930
  -webkit-animation-duration: 0.9s;
931
  -moz-animation-duration: 0.9s;
932
  -ms-animation-duration: 0.9s;
933
  -o-animation-duration: 0.9s;
934
  animation-duration: 0.9s;
935
}
936
.cAnimated:hover {
937
    -webkit-animation-fill-mode: both;
938
    -moz-animation-fill-mode: both;
939
    -ms-animation-fill-mode: both;
940
    -o-animation-fill-mode: both;
941
    animation-fill-mode: both;
942
    -webkit-animation-duration: 0.3s;
943
    -moz-animation-duration: 0.3s;
944
    -ms-animation-duration: 0.3s;
945
    -o-animation-duration: 0.3s;
946
    animation-duration: 0.3s;
947
}
948
.animated.hinge {
949
  -webkit-animation-duration: 2s;
950
  -moz-animation-duration: 2s;
951
  -ms-animation-duration: 2s;
952
  -o-animation-duration: 2s;
953
  animation-duration: 2s;
954
}
955
.cFadeInRight:hover {
956
    -webkit-animation-name: cFadeInRight;
957
    -moz-animation-name: cFadeInRight;
958
    -o-animation-name: cFadeInRight;
959
    animation-name: cFadeInRight;
960
}
961
@-webkit-keyframes fadeInRight {
962
  0% {
963
    opacity: 0;
964
    -webkit-transform: translateX(10px);
965
  }
966
967
  100% {
968
    opacity: 1;
969
    -webkit-transform: translateX(-10px);
970
  }
971
}
972
@-moz-keyframes fadeInRight {
973
  0% {
974
    opacity: 0;
975
    -moz-transform: translateX(10px);
976
  }
977
978
  100% {
979
    opacity: 1;
980
    -moz-transform: translateX(-10);
981
  }
982
}
983
@keyframes fadeInRight {
984
  0% {
985
    opacity: 0;
986
    transform: translateX(10px);
987
  }
988
989
  100% {
990
    opacity: 1;
991
    transform: translateX(-10);
992
  }
993
}
994
.fadeInRight:hover {
995
  -webkit-animation-name: fadeInRight;
996
  -moz-animation-name: fadeInRight;
997
  -o-animation-name: fadeInRight;
998
  animation-name: fadeInRight;
999
}
1000
 
1001
/*Same animated rules but adjusted position for controller*/
1002
@-webkit-keyframes cFadeInRight {
1003
    0% {
1004
        opacity: 0;
1005
        -webkit-transform: translateX(12px);
1006
    }
1007
  
1008
    100% {
1009
        opacity: 1;
1010
        -webkit-transform: translateX(0px);
1011
    }
1012
}
1013
@-moz-keyframes cFadeInRight {
1014
    0% {
1015
        opacity: 0;
1016
        -moz-transform: translateX(12px);
1017
    }
1018
  
1019
    100% {
1020
        opacity: 1;
1021
        -moz-transform: translateX(0);
1022
    }
1023
}
1024
@keyframes cFadeInRight {
1025
    0% {
1026
        opacity: 0;
1027
        transform: translateX(12px);
1028
    }
1029
  
1030
    100% {
1031
        opacity: 1;
1032
        transform: translateX(0);
1033
    }
1034
}
1035
 
1036
 
1037
 
1038
@-webkit-keyframes fadeInUp {
1039
    0% {
1040
        opacity: 0;
1041
        -webkit-transform: translateY(5px);
1042
    }
1043
  
1044
    100% {
1045
        opacity: 1;
1046
        -webkit-transform: translateY(0);
1047
    }
1048
}
1049
 
1050
@-moz-keyframes fadeInUp {
1051
    0% {
1052
        opacity: 0;
1053
        -moz-transform: translateY(5px);
1054
    }
1055
  
1056
    100% {
1057
        opacity: 1;
1058
        -moz-transform: translateY(0);
1059
    }
1060
}
1061
 
1062
@-o-keyframes fadeInUp {
1063
    0% {
1064
        opacity: 0;
1065
        -o-transform: translateY(5px);
1066
    }
1067
  
1068
    100% {
1069
        opacity: 1;
1070
        -o-transform: translateY(0);
1071
    }
1072
}
1073
 
1074
@keyframes fadeInUp {
1075
    0% {
1076
        opacity: 0;
1077
        transform: translateY(5px);
1078
    }
1079
  
1080
    100% {
1081
        opacity: 1;
1082
        transform: translateY(0);
1083
    }
1084
}
1085
 
1086
.fadeInUp:hover {
1087
    -webkit-animation-name: fadeInUp;
1088
    -moz-animation-name: fadeInUp;
1089
    -o-animation-name: fadeInUp;
1090
    animation-name: fadeInUp;
1091
}
1092
@-webkit-keyframes fadeInDown {
1093
    0% {
1094
        opacity: 0;
1095
        -webkit-transform: translateY(-20px);
1096
    }
1097
  
1098
    100% {
1099
        opacity: 1;
1100
        -webkit-transform: translateY(0);
1101
    }
1102
}
1103
 
1104
@-moz-keyframes fadeInDown {
1105
    0% {
1106
        opacity: 0;
1107
        -moz-transform: translateY(-20px);
1108
    }
1109
  
1110
    100% {
1111
        opacity: 1;
1112
        -moz-transform: translateY(0);
1113
    }
1114
}
1115
 
1116
@-o-keyframes fadeInDown {
1117
    0% {
1118
        opacity: 0;
1119
        -ms-transform: translateY(-20px);
1120
    }
1121
  
1122
    100% {
1123
        opacity: 1;
1124
        -ms-transform: translateY(0);
1125
    }
1126
}
1127
 
1128
@keyframes fadeInDown {
1129
    0% {
1130
        opacity: 0;
1131
        transform: translateY(-20px);
1132
    }
1133
  
1134
    100% {
1135
        opacity: 1;
1136
        transform: translateY(0);
1137
    }
1138
}
1139
 
1140
.fadeInDown  {
1141
    -webkit-animation-name: fadeInDown;
1142
    -moz-animation-name: fadeInDown;
1143
    -o-animation-name: fadeInDown;
1144
    animation-name: fadeInDown;
1145
}
1146
 
 
JavaScript 
window.addEventListener("load", initCanvas);
1
window.addEventListener("load", initCanvas);
2
 
3
var canvas, play, ctx, playLenght, img, counter, delay, fadeLenght, x;
4
 
5
function initCanvas(){
6
    getElem();
7
  
8
    //Run canvas stuff on first load
9
    if(localStorage.getItem('intro') !== 'ran'){
10
      setCanvas();
11
    }
12
  
13
}
14
 
15
function getElem(){
16
    canvas = document.getElementById('canvas');  
17
    play = document.getElementById('canvasPlay');
18
    play.addEventListener("click",setCanvas);
19
}
20
 
21
function setCanvas(){
22
  
23
    //Hide ctx play button
24
    play.style.visibility = 'hidden';
25
  
26
    //Make ctx visible  
27
    canvas.style.visibility = "visible";
28
  
29
    ctx = canvas.getContext("2d");
30
  
31
    //Clear ctx
32
    ctx.clearRect(0,0,canvas.width, canvas.height);
33
  
34
  
35
    delay = 200; //delay between pictures
36
    playLenght = (delay*26)*6; //lenght of total animation
37
    counter = 0; //image identifier
38
    /*
39
    timeLeft = playLenght - (delay*26);
40
        x = 1;*/
41
  
42
    startAnimation();
43
  
44
    setTimeout(hideCanvas, playLenght);  
45
  
46
    //Set first run in localStorage
47
    newLocal('intro','ran');
48
}
49
 
50
function startAnimation(){
51
    var cat = setTimeout(function(){
52
        img = new Image();
53
        img.src = 'images/canvas/'+[counter]+'.jpg';
54
        ctx.clearRect(0, 0, canvas.width, canvas.height);
55
        img.onload = function(){ctx.drawImage(img,0,0, canvas.width,canvas.height)};
56
        counter++;
57
        if(counter<26){
58
            startAnimation();
59
        }
60
        if(counter==26){
61
            setTimeout(hoverText,10);
62
       }
63
    },delay)    
64
}
65
 
66
 
67
function hideCanvas(){
68
  window.cancelAnimationFrame();
69
    canvas.style.visibility = 'hidden';
70
    play.style.visibility = 'visible';
71
}
72
 
73
function hoverText(){
74
window.requestAnimFrame = (function(){
75
    return  window.requestAnimationFrame       ||
76
        window.webkitRequestAnimationFrame ||
77
        window.mozRequestAnimationFrame    ||
78
        window.oRequestAnimationFrame      ||
79
        window.msRequestAnimationFrame     ||
80
        function( callback ){
81
            window.setTimeout(callback, 1000 / 60);
82
        };
83
})();
84
 
85
var canvas = document.getElementById("canvas"),
86
        ctx = canvas.getContext("2d"),
87
        keyword = "MacroPlay Games",
88
        imageData,
89
        density = 3,
90
        mouse = {},
91
        hovered = false,
92
        colors = ["0,120,232", "8,200,255", "30,140,255"],
93
        minDist = 20,
94
        bounceFactor = 0.7;
95
 
96
var W = window.innerWidth, H = window.innerHeight;
97
 
98
canvas.width = W;
99
canvas.height = H;
100
 
101
document.addEventListener("mousemove", function(e) {
102
    mouse.x = e.pageX-canvas.width;
103
    mouse.y = e.pageY-canvas.height;
104
}, false);
105
 
106
// Particle Object
107
var Particle = function() {
108
    this.w = Math.random() * 10.5;
109
    this.h = Math.random() * 10.5;
110
    this.x = -W;
111
    this.y = -H;
112
    this.free = false;
113
  
114
    this.vy = -5 + parseInt(Math.random() * 10) / 2;
115
    this.vx = -4 + parseInt(Math.random() * 8);
116
  
117
    // Color
118
    this.a = Math.random();
119
    this.color = colors[parseInt(Math.random()*colors.length)];
120
  
121
    this.setPosition = function(x, y) {
122
        this.x = x;
123
        this.y = y;
124
    };
125
  
126
    this.draw = function() {
127
        ctx.fillStyle = "rgba("+this.color+","+this.a+")";
128
        ctx.fillRect(this.x, this.y,  this.w,  this.h);
129
    }
130
};
131
 
132
var particles = [];
133
 
134
// Draw the text
135
function drawText() {
136
    ctx.clearRect(0, 0, W, H);
137
    ctx.fillStyle = "#000000";
138
    ctx.font = "100px 'Arial', sans-serif";
139
    ctx.textAlign = "center";
140
    ctx.fillText(keyword, W/2, H/2);
141
}
142
 
143
// Clear the canvas
144
function clear() {
145
    ctx.clearRect(0, 0, W, H);
146
}
147
 
148
// Get pixel positions
149
function positionParticles() {
150
    // Get the data
151
    imageData = ctx.getImageData(0, 0, W, W);
152
    data = imageData.data;
153
  
154
    // Iterate each row and column
155
    for (var i = 0; i < imageData.height; i += density) {
156
        for (var j = 0; j < imageData.width; j += density) {
157
          
158
            // Get the color of the pixel
159
            var color = data[((j * ( imageData.width * 4)) + (i * 4)) - 1];
160
          
161
            // If the color is black, draw pixels
162
            if (color == 255) {
163
                particles.push(new Particle());
164
                particles[particles.length - 1].setPosition(i, j);
165
            }
166
        }
167
    }
168
}
169
 
170
drawText();
171
positionParticles();
172
 
173
 
174
// Update
175
function update() {
176
    clear();
177
  
178
    for(i = 0; i < particles.length; i++) {
179
        var p = particles[i];
180
      
181
        if(mouse.x > p.x && mouse.x < p.x + p.w && mouse.y > p.y && mouse.y < p.y + p.h)
182
            hovered = true;
183
      
184
        if(hovered == true) {
185
          
186
            var dist = Math.sqrt((p.x - mouse.x)*(p.x - mouse.x) + (p.y - mouse.y)*(p.y - mouse.y));
187
          
188
            if(dist <= minDist)
189
                p.free = true;
190
          
191
            if(p.free == true) {
192
                p.y += p.vy;
193
                p.vy += 0.15;
194
                p.x += p.vx;
195
              
196
                // Collision Detection
197
                if(p.y + p.h > H) {
198
                    p.y = H - p.h;
199
                    p.vy *= -bounceFactor;
200
                  
201
                    // Friction applied when on the floor
202
                    if(p.vx > 0)
203
                        p.vx -= 0.1;
204
                    else
205
                        p.vx += 0.1;
206
                }
207
              
208
                if(p.x + p.w > W) {
209
                    p.x = W - p.w;
210
                    p.vx *= -bounceFactor;
211
                }
212
              
213
                if(p.x < 0) {
214
                    p.x = 0;
215
                    p.vx *= -0.5;
216
                }
217
            }
218
        }
219
      
220
        ctx.globalCompositeOperation = "lighter";
221
        p.draw();
222
    }
223
}
224
 
225
 
226
(function animloop(){
227
    requestAnimFrame(animloop);
228
    update();
229
})();  
230
}
231
 
232
 
233
 
234
 
235
 
236
 
237
 
238
 
239
 
240
 
241
 
242
 
243
 
244
 
245
 
246
 
247
 
248
 
249
 
250
 
251
 
252
 
253
 
254
 
255
 
 

Untitled

CSSDeck G+