Source Code Parallax Scrolling CSS & HTML - Hallo sahabat Sijunjung Xcoder, Pada Artikel yang anda baca kali ini dengan judul Source Code Parallax Scrolling CSS & HTML , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel Programming, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Source Code Parallax Scrolling CSS & HTML
link : Source Code Parallax Scrolling CSS & HTML
Bagi pecinta pemrograman web, pasti tau yang namanya Parallax Scrolling. Masih belum tau ?
coba buka website ini : http://porschevolution.com/
udah ? keren kan ?
tapi kita gak akan buat langsung kayak gitu. Kalau mau yang seperti itu ya tinggal copas aja source codenya.
Tapi disini saya gak kasi source code yang langsung seperti pada website tersebut, saya akan berikan source code dasar2 pembuatan Parallax Scrolling.
Parralax Scrolling ini sebenarnya dapat dibuat dengan CSS. okay langsung aja nih source codenya
Untuk anda yang ingin belajar step by step membuat Parallax Scrolling ini, mohon maaf saya belum menyediakan tutorialnya, mungkin lain kali. Tapi sebenarnya jika anda sudah mengerti HTML & CSS anda cukup belajar dari source code diatas saja.
Terimakasih, Semoga Bermanfaat
Anda sekarang membaca artikel Source Code Parallax Scrolling CSS & HTML dengan alamat link https://sijunjung-xcoder.blogspot.com/2016/08/source-code-parallax-scrolling-css-html.html
Judul : Source Code Parallax Scrolling CSS & HTML
link : Source Code Parallax Scrolling CSS & HTML
Source Code Parallax Scrolling CSS & HTML
coba buka website ini : http://porschevolution.com/
udah ? keren kan ?
tapi kita gak akan buat langsung kayak gitu. Kalau mau yang seperti itu ya tinggal copas aja source codenya.
Tapi disini saya gak kasi source code yang langsung seperti pada website tersebut, saya akan berikan source code dasar2 pembuatan Parallax Scrolling.
Parralax Scrolling ini sebenarnya dapat dibuat dengan CSS. okay langsung aja nih source codenya
<!doctype html>Silahkan dicopy sendiri codenya ke notepad lalu save dengan ekstensi .html lalu buka di browser.
<html>
<head>
<meta charset="utf-8">
<title>Parallax</title>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("http://lorempixel.com/640/480/abstract/6/");
background-attachment: fixed;
}
#slide1:before {
background-image: url("http://lorempixel.com/640/480/abstract/4/");
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2 {
background-image: url("http://lorempixel.com/640/480/abstract/3/");
background-attachment: fixed;
}
#slide3:before {
background-image: url("http://lorempixel.com/640/480/abstract/5/");
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide4 {
background: #222;
}
</style>
</head>
<body>
<div id="title" class="slide header">
<h1>Pure CSS Parallax</h1>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
<img src="http://lorempixel.com/640/480/abstract/6/">
<img src="http://lorempixel.com/640/480/abstract/4/">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
</body>
</html>
Untuk anda yang ingin belajar step by step membuat Parallax Scrolling ini, mohon maaf saya belum menyediakan tutorialnya, mungkin lain kali. Tapi sebenarnya jika anda sudah mengerti HTML & CSS anda cukup belajar dari source code diatas saja.
Terimakasih, Semoga Bermanfaat
Demikianlah Artikel Source Code Parallax Scrolling CSS & HTML
Sekianlah artikel Source Code Parallax Scrolling CSS & HTML kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Source Code Parallax Scrolling CSS & HTML dengan alamat link https://sijunjung-xcoder.blogspot.com/2016/08/source-code-parallax-scrolling-css-html.html
