Halo Sobat Koding pada artikel kali ini KonsepKoding akan membuat tutorial mengenai cara membuat Parallax Effect hanya dengan pure CSS tanpa Javascript, jadi full animasinya dari CSS saja. 

Tutorial Membuat Parallax Effect Dengan CSS Dan HTML
Tutorial Membuat Parallax Effect Dengan CSS Dan HTML


Oke laangsung saja buat sebuah file baru dengan nama index.html kemduian ketikan kode di bawah ini :


<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>CSS-Only Parallax Effect</title>

  <meta charset="utf-8" />

<meta content="#fafafa" name="theme-color" />

<meta content="IE=edge" http-equiv="X-UA-Compatible" />

<meta name="author" content="Yago Estévez" />

<meta name="description" content="CSS-Only Parallax Effect by Yago Estévez" />

<meta name="keywords" content="parallax, css, effect, perspective, web, design, dev" />

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<title>CSS-Only Parallax Effect by Yago Estévez</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<link rel="stylesheet" href="./style.css">


</head>

<body>

<!-- partial:index.partial.html -->

<header>

  <h1>CSS-Only Parallax Effect</h1>

</header>

<section class="section1">

  <h1>Section w/o parallax effect</h1>

</section>

<section class="section2">

  <h1>Section w/ parallax effect</h1>

</section>

  

</body>

</html>



Kemudian buat sebuah file di folder yang sama dengan nama style.css lalu ketikan kode di bawah ini :

/*************************************************************
  HEADER
**************************************************************/
header {
  position: relative;
  min-height: 100vh;
  width: 100%;
  transform-style: inherit;
  z-index: -1;
}

header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: block;
  background: url(https://picsum.photos/g/1921/1081?random) top center;
  background-size: cover;
  transform: translateZ(-1px) scale(2.1);
  min-height: 100%;
  z-index: -2;
}


/*************************************************************
  SECTIONS
**************************************************************/
section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  position: relative;
  transform-style: inherit;
}

.section1 {
  background: #fafafa;
  box-shadow: 0 0 20px #333;
  z-index: 1;
}

.section2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: block;
  background: url(https://picsum.photos/g/1920/1080?random) top center;
  background-size: cover;
  transform: translateZ(-.5px) scale(1.6);
  z-index: -1;
}

/*************************************************************
  HEADINGS
**************************************************************/
h1 {
  font-size: 4rem;
  text-align: center;
  position: absolute;
  padding: 1rem;
  background: #fafafa;
  box-shadow: 0 0 20px #333;
  top: 50%;
  left: 50%;
  transform: translateZ(-1px) scale(2) translate(-25%, -25%);
}

.section1 h1 {
  z-index: 3;
  transform: translate(-50%, -50%);
  box-shadow: none;
}

.section2 h1 {
  transform: translateZ(-.3px) scale(1.3) translate(-39%, -39%);
  z-index: 3;
}

/*************************************************************
  BASIC STYLES
**************************************************************/
*,
*::before,
*::after,
:root {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@import 'https://fonts.googleapis.com/css?family=Overlock:400,400i,700|Oleo+Script';

html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  perspective: 1px;
  transform-style: preserve-3d;
  font-size: 62.5%;
  font-family: 'Overlock', Arial, Helvetica, sans-serif;
}

.author {
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
  padding: .5rem 1rem;
  background: #fafafa;
  border-bottom-left-radius: 5px;
  transition: 300ms;
}

.author a,
.author a:visited {
  color: #333;
  text-decoration: none;
  display: block;
  transition: 300ms;
}

.author:hover,
.author:active {
  box-shadow: 0 0 10px #33333350;
}

Lalu ketika di run di browser hasilnya akan seperti gambar di bawah ini :