Membuat Page Preloading Effect Website


Membuat Page Preloading Effect Website

Assalamualaikum Wr. Wb.
Malam ini saya ingin berbagi tutorial untuk membuat efek halaman preloading sangat sederhana dengan animasi CSS, SVG dan JavaScript untuk website. mungkin semacam efek preloader ini bisa menjadi cara kreatif untuk membuat menunggu sedikit kurang membosankan bagi pengunjung. yuk langsung aja simak tutorialnya dibawah ini

Pertama, copy kode css dan javascript berikut pastekan sebelum </head>

<link rel="stylesheet" type="text/css" href="http://erllang.ga/demo/assets/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://erllang.ga/demo/assets/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://erllang.ga/demo/assets/css/effect1.css" />
<script src="http://erllang.ga/demo/assets/js/modernizr.custom.js"></script>

 

Selanjutnya, copy kode berikut. pastekan tepat diatas </head>

<body class="demo-1">
        <div id="ip-container" class="ip-container">
            <!-- initial header -->
            <header class="ip-header">
                <h1 class="ip-logo">
                    <img src="http://erllang.ga/logo.png" class="ip-inner" viewBox="0 0 300 160" preserveAspectRatio="xMidYMin meet" aria-labelledby="logo_title">
                </h1>
                <div class="ip-loader">
                    <svg class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
                        <path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
                        <path id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
                    </svg>
                </div>
            </header>
            
            <!-- main content -->
            <div class="ip-main">
                <h2>Just Demo from ERLLANG.ga</h2>
                <div class="browser clearfix">
                    <div class="box">
                        <span class="icon-bell"></span>
                        <p>Do Re Mi What Fa Si Ti Doi Nemo Do Re Mi What Fa Si Ti Doi Nemo</p>
                    </div>
                    <div class="box">
                        <span class="icon-heart"></span>
                        <p>E La Yo Na Ti Do Pa Pa Noah Do Re Mi What Fa Si Ti Doi Nemo</p>
                    </div>
                    <div class="box">
                        <span class="icon-cog"></span>
                        <p>No way! Hey Hey, me ok! Do Re Mi What Fa Si Ti Doi Nemo</p>
                    </div>
                </div>
            </div>
        </div><!-- /container -->

 

Terakhir, copy kode javascript ini dan pastekan tepat diatas </body>

<script src="http://erllang.ga/demo/assets/js/classie.js"></script>
<script src="http://erllang.ga/demo/assets/js/pathLoader.js"></script>
<script src="http://erllang.ga/demo/assets/js/main.js"></script>

 

Maka akan menjadi seperti ini

Saat Loading

 

Setelah selesai loading

 

Nah, begitulah pembahasan untuk tutorial kali ini. selamat mencoba ya, semoga berhasil!
Untuk live demo nya bisa langsung diliat DISINI

Wassalamualaikum Wr. Wb.


http://short.erllang.ga/NcWuY

Suka Dengan Artikel ini? Bagikan!  
Facebook Twitter Google+ LINE WhatsApp
Komentar pada “ Membuat Page Preloading Effect Website