Add in­ter­ac­tive di­rec­tional images

Use the Di­rec­tion-re­veal li­brary to re­spond to user move­ment and an­i­mate images in dif­fer­ent di­rec­tions with a se­lec­tion of styles

Web Designer - - Meta Contents -

Use the Di­rec­tion-re­veal li­brary to re­spond to user move­ment and an­i­mate images in dif­fer­ent di­rec­tions

If you have your own port­fo­lio site, you have prob­a­bly spent more than your fair share of time try­ing to bring images of your work to life, mak­ing them in­ter­ac­tive in some way that gets the at­ten­tion of the user so that they want to ex­plore the con­tent fur­ther.

Di­rec­tion-re­veal is a small CSS and Javascript li­brary that will re­ally help out any kind of port­fo­lio that re­quires im­age and de­scrip­tion for­mat­ting. In this day and age nearly ev­ery site has some sort of in­ter­ac­tion on a page be­fore you ac­tu­ally click through to the con­tent. The way Di­rec­tion-re­veal brings a novel ap­proach to this prob­lem is by grab­bing the di­rec­tion that the user’s mouse moves over the im­age. It uses this to trig­ger an an­i­ma­tion, from the side that the user en­tered the im­age, so that the re­veal of the con­tent comes over the top. Again, as the user leaves that im­age, the con­tent will an­i­mate away again, but this time us­ing the di­rec­tion that the user left the im­age. What you end up with is an­i­ma­tions that don’t fol­low the usual ‘ap­pear and dis­ap­pear’ rules. At first the user prob­a­bly won’t no­tice, but it soon be­comes ap­par­ent as the user moves in and out of a list of images. This ef­fect makes for a great way to grab the user’s at­ten­tion with­out be­ing too over the top!

1. Start­ing off

Open the ‘start’ project folder in your code ed­i­tor. Here you will see the in­dex.html file and as­so­ci­ated fold­ers, css, images and js. Now open ‘in­dex.html’. You will see that some ba­sic con­tent has al­ready been cre­ated. Be­fore the clos­ing body tag add the code here for the first di­rec­tion-re­veal el­e­ment.

<div class=”grid”>

<div class=”space”>

<div class=”di­rec­tion-re­veal di­rec­tion­re­veal-swing”>

<a href=”#” class=”di­rec­tion-re­veal__­card”> <img src=”images/wind.jpg” alt=”im­age” class=”img-fluid”>

<div class=”di­rec­tion-re­veal__over­lay di­rec­tion-re­veal__anim--in”>

<h3 class=”di­rec­tion-re­veal__ti­tle”>im­age ti­tle is here</h3> <p class=”di­rec­tion-re­veal__­text”>a full de­scrip­tion goes here</p>

</div>

</a>

2. Con­tent to re­veal

The last con­tent was made up of an im­age and the re­veal that will ‘swing in’ when the mouse is moved over the im­age. The con­tent here shows a little con­text, but not too much as the main text de­scrip­tion will show when the mouse moves over. This will be placed next to the im­age. </div>

</div>

<div class=”box”>

<div class=”in­fowrap”>

<h2>web De­sign<br>

<span>wind - Aug­mented Re­al­ity In­ter­face</ span><br>

April 2018</h2>

<p>some ini­tial con­text pro­vided here for the user to grab their in­ter­est in the project.</p>

</div>

</div>

</div>

3. Add the style sheet

It’s time to link up the style sheet now. In the head sec­tion add the link to the ‘page-de­sign.css’ file. Open that file to see some ini­tial de­sign styling. This makes a start but more needs to be added to set up the grid and other el­e­ments of the de­sign for the re­veal el­e­ments.

<link rel=”stylesheet” href=”css/pagedesign.css”>

4. Set­ting up the grid

The CSS styling here should be added be­fore the me­dia query as this is for the tablet and mo­bile de­sign, just to keep ev­ery­thing full width in the browser. Later in Step 9, the me­dia query will have the de­sign set for a much larger screen, but this is tak­ing a mo­bile-first ap­proach. .grid { display: flex; flex-wrap: wrap; flex-di­rec­tion: row; }

.grid > div { display: flex; flex-ba­sis: 100%; }

5. Full width images

The images in the grid are go­ing to be set so they al­ways fill the full width of the con­tainer that is hold­ing them, re­gard­less of what size that con­tainer is. The text on the di­rec­tion re­veal is set so that there is 50px of space on the right-hand side of the display.

.img-fluid { max-width: 100%; height: auto; ver­ti­cal-align: mid­dle; bor­der-style: none; }

.di­rec­tion-re­veal__­text {

pad­ding: 0 50px 0 0; }

6. Ti­tle and over­lay

The ti­tle of the re­vealed text is given some pad­ding to the top so that it isn’t too close to the top of the im­age. The whole over­lay is set to in­clude the bor­der and pad­ding in its siz­ing. This isn’t so im­por­tant here, but will be on the larger desk­top styling.

