Membuat Animasi Split Menggunakan CSS3 Part 1

07/12/2019    Shelli Ripati    93     Website

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

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More