Cara Membuat Efek Tetap pada Background

Sebagai bagian yang tak terpisahkan dari website, Background (latar belakang halaman) dengan posisi tetap mendapatkan lebih banyak dan inovatif dengan sedemikian rupa sehingga dapat menciptakan ilusi optik dengan perubahan gambar tanpa Anda menyadarinya bahwa ia memiliki posisi yang tetap seperti memberikan efek transisi yang rapi ke bagian halaman berikutnya.

Itu adalah awal ketika paralaks menjadi populer. Gambar dan teks bergerak ke atas sedangkan Background (latar belakang) tetap terjebak di belakang menciptakan pengalaman pengguna yang luar biasa untuk pengunjung situs Anda.

Dalam tutorial hari ini, kita akan membuat efek tetap pada latar belakang (CSS dan jQuery) yang mengubah elemen sementara bergulir mengubah layar komputer Macbook.

Harap dicatat bahwa ini hanya bekerja pada layar besar dan kita perlu mengatur tata letak default pada layar yang lebih kecil. Mari kita mulai.

Memulai dengan Markup

Struktur HTML kita akan lebih mudah. Pertama, Kita akan mengatur bagian header kita sebagai Slide utama dan diikuti dengan serangkaian bagian. Setiap bagian akan memiliki kelas latar belakang yang tetap bersama dengan img- (n) yang akan berisi gambar set. Kita juga akan menetapkan jumlah bagian id untuk navigasi. Siapkan empat bagian dan satu header.

<header id="section1">
    <h1 class="animate fx">Background Fixed Effect</h1>
</header>
    <section class="background-fixed img-1" id="section2">
    </section>
    <section class="background-fixed img-2" id="section3">
    </section>
    <section class="background-fixed img-3" id="section4">
    </section>
    <section class="background-fixed img-4" id="section5">
    </section>

Selanjutnya, kita akan mendirikan konten utama dan menempatkan gambar di dalamnya bersama dengan h3 dan p tag konten.

Gambar akan disembunyikan pada kelas, pertama kita perlu menyembunyikan ini dan akan menampilkannya pada perangkat yang lebih kecil. (Mari kita juga jangan lupa footer kita).

<header id="section1">
    <h1 class="animate fx">Background Fixed Effect</h1>
</header>
<section class="background-fixed img-1" id="section2">
    <div class="main-content">
    <img src="img/img1-mobile.png" class="hide">
    <h3>Mac are Awesome</h3>
    <p>You can preview any file (even Photoshop files and videos) by selecting it and pressing the spacebar. Press it again to close the preview. While in the preview you can also press the arrow keys to change between files.</p>
    </div>
</section>
<section class="background-fixed img-2" id="section3">
    <div class="main-content">
    <img src="img/img2-mobile.png" class="hide">
    <h3>Summarize text</h3>
    <p>Mac OS X allows you to quickly summarize long pieces of text in just a few seconds. To summarize a text first select it, right click on the selection and click on “Summarize”. To enable the summary feature, click on the app name in the status bar (“Chrome” for instance) > Services > Services Preferences… >  scroll down and check “Summarize”.</p>
    </div>
</section>
<section class="background-fixed img-3" id="section4">
    <div class="main-content dark">
    <img src="img/img3-mobile.png" class="hide">
    <h3>Hot Corners</h3>
    <p>Hot corners allow you to trigger certain events by touching a corner of your screen. You can start and disable a screensaver, open mission control, application windows, show the desktop, dashboard, notification center or lauchpad or put your display to sleep.</p>
    </div>
</section>
<section class="background-fixed img-4" id="section5">
    <div class="main-content">
    <img src="img/img4-mobile.png" class="hide">
    <h3>Automate actions</h3>
    <p>Everyone forgets about Automator, the application that lets you automate repetitive tasks. It works by clicking together actions into a chain of events.</p>
    </div>
</section>
<footer>
    <p>&copy; 2015 - Designmodo.com - All Rights Reserved
</footer>

Bekerja dengan Navigasi

Untuk navigasi, Kita akan membuat daftar tidak berurutan dengan id dari navigasi. Setiap daftar akan memiliki link dengan id dari jumlah bagian dan dengan scroll class bersama kode jQuery kita nanti. Kita akan menempatkan kode di atas markup Kita.

<ul id="nav">
    <li><a href="#section1" title="Next Section" class="scroll">
    <img src="img/dot1.png" alt="Link"></a></li>
    <li><a href="#section2" title="Next Section" class="scroll">
    <img src="img/dot2.png" alt="Link"></a></li>
    <li><a href="#section3" title="Next Section" class="scroll">
    <img src="img/dot3.png" alt="Link"></a></li>
    <li><a href="#section4" title="Next Section" class="scroll">
    <img src="img/dot4.png" alt="Link"></a></li>
    <li><a href="#section5" title="Next Section" class="scroll">
    <img src="img/dot5.png" alt="Link"></a></li>
</ul>

CSS

Sebelum memulai dengan gaya umum, Saya akan menambahkan gaya penyetelan ulang dari website Eric Meyer untuk mengurangi inkonsistensi browser pada tata letak.

Mari Kita mulai dengan gaya umum. Kita akan mengatur html dan tinggi body 100% dan kemudian memberikan body, header dan gaya umum h1. Saya juga akan menempatkan gaya untuk hide class di sini untuk menyembunyikan gambar tanaman dan menunjukkan kepada mereka ketika viewports lebih kecil.

html, body {    
  height: 100%;
}
body {
  font: 15px 'Lato', Helvetica, sans-serif;
  color: #0f594d;
  background-color: #fff;
}
header {
  background-color: #34495e;
  z-index: 999;
  position: relative;
  height: 100%;
}
header h1 {
  font: 45px 'Lato', Helvetica, sans-serif;
  color: #fff;
  font-weight: 300;
  border: 1px solid #fff;
  padding: 20px 25px;
  text-align: center;
  position: absolute;
  bottom: auto;
  right: auto;
  left: 30.3%;
  top: 42%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
img.hide{
  display: none;
}

Sejak saya membuat lingkaran PNG, kita perlu memposisikan elemen ini ke sisi kanan browser dan kemudian memberikan posisi yang tetap.

#nav {
  list-style: none;
  position: fixed;
  right: 20px;
  z-index: 999999;
  top: 260px;
}
#nav li {
  margin: 0 0 15px 0;
}
.background-fixed {
  background-size: cover;
  position: relative;
  padding: 45px 20px 0;
  background-repeat: no-repeat;
  background-position: center center;
}

Selanjutnya, mari kita bekerja dengan background. Pertama, saya akan menggunakan gaya umum pada tag h3, yang menjadi judul dan tag paragraf juga. Perhatikan bahwa saya telah menyiapkan garis putih di h3 untuk membuatnya sedikit menarik. Sekarang untuk setiap gambar latar belakang, saya mengatur warna latar belakang yang berbeda. Ini akan digunakan nanti saat kita mencoba untuk membuat beberapa perubahan pada tata letak di viewports lebih kecil. Mari juga mencakup gaya untuk footer kami. Hanya kode blok dasar.

.background-fixed h3 {
  font-family: "Lato", Arial, serif;
  font-size: 45px;
  color: #fff;
  margin-bottom: 16px;
  font-weight: 300;
  border: 1px solid #fff;
  width: 100%;
  padding: 10px 15px;
  text-align: center;
}
.background-fixed p {
  font-family: "Lato", Arial, serif;
  font-size: 18px;
}
.background-fixed.img-1 {
  background-color: #2dcc70;
}
.background-fixed.img-2 {
  background-color: #e84c3d;
}
.background-fixed.img-3 {
  background-color: #d25400;
}
.background-fixed.img-4 {
  background-color: #9b58b5;
}
footer{
  background: #172029;
  padding: 15px 0;
}
footer p{
  text-align: center;
    color: #fff;
    font-weight: 300;
}

Karena pengaruh latar belakang yang tetap hanya akan bekerja pada layar besar dan tidak akan tampil di viewport ukuran ponsel, kita perlu menyembunyikan gambar latar belakang yang besar pada perangkat kecil dan menampilkan gambar default yang kita miliki di hide class. Mari kita bersenang-senang dengan pertanyaan media dan memperbaiki tampilan tata letak pada layar yang lebih kecil.

@media only screen and (min-width: 1048px) {
  .background-fixed {
    background-attachment: fixed;
  }
  .main-content {
    width: 30%;
    left: 8%;
  }
}
@media only screen and (min-width: 768px) {
  .background-fixed {
    height:100%;
    padding:0
}
.background-fixed.img-1 {
    background-image:url(../img/img-1.jpg)
}
.background-fixed.img-2 {
    background-image:url(../img/img-2.jpg)
}
.background-fixed.img-3 {
    background-image:url(../img/img-3.jpg)
}
.background-fixed.img-4 {
    background-image:url(../img/img-4.jpg)
}
.main-content {
    width:38%;
    position:absolute;
    left:8%;
    bottom:auto;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%)
}
.main-content h3 {
    font-size:45px;
    font-weight:300
}
.main-content p {
    font-weight:300;
    font-size:18px;
    line-height:1.8;
    color:#fff
}
}
 
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
header h1 {
  left: 50%;
  margin-left: -260px;
}
.main-content {
  width: 35%;
}
.background-fixed h3 {
  font-size: 40px;
}
}
 
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
header h1 {
  left: 50%;
  margin-left: -173px;
}
.main-content {
  left: auto;
  margin: 0 auto;
  padding: 25px 20px 20px;
  text-align: center;
  width: 480px;
}
.background-fixed h3 {
  font-size: 28px;
  width: initial;
}
.background-fixed p {
  line-height: 1.6;
  color:#fff;
  font-size: 16px;
}
 
img.hide {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  width: 60%;
}
.background-fixed {
  padding: 0;
}
}
 
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
header h1 {
  font-size: 25px;
  left: 50%;
  margin-left: -165px;
}
.main-content {
  left: auto;
  margin: 0 auto;
  padding: 25px 20px 20px;
  text-align: center;
  width: 320px;
}
.background-fixed h3 {
  font-size: 28px;
  width: initial;
}
.main-content.dark > p {
  color: #fff;
}
.background-fixed p {
  line-height: 1.6;
  color: #fff;
  font-size: 16px;
}
img.hide {
  display: block;
  margin-bottom: 20px;
  max-width: 100%;
}
.background-fixed {
  padding: 0;
}
}

 jQuery untuk Navigasi

Lingkaran navigasi di sisi kanan layar tidak akan bekerja dengan CSS biasa. Untuk membuat fungsional ini, ditambahkan jQuery di bawah ini <script> tag. Kita telah menggunakan fungsi klik bersama dengan fungsi scrollTop dan fungsi offset untuk mengatur koordinat setiap elemen dan membuat efek scrolling aktif pada setiap slide melalui scroll class.

jQuery(document).ready(function($) {
  $(".scroll").click(function(event){     
  event.preventDefault();
  $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
  });
  });

Wrapping Up

Ini adalah contoh sempurna tentang cara membuat efek background-tetap. Dengan CSS murni, tidak ada logika atau tambahan manipulasi DOM diperlukan untuk membuat ini efek ilusi saja selain dari navigasi yang sudah kita buat.

background-attachment: fixed akan menyebabkan lebih banyak kreativitas untuk website Anda. Mencoba permata kecil ini, itu sangat cepat dan merasa bebas untuk main-main; Saya yakin Anda mungkin ketagihan!

Sumber : Norton, Sam. “How to Create Background Fixed Effects”. 24 Februari 2016.

http://designmodo.com/create-fixed-background/

Comments

comments