.di­rec­tion-re­veal__ti­tle { pad­ding: 50px 0 0 0; color: #56c1c1; }

.di­rec­tion-re­veal__over­lay {

box-siz­ing: bor­der-box; }

7. Keeping it in check

At the bot­tom of each row will be a little space so that the images are not too close to­gether. The info panel to the side of the im­age is in the flex display, so it will fill the size of the im­age. The text will be placed at the bot­tom of the display, due to the ‘auto’ set­ting for ‘mar­gin-top’.

.space {

mar­gin-bot­tom: 60px; }

.in­fowrap { pad­ding: 0 0 50px 20px; mar­gin-top: auto; color: #6ca7a7; }

8. Text styles

The text in­side the in­fowrap is set now so that the head­ing dis­plays at the right size and the span sec­tion for that is much larger with the right colour. Fi­nally the para­graph sec­tion is set to display in a mid-grey colour, and that means all the text in that area is cor­rectly styled. .in­fowrap h2 {

font-size: 14px; }

.in­fowrap h2 span { font-size: 32px; color: #333; }

.in­fowrap p {

color: #999; }

9. Mov­ing into the me­dia query

In­side the me­dia query add the fol­low­ing sec­tion of code. This en­sures that the grid moves out of the way of the side panel and each block is set to be a 50% col­umn in the grid so that it flows cor­rectly through the de­sign for all the images and text that will be added. Save the style sheet now.

.grid { mar­gin-left: 120px;

}

.grid > div { flex-ba­sis: 50%; flex-di­rec­tion: col­umn;

}

10. Adding the Javascript

Move back to the ‘in­dex.html’ page and add the fol­low­ing code here for the Javascript to link it up to the page. Save the ‘in­dex/html’ page and switch over to the ‘main.js’ ready to add the Javascript code in there that will con­trol the way it works.

<script src=”js/main.js”></script>

11. Swings and round­abouts

Scroll down in the Javascript file un­til you find the comment to show where the code goes. The de­fault set­ting for di­rec­tion-re­veal is the swing set­ting. It is set here to work on any class that has ‘di­rec­tion-re­veal-swing’ at­tached to it. This moves the new con­tent in as a swing move­ment over the top of the im­age. var di­rec­tion­re­veal­swing = (0, _ di­rec­tion­re­veal2.de­fault)({ se­lec­tor: ‘.di­rec­tion-re­veal-swing’

});

12. Next sec­tion

Save the ‘main.js’ file now and test the whole thing in the browser to see the con­tent work­ing and swing­ing in and out de­pend­ing on which side the mouse en­ters or leaves the im­age. Now back in the ‘in­dex.html’ add this con­tent be­fore the clos­ing ‘grid’ div tag.

<div class=”space”>

<div class=”di­rec­tion-re­veal di­rec­tion­re­veal-slide”>

<a href=”#” class=”di­rec­tion-re­veal__­card”>

<img src=”images/pear­son.jpg” alt=”im­age” class=”img-fluid”>

<div class=”di­rec­tion-re­veal__over­lay di­rec­tion-re­veal__anim--in”>

<h3 class=”di­rec­tion-re­veal__ti­tle”>im­age ti­tle is here</h3>

<p class=”di­rec­tion-re­veal__­text”>a full de­scrip­tion here.</p>

</div>

</a>

</div>

13. Slid­ing into place

The con­tent in the pre­vi­ous step and this step is re­vealed us­ing the ‘di­rec­tion-re­veal-slide’ class. This will slide the over­lay over the top of the im­age. The im­age will re­main in place and the over­lay will just move. At the end of the tu­to­rial there’s a way to also push the im­age as well. </div>

<div class=”box”>

<div class=”in­fowrap”>

<h2>app De­sign<br>

<span>pear­son Air­port Watch App</span><br>

March 2018</h2>

<p>some ini­tial con­text pro­vided here for the user to grab their in­ter­est in the project.</p>

</div>

</div>

14. Slide re­veal

Over in the ‘main.js’ add this un­der what you added pre­vi­ously. This shows some fur­ther set­tings; the main points to look at are the type of an­i­ma­tion and that this is also touch en­abled for mo­bile de­vices. The touch thresh­old is how long it should be pressed. This is a quar­ter of a sec­ond and pre­vents it ac­ci­den­tally be­ing pressed when scrolling. var di­rec­tion­re­veal­slide = (0, _ di­rec­tion­re­veal2.de­fault)({ se­lec­tor: ‘.di­rec­tion-re­veal-slide’, item­s­e­lec­tor: ‘.di­rec­tion-re­veal__­card’, an­i­ma­tion­name: ‘slide’, en­able­touch: true, touchthresh­old: 250

});

15. Test­ing the slide

Save ‘main.js’ and re­fresh your browser to see the next sec­tion added, this time with the slide work­ing from the di­rec­tion of move­ment. Back in ‘in­dex.html’ add this code be­fore the clos­ing tag of the ‘grid’ div. This places the next sec­tion onto the screen and this will use a ‘ro­tate’ an­i­ma­tion.

<div class=”space”>

<div class=”di­rec­tion-re­veal di­rec­tion­re­veal-ro­tate”>

<a href=”#” class=”di­rec­tion-re­veal__­card”>

<img src=”images/theme.jpg” alt=”im­age” class=”img-fluid”>

<div class=”di­rec­tion-re­veal__over­lay di­rec­tion-re­veal__anim--in”>

<h3 class=”di­rec­tion-re­veal__ti­tle”>im­age ti­tle is here</h3>

<p class=”di­rec­tion-re­veal__­text”>a full de­scrip­tion here.</p>

</div>

</a>

</div>

16. Com­plete the con­tent

Adding in this sec­tion of code com­pletes that area on the screen, so save ‘in­dex.html’ as this row is now fin­ished. The im­age, im­age over­lay and side panel of text are all

ready for the Javascript to con­trol the ro­ta­tion ef­fect on this.

</div>

<div class=”box”>

<div class=”in­fowrap”>

<h2>web De­sign<br>

<span>on­go­ing Word­press Theme De­sign</ span><br>

Fe­bru­ary 2018</h2>

<p>some ini­tial con­text pro­vided here for the user to grab their in­ter­est in the project.</p>

</div>

</div>

17. Ro­tat­ing re­veals

Back in ‘main.js’ add this code un­der the code that was pre­vi­ously added. This takes any div with the class of ‘di­rec­tion-re­veal-ro­tate’ and adds the ro­tate an­i­ma­tion for the over­lay sec­tion onto this. Save this and re­fresh the browser, and the new con­tent will have a ro­ta­tion over­lay that is trig­gered from the side that a user’s mouse moves over it from. var di­rec­tion­re­veal­ro­tate = (0, _ di­rec­tion­re­veal2.de­fault)({ se­lec­tor: ‘.di­rec­tion-re­veal-ro­tate’, an­i­ma­tion­name: ‘ro­tate’

});

18. Next re­veal

The fi­nal re­veal sec­tion will fea­ture a flip an­i­ma­tion which swings the card around 180 de­grees to re­veal the con­tent over the top. To start with just the over­lay will flip around but later the im­age can also be flipped as well to give a 3D card ef­fect to this an­i­ma­tion.

<div class=”space”>

<div class=”di­rec­tion-re­veal di­rec­tion­re­veal-flip”>

<a href=”#” class=”di­rec­tion-re­veal__ card”>

<img src=”images/photo.jpg” alt=”im­age” class=”img-fluid”>

<div class=”di­rec­tion-re­veal__over­lay di­rec­tion-re­veal__anim--in”>

<h3 class=”di­rec­tion-re­veal__ti­tle”>im­age ti­tle is here</h3>

<p class=”di­rec­tion-re­veal__­text”>a full de­scrip­tion here.</p>

</div>

</a>

</div> 19. Side panel Now the con­tent for the side panel is cre­ated just to com­plete this sec­tion of the de­sign. Save the ‘in­dex.html’ page now and switch over to the ‘main.js’ file ready to add in the code that will pick up the se­lec­tor and trig­ger the an­i­ma­tion here.

</div>

<div class=”box”>

<div class=”in­fowrap”>

<h2>app De­sign<br>

<span>cap­ture - Phone Im­age Edit­ing App</ span><br>

Jan­uary 2018</h2>

<p>some ini­tial con­text pro­vided here for the user to grab their in­ter­est in the project.</p>

</div>

</div>

</div>

20. Flip­ping awesome

In the ‘main.js’ add this code just af­ter the last code that you added. Save the page and re­fresh your browser. This sec­tion will flip over 180 de­grees as you move your mouse over and it flips from which­ever side you en­ter the im­age from. Let’s make the im­age also flip as well. var di­rec­tion­re­vealflip = (0, _ di­rec­tion­re­veal2.de­fault)({ se­lec­tor: ‘.di­rec­tion-re­veal-flip’, an­i­ma­tion­name: ‘flip’

});

21. Fi­nal touch

Back in the ‘in­dex.html’ page, go back to the last im­age you added in step 18. Add an ex­tra class ‘di­rec­tion­re­veal__anim—out’. Re­fresh your browser to see the im­age flip. If you use this class on the other images it will also make the im­age an­i­mate out as the over­lay en­ters, so ex­per­i­ment with this for dra­matic re­sults.

<img src=”images/photo.jpg” alt=”im­age” class=”di­rec­tion-re­veal__anim--out imgfluid”>

Top With the CSS in place at this point the de­sign works fully on mo­bile and tablet-sized screens

Top The last di­rec­tion-re­veal is a flip ef­fect that spins the over­lay into po­si­tion on top of the im­age

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.