1 00:00:00,000 --> 00:00:04,680 [??] [treehouse presents] 2 00:00:04,680 --> 00:00:07,780 [power buzzing] [Exercise Your Creative] 3 00:00:07,780 --> 00:00:10,520 In the last episode of Exercise Your Creative, 4 00:00:10,520 --> 00:00:13,330 we created a static layout using chance. 5 00:00:13,330 --> 00:00:18,500 In this episode, we're going to take that static layout and bring it to life in the browser. 6 00:00:18,500 --> 00:00:25,030 You will need a basic understanding of HTML5, CSS3, SASS, and a little bit of jQuery. 7 00:00:25,030 --> 00:00:28,560 We are going to approach the build in this order: 8 00:00:28,560 --> 00:00:31,700 First we will output all of the images from Illustrator 9 00:00:31,700 --> 00:00:34,430 and set up our file structure; 10 00:00:34,430 --> 00:00:38,080 then we will look at the HTML and CSS layout; 11 00:00:38,080 --> 00:00:41,820 lastly, we will code our animations using jQuery. 12 00:00:41,820 --> 00:00:43,950 Let's get started with the images. 13 00:00:43,950 --> 00:00:46,550 The first step is exporting our images. 14 00:00:46,550 --> 00:00:48,460 All of the assets are vector. 15 00:00:48,460 --> 00:00:53,760 Since the target market for the site will most likely not be on IE8 or lower, 16 00:00:53,760 --> 00:00:57,780 we can use scalable vector graphics or SVGs, 17 00:00:57,780 --> 00:01:00,670 which means we can incorporate super cool animations 18 00:01:00,670 --> 00:01:05,440 without worrying about scalable pixelation and heavy file sizes. 19 00:01:05,440 --> 00:01:11,050 SVGs are lightweight and are great for any screen resolution as they are scalable. 20 00:01:11,050 --> 00:01:16,800 SVGs are simply curves and points wrapped in SVG tags. 21 00:01:16,800 --> 00:01:21,170 When you open up an SVG graphic in Sublime, you can see this in the code. 22 00:01:21,170 --> 00:01:27,410 To begin our file-saving process, let's duplicate our static layout Illustrator file 23 00:01:27,410 --> 00:01:31,010 and rename it final-assets.ai. 24 00:01:31,010 --> 00:01:34,970 Next open up the file and make sure all of the objects are grouped, 25 00:01:34,970 --> 00:01:38,670 then get rid of any images you're not going to use. 26 00:01:38,670 --> 00:01:44,180 We are unable to use the Slice tool as SVGs aren't considered web images. 27 00:01:44,180 --> 00:01:49,060 The only other way to save multiple images is by using artboards. 28 00:01:49,060 --> 00:01:52,740 We do that by selecting the Artboard tool or Shift O 29 00:01:52,740 --> 00:01:56,480 and double click on each of the grouped objects. 30 00:01:56,480 --> 00:01:59,290 This places artboards around each graphic. 31 00:01:59,290 --> 00:02:04,180 Then select File, Save As or Command Shift S. 32 00:02:04,180 --> 00:02:12,340 Let's name our files img.svg and save it to our folder labeled img on our desktop. 33 00:02:12,340 --> 00:02:14,980 Select svg from the drop-down. 34 00:02:14,980 --> 00:02:19,130 Also make sure Use Artboards and All are selected. 35 00:02:19,130 --> 00:02:25,200 Hit Save, then select more options and set the decimal place to 2 and hit OK. 36 00:02:25,200 --> 00:02:30,820 All of our images have now been saved to our desktop and are ready to be renamed. 37 00:02:30,820 --> 00:02:33,770 I chose to rename my files the following. 38 00:02:33,770 --> 00:02:36,520 Next let's get our file structure set up. 39 00:02:36,520 --> 00:02:40,920 Before we look at any code, let's take a look at the ingredients needed for this site. 40 00:02:40,920 --> 00:02:46,420 To speed up the process, I'm going to fire up the browser and head over to Initializer.com 41 00:02:46,420 --> 00:02:50,890 where I'm going to generate a base file structure for our project. 42 00:02:50,890 --> 00:02:55,630 I want a very basic setup, so H5BP it is. 43 00:02:55,630 --> 00:03:02,290 Then select No Template, Just HTML5shiv, Minified, and deselect the rest. 44 00:03:02,290 --> 00:03:04,000 Now hit Download. 45 00:03:04,000 --> 00:03:07,030 Next, locate the zip file and unzip it. 46 00:03:07,030 --> 00:03:11,900 Now I'm going to rename the file stopvisualpollution, now take the IMG file 47 00:03:11,900 --> 00:03:17,360 with all of our SVGs and put it inside of the folder stopvisualpollution. 48 00:03:17,360 --> 00:03:20,840 Now I'm going to fire up Sublime Text 2 by dragging the folder 49 00:03:20,840 --> 00:03:23,750 onto Sublime Text 2's icon in the doc. 50 00:03:23,750 --> 00:03:25,800 Next, open up CodeKit. 51 00:03:25,800 --> 00:03:29,450 If you don't have the application, you can download the trial version at 52 00:03:29,450 --> 00:03:34,330 incident57.com/codekit. 53 00:03:34,330 --> 00:03:37,940 This application is great for super fast SASS development. 54 00:03:37,940 --> 00:03:42,440 With CodeKit open, drag in our stopvisualpollution file. 55 00:03:42,440 --> 00:03:47,540 Now we are able to use SASS inside of our stopvisualpollution directory. 56 00:03:47,540 --> 00:03:55,220 Head over to Sublime and change the file extension on our main.css to main.sass. 57 00:03:55,220 --> 00:03:57,240 Then save the file. 58 00:03:57,240 --> 00:04:03,650 You will notice the main.css was generated from the main.sass file. 59 00:04:03,650 --> 00:04:05,540 This was all done from CodeKit. 60 00:04:05,540 --> 00:04:09,860 We also have a compression option in CodeKit when using SASS. 61 00:04:09,860 --> 00:04:15,400 We can generate a fully compressed CSS file by selecting Compressed from the drop-down 62 00:04:15,400 --> 00:04:17,180 when the SASS file is selected. 63 00:04:17,180 --> 00:04:18,690 Perfect. 64 00:04:18,690 --> 00:04:21,029 Now our SASS environment is set up. 65 00:04:21,029 --> 00:04:25,950 Next I will create a folder labeled font and put the font Hitchcock in there, 66 00:04:25,950 --> 00:04:30,960 then download the following jQuery plugins and put them in the JS directory: 67 00:04:30,960 --> 00:04:34,210 jQuery Lettering and Scrollorama. 68 00:04:34,210 --> 00:04:38,950 You can find the jQuery Lettering plugin at letteringjs.com 69 00:04:38,950 --> 00:04:42,410 and Scrollorama at the link below. 70 00:04:42,410 --> 00:04:47,920 Lastly, I will delete normalize.css as we're not going to use it in our project. 71 00:04:47,920 --> 00:04:51,040 We now have our file structure and assets in place. 72 00:04:51,040 --> 00:04:54,460 Now let's take a look at the HTML for this project. 73 00:04:54,460 --> 00:04:56,480 Instead of coding everything out in real time, 74 00:04:56,480 --> 00:04:59,000 I have already put together the HTML for us. 75 00:04:59,000 --> 00:05:00,560 Let's take a look. 76 00:05:00,560 --> 00:05:03,870 With the index.html file open in Sublime Text 2, 77 00:05:03,870 --> 00:05:10,550 you can see I have added a title and linked up the Google font Peralta inside the head tag. 78 00:05:10,550 --> 00:05:14,180 As for the guts of the page, I broke everything up into sections: 79 00:05:14,180 --> 00:05:18,100 welcome, speakers, location, and info. 80 00:05:18,100 --> 00:05:21,470 Each section is in a div and labeled accordingly. 81 00:05:21,470 --> 00:05:25,700 Also there's a tag labeled scrollblock on each section. 82 00:05:25,700 --> 00:05:28,510 Below those sections is the footer and JavaScript. 83 00:05:28,510 --> 00:05:31,610 I have included the header inside the first section 84 00:05:31,610 --> 00:05:34,650 as it needs to be wrapped in the class scrollblock 85 00:05:34,650 --> 00:05:37,230 as it uses the Scrollorama functions. 86 00:05:37,230 --> 00:05:39,220 We will go over that in just a bit. 87 00:05:39,220 --> 00:05:44,370 Moving further into the page, you can see I have either used the HTML tags or classes 88 00:05:44,370 --> 00:05:46,820 to specify each item. 89 00:05:46,820 --> 00:05:52,530 For example, I have used the h1 tag as the text for the Stop Visual Pollution logo 90 00:05:52,530 --> 00:05:57,370 and the class facebook to identify the Facebook icon in the header. 91 00:05:57,370 --> 00:06:01,520 I simply generated each object on the page in its appropriate section 92 00:06:01,520 --> 00:06:04,310 labeled with its appropriate class name. 93 00:06:04,310 --> 00:06:07,490 Each section is also wrapped in a div class center 94 00:06:07,490 --> 00:06:11,070 to place all the items in the middle of the page. 95 00:06:11,070 --> 00:06:13,870 Because we are using specific heights in our animations, 96 00:06:13,870 --> 00:06:17,460 there isn't an easy fix to make this responsive. 97 00:06:17,460 --> 00:06:20,880 This page is designed for a desktop experience. 98 00:06:20,880 --> 00:06:24,640 If I were to do a mobile version, I would position everything a little bit differently. 99 00:06:24,640 --> 00:06:29,410 As we look at each section, you can see we have all of our items in appropriate sections. 100 00:06:29,410 --> 00:06:35,160 We have all of our speakers and their content grouped together inside the class speakers. 101 00:06:35,160 --> 00:06:37,870 Same goes for location and info. 102 00:06:37,870 --> 00:06:41,950 Then below that we have our footer and JavaScript source links. 103 00:06:41,950 --> 00:06:45,240 Next let's take a look at the theory behind styling the page. 104 00:06:45,240 --> 00:06:48,130 Just like the HTML, I'm not going to code everything in real time. 105 00:06:48,130 --> 00:06:50,200 Let's take a look at the breakdown. 106 00:06:50,200 --> 00:06:55,890 With the main.sass file open, you will notice I have used a number of variables and mixins 107 00:06:55,890 --> 00:06:59,460 mostly for colors and CSS3 properties. 108 00:06:59,460 --> 00:07:02,740 Then moving down the page you will see I have styled everything 109 00:07:02,740 --> 00:07:05,830 according to its hierarchy on the page. 110 00:07:05,830 --> 00:07:12,560 All of the items on the page are positioned absolute to the relative center div. 111 00:07:12,560 --> 00:07:14,790 Take the class tower, for example. 112 00:07:14,790 --> 00:07:20,230 You can see it's positioned absolute and 80 pixels from the top. 113 00:07:20,230 --> 00:07:22,660 Same goes for the arrow in the welcome section. 114 00:07:22,660 --> 00:07:30,940 It's positioned absolute and 380 pixels from the top and 320 pixels from the left. 115 00:07:30,940 --> 00:07:34,540 The same theory goes for all of the other items on the page. 116 00:07:34,540 --> 00:07:39,800 You will also notice each main section has a specific height. 117 00:07:39,800 --> 00:07:44,500 This comes into play when we take a look at the JavaScript plugins-- 118 00:07:44,500 --> 00:07:47,600 more importantly, Scrollorama. 119 00:07:47,600 --> 00:07:53,150 With that said, let's take a look at the custom JavaScript animations using our jQuery plugins. 120 00:07:53,150 --> 00:07:57,360 Before we code any JavaScript, let's take a look at what we're going to animate. 121 00:07:57,360 --> 00:08:00,710 When I scroll down the page, I want to animate all the elements in 122 00:08:00,710 --> 00:08:03,210 as if they weren't there to begin with. 123 00:08:03,210 --> 00:08:05,790 I can do this with Scrollorama. 124 00:08:05,790 --> 00:08:11,430 On the Scrollorama plugin page, you can see all of the animations it has to offer. 125 00:08:11,430 --> 00:08:15,830 When I look at our static layout, I can get an idea of what I want to do. 126 00:08:15,830 --> 00:08:20,170 When scrolling down the page, I would like the text to disappear 127 00:08:20,170 --> 00:08:24,510 and rotate out while scaling up the tower; 128 00:08:24,510 --> 00:08:31,120 also move the arrow down and have speakers scale and zoom in. 129 00:08:31,120 --> 00:08:35,380 For the location section maybe animate all of the objects into the middle 130 00:08:35,380 --> 00:08:38,840 and move the clouds out at the same time. 131 00:08:38,840 --> 00:08:42,270 It would also be cool if the pin somehow dropped in, 132 00:08:42,270 --> 00:08:44,330 maybe with like a bounce or something. 133 00:08:44,330 --> 00:08:46,740 To begin, let's animate the tagline. 134 00:08:46,740 --> 00:08:50,960 I want it to rotate up and disappear when I scroll down. 135 00:08:50,960 --> 00:08:54,600 I can do this by using the lettering.js plugin. 136 00:08:54,600 --> 00:09:00,280 I have already linked the lettering.js file from my index.html document 137 00:09:00,280 --> 00:09:03,630 when I set up my HTML documents. 138 00:09:03,630 --> 00:09:05,950 So let's head over to the main.js file. 139 00:09:05,950 --> 00:09:09,230 This is where we're going to code all of our custom jQuery animations. 140 00:09:09,230 --> 00:09:12,990 The first thing we want to do is create a document ready function. 141 00:09:12,990 --> 00:09:19,230 Then I want to initiate the Lettering plugin and specify which objects I want to target. 142 00:09:19,230 --> 00:09:24,290 In this case it will be the h2 and h3 tag. 143 00:09:24,290 --> 00:09:29,930 This plugin takes each targeted object and wraps span tags around each letter. 144 00:09:29,930 --> 00:09:32,830 The only thing left to do before animating them 145 00:09:32,830 --> 00:09:36,720 is give them CSS properties to function correctly. 146 00:09:36,720 --> 00:09:43,150 We want to float the spans left and make sure they are displayed as blocks. 147 00:09:43,150 --> 00:09:46,200 Now I want to activate Scrollorama. 148 00:09:46,200 --> 00:09:49,280 I can do this by running the following variable. 149 00:09:49,280 --> 00:09:53,970 I am simply telling Scrollorama to target each class labeled scrollblock 150 00:09:53,970 --> 00:09:56,900 and allow us to animate anything inside of it. 151 00:09:56,900 --> 00:10:00,110 Also you will notice it says enablePin:false. 152 00:10:00,110 --> 00:10:04,780 If you aren't going to use the pin function, they recommend to make sure it's false 153 00:10:04,780 --> 00:10:08,170 at initiation to save optimization time. 154 00:10:08,170 --> 00:10:11,450 Okay, so now we have all of our plugins linked 155 00:10:11,450 --> 00:10:14,590 and we have them both initiated. 156 00:10:14,590 --> 00:10:17,640 The only thing left to do is to animate each object. 157 00:10:17,640 --> 00:10:21,320 Before we do that, I want to show you how the plugin works. 158 00:10:21,320 --> 00:10:23,090 It's fairly simple. 159 00:10:23,090 --> 00:10:29,550 Here's an example I would use to animate the big logo in the top left corner off the page 160 00:10:29,550 --> 00:10:37,080 as I scroll past 600 pixels in height inside the scrollblock section. 161 00:10:37,080 --> 00:10:39,650 In layman's terms, this is what the plugin is doing. 162 00:10:39,650 --> 00:10:46,760 It is saying this: Tell Scrollorama to animate the ID logo-big with a delay of 600, 163 00:10:46,760 --> 00:10:51,560 or 600 pixels, with a speed of 70, which is pretty fast, 164 00:10:51,560 --> 00:10:56,660 to the top minus 180 pixels, which is off the screen. 165 00:10:56,660 --> 00:10:58,770 Watch how it works. 166 00:10:59,700 --> 00:11:03,930 You have the ability to use the following parameters when using Scrollorama: 167 00:11:03,930 --> 00:11:08,170 duration, which is the number of pixels the animation lasts for; 168 00:11:08,170 --> 00:11:14,380 delay, which is the number of pixels scrolling before the animation starts; 169 00:11:14,380 --> 00:11:17,830 property, which is any CSS property-- 170 00:11:17,830 --> 00:11:22,190 an example of this would be opacity, top, bottom; 171 00:11:22,190 --> 00:11:25,280 start, where the animation begins; 172 00:11:25,280 --> 00:11:27,430 end, where the animation ends; 173 00:11:27,430 --> 00:11:32,240 pin--you can actually stick it to the hierarchy div; 174 00:11:32,240 --> 00:11:37,950 and lastly, easing, which includes bounce or linear. 175 00:11:37,950 --> 00:11:42,290 Next let's animate the small logo in when the big logo goes out. 176 00:11:42,290 --> 00:11:44,110 The code would look like this. 177 00:11:44,110 --> 00:11:47,680 This is telling the small logo to start off the page. 178 00:11:47,680 --> 00:11:54,030 Then once we scroll past 600 pixels, it animates into place at 10 pixels from the top. 179 00:11:54,030 --> 00:11:56,490 It would look something like this. 180 00:11:56,490 --> 00:11:59,020 [??] 181 00:11:59,020 --> 00:12:01,770 The next animation would be for the tower. 182 00:12:01,770 --> 00:12:05,620 I want to zoom and move it up as I scroll down gradually. 183 00:12:05,620 --> 00:12:08,500 This is what the animation looks like. 184 00:12:08,500 --> 00:12:10,600 This is what the code would look like. 185 00:12:10,600 --> 00:12:15,470 Notice on the zoom property I am scaling it up past the original size. 186 00:12:15,470 --> 00:12:22,410 Since we are using SVGs, we are able to scale it past 100% and not have pixelation. 187 00:12:22,410 --> 00:12:25,160 This is because we're using a vector graphic. 188 00:12:25,160 --> 00:12:30,180 Now let's animate each letter inside of the h3 and h2 tags 189 00:12:30,180 --> 00:12:33,070 using the same animation properties. 190 00:12:33,070 --> 00:12:37,070 We can do this by targeting the span tag inside of a function. 191 00:12:37,070 --> 00:12:40,640 Let's take this 1 step further and generate random numbers 192 00:12:40,640 --> 00:12:43,640 for the rotation on each letter. 193 00:12:43,640 --> 00:12:46,280 The code will look something like this. 194 00:12:46,280 --> 00:12:50,600 The first animation fades the letters to 0 opacity. 195 00:12:50,600 --> 00:12:56,930 Also notice how I set the rotation and top animations to end at random numbers. 196 00:12:56,930 --> 00:13:01,710 The top property will generate a random number between 120 and 180 197 00:13:01,710 --> 00:13:07,160 while the rotation will generate random numbers between 720 and 360. 198 00:13:07,160 --> 00:13:12,850 When we refresh, we can see how it animates differently every time the page renders. 199 00:13:12,850 --> 00:13:18,100 I would like to cover one more property of Scrollorama, the easing property. 200 00:13:18,100 --> 00:13:21,530 I'm going to apply this to the pin in location. 201 00:13:21,530 --> 00:13:24,970 In the meantime, I'm going to animate the objects in between 202 00:13:24,970 --> 00:13:27,650 using the same properties we just went over. 203 00:13:27,650 --> 00:13:30,800 Now let's add an easing effect to the pin. 204 00:13:30,800 --> 00:13:36,860 We can do this by simply adding an easing property after the end property. 205 00:13:36,860 --> 00:13:40,990 Now when we refresh we can see the pin drops and now bounces. 206 00:13:40,990 --> 00:13:44,560 Play around with the animations to get them just right. 207 00:13:44,560 --> 00:13:46,060 Don't go overboard though. 208 00:13:46,060 --> 00:13:49,570 Scrollorama comes with great responsibility. 209 00:13:49,570 --> 00:13:53,520 Let's not turn our apps into the old school over-the-top Flash animations. 210 00:13:53,520 --> 00:13:56,190 Keep it simple and enjoyable for the user. 211 00:13:56,190 --> 00:14:00,990 With that said, I'm going to set up a couple more animations to finish up our app. 212 00:14:00,990 --> 00:14:04,040 You can see how a couple of plugins and a little bit of scripting 213 00:14:04,040 --> 00:14:07,460 can really bring your static layout to life in the browser. 214 00:14:07,460 --> 00:14:12,880 When using SVGs, we're able to save on file size and run smooth animations, 215 00:14:12,880 --> 00:14:16,090 plus we don't have to worry about the pixelation. 216 00:14:16,090 --> 00:14:19,540 As always, have fun and Exercise Your Creative. 217 00:14:19,540 --> 00:14:21,000 [??] [Exercise Your Creative] [power buzzing]