Membuat laman berlangganan dalam tampilan 3 Dimensi

Membuat laman berlangganan dalam tampilan 3 Dimensi

  06 January    Andika

---

Ini adalah contoh tampilan sederhana yang bisa di terapkan pada tombol atau laman berlangganan (Subscribe). Sesuai dengan namanya 3D, efek yang di hadirkan segaja di bentuk sedemikian rupa agar kesan 3Dnya lebih berasa. Dalam hal ini tentu Jquery akan sangat berperan dan tentu saja sokongan dari ikon yang membuat tampilannya semakin lengkap.

Pada demo yang tersedia, kamu tidak harus mengisikan alamai email, cukup klik ikon panah kanan dan nanti akan ada animasi yang muncul. Nanti jika telah sampai di bagian akhir, kamu dapat mengklik ikon refresh untuk kembali ke tampilan semula.

Berikut Demonya,




Sebelum menggunakan, pastikan kamu telah menggunakan Font Awesome sebelumnya.

Langsung saja,

Jquery

Jika kamu telah menggunakan Jquery pada template, langkah ini dapat dilewati.

<script src='http://code.jquery.com/jquery-1.11.2.min.js' type='text/javascript'>

Script

$("#email").focus(function(){
    $("#kubus form").addClass("ready");
})
$("#email").blur(function(){
    if($(this).val() == "")
        $("#kubus form").removeClass("ready");
})
$("#email").keyup(function(){
    $(".submit-icon").toggleClass("active", $(this).val().length > 0);
})
$("#kubus form").submit(function(){
    $(this).removeClass("ready").addClass("loading");
    setTimeout(complete, 3000);
    return false;
})
function complete()
{
    $("#kubus form").removeClass("loading").addClass("complete");
}
$(".reset-icon").click(function(){
    $("#kubus form").removeClass("complete");
})

CSS

Inilah kode CSSnya.

body {
    background:hsl(120,40%,60%);
    padding-top:150px;
    font:normal 18px Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
    color:white;
    text-align:center;
}
.ax-cube {
    font-size:180px;
}
h1 {
    font-weight:normal;
    font-size:36px;
    margin-bottom:75px;
}

.fun-cube i {
    transform:scale(10);
    opacity:0.6;
}

#kubus {
    width:400px;
    margin:0 auto;
    perspective:1000px;
}

#kubus form {
    transform:translateZ(-20px);
    transform-style:preserve-3d;
    height:40px;
    transition:all 0.35s;
}

.kubus-text {
    line-height:40px;
    height:40px;
    background:hsl(120,40%,20%);
}

.loader {
    background:hsl(120,40%,30%);
    animation:phase 1s infinite;
}

@keyframes phase {
    50% {
      background:hsl(120,70%,30%);
  }
}

#email {
    background:white;
    outline:none;
    border:0 none;
    font:inherit;
    text-align:left;
    color:hsl(120,40%,30%);
    display:block;
    width:100%;
    padding:0 10px;
    box-sizing:border-box;
}

#submit {
    display:none;
}

.submit-icon,
.reset-icon {
    position:absolute;
    top:0;
    right:0;
    color:rgba(0,0,0,0.25);
    line-height:40px;
    padding:12px 10px;
    transition:all 0.5s;
    cursor:pointer;
}

.submit-icon.active {
    color:hsl(120,40%,30%);
}

.reset-icon {
    color:rgba(255,255,255,0.25);
    font-size:14px;
}

#kubus div {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

#kubus div:nth-child(1) {
    transform:rotateX(0deg) translateZ(20px);
}

#kubus div:nth-child(2) {
    transform:rotateX(-90deg) translateZ(20px);
}

#kubus div:nth-child(3) {
    transform:rotateX(-180deg) translateZ(20px);
}

#kubus div:nth-child(4) {
    transform:rotateX(-270deg) translateZ(20px);
}

#kubus form:hover,
#kubus form.ready {
    transform:translateZ(-20px) rotateX(90deg);
}

#kubus form.loading {
    transform:translateZ(-20px) rotateX(180deg);
}

#kubus form.complete {
    transform:translateZ(-20px) rotateX(270deg);
}

HTML

<div class="fun-cube"><i class="fa fa-cube"></i></div>
<h1>Single input 3D form</h1>
<div id="kubus">
    <form>
        <div>
            <p class="kubus-text">Subscribe</p>
        </div>
        <div>
            <label for="submit" class="submit-icon">
                <i class="fa fa-chevron-right"></i>
            </label>
            <input type="text" id="email" class="kubus-text" placeholder="Your Email" autocomplete="off"/>
            <input type="submit" id="submit" />
        </div>
        <div>
            <p class="kubus-text loader">Just a moment</p>
        </div>
        <div>
            <span class="reset-icon"><i class="fa fa-refresh"></i></span>
            <p class="kubus-text">Thankyou, we'll be in touch</p>
        </div>
    </form>
</div>

Silahkan modifikasi sesuai selera!!

Hasilnya sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!