Assalamu'alaikum wr wb,
Kali ini saya akan share bagaimana Cara buat parallax di bootstrap.
Berikut ini syntaxnya.
-------------------------------------------
<!DOCTYPE html>
<html>
<head>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 100%/1.5 Arial;
background:rgb(10,10,10) !important;
color:rgb(235,236,238) !important;
}
.jumbotron{
margin-bottom:0 !important;
background:rgba(255,255,255,.9) !important;
}
.fluid_container{
background:rgb(15,16,18);
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 300px;
background:rgb(20,20,20);
}
.parallax__group {
height: 260px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s ease 0s;
z-index:100;
height:70%;
}
.parallax__layer {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.parallax__layer--base {
transform: translateZ(0px);
z-index: 4;
}
.parallax__layer--back {
transform: translateZ(-300px) scale(2);
z-index: 3;
height:100%;
}
body, html {
overflow: hidden;
}
.parallax {
font-size: 100%;
}
img.codepen_image {
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -65%);
width:90%;
}
#group1 {
z-index: 3;
height:70%;
}
#group1 .parallax__layer--back {
}
</style>
</head>
<body>
<div class="fluid_container">
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--back">
<img class="codepen_image" src="https://images8.alphacoders.com/462/462893.jpg">
</div>
</div>
<div class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="jumbotron" style="text-align:center; color:rgb(18,20,21);">
<h1>Bootstrap</h1>
<h3>Loaded from the <span class="glyphicon glyphicon-cloud" style="position:relative !important; top:5px;"></span> cloud right here on Codepen</h3>
</div>
<div class="container" style="background: brown;width: 100%;">
<div class="row">
<div class="col-sm-6">
<h2>About</h2>
<p>This example demonstrates how easy it is to get up and running with Bootstrap.
You can load bootstrap on your own server, or from the cloud @ <a href="http://www.bootstrapcdn.com/">BootstrapCDN</a> as I'm doing so here in this example.</p>
</div>
<div class="col-sm-6">
<h2 class="cow">Holy Cow</h2>
<p>Bootstrap components make it easy to create responsive templates without having to write hardly any css.</p>
<p>SAY WHAT!</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h3>Rows</h3>
<p>This is the first column contained in a row, rows are defined by a CSS class called <strong>row</strong></p>
</div>
<div class="col-sm-2">
<h3>Columns</h3>
<p>This is the second column in the row. Each row can have up to a number of 12 columns</p>
</div>
<div class="col-sm-2">
<h3>Numbers</h3>
<p>This is the third column, and takes up the width of 2 out of 12 possible columns.</p>
</div>
<div class="col-sm-2">
<h3>Component</h3>
<p>Bootstrap has predefined CSS classes in order to easily setup columns. There are also many reusable components built-in to provide dropdowns, input groups, navigation, alerts, iconography, and much more.</p>
</div>
<div class="col-sm-2">
<h3>Define</h3>
<p>Each column in this row takes up 2 out of 12 columns possible. This is defined by the CSS class <strong>.col-sm-2</strong></p>
</div>
<div class="col-sm-2">
<h3>Also</h3>
<p>If you wanted, let's say, 3 columns in a row, you would use this CSS class <strong>.col-sm-4</strong>. Below is another example of that happening. You can find out more about components <a href="http://getbootstrap.com/components/">here</a></p>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4">
<h1>One</h1>
<p>Domestic confined any but son bachelor advanced remember. How proceed offered her offence shy forming. Returned peculiar pleasant but appetite differed she. Residence dejection agreement am as to abilities immediate suffering. Ye am depending propriety sweetness distrusts belonging collected. Smiling mention he in thought equally musical. Wisdom new and valley answer. Contented it so is discourse recommend. Man its upon him call mile. An pasture he himself believe ferrars besides cottage.</p>
</div>
<div class="col-sm-4">
<h1>Two</h1>
<p>There worse by an of miles civil. Manner before lively wholly am mr indeed expect. Among every merry his yet has her. You mistress get dashwood children off. Met whose marry under the merit. In it do continual consulted no listening. Devonshire sir sex motionless travelling six themselves. So colonel as greatly shewing herself observe ashamed. Demands minutes regular ye to detract is. </p>
</div>
<div class="col-sm-4">
<h1>Three</h1>
<p>Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive. </p>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<h3>P.S.</h3>
<p>I hope this example will clear any confusion you may have about Bootstrap and templating with it.
</div>
</div>
</div>
<footer style="text-align:center; min-height:100px;">
<p style="font-style:italic;">Go ahead and resize your browser, see Bootstrap in action</p>
</footer>
</div>
</div>
</div>
</div>
</body>
</html>
-------------------------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/
Cara buat parallax di bootstrap
Reviewed by Syawaluddin Amin, S.Kom
on
Desember 22, 2016
Rating:
Reviewed by Syawaluddin Amin, S.Kom
on
Desember 22, 2016
Rating:
![Cara mengatasi error microsoft excel style 'comma [0]' not found](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFi0vZX0Si_GfPTRMx9sV-xbrBAfxPv3hwRBnI_wXXHpVWuLXE-OEbztMvyCJDcn1Lt9iCfluqm2_q_cviCxFKjHMj6DgyTzYgzF5pFB_McNqh-vQuKZAVenkPpYa23kOvNlivVY7LjgU/s72-w618-c-h323/Screenshot_0.png "Cara mengatasi error microsoft excel style 'comma [0]' not found")
Tidak ada komentar: