Set­ting dis­place­ment im­ages

Web Designer - - Tutorials -

You can com­pletely change the ef­fect of the tran­si­tion by sim­ply chang­ing the im­age that is used as the dis­place­ment im­age. You need to make sure the im­age is in greyscale val­ues but then just save it as a reg­u­lar RGB JPEG im­age. In the code change the line:

<img src="im­ages/displ2.jpg" data-sam­pler="dis­place­ment" /> Here, an­other im­age has been used, which is a rip­pled swim­ming pool im­age. In­stead of the geo­met­ric lines in the tran­si­tion there are wavy rip­ples that trans­form the video im­ages to­gether. It’s best to use a greyscale im­age be­cause it uses the dif­fer­ent shades of grey to trans­form the amount of move­ment. The lighter ar­eas trans­form faster than the darker ar­eas, so keep that in mind when se­lect­ing your own im­age to use.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.