tutorial pengembangan web terbaru
 

Bootstrap Tema "Perusahaan"


Buat Tema: "Perusahaan"

Halaman ini akan menunjukkan cara untuk membangun tema Bootstrap dari awal.

Kami akan mulai dengan halaman HTML sederhana, dan kemudian menambahkan semakin banyak komponen, sampai kita memiliki website berfungsi penuh, pribadi dan responsif.

Hasilnya akan terlihat seperti ini, dan Anda bebas untuk mengubah, menyimpan, berbagi, menggunakan atau melakukan apapun yang Anda inginkan dengan itu:


Start Page HTML

Kami akan mulai dengan halaman HTML berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Company</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1>Company</h1>
<p>We specialize in blablabla</p>

</body>
</html>

Tambahkan Bootstrap CDN dan menambahkan Jumbotron a

Tambahkan Bootstrap CDN dan link ke jQuery dan menempatkan elemen HTML di dalam .jumbotron :

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Company</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron">
  <h1>Company</h1>
  <p>We specialize in blablabla</p>
</div>

</body>
</html>

Hasil:

Perusahaan

Kami adalah spesialis dalam blablabla

Cobalah sendiri "

Tambahkan Background Color dan Pusat Text

1. Tambahkan warna latar belakang oranye untuk jumbotron.

2. Tambahkan .text-center kelas ke pusat teks di dalam jumbotron:

Contoh

<style>
.jumbotron {
    background-color: #f4511e; /* Orange */
    color: #ffffff;
}
</style>

<body>
  <div class="jumbotron text-center">
    <h1>Company</h1>
    <p>We specialize in blablabla</p>
  </div>
</body>

Hasil:

Perusahaan

Kami adalah spesialis dalam blablabla

Cobalah sendiri "

Tambahkan Form

Tambahkan bentuk dengan field input dan tombol:

Contoh

<div class="jumbotron text-center">
  <h1>Company</h1>
  <p>We specialize in blablabla</p>
  <form class="form-inline">
    <input type="email" class="form-control" size="50" placeholder="Email Address">
    <button type="button" class="btn btn-danger">Subscribe</button>
  </form>

</div>

Hasil:

Perusahaan

Kami adalah spesialis dalam blablabla

Cobalah sendiri "

Tambahkan Kontainer

Menambahkan dua kontainer ( .container-fluid ), dan menambahkan kelas kustom untuk wadah kedua ( .bg-grey - menambahkan warna latar belakang abu-abu):

Contoh

<style>
.bg-grey {
    background-color: #f6f6f6;
}
</style>

<div class="container-fluid">
  <h2>About Company Page</h2>
  <h4>Lorem ipsum..</h4>
  <p>Lorem ipsum..</p>
  <button class="btn btn-default btn-lg">Get in Touch</button>
</div>

<div class="container-fluid bg-grey">
  <h2>Our Values</h2>
  <h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
  <p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>

Hasil:

Tentang Perusahaan PT

Lorem ipsum ..

Lorem ipsum ..

Nilai kita

MISI: Misi kami lorem ipsum ..

VISI: Visi kami Lorem ipsum ..

Cobalah sendiri "

Tambahkan Padding

Mari membuat jumbotron dan kontainer terlihat baik dengan menambahkan beberapa padding:

Contoh

<style>
.jumbotron {
    background-color: #f4511e;
    color: #fff;
    padding: 100px 25px;
}

.container-fluid {
    padding: 60px 50px;
}
</style>

Hasil:

Perusahaan

Kami adalah spesialis dalam blablabla

Tentang Perusahaan PT

Lorem ipsum ..

Lorem ipsum ..

Nilai kita

MISI: Misi kami lorem ipsum ..

VISI: Visi kami Lorem ipsum ..

Cobalah sendiri "

Tambahkan Grid

1. Tambahkan sebuah ikon (atau logo perusahaan) untuk setiap kontainer.

2. Pisahkan ikon dan "tentang teks" dengan menciptakan dua kolom ( .col-sm-8 dan .col-sm-4 )

3. Tambahkan kueri media ke pusat kolom "logo" di layar lebih kecil dari 768 pixel.

Contoh

