Cre­ate an in­verted text swipe an­i­ma­tion ef­fect

An ef­fect for page ti­tles where you can choose be­tween chang­ing the back­ground style and con­tent

Web Designer - - Lightbox -

1. Ini­ti­ate HTML tem­plate

The first step is to de­fine the tem­plate struc­ture of the HTML doc­u­ment. This con­sists of the HTML doc­u­ment con­tainer, which is re­spon­si­ble for stor­ing the head and body sec­tions. While the head sec­tion is re­spon­si­ble for load­ing the ex­ter­nal CSS stylesheet, the body sec­tion will be used to store the con­tent el­e­ments cre­ated in step 2. <!DOCTYPE html>



<meta charset="utf-8" />

<meta http-equiv="x-ua-com­pat­i­ble" con­tent="ie=edge">

<meta name =" de­scrip­tion" con­tent =" de­scrip­tion ">

<ti­tle>type­writer Ef­fect</ti­tle>

<link rel="stylesheet" type="text/css" me­dia="screen" href="styles.css"/>






2. HTML con­tent

The HTML con­tent con­sists of in­di­vid­ual head­ings with the ‘swipe’ class used as con­tain­ers for the an­i­mated text. Each head­ing has two first level chil­dren – the first be­ing vis­i­ble by de­fault, with the sec­ond be­ing the text to tran­si­tion into. The first el­e­ment needs to have its text con­tained with an­other con­tainer for rea­sons of the CSS. <h1 class="swipe">

<span><span>same text.</span></span> <span>same text</span>


<h1 class="swipe">

<span><span>some text.</span></span> <span>dif­fer­ent text.</span>


3. CSS ini­ti­a­tion

Cre­ate a new file called ‘styles.css’. This step ini­ti­ates the doc­u­ment to display with a red coloured back­ground that cov­ers the full space of the win­dow. Ad­di­tion­ally, the pad­ding prop­erty is elim­i­nated to en­sure that no vis­i­ble bor­der spac­ing is pre­sented around the sides of the web page win­dow area. body,html{ display: block; width: 100%; height: 100%; back­ground: #f00; pad­ding: 0; }

4. Swipe con­tainer

Each con­tainer el­e­ment us­ing the ‘swipe’ class is re­quired to use rel­a­tive po­si­tion­ing and to be dis­played with a set height. The height set to 1em will show the el­e­ment with the same height as the text char­ac­ters it will display. These set­tings are im­por­tant for the CSS de­fined in fol­low­ing steps.

.swipe{ po­si­tion: rel­a­tive; height: 1em; }

5. Swipe chil­dren de­faults

All of the first level chil­dren in­side the swipe con­tain­ers are re­quired to have a set of de­fault prop­er­ties for the ef­fect to work. These in­clude ab­so­lute po­si­tion­ing so that they can be po­si­tioned at the top of their con­tainer. It’s im­por­tant for these items to be floated to the right for their an­i­ma­tion to work.

.swipe > *{ po­si­tion: ab­so­lute; display: block; over­flow: hid­den; width: 100%; height: 1em; color: #000; back­ground: #fff; white-space: nowrap; float: right; top: 0; mar­gin: 0; }

6. Swipe child one

The nth-child se­lec­tor is used to ap­ply spe­cific styles to the first el­e­ment that ap­pears within the swipe con­tainer. While the outer con­tainer uses an an­i­ma­tion to push the black box for­wards, the in­ner con­tainer uses an an­i­ma­tion to pull its in­side text back­wards. This keeps the text po­si­tioned in the same place while the black back­ground swipes for­ward to re­veal the sec­ond level child el­e­ment.

.swipe *:nth-child(1){ po­si­tion: rel­a­tive; color: #fff; back­ground: #000; an­i­ma­tion: outer 5s for­wards; }

.swipe *:nth-child(1) > *{ display: block; z-in­dex: 3; width: 100%; float: right; an­i­ma­tion: in­ner 5s for­wards; }

7. An­i­ma­tion def­i­ni­tions

The fi­nal step is to de­fine the an­i­ma­tions re­quired for step 6. The outer el­e­ment is an­i­mated by chang­ing its width from 100% to 0 – hence the im­por­tance of it be­ing floated right in step 5. The in­ner an­i­ma­tion needs to pull the text back­wards, which is achieved by in­creas­ing its width to dou­ble the size of its con­tainer.

@keyframes outer{ from { width: 100%; } to { width: 0; } }

@keyframes in­ner{ from { width: 100%; } to { width: 200%; color: #000;} }


Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.