Source Code Parallax Scrolling Css & Html
coba buka website ini : http://porschevolution.com/
udah ? keren kan ?
tapi kita gak akan buat eksklusif kayak gitu. Kalau mau yang menyerupai itu ya tinggal copas aja source codenya.
Tapi disini aku gak kasi source code yang eksklusif menyerupai pada website tersebut, aku akan berikan source code dasar2 pembuatan Parallax Scrolling.
Parralax Scrolling ini sesungguhnya sanggup dibentuk dengan CSS. okay eksklusif aja nih source codenya
<!doctype html>Silahkan dicopy sendiri codenya ke notepad kemudian save dengan ekstensi .html kemudian 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("aciknadzirah.blogspot.com/search?q=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>
<>
Untuk anda yang ingin berguru step by step menciptakan Parallax Scrolling ini, mohon maaf aku belum menyediakan tutorialnya, mungkin lain kali. Tapi sesungguhnya kalau anda sudah mengerti HTML & CSS anda cukup berguru dari source code diatas saja.
Terimakasih, Semoga Bermanfaat Sumber http://komputer67.blogspot.com
0 Response to "Source Code Parallax Scrolling Css & Html"
Posting Komentar