Now add the next lines of CSS, which add the correct typeface from the Google font we added in Step 1 to the heading tags. We also change all the typography to have a white colour that will enable it to stand out against the diff erent-coloured backgrounds that we will add.
001
h1, h2, h3, h4, h5, .subheader { font-family: ‘Gafata’, sans-serif; }002
h1, h2, h3, h4, h5, p, .subheader { color: #fff; }/04 Style the hero
We will add some space between the first content and the menu so that the background image can be seen on the screen. We will make this first block of colour behind our text semi-transparent so that on desktop devices the background can be seen through. The heading and image are also given a little padding at the top.
001
#hero{002
margin-top: 500px;003
background: rgba(256, 154, 9, 0.7);004
min-height: 500px;005
}006
#hero h1{ padding-top: 20px;}007
#hero img{ padding-top: 90px;}05 Sign-up colours
The next section down in our design is the sign-up section, so we will add the styling for this, which will give the section a light teal background colour. Later we will add
tools | tech | trends Brackets, Animate.css, jQuery, appear.JS
<Above> s#ZPSHBOJTJOHUIFJOJUJBMTDSFFOTDPOUFOUXFDBOMBUFS BOJNBUFUIFMBSHFSMPHPBOEUFYUPOUPUIFTDSFFOGPS XIFOJUDPNFTJOUPWJFX <Above> s"UUIJTTFDUJPOXFXJMMCFBCMFUPBEEBOJNBUJPOUP FBDIPOFPGUIFDJSDMFJDPOTTPUIBUUIFZBQQFBSPO TDSFFOPOFBUBUJNF OJNBUJPOFŇFDUTBSFBMMXFMMBOE HPPECVUJUTOPUBMXBZTQPTTJCMF UPTFFUIFNJGUIFVTFSIBTOU TDSPMMFEUPUIFJSMPDBUJPOPOUIF QBHFXIFOUIFZSFCFJOH USJHHFSFEThe problem is, that location is getting harder and harder to predict, given the sheer multitude of diff erent-sized screens that users can be looking at your site with. Libraries such as Scrollr are great but it’s all based on pixel sizes and whether the user has scrolled a certain number of pixels down the page. This isn’t possible to predict with responsive devices, as content gets pushed further down the page and those pixel sizes go up the spout.
In this tutorial we are going to take a diff erent approach to animating content on the screen and it will work well with many responsive frameworks such as Bootstrap and Foundation. We’ve opted to use Foundation but that isn’t the main focus here; instead we are focusing on using the free animate.css library of animations. To trigger these we are using the appear.js plug-in for jQuery, which enables us to detect when certain elements will appear on the screen. When they do appear, we will then add in the relevant animation eff ects so that the user sees the right animation at the right time. This is perfect for anything that you really want to draw the user’s attention to.
a
01 Start the project
From the resource files, copy the tutorial folder to your web server, your local server or, if you are using Brackets, to anywhere on your hard drive. In Brackets,
Source files
available
sIUUQXXX ŢJMFTJMPDPVL CLT
Create a scroll-triggered animation
animation to the heading to draw attention to the sign-up element within this section of the website page.
001
#signup {002
margin-top: 300px;003
background: #0ec8b0;004
padding: 90px 0;005
}06 Three-column section
The next section of the site is the three-column section, so in a similar way to earlier we will add the colours for the background of this section. We are adding plenty of margin top to each section of the page so that the animation can clearly be seen as we reach each section.
001
#three {002
margin-top: 300px;003
background: #00add8;004
padding: 90px 0;005
}006
07 Finish the page
Now we add the lower section of the site, which contains an image and text. This has a light purple background and the footer is a dark grey colour. This concludes the backgrounds of the page and spaces our design out ready for us to start thinking about adding the animated elements to the page.
001
#lower {002
margin-top: 300px;003
background: #df86ca;004
padding: 90px 0;005
} #footer {006
background: #333;007
padding: 30px 0;008
}08 Add the first animation
Locate the <div> tag with the ID for the ‘hero’ section. Inside the row that immediately follows is a <div> with a class of ‘medium-7 columns’. Change this as shown in the following code snippet and refresh your page in the
browser. You will see the large image automatically animated down from the top of the page.
001
<div class=”medium-7 columns animated fadeInDownBig” >09 Move in the text
Find the <div> with the ID ‘introText’ and change the class as shown below. Again, refresh your browser so that you can see that in action. Now both of the elements on the screen animate into place. This is good but if this were a mobile device this content would likely be off the bottom of the screen, which might cause users confusion when they see the logo fly past.
001
<div id=”introText” class=”medium-5 columns animated fadeInUpBig” >10 Use appear.js
A better way to solve the animation is to only trigger the animation to take place once the relevant parts are on the screen. For this we will use the jQuery plug-in <Above>
s*OJUJBMMZUIFTJUFOFFETTPNF$44UPTUZMFUIFFMFNFOUTVQTPUIBUUIFSFJTNPSFPSHBOJTBUJPO UPUIFQBHFBTXFMMBTTPNFEJTUBODFCFUXFFOFBDIFMFNFOUTPUIBUUIFZDBOCFTDSPMMFEUP
amount of time has passed before calling the animation to actually play. This is done by passing through the animation as a class into the element.
001
if ( animationDelay ) {002
setTimeout(function(){003
elem.addClass ( animation + “ visible” );004
}, animationDelay);005
}14
No delay, just animate
If there is no delay stored with the animation then we just want the animation to play, so the else statement we’re using here simply adds in the animation to the element without the delay ready for it to start. With these in place we can now go ahead and amend our tags that we added to the animation to earlier.
001
else {002
elem.addClass ( animation + “ visible” );003
}004
}12
Save the delay
When the animation is visible, we check if there is any element data for an animation delay and we will use this to chain animations later. If there is, it is stored in the animationDelay variable, ready to trigger the correct animation after the delay time has passed.