Membuat Website Interaktif Menggunakan Velocity Js Part I

Website merupakan sebuah elemen penting di dunia internet. Ada banyak sekali fungsi dan kegunaan dari website seperti menampilkan profil perusahaan, membuat toko online, game menarik, blog, kursus online, hiburan atau bahkan sekedar pengiklanan. Website harus memiliki daya tarik agar mampu mengajak user untuk mengunjungi website tersebut. Salah satu daya tarik yang penting dari sebuah website yaitu desain yang menarik. Jika desain dari sebuah website tidak menarik / terkesan kaku tentu saja membuat user terkadang tidak tertarik untuk mengunjungi website tersebut. Desain yang menarik dan interaktif dari sebuah website mampu memberikan nilai positif tersendiri. Sehingga desain website penting untuk diperhatikan oleh si pembuat website.

Kita dapat menggunakan javascript dan css untuk merancang website agar lebih menarik. Ada sangat banyak library dan framework yang dapat mempermudah kerja kita dalam merancang website sekarang ini. Salah satunya disini kita akan membahas Velocity Js.

1. Mengenal Velocity Js

Velocity merupakan mesin animasi dengan API  yang sama dengan $.animate() dari Jquery. Velocity menghadirkan motion designer dengan kinerja yang lebih baik dan lebih halus di bandingkan dengan jquery. Velocity menghadirkan kinerja yang sangat cepat, dan fitur animasi warna , transformasi , loop , easings , dukungan SVG , dan scrolling . Sehingga dapat disimpulkan bahwa, Velocity merupakan mesin animasi yang terbaik dari transisi jQuery dan CSS. Velocity mampu bekerja dengan dan tanpa Jquery. Ingin tau lebih banyak tentang Velocity Js? Binerian bisa kunjungi official websitenya di http://velocityjs.org/.

2. Contoh penerapan velocity Js pada website

  1. Pertama sekali, membuat 1 folder untuk menyimpan seluruh file. Disini mimin membuat nama folder yaitu coba-velocity.
  2. Kemudian di dalam folder coba-velocity tambahkan 3 folder baru yaitu css, js dan images. Folder ini digunakan untuk mengelompokkan file berdasarkan jenisnya masing-masing agar lebih rapi dan mudah ditemukan.

3. Selanjutnya download jquery pada link di bawah ini (atau bisa kunjungi https://jquery.com/download/ untuk mendapatkan versi terbaru)

https://code.jquery.com/jquery-3.5.1.min.js

4. Download velocity.min.js melalui link di bawah ini

https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js

Jika download tidak muncul, dan tampilan seperti gambar di bawah ini. Maka tinggal di block seluruhnya kemudian copy dan simpan text dengan nama velocity.min.js dan simpan di dalam folder coba-velocity>js yang sudah di siapkan.

Download velocity.ui.js melalui link di bawah ini

https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.ui.js

5. Jika download tidak muncul. Maka tinggal di block seluruhnya kemudian copy dan simpan text dengan nama velocity.ui.js dan simpan di dalam folder coba-velocity>js yang sudah di siapkan .

HTML

6. Selanjutnya buat file dengan nama index.html di dalam folder coba-velocity. Kemudian tulisakan source code seperti dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Binerian Developer</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/velocity.min.js"></script>
    <script type="text/javascript" src="js/velocity.ui.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800">
</head>
<body>
    
</body>
</html>

Pada tag script diatas, binerian sudah berhasil menambahkan library velocity dan jquery ke dalam file yang di buat.

7. Selanjutnya di dalam tag body (<body> <\body>) pada file index.html tambahkan sintaks berikut ini

<div id="intro" >
        <div id="text">
            <div id="text2">
                <span>v</span><span>e</span><span>l</span><span>o</span><span>c</span><span>i</span><span>t</span><span>y</span>
                <span>J</span><span>s</span><span>.</span>
            </div>
            <span>B</span><span>i</span><span>n</span><span>e</span><span>r</span><span>i</span><span>a</span><span>n</span>
            <span>D</span><span>e</span><span>v</span><span>e</span><span>l</span><span>o</span><span>p</span><span>e</span><span>r</span>
        </div>
        <div id="intro-button">
            <button id="start" onclick="animasiIntroOut();">START</button>
        </div>
    </div>
    <section id="main">
        <nav id="menu">
            <ul>
                <li><a href="velo" >Velocity Js</a></li>
                <li><a href="demo">Demo Transition</a></li>
                <li><a href="back_to_intro">Back</a></li>
            </ul>
        </nav>
        <div id="velo" class="container-content">
            <img src="images/velocity.png">
            <h3 class="title"> Velocity Js </h3>
            <div>
                <p>Velocity merupakan mesin animasi dengan API  yang sama dengan $.animate() dari Jquery.
                    Velocity menghadirkan motion designer dengan kinerja yang lebih baik dan lebih halus di bandingkan dengan jquery. </p>
                <p>Velocity menghadirkan kinerja yang sangat cepat, dan fitur animasi warna , transformasi , loop , easings , dukungan SVG , dan scrolling . 
                    Sehingga dapat disimpulkanbahwa, Velocity merupakan mesin animasi yang terbaik dari transisi jQuery dan CSS.
                </p>
                <p>
                    Velocity mampu bekerja dengan dan tanpa Jquery.
                    Ingin tau lebih banyak tentang velocity ??
                </p>
            <p>
                     Cek di http://velocityjs.org/
                </p>
            </div>
        </div>
        <div id="demo" class="container-content" >
            <div class="sign top240L">
              <img src="images/left.jpg" />
              <h3>Slide Left</h3>
            </div>
            <!-- <div class="sign top170"> -->
            <div class="sign top170">
              <img src="images/up.png" />
              <h3>Slide Up</h3>
            </div>
            <div class="sign top240">
              <img src="images/down.png" />
              <h3>Slide Down</h3>
            </div>
            <div class="sign top170R">
              <img src="images/right.jpg" />
              <h3>Slide Right</h3>
            </div>
          </div>
    </section>

Binerian bisa mendownload file gambar melalui google, disini mimin menggunakan gambar sign right, down, up dan left.

8. Selanjutnya buka file melalui browser, dan akan tampil seperti gambar. Disini kita sudah berhasil membuat struktur htmlnya. Selanjutnya kita akan menambahkan javascript dan css untuk membuat website lebih menarik dan interaktif di part selanjutnya.

Leave a Reply