Membuat website dengan halaman sliding

Sebelumnya membuat website dengan menu sliding, kali ini halamannya yang sliding, masih tetap hanya menggunakan html dan css saja.

Walaupun nampak sederhana, namun template ini sangat responsive dan menarik, sangat cocok buat bahan belajar script html dan css.


Tambahkan beberapa element atau menu lainya, serta sesuaikan warna dan jenis hurufnya, pasti akan lebih indah lagi di lihatnya.

Kita lihat scriptnya dibawah

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>Membuat website dengan halaman sliding</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
	
<!-- begin CSS code -->

<style>
body {
  font-family: sans-serif;
  font-size: 1.0em;
  text-align: center;
  min-height: 100%;
}
#main {
  perspective: 1px;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}
.navlinks {
  top: 5px;
  left: -25px;
  position: fixed;
  z-index: 10;
}
.navlinks a {
  color: white !important;
  text-decoration: none !important;
  font-size: 12px;
  font-family: verdana;
  background: black !important;
  padding: 5px;
  border: solid 1px white;
}
.navlinks a:hover {
  color: yellow !important;
  border: solid 1px yellow;
}
#mynav {
  list-style: none;
}
#mynav li {
  float: left;
  margin-right: 5px;
}
a[id="nav0"]:target ~ #main div.parallax-layer {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}
a[id="nav1"]:target ~ #main div.parallax-layer {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

a[id="nav2"]:target ~ #main div.parallax-layer {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
}
a[id="nav3"]:target ~ #main div.parallax-layer {
  -webkit-transform: translateY(-300%);
  transform: translateY(-300%);
}
.parallax-layer {
  z-index: 0;
  width: 100%;
  height: 100vh;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 2s ease-in-out;
  transition: transform 2s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.parallax-layer p {
  font-family: sans-serif;
  font-size: 2.0em;
  position: absolute;
  width: 100%;
  height: auto;
  top: 45%;
  margin: 0;
}
#slide01 {
  background-color: whitesmoke;
  color: #000;
}
#slide02 {
  background-color: green;
  color: #fff;
}
#slide03 {
  background-color: blue;
  color: #fff;
}
#slide04 {
  background-color: navy;
  color: #fff;
}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<a id="nav0"></a> <a id="nav1"></a> <a id="nav2"></a> <a id="nav3"></a>
<section id="main">
  <div class="parallax-layer" id="slide01">
    <p>Membuat website dengan halaman sliding</p>
    <div class="navlinks">
      <ul id="mynav">
        <li><a href="#nav0">MENU 1</a></li>
        <li><a href="#nav1">MENU 2</a></li>
        <li><a href="#nav2">MENU 3</a></li>
        <li><a href="#nav3">MENU 4</a></li>
      </ul>
    </div>
  </div>
  <div class="parallax-layer" id="slide02">
    <p>Menu Halaman 2</p>
    <div class="navlinks">
      <ul id="mynav">
        <li><a href="#nav0">MENU 1</a></li>
        <li><a href="#nav1">MENU 2</a></li>
        <li><a href="#nav2">MENU 3</a></li>
        <li><a href="#nav3">MENU 4</a></li>
      </ul>
    </div>
  </div>
  <div class="parallax-layer" id="slide03">
    <p>Menu Halaman 3</p>
    <div class="navlinks">
      <ul id="mynav">
        <li><a href="#nav0">MENU 1</a></li>
        <li><a href="#nav1">MENU 2</a></li>
        <li><a href="#nav2">MENU 3</a></li>
        <li><a href="#nav3">MENU 4</a></li>
      </ul>
    </div>
  </div>
  <div class="parallax-layer" id="slide04">
    <p>Menu Halaman 4</p>
    <div class="navlinks">
      <ul id="mynav">
        <li><a href="#nav0">MENU 1</a></li>
        <li><a href="#nav1">MENU 2</a></li>
        <li><a href="#nav2">MENU 3</a></li>
        <li><a href="#nav3">MENU 4</a></li>
      </ul>
    </div>
  </div>
</section>

<!-- End of body content -->

</body>
</html>

Cukup lumayan panjang script diatas, dan sangat menarik untuk di pelajari bukan ?

Anda di perbolehkan mengedit dan menyalin ulang script diatas sebagai bahan untuk belajar dan latihan koding.

Untuk melihat dan edit online, silahkan Anda gunakan halaman Realtime HTML Editor ↗ , script akan otomatis di buka dihalaman tersebut.

Sampai disini dulu pembahasan tentang Membuat website dengan halaman sliding, selamat belajar dan semoga sukses selalu buat Anda semua.

Mungkin Anda Menyukai