<style>
.logo {
    font-size: 200px;
}
@media screen and (max-width: 768px) {
    .col-sm-4 {
        text-align: center;
        margin: 25px 0;
    }
}
</style>


<div class="container-fluid">
  <div class="row">
    <div class="col-sm-8">
      <h2>About Company Page</h2>
      <h4>Lorem ipsum..</h4>
      <p>Lorem ipsum..</p>
      <button class="btn btn-default btn-lg">Get in Touch</button>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-signal logo"></span>
    </div>
  </div>
</div>

<div class="container-fluid bg-grey">
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-globe logo"></span>
    </div>
    <div class="col-sm-8">
      <h2>Our Values</h2>
      <h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
      <p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
    </div>
  </div>
</div>

Hasil:

Tentang Perusahaan PT

Lorem ipsum ..

Lorem ipsum ..

Nilai kita

MISI: Misi kami lorem ipsum ..

VISI: Visi kami Lorem ipsum ..

Cobalah sendiri "

Tambahkan Jasa Kontainer

Menambahkan wadah baru, dengan kolom 2x3 lebar sama ( .col-sm-4 ):

Contoh

<div class="container-fluid text-center">
  <h2>SERVICES</h2>
  <h4>What we offer</h4>
  <br>
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-off"></span>
      <h4>POWER</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-heart"></span>
      <h4>LOVE</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-lock"></span>
      <h4>JOB DONE</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    </div>
    <br><br>
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-leaf"></span>
      <h4>GREEN</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-certificate"></span>
      <h4>CERTIFIED</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-wrench"></span>
      <h4>HARD WORK</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </div>
</div>

Hasil:

JASA

Apa yang kita tawarkan


KEKUASAAN

Lorem ipsum dolor sit amet ..

CINTA

Lorem ipsum dolor sit amet ..

PEKERJAAN SELESAI

Lorem ipsum dolor sit amet ..



HIJAU

Lorem ipsum dolor sit amet ..

BERSERTIFIKAT

Lorem ipsum dolor sit amet ..

KERJA KERAS

Lorem ipsum dolor sit amet ..

Cobalah sendiri "

styling Ikon

Menambahkan kelas kustom ( .logo-small ) untuk setiap glyphicon di "Layanan" kontainer. Gunakan CSS untuk gaya mereka:

Contoh

/* Add an orange color to all icons and set the font-size */
.logo-small {
    color: #f4511e;
    font-size: 50px;
}

.logo {
    color: #f4511e;
    font-size: 200px;
}

Hasil:

Tentang Perusahaan PT

Lorem ipsum ..

Lorem ipsum ..


Nilai kita

MISI: Misi kami lorem ipsum ..

VISI: Visi kami Lorem ipsum ..

JASA

Apa yang kita tawarkan


KEKUASAAN

Lorem ipsum dolor sit amet ..

CINTA

Lorem ipsum dolor sit amet ..

PEKERJAAN SELESAI

Lorem ipsum dolor sit amet ..



HIJAU

Lorem ipsum dolor sit amet ..

BERSERTIFIKAT

Lorem ipsum dolor sit amet ..

KERJA KERAS

Lorem ipsum dolor sit amet ..

Cobalah sendiri "

Tambahkan Portofolio Kontainer

Buat wadah penuh-lebar baru, dengan tiga kolom dengan lebar yang sama ( .col-sm-4 ):

Di dalam setiap kolom, menambahkan gambar.

Kemudian, gunakan .img-thumbnail kelas untuk membentuk gambar untuk thumbnail.

Biasanya, Anda akan menambahkan .img-thumbnail kelas langsung ke <img>. Dalam contoh ini, kami telah menempatkan wadah thumbnail sekitar gambar, sehingga kita dapat menentukan teks gambar juga.

Contoh

<div class="container-fluid text-center bg-grey">
  <h2>Portfolio</h2>
  <h4>What we have created</h4>
  <div class="row text-center">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="paris.jpg" alt="Paris">
        <p><strong>Paris</strong></p>
        <p>Yes, we built Paris</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="newyork.jpg" alt="New York">
        <p><strong>New York</strong></p>
        <p>We built New York</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="sanfran.jpg" alt="San Francisco">
        <p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>
      </div>
    </div>
</div>

Hasil:

portofolio


Apa yang telah kita buat

Paris

Paris

Ya, kami membangun Paris

New York

New York

Kami membangun New York

San Fransisco

San Fransisco

Ya, San Fran adalah milik kita

Cobalah sendiri "

Gambar styling Thumbnail

Gunakan CSS untuk gaya gambar. Dalam contoh kita, kami telah mencoba untuk membuat mereka terlihat seperti kartu, dengan menghapus perbatasan mereka, dan mengatur lebar 100% pada setiap gambar.

Contoh

.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}

Hasil:

portofolio


Apa yang telah kita buat

Paris

Paris

Ya, kami membangun Paris

New York

New York

Kami membangun New York

San Fransisco

San Fransisco

Ya, San Fran adalah milik kita

Cobalah sendiri "

Tambahkan Carousel a

Menambahkan korsel:

Contoh

<h2>What our customers say</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
    <h4>"This company is the best. I am so happy with the result!"<br><span style="font-style:normal;">Michael Roe, Vice President, Comment Box</span></h4>
    </div>
    <div class="item">
      <h4>"One word... WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
    </div>
    <div class="item">
      <h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler Bing, Actor, FriendsAlot</span></h4>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Hasil:

Apa yang pelanggan kami katakan

Cobalah sendiri "

Gaya Carousel

Gunakan CSS untuk gaya carousel:

Contoh

.carousel-control.right, .carousel-control.left {
    background-image: none;
    color: #f4511e;
}

.carousel-indicators li {
    border-color: #f4511e;
}

.carousel-indicators li.active {
    background-color: #f4511e;
}

.item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
}

.item span {
    font-style: normal;
}

Hasil:

Apa yang pelanggan kami katakan

Cobalah sendiri "

Tambahkan Harga Kontainer

Buat wadah lebar penuh, dengan tiga kolom dengan lebar yang sama ( .col-sm-4 ):

Di dalam setiap kolom, menambahkan panel:

Contoh

<div class="container-fluid">
  <div class="text-center">
    <h2>Pricing</h2>
    <h4>Choose a payment plan that works for you</h4>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Basic</h1>
        </div>
        <div class="panel-body">
          <p><strong>20</strong> Lorem</p>
          <p><strong>15</strong> Ipsum</p>
          <p><strong>5</strong> Dolor</p>
          <p><strong>2</strong> Sit</p>
          <p><strong>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$19</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Pro</h1>
        </div>
        <div class="panel-body">
          <p><strong>50</strong> Lorem</p>
          <p><strong>25</strong> Ipsum</p>
          <p><strong>10</strong> Dolor</p>
          <p><strong>5</strong> Sit</p>
          <p><strong>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$29</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
   <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Premium</h1>
        </div>
        <div class="panel-body">
          <p><strong>100</strong> Lorem</p>
          <p><strong>50</strong> Ipsum</p>
          <p><strong>25</strong> Dolor</p>
          <p><strong>10</strong> Sit</p>
          <p><strong>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$49</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
  </div>
</div>

Hasil:

harga

Memilih rencana pembayaran yang bekerja untuk Anda

Dasar

20 Lorem

15 Ipsum

5 Dolor

2 Sit

tak berujung Amet

Pro

50 Lorem

25 Ipsum

10 Dolor

5 Sit

tak berujung Amet

Premium

100 Lorem

50 Ipsum

25 Dolor

10 Sit

tak berujung Amet

Cobalah sendiri "

styling Panel

Gunakan CSS untuk gaya panel:

Contoh

.panel {
    border: 1px solid #f4511e;
    border-radius:0;
    transition: box-shadow 0.5s;
}

.panel:hover {
    box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}

.panel-footer .btn:hover {
    border: 1px solid #f4511e;
    background-color: #fff !important;
    color: #f4511e;
}

.panel-heading {
    color: #fff !important;
    background-color: #f4511e !important;
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.panel-footer {
    background-color: #fff !important;
}

.panel-footer h3 {
    font-size: 32px;
}

.panel-footer h4 {
    color: #aaa;
    font-size: 14px;
}

.panel-footer .btn {
    margin: 15px 0;
    background-color: #f4511e;
    color: #fff;
}

Hasil:

harga

Memilih rencana pembayaran yang bekerja untuk Anda

Dasar

20 Lorem

15 Ipsum

5 Dolor

2 Sit

tak berujung Amet

Pro

50 Lorem

25 Ipsum

10 Dolor

5 Sit

tak berujung Amet

Premium

100 Lorem

50 Ipsum

25 Dolor

10 Sit

tak berujung Amet

Cobalah sendiri "

Tambah Kontak Kontainer

Menambahkan wadah baru dengan informasi kontak:

Contoh

<div class="container-fluid bg-grey">
  <h2 class="text-center">CONTACT</h2>
  <div class="row">
    <div class="col-sm-5">
      <p>Contact us and we'll get back to you within 24 hours.</p>
      <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
      <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
      <p><span class="glyphicon glyphicon-envelope"></span> [email protected]</p>
    </div>
    <div class="col-sm-7">
      <div class="row">
        <div class="col-sm-6 form-group">
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
        </div>
        <div class="col-sm-6 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
        </div>
      </div>
      <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
      <div class="row">
        <div class="col-sm-12 form-group">
          <button class="btn btn-default pull-right" type="submit">Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

Hasil:

KONTAK

Hubungi kami dan kami akan kembali kepada Anda dalam waktu 24 jam.

Chicago, AS

+00 1515151515

[email protected]


Cobalah sendiri "

Tambahkan Google Maps

Tambahkan Google Maps (Untuk informasi lebih lanjut, baca Google Maps Tutoria l):

Contoh

<!-- Set height and width with CSS -->
<div id="googleMap" style="height:400px;width:100%;"></div>

<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Hasil:

Cobalah sendiri "

Tambahkan Navbar a

Menambahkan navbar di bagian atas halaman yang runtuh pada layar yang lebih kecil:

Contoh

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

Hasil:

Cobalah sendiri "

Catatan Tip: Benar-menyelaraskan tombol navigasi dengan navbar-right kelas.


Gaya Navbar

Gunakan CSS untuk menyesuaikan bar navigasi:

Contoh

.navbar {
    margin-bottom: 0;
    background-color: #f4511e;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
}

.navbar li a, .navbar .navbar-brand {
    color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}

Hasil:

Cobalah sendiri "

Tambahkan Scrollspy

Tambahkan scrollspy untuk secara otomatis memperbarui link navbar ketika bergulir:

Contoh

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

<div id="about" class="container-fluid">
<div id="services" class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact" class="container-fluid">
Cobalah sendiri "

Tambahkan Footer a

Tambahkan "Panah" ikon untuk footer, yang akan membawa pengguna ke bagian atas halaman ketika diklik:

Contoh

<style>
footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f4511e;
}
</style>

<footer class="container-fluid text-center">
  <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
  <p>Bootstrap Theme Made By <a href="http://www.w3ii.com" title="Visit w3ii">www.w3ii.com</a></p>
</footer>

Hasil:

Cobalah sendiri "

Menambahkan Halus Scrolling

Gunakan jQuery untuk menambahkan bergulir halus (ketika mengklik link di navbar):

Contoh

<script>
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 900, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
    });
  });
})
</script>
Cobalah sendiri "

Sentuh akhir

Personalisasi Tema Anda dengan menambahkan font yang Anda sukai. Kami telah menggunakan "Montserrat" dan "Lato" dari Perpustakaan Font Google.

Link ke font di <head> bagian:

<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

Kemudian Anda dapat menggunakannya di halaman:

Contoh

body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
}

.jumbotron {
    font-family: Montserrat, sans-serif;
}

.navbar {
    font-family: Montserrat, sans-serif;
}

Kami juga telah menambahkan beberapa gaya ekstra untuk beberapa elemen:

Contoh

h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;
}

h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
}
Cobalah sendiri "

Slide Dalam Elements

Kami juga telah menciptakan efek animasi yang akan meluncur di elemen pada gulungan. Jika Anda ingin menggunakannya, tambahkan saja .slideanim kelas untuk elemen yang ingin Anda meluncur di, dan tambahkan berikut untuk CSS dan jQuery (merasa bebas untuk mengubah durasi, opacity, di mana untuk memulai, ketika meluncur di, dan seterusnya):

CSS Contoh

.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide;
    /* The duration of the animation */
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

jQuery Contoh

$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});
Cobalah sendiri "

Lengkap "Perusahaan" Tema