Membuat Animasi Split Menggunakan CSS3 Part 1

Haloo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Animasi Split Menggunakan CSS3. Langkah pertama teman-teman siapkan struktur html seperti script di bawah ini.

<div class="container">
    <div id="splitlayout" class="splitlayout">
        <div class="intro">
            <div class="side side-left">                        
                <div class="intro-content">
                    <div class="profile"><img src="img2.png" alt="profile1"></div>
                </div>
                <div class="overlay"></div>
            </div>
            <div class="side side-right">
                <div class="intro-content">
                    <div class="profile"><img src="img1.jpg" alt="profile2"></div>
                </div>
                <div class="overlay"></div>
            </div>
        </div><!-- /intro -->
        <div class="page page-right">
            <div class="page-inner">
                <section>
                    <h2>SQL</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ad quis distinctio quae. Possimus ab impedit illo! Sunt impedit assumenda id! Ullam distinctio, neque earum quos in deleniti temporibus architecto!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ad quis distinctio quae. Possimus ab impedit illo! Sunt impedit assumenda id! Ullam distinctio, neque earum quos in deleniti temporibus architecto!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ad quis distinctio quae. Possimus ab impedit illo! Sunt impedit assumenda id! Ullam distinctio, neque earum quos in deleniti temporibus architecto!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ad quis distinctio quae. Possimus ab impedit illo! Sunt impedit assumenda id! Ullam distinctio, neque earum quos in deleniti temporibus architecto!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ad quis distinctio quae. Possimus ab impedit illo! Sunt impedit assumenda id! Ullam distinctio, neque earum quos in deleniti temporibus architecto!</p>
                </section>                        
            </div><!-- /page-inner -->
        </div><!-- /page-right -->
        <div class="page page-left">
            <div class="page-inner">
                <section>
                    <h2>PHP</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis nesciunt recusandae nihil numquam quos impedit, earum voluptatibus laboriosam necessitatibus nobis tenetur hic doloribus, qui ab quo amet, aperiam nisi iste!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita impedit corrupti, explicabo labore, et error, soluta veniam optio voluptatum nesciunt ad aliquam minima excepturi saepe dolores quas vero nam quam!</p>    
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita impedit corrupti, explicabo labore, et error, soluta veniam optio voluptatum nesciunt ad aliquam minima excepturi saepe dolores quas vero nam quam!</p>    
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita impedit corrupti, explicabo labore, et error, soluta veniam optio voluptatum nesciunt ad aliquam minima excepturi saepe dolores quas vero nam quam!</p>    
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita impedit corrupti, explicabo labore, et error, soluta veniam optio voluptatum nesciunt ad aliquam minima excepturi saepe dolores quas vero nam quam!</p>    
                </section>                        
            </div><!-- /page-inner -->
        </div><!-- /page-left -->
        <a href="#" class="back back-right" title="back to intro">&rarr;</a>
        <a href="#" class="back back-left" title="back to intro">&larr;</a>
    </div><!-- /splitlayout -->
</div><!-- /container -->

Jika sudah membuat struktur html maka tahap selanjutnya kita akan membuat style css di pembahasan  selanjutnya di part 2. Demikian artikel tentang cara Membuat Animasi Split Menggunakan CSS3

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