Fancy Sliding Door Effect

Saat sedang browsing mencari tutorial tentang javascript framework, saya menemukan sebuah efek yang menarik. Sliding door effect with jquery , tapi sayangnya efek itu menggunakan framework jquery. Karena saya belum pernah mencoba jquery jadi saya coba membuat dengan mootools. Seperti apakah efeknya ? Coba lihat Live Demo yang telah saya sediakan .

Requirement

1. Mootools 1.2.*

The HTML

Efek ini hanya menggunakan 1 gambar , tapi dapat membelah dua seperti ada 2 gambar. That's the power of css.

01.<div class="item">

02.    <div class="image-holder"> <!-- Tempat Menyimpan gambar -->

03. 

04.        <!-- Tempat gambar untuk bagian kiri -->

05.        <div class="image-div left"><img src="/1.png"/></div>

06. 

07.        <!-- Tempat gambar untuk bagian kanan -->

08.        <div class="image-div right"><img src="/1.png"/></div>

09.    </div>

10. 

11.    <!-- Dibawah ini tempat untuk menyimpan Text -->

12.    <span class="caption"><h4>CSS Rounded Corner</h4><p>Membuat CSS rounded Corner</p></span>

13.</div>

Jika masih bingung bisa lihat gambar di bawah ini

The CSS

KIta hanya menggunakan CSS yang cukup sederhana. Class item untuk container , gambar dibagi menjadi dua container left dan right. Untuk lebih jelasnya dapat dilihat pada gambar diatas.

01..item {

02.    width:120px;

03.    height:120px;

04.    border:4px solid #222;

05.    margin:5px 5px 5px 0;

06.    background:url('bg.png') no-repeat;

07.    overflow:hidden;

08.    position:relative;

09.    float:left;

10.    cursor:hand;cursor:pointer;

11.}

12. 

13..item img {border:0;}

14..image-holder {position:absolute;}

15..image-div { 

16.    position:relative;

17.    overflow:hidden;

18.    width:50%;

19.    float:left;

20.}

21..right img {margin-left:-100%;}

22..right{float:right}

23. 

24..item .caption {

25.    z-index:0;

26.    color:#ccc;

27.    display:block;

28.}

29. 

30..item .caption h4 {

31.    font-size:12px;

32.    padding:10px 5px 0 8px;

33.    margin:0;

34.    color:#369ead;

35.}

36. 

37..item .caption p {

38.    font-size:10px;

39.    padding:3px 5px 0 8px;

40.    margin:0;

41.}

The Javascript

Sebuah javascript yang tidak terlalu rumit. Check this out !

01.// Skrip dijalankan setelah domready

02.window.addEvent('domready',function() {

03. 

04.// masukan class item menjadi sebuah variabel

05.var topbar = $$('div.container div.item');

06. 

07. // buat fungsi dengan nama change

08. topbar.each(function(change) {

09.  

10. //tambahkan event 'mouseover' pada fungsi change

11. change.addEvent('mouseover',function() {

12. 

13. // tambahkan class 'item hover' pada clas item

14. this.set('class','item hover');

15.  

16. // tambahkan style margin-left dan margin right saat event mouse over

17. $$('div.hover .left').tween('margin-left',-63);

18. $$('div.hover .right').tween("margin-right",-63);

19. });

20. 

21. change.addEvent('mouseout',function() {

22. this.set('class','item unhover');

23. $$('div.unhover .left').tween("margin-left",0);

24. $$('div.unhover .right').tween("margin-right",0);

25. });

26. });

27. 

28.});

Sliding Door efek telah selesai ,hasilnya dapat dilihat pada demo dibawah dan jika ingin lebih jelas dapat download file yang telah saya sediakan. Semoga membantu.

Source : http://gadaguna.freevar.com/index.php/mootools/26-fancy-sliding-door-effect-menggunakan-mootools12