Membuat Website Interaktif Menggunakan Velocity Js Part II

Selanjutnya, pada blog ini akan di tambahkan file css dan javascript

CSS

Fungsi file style.css ini adalah untuk memberikan tampilan yang menarik pada website yang telah dibuat.

  1. Buat file dengan nama style.css simpan di dalam folder coba-velocity>css.
  2. Kemudian tuliskan source code berikut ini.
*{
    outline: none;
}
html, body{
    background: #94bde4;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    height: 100%;
    font-family: "Open sans";
}

#intro #text {
    font-size: 70px;
    font-weight: 800;
    width: 10.2em;
    height: 1.5em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#intro #text2 {
    font-size: 20px;
    font-weight: 500;
    width: 10.2em;
    height: 1.5em;
    position: absolute;
    left: 15%;
    top: 5%;
    transform: translate(-50%, -50%);
}

#intro #intro-button {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
}

#intro #intro-button #start {
    font-size: 15px;
    background: none;
    border: 2px solid black;
    border-radius: 5px;
    font-weight: bold;
    width: 125px;
    height: 40px;
    display: none;
    cursor: pointer;
}

#menu {
    position: absolute;
    right: 20px;
    top: 10px;
}

#menu ul {
    list-style: none;
}

#menu ul li {
    margin: 5px 0px;
    text-align: right;
    display: none;
}

#menu ul li a {
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    color: black;
}

#menu ul li a:hover {
    border-left: 3px solid black;
    padding-left:5px;
}
#menu ul li.active a {
    border-bottom: 3px solid black;
}

#menu ul li.active a:hover {
    border-left: none;
}
.container-content{
    display: none;
}

#velo img{
    margin: 180px 0px 0px 60px;
    border: 10px solid #f1f1f1;
    border-radius: 3px;
    width: 400px;
}

h3.title{
    position: absolute;
    top: -20px;
    left: 520px;
    font-size: 80px;
    text-transform: uppercase;
}
#velo div{
    width: 650px;
    position: absolute;
    top: 160px;
    left: 530px;
}

#demo {
    margin-left: 70px;
}
#demo .sign {
    float: left;
    margin: 0px 10px;
    background: rgb(243, 232, 232);
    padding: 5px 5px 15px 5px;
    border-radius: 3px;
}

#demo .sign.top240{
    margin-top: 250px; 
}
#demo .sign.top240L{
    margin-top: 250px; 
}
#demo .sign.top170{
    margin-top: 170px;
}
#demo .sign.top170R{
    margin-top: 170px;
}

#demo .sign img {
    width: 230px;
}

#demo .sign h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 5px 0px 2px 0px;
}

#demo .sign span {
    font-size: 12px;
    font-style: italic;
}



JS

Fungsi file script.js disini untuk membuat tampilan website yang lebih interaktif.

  1. Buat file dengan nama script.js kemudian simpan di dalam folder coba-velocity>js.
  2. Kemudian tuliskan source code berikut ini.
function animasiIntro(){
    $("#text span").velocity("transition.slideLeftIn", {
        stagger: 100,
        complete: function(){
            animasiButtonStart();
        }
    });
}
function animasiButtonStart(){
    $("#start").velocity("transition.bounceUpIn")
    .mouseenter(function(){
        $(this).velocity({width:100});
    })
    .mouseleave(function(){
        $(this).velocity({width:125});
    });
}
function animasiIntroOut(){
    $("#start").attr("disabled", true).css({"color":"black"});
    $("#start").velocity("transition.whirlOut", {
        stagger: 150,
        complete: function(){
            // animasiButtonStart()
            $("#text2").hide();
            $("#text").velocity({"font-size":"20px",
                                    "top":"95%"}, {
                                duration:1000,
                                complete: function(){
                                        callMenu();
                                        $("#menu ul li a[href='velo']").trigger("click");
                                        $("#start").attr('disabled', false);
                                    }
                                });
        }
    });
}
function callMenu(){
    $("#menu ul li").velocity("transition.slideLeftIn", {
        stagger: 250
    });

    $("#menu ul li a").off("click").click(function(event){
        event.preventDefault();
        $(this).parent("li").addClass("active").siblings().removeClass("active");

        var hrefString = $(this).attr("href");

        if(hrefString == "back_to_intro"){
            backToIntro();
        }else{      
            if (!$("#" + hrefString).is(":visible")) {
                $(".container-content").fadeOut(1000);
                setTimeout(function(){ 
                    $("#" + hrefString).show();
                    window[hrefString]();
                }, 1000);           
            }
        }
    });
}

function velo(){
    $("#velo img").velocity("transition.flipYIn", {duration:1000});
    $("#velo .title").velocity("transition.slideUpIn", {duration:1000});
    $("#velo div").velocity("transition.slideDownIn", {duration:1000});

}
function demo(){
    $(".sign.top240").velocity("transition.slideUpBigIn", {stagger:1000});
    $(".sign.top240L").velocity("transition.slideLeftBigIn", {stagger:1000});
    $(".sign.top170").velocity("transition.slideDownBigIn", {stagger:1000});
    $(".sign.top170R").velocity("transition.slideRightBigIn", {stagger:1000});
}
function backToIntro(){
    $("#menu ul li").fadeOut();
    $(".container-content").fadeOut();
    
    $("#text2").velocity("transition.whirlIn", {"top":"10%"});
    $("#text").velocity({"font-size":"70px",
                            "top":"50%"},{
                                duration:1000,
                                complete:function(){
                                    $("#start").velocity("transition.whirlIn");

                                }
                            });

}

$(document).ready(function(){
    animasiIntro();
    // demo();

Untuk mendownload seluruh file silahkan cek disini . Selamat mencoba binerian 😀

Buat binerian yang belum paham, atau mau nanya silahkan comment di bawah ini, jangan lupa share :D, karena berbagi itu indah hehehe

Leave a Reply