Membuat Animasi Split Menggunakan CSS3 Part 2

Haloo teman-teman Dumet School, di pembahasan sebelumnya pada Membuat Animasi Split Menggunakan CSS3 Part 1 kita sudah membuat struktur html untuk membuat animasi split. Dan di bagian pembahasan yang kedua ini saya akan membuat style css seperti script di bawah ini.

<style>
    
    /* Reset */

*, *:after, *:before {  
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 100%;
    padding: 0;
    margin: 0;
}

body {
     font-family: 'Roboto Condensed', sans-serif;
    color: #fff;
    background: #333;
}

a {
    color: #ccc;
    text-decoration: none;
}

a:hover {
    color: #000;
}

/* /Reset */

html, body,
.container {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    
     overflow: hidden;
}

.splitlayout {
    position: relative;
    overflow-x: hidden;
    min-height: 100%;
    width: 100%;
}

/* Intro sides */
.side {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 50%;
    height: 100%;
    text-align: center;
    -webkit-backface-visibility: hidden;
}

.open-left .side,
.open-right .side {
    cursor: default;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 499;
    visibility: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.side-left .overlay {
    background: rgba(0,0,0,0.7);
}

.side-right .overlay {
    background: rgba(0,0,0,0.3);
}

.side-left {
    left: 0;
    background: #f4c150;
    color: #fff;
    outline: 1px solid #47a3da; /* avoid gap */
}

.side-right {
    right: 0;
    background: #fff;
    color: #47a3da;
    outline: 1px solid #fff; /* avoid gap */
}

/* Intro content, profile image and name, back button */
.intro-content {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 1em;
    width: 50%;
    cursor: pointer;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.profile {
    margin: 0 auto;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #47a3da;
    
}

.profile img {
    max-width: 100%;
    border-radius: 50%;
 
 
        
}

.intro-content h1 > span {
    display: block;
    white-space: nowrap;
}

.intro-content h1 > span:first-child {
    font-weight: bold;
    font-size: 1em;
}

.intro-content h1 > span:nth-child(2) {
    position: relative;
    margin-top: 0.5em;
    padding: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
}

.intro-content h1 > span:nth-child(2):before {
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #fff;
    content: '';
}

.side-right .intro-content h1 > span:nth-child(2):before {
    background: #47a3da;
}

.back {
    position: fixed;
    top: 2.6em;
    z-index: 500;
    display: block;
    visibility: hidden;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #47a3da;
    text-align: center;
    font-size: 22px;
    line-height: 44px;
    opacity: 0;
    pointer-events: none;
}

.mobile-layout .back {
    position: absolute;
}

.back-left {
    left: 12.5%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.back-right {
    right: 12.5%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    color: #fff;
}

.open-right .back-left,
.open-left .back-right {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    pointer-events: auto;
}

.back:hover {
    color: #ddd;
}

/* Pages */
.page {
    position: relative;
    top: 0;
    overflow: auto;
    min-height: 100%;
    width: 75%;
    height: auto;
    font-size: 1.4em;
    -webkit-backface-visibility: hidden;
}

.page-right {
    left: 25%;
    outline: 5px solid #ecf0f1;
    background: #ecf0f1;
    color: #97a8b2;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.splitlayout.open-right {
    background: #ecf0f1;
}

.page-left {
    left: 0;
    outline: 5px solid #34495e;
    background: #34495e;
    color: #fff;
    text-align: right;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.splitlayout.open-left {
    background: #34495e;
}

/* Inner page content */
.page-inner {
    padding: 2em;
}

.page-inner section {
    padding-bottom: 1em;
}

.page-inner h2 {
    margin: 0 0 1em 0;
    font-weight: bold;
    font-size: 1.6em;
}

.page-inner p {
    font-weight: 300;
    font-size: 1em;
    text-align: right;
}

/* All transitions */
.side,
.page {
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
}

.overlay {
    -webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
    transition: opacity 0.6s, visibility 0.1s 0.6s;
}

.intro-content {
    -webkit-transition: -webkit-transform 0.6s, top 0.6s;
    transition: transform 0.6s, top 0.6s;
}

.intro-content h1,
.back {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

/* Open and close */

.reset-layout .page,
.splitlayout.open-right .page-left,
.splitlayout.open-left .page-right,
.splitlayout.close-right .page-left,
.splitlayout.close-left .page-right {
    position: absolute;
    overflow: hidden;
    height: 100%;
}

.splitlayout.open-right .page-right,
.splitlayout.open-left .page-left {
    position: relative;
    overflow: auto;
    height: auto;
}

.open-right .side-left .overlay,
.open-left .side-right .overlay {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

/* Right side open */
.open-right .side-left {
    -webkit-transform: translateX(-60%);
    transform: translateX(-60%);
}

.open-right .side-right {
    z-index: 200;
    -webkit-transform: translateX(-150%);
    transform: translateX(-150%);
}

.close-right .side-right {
    z-index: 200;
}

.open-right .side-right .intro-content {
    -webkit-transform: translateY(-50%) translateX(0%) scale(0.6);
    transform: translateY(-50%) translateX(0%) scale(0.6);
}

.open-right .page-right {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

/* Left side open */
.open-left .side-right {
    -webkit-transform: translateX(60%);
    transform: translateX(60%);
}

.open-left .side-left {
    z-index: 200;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
}

.close-left .side-left {
    z-index: 200;
}

.open-left .side-left .intro-content {
    -webkit-transform: translateY(-50%) translateX(-100%) scale(0.6);
    transform: translateY(-50%) translateX(-100%) scale(0.6);
}

.open-left .codropsheader {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
    transition: opacity 0.3s, visibility 0.1s 0.3s;
}

.open-left .page-left {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

/* Media Queries */
@media screen and (max-width: 83em) {
    .intro-content { font-size: 60%; }
}

@media screen and (max-width: 58em) {
    body { font-size: 90%; }
}

@media screen and (max-width: 49.4375em) {
    .open-right .side-right {
        -webkit-transform: translateX(-175%);
        transform: translateX(-175%);
    }

    .open-right .side-left {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .open-left .side-right {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .open-left .side-left {
        -webkit-transform: translateX(175%);
        transform: translateX(175%);
    }

    .page {
        width: 100%;
    }

    .page-right {
        left: 0;
        padding-left: 15%;
    }

    .page-left {
        padding-right: 15%;
    }

    .intro-content {
        width: 100%;
    }

    .open-right .side-right .intro-content {
        top: 100%;
        -webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5);
        transform: translateY(-150px) translateX(-12.5%) scale(0.5);
    }

    .open-left .side-left .intro-content {
        top: 100%;
        -webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5);
        transform: translateY(-150px) translateX(-87.5%) scale(0.5);
    }

    .open-right .intro-content h1,
    .open-left .intro-content h1 {
        opacity: 0;
    }

    .back-left {
        left: 6.25%;
    }

    .back-right {
        right: 6.25%;
    }
}

@media screen and (max-width: 42.5em) {
    body { font-size: 80%; }
    .intro-content { font-size: 50%; }
}

@media screen and (max-height: 41.125em) {
    .intro-content {
        -webkit-transform: translateY(-25%) translateX(-50%);
        transform: translateY(-25%) translateX(-50%);
    }
}

@media screen and (max-width: 39.375em) {
    .intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5); }
}

@media screen and (max-width: 320px) {
    body { font-size: 70%; }
}
    
    
</style>

Jika sudah maka tahap selanjutnya teman-teman bisa membuat script jquery untuk membuat animasi split seperti berikut.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".side-left .intro-content").click(function(){
        $(".splitlayout").addClass("open-left");
        $(".splitlayout").removeClass("close-right reset-layout");
    });

    $(".back-right").click(function(){
        $(".splitlayout").removeClass("open-left");
        $(".splitlayout").addClass("close-left reset-layout");
    });

    $(".side-right .intro-content").click(function(){
        $(".splitlayout").addClass("open-right");
        $(".splitlayout").removeClass("close-left reset-layout");
    });

    $(".back-left").click(function(){
        $(".splitlayout").removeClass("open-right");
        $(".splitlayout").addClass("close-right reset-layout");
    });
});
</script>

Jika teman-teman buka di halaman browser maka tampilannya akan seperti pada gambar di bawah ini.

Membuat Animasi Split Menggunakan CSS3

Demikian artikel tentang cara Membuat Animasi Split Menggunakan CSS3. Semoga dapat bermanfaat dan selamat mencoba.

7 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat