2019-05-01+Web+Designer+UK

1 .Rollovertexteffect
OneofthegreattexteffectsontheMiddleChild
websiteis fortherollovereffectsonthemenu,where
theletterssplitapartonthetextandrotateslightly.
StartthiswithsomesimpleHTMLtags.

<divclass=”wrapper”>

<divclass=”word”>Breakfast</div>

</div>

2 .CreateCSS
Usea separateCSSfileorstyletagstoaddthe
followingCSSrulesandmakethepagefillthefull
sizeofthebrowserbyensuringthebodyandthe
wrappertakethefullheightavailable.

html,

body{

width:100%;

height:100%;

margin:0;

padding:0;

}

.wrapper {

display:grid;

height:100%;

}

3 .Positiontheword
The‘word’classcentresthewordinthegrid.Any
textthatis giventhe‘word’classcanhavethis
applied.The‘up’classis goingtobeappliedto
everyotherletterandthesewillmoveupwards.

5. Hovering down

When the user hovers over the text, the down class

moves the text downwards. Later in JavaScript the

text will be split into separate spans with the classes

added automatically to alternate spans.

.word:hover .down {

transform: translate3d(0px, 8px, 0px)

rotate(-12deg);

color: #058b05;

}

6. Automatic for the people

It’s a bit of a hassle to have to put every letter in

alternating spans with different classes, so we’ll

automate the process by getting JavaScript to query

the selector and take each letter. Here the ‘str’ variable

grabs the current letter as it loops through the text.

<script>

var elements = document.querySelectorAll

(‘.word’);

for (var i = 0, l = elements.length; i

< l; i++) {

var str = elements[i].textContent;

elements[i].innerHTML = ‘’;

7. Add alternating classes

Now another loop places each letter in its own span

element and adds either the ‘up’ or ‘down’ class to the

spans. If you look at this in the browser you will see the text

split by each letter up and down, while rotating slightly.

for (var j = 0, ll = str.length; j

< ll; j++) {

var spn = document.createElement(‘span’);

elements[i].appendChild(spn);

spn.textContent = str[j];

let pos = (j % 2)? ‘up’ : ‘down’;

spn.classList.add(pos);

}

}

</script>

Technique

Rising high

Bringing together many quirky effects allows the Middle Child site to show off

it’s playful character while still providing a professional website for the catering

company. The site’s playful image is engaging and elevates this against other

catering sites.

Mark Shufflebottom , Professor of interaction design

.word {

font-size: 3em;

margin: auto auto;

}

.word .up

{

display: inline-block;

transform: translate3d(0px, 0px, 0px)

rotate(0deg);

transition: all 0.5s ease-in-out;

}

4. Up and over

Now the ‘down’ class shares very similar settings to

the ‘up’ but the hover shows the movement

upwards for the ‘up’ rollover. Upwards is also

rotated slightly to enhance the look.

.word .down

{

display: inline-block;

transform: translate3d(0px, 0px, 0px)

rotate(0deg);

transition: all 0.5s ease-in-out;

}

.word:hover .up

{

transform: translate3d(0px, -8px, 0px)

rotate(12deg);

color: #058b05

}

4 7

workshop ______________________________________________ 71