New Posts

[Tutorial] Membuat Menu Navigasi Html Keren Dengan Efek Modal

Pada pembahasan yang lalu saya sudah memberi tutorial tentang cara membuat responsive layout dengan efek transition yang bisa dibilang cukup keren. Namun untuk tutorial kali ini saya akan mencoba kembali memberikan langkah untuk membuat menu navigasi HTML keren, ditaburi dengan efek animasi yang membuatnya menjadi lebih terlihat modern.

Tutorial Membuat Menu Navigasi Html Keren Dengan Efek Bounce

Jika sobat ingin memasangnya di blog atau di website, sobat bisa ikuti langkah pembuatanya dibawah. Namun sebelumnya, perlu sobat ketahui disini kita juga memakai javascript untuk menjalankan efek tersebut. Lalu bagaimana cara pembuatannya?

Baca Juga: 7 Daftar Komponen Javascript Terbaik Twitter Bootstrap 3

Sebelum lanjut ke langkah pembuatan menu navigasinya, disini kita memerlukan:

1. HTML
2. CSS
3. JAVASCRIPT
4. JQUERY


OKE, mungkin kita langsung saja. Untuk yang pertama disini kita coba buat file HTML nya, seperti contoh berikut:

<!doctype html>
<html lang="en" class="no-js">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>

 <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
 <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
 <script src="js/modernizr.js"></script> <!-- Modernizr -->
   
 <title>Menu Navigasi | Seo Techman</title>
</head>
<body>
<header>
 <h1>Bouncy Navigation</h1> 
</header>

<section class="cd-section">
 <a class="cd-bouncy-nav-trigger" href="#0">Browse categories</a>
</section> <!-- .cd-section -->

<div class="cd-bouncy-nav-modal">
 <nav>
  <ul class="cd-bouncy-nav">
   <li><a href="#0">Category 1</a></li>
   <li><a href="#0">Category 2</a></li>
   <li><a href="#0">Category 3</a></li>
   <li><a href="#0">Category 4</a></li>
   <li><a href="#0">Category 5</a></li>
   <li><a href="#0">Category 6</a></li>
  </ul>
 </nav>
 
 <a href="#0" class="cd-close">Close modal</a>
</div> <!-- cd-bouncy-nav-modal -->
 
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
Jika sudah, jangan lupa beri nama index.html lalu simpan. Dan yang kedua adalah kita buat CSS nya, lihat kode nya di link berikut:

Live Css

Setelah itu sobat copas Css nya, dan masukan ke dalam style.css kemudian simpan. Langkah selanjutnya, kita buat file lagi dan beri nama main.js, sobat bisa lihat contoh berikut ini:

jQuery(document).ready(function($){
 var is_bouncy_nav_animating = false;
 //open bouncy navigation
 $('.cd-bouncy-nav-trigger').on('click', function(){
  triggerBouncyNav(true);
 });
 //close bouncy navigation
 $('.cd-bouncy-nav-modal .cd-close').on('click', function(){
  triggerBouncyNav(false);
 });
 $('.cd-bouncy-nav-modal').on('click', function(event){
  if($(event.target).is('.cd-bouncy-nav-modal')) {
   triggerBouncyNav(false);
  }
 });

 function triggerBouncyNav($bool) {
  //check if no nav animation is ongoing
  if( !is_bouncy_nav_animating) {
   is_bouncy_nav_animating = true;
   
   //toggle list items animation
   $('.cd-bouncy-nav-modal').toggleClass('fade-in', $bool).toggleClass('fade-out', !$bool).find('li:last-child').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
    $('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
    if(!$bool) $('.cd-bouncy-nav-modal').removeClass('fade-out');
    is_bouncy_nav_animating = false;
   });
   
   //check if CSS animations are supported... 
   if($('.cd-bouncy-nav-trigger').parents('.no-csstransitions').length > 0 ) {
    $('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
    is_bouncy_nav_animating = false;
   }
  }
 }
});
Disini kita juga memerlukan javascript modernizr.js dan jquery-2.1.1.js sobat bisa mencarinya di Google. Untuk langkah berikut nya, apabila sobat sudah mendownload kedua file tersebut. Sobat letakan modernizr.js di atas </head>, sedangkan main.js dan jquery-2 letakan di atas </body>.

Lalu sobat simpan dan setelah itu silahkan dilihat seperti apa hasilnya. Untuk icon nya, sobat bisa menggunakan icon apa saja sesuai dengan selera. Entah itu fontawesome atau yang lainnya.

Dan...untuk live demo nya, bisa dilihat melalui link dibawah ini:

Live Demo

Nah, bagaimana menurut sobat, cukup keren bukan? Silahkan praktekan sendiri dan selamat mencobanya.

Mungkin saya rasa cukup untuk pembahasan hari ini tentang, Tutorial Membuat Menu Navigasi Html Keren Dengan Efek Modal. Dan akhir kata saya ucapkan terimakasih.

Selengkapnya

[TIPS] Membuat Rencana Permainan SEO Terbaru Foolproof 2019

Tips Membuat Rencana Permainan SEO Terbaru Foolproof 2019 - Jika Anda siap untuk meningkatkan lalu lintas situs web Anda menggunakan strategi SEO, Anda akan memerlukan rencana. Teruslah membaca untuk menemukan cara membuat rencana permainan SEO yang sangat mudah. Tahukah Anda bahwa, antara kisaran 70% dan 80% pengguna web sepenuhnya mengabaikan iklan berbayar di bagian atas hasil pencarian. Itu berarti bahwa jika Anda berharap untuk meningkatkan lalu lintas web Anda, penting agar Anda mendapat peringkat tinggi dalam hasil pencarian organik.

Tips Membuat Rencana Permainan Seo Terbaru FoolProof 2019

Untuk mendapat peringkat tinggi dalam hasil pencarian, Anda memerlukan rencana permainan SEO yang kuat. Kebanyakan pemilik bisnis tahu apa itu SEO, dan memahami bagaimana hal itu dapat membuat bisnis mereka sukses. Tetapi mereka tidak mengerti bagaimana mengembangkan strategi yang baik.

Berikut adalah beberapa cara agar Anda dapat membuat rencana yang solid di 2019.

Kenali Audiens Anda Seluruh tujuan di balik optimasi mesin pencari adalah untuk peringkat tinggi di mesin pencari yang akan mengarahkan lalu lintas ke situs web Anda. Tapi itu tidak berarti banyak situs web Anda berperingkat tinggi di depan audiens yang tidak tertarik.

Langkah pertama adalah mengidentifikasi audiens target Anda. Salah satu cara untuk melakukan ini adalah melalui penciptaan personas pembeli. Ini adalah saat Anda membuat representasi pelanggan ideal Anda sehingga semua konten, salin, dan iklan dapat ditargetkan khusus untuk mereka.

Ini berarti menggali lebih dalam tentang siapa pelanggan Anda sebenarnya. Beberapa hal yang perlu Anda ketahui antara lain:

Ciri-ciri kepribadian kunci

Demografi (kisaran pendapatan, lingkungan, pria / wanita, usia dll.)

Perjalanan pembeli yang khas

Tujuan bersama

Dan Anda dapat menemukan informasi ini dalam berbagai cara berbeda, termasuk:

• Mempertanyakan pelanggan Anda saat ini

• Bertemu dengan tim penjualan, pemasaran, dan layanan pelanggan

• Menggunakan Google Analytics

• Melaksanakan penelitian media sosial

Membuat persona pembeli memungkinkan Anda untuk memikirkan pesan pemasaran Anda, dan memahami strategi SEO mana yang akan menjangkau mereka.

Penelitian Kata Kunci Lengkap


Setelah Anda tahu siapa yang Anda targetkan, Anda perlu melakukan penelitian kata kunci. Memilih kata kunci apa yang akan ditargetkan dapat membuat atau menghancurkan rencana permainan SEO Anda.

Putuskan setiap kategori kata kunci berdasarkan persona pembeli Anda dan pengelompokan situs web Anda. Setelah Anda mendapatkan daftar kata kunci ini, Anda dapat menggunakan Google Keyword Planner untuk meneliti setiap kata kunci dan memberi peringkat berdasarkan estimasi volume pencarian bulanan.

Struktur Situs Dan SEO On-Page


Google harus dapat memahami apa itu situs web perusahaan Anda, dan optimasi SEO On-Page pada halaman sangatlah penting. Untuk itu hal pertama yang perlu Anda lakukan adalah memastikan bahwa Google dapat menjelajah situs Anda secara efisien, sehingga dapat melihat semua konten Anda.

Ini berarti mengatur situs Anda dengan navigasi intuitif, tautan internal yang hebat, konten unik, waktu buka halaman yang cepat, dan tanpa tautan yang terputus.

Disini Anda juga dapat menggunakan kata kunci untuk mengoptimalkan konten Anda. Anda dapat membuat halaman spesifik di sekitar kata kunci yang berbeda atau anda juga bisa membuat Long Tail Keywords sebagai pilihan terbaik, dan ini akan menunjukkan kepada Google tentang setiap halaman.

Namun, penting bahwa Anda menghindari isian kata kunci. Tulis konten Anda seperti yang biasa Anda tulis, ingat kata kunci yang Anda pilih saat menulis.

Pemasaran Konten


Konten harus menjadi salah satu pilar utama dari rencana permainan SEO Anda. Kunci konten tidak hanya untuk menerapkan kata kunci, tetapi juga membantu memandu pelanggan Anda melalui saluran pemasaran Anda.

Konten juga membantu Anda mendapatkan daya tarik di saluran media sosial Anda, peringkat yang baik di mesin pencari, dan mengomunikasikan merek Anda ke dunia.

Konten Anda perlu di tegakkan dengan istilah, nada dan suara pada merek Anda di semua saluran sambil menciptakan strategi khusus untuk meningkatkan keterlibatan dan meningkatkan konversi.

Beberapa opsi untuk konten meliputi:

Blog

Email

Ebooks

Kertas putih

Salinan produk

Video

Infografis

Podcast

Blogging, khususnya, adalah cara terbaik untuk memasukkan kata kunci Anda dan terlibat dengan pengunjung. Setiap posting blog adalah kesempatan lain untuk menentukan peringkat di Google. Namun, penting untuk diingat bahwa membuat konten adalah tentang menghubungkan dengan audiens Anda, dan bukan mesin pencari.

Tulis tentang hal-hal yang diminati prospek dan / atau audiens Anda, gunakan kata kunci yang relevan, dan Anda akan mulai meningkatkan pengunjung Anda secara organik dan naik peringkat.

Pembuatan tautan adalah faktor besar dalam bagaimana peringkat halaman web Anda di mesin pencari. Membangun tautan resmi dari situs web tepercaya dan relevan mendorong lalu lintas rujukan, meningkatkan peringkat, dan meningkatkan visibilitas merek Anda secara online.

Tautan selalu menjadi salah satu sinyal peringkat paling kuat dalam algoritme Google. Mereka menentukan kredibilitas dan popularitas situs.

Sumber daya seperti layanan SEO terkelola Squawika adalah pilihan yang sangat baik untuk membangun tautan, tetapi Anda juga harus berupaya membangun tautan yang akan menggerakkan jarum. Salah satu cara untuk melakukan ini adalah melalui posting tamu.

Ini tidak hanya membantu Anda mendapatkan tautan yang tepercaya dan relevan, tetapi Anda dapat memperluas jangkauan dan memanfaatkan pemirsa baru di mana Anda mungkin tidak dikenal.

Lacak dan Ukur Kesuksesan Anda SEO membutuhkan banyak waktu dan usaha. Tidak ada gunanya membuat rencana permainan SEO jika Anda tidak dapat melihat hasilnya.

Ada banyak metrik yang dapat Anda lacak setiap bulan, mingguan, atau bahkan setiap hari. Ini akan membantu Anda menjaga rencana Anda di jalur sehingga Anda dapat dengan mudah mengukur kesuksesan Anda (atau kurang sukses) dan menyesuaikan rencana Anda sesuai.

Gunakan paket analisis web atau spreadsheet Excel untuk memantau berapa banyak lalu lintas yang Anda peroleh ke situs Anda dari pencarian organik. Anda juga harus melacak prospek, kata kunci, halaman yang diindeks, ROI, dan peringkat Anda untuk setiap kata kunci pada SERP. Ini memudahkan Anda untuk melihat apa yang berfungsi dan mengidentifikasi peluang baru.

Bagaimana, Sudah Siap Untuk Membuat Rencana permainan SEO Anda? Langkah-langkah di atas akan membantu Anda membuat rencana permainan SEO strategis yang akan membantu Anda naik peringkat. Dan ini akan memastikan Anda memiliki lebih banyak pengunjung situs web, yang akan mengarah pada peningkatan konversi dan keuntungan.

Dengan mengetahui audiens Anda, dan memilih kata kunci yang tepat, untuk mengembangkan konten yang bermanfaat dan membuat strategi penautan yang cerdas, Anda akan melihat peningkatan peringkat pencarian hanya dalam beberapa bulan.

Demikianlah tips SEO kali ini, semoga Anda menikmati artikel yang kami suguhkan dan dapat bermanfaat. Jangan lupa untuk Subscribe blog ini agar update di artikel terbaru lain nantinnya (GRATIS tidak bayar :D ).

Terimakasih.

Selengkapnya

[Tutorial] Cara Membuat Responsive Layout Dengan Efek Transition Pure Css

Tutorial untuk kali ini yaitu, tentang cara membuat Responsive Layout dengan Transition yang smooth. Dengan menggunakan navigasi button radio dan kombinasi yang akan memicu transisi ke panel konten masing-masing, dan menciptakan efek tersebut. Dan kita akan membuat tata letak lebar / tinggi 100% responsif dengan beberapa transisi halaman yang smooth. Idenya adalah untuk memiliki beberapa panel konten dan navigasi yang akan memungkinkan kita untuk menavigasi antar panel.

[Tutorial] Cara Membuat Responsive Layout Dengan Efek Transition Pure Css

Disini kita akan menggunakan button radio untuk navigasi dan menghidupkan konten ke posisi yang tepat dengan transisi, menciptakan efek "Scrolling Smooth". Gagasan tata letak ini bisa berguna untuk halaman web atau aplikasi web di mana konten harus benar-benar seukuran layar (lebar dan tinggi). Perhatikan bahwa ini tentu saja sangat eksperimental dan hanya merupakan bukti konsep.

Markup


Struktur akan terdiri dari, Container utama dengan class st-container yang akan berisi tombol dan tautan radio, dan Wrapper harus diberi class st-scroll untuk panelnya. Dan setiap panel ini akan memiliki beberapa elemen konten.

Berikut dibawah ini contoh markupnya:

<div class="st-container">
   
 <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
 <a href="#st-panel-1">Serendipity</a>
 
 <input type="radio" name="radio-set" id="st-control-2"/>
 <a href="#st-panel-2">Happiness</a>
 
 <input type="radio" name="radio-set" id="st-control-3"/>
 <a href="#st-panel-3">Tranquillity</a>
 
 <input type="radio" name="radio-set" id="st-control-4"/>
 <a href="#st-panel-4">Positivity</a>
 
 <input type="radio" name="radio-set" id="st-control-5"/>
 <a href="#st-panel-5">Passion</a>
 
 <div class="st-scroll">

  <section class="st-panel" id="st-panel-1">
   <div class="st-deco" data-icon="H"></div>
   <h2>Serendipity</h2>
   <p>Banksy adipisicing eiusmod banh mi sed...</p>
  </section>
  
  <section class="st-panel st-color" id="st-panel-2">
   <!-- ... -->
  </section>
  
  <!-- ... st-panel-3, st-panel-4, st-panel-5 -->

 </div><!-- // st-scroll -->
 
</div><!-- // st-container -->
Pada dasarnya, memindahkan Wrapper panel dengan mengubah nilai teratas dan membawa masing-masing panel ke dalam viewport, ini bisa kita lakukan dengan memilih button radio st-scroll, dengan kombinasi dan target panel yang benar di dalamnya. Karena teknik ini, kita perlu menjaga button radio di tingkat yang sama seperti st-scroll di atas tautan (mereka tidak akan terlihat, karena kita akan memberi mereka 0 opacity). Untuk dapat memilih panel yang benar, disini kita akan memberikan ID dan button radio.

Perlu kalian ketahui, tautan ini memiliki nilai href dari ID panel, jadi kita hanya akan menyembunyikan button radio nya dan membuat tautan yang dapat diklik yang akan memungkinkan untuk "beralih" ke panel kanan.

CSS/Style


Sekarang, bagaimana kita membuat tata letak ini menjadi fleksibel dan panelnya sama persis dengan ukuran layar? Caranya adalah dengan membuat sebuah Container utama yang mutlak, dengan lebar dan tinggi 100% saat mengatur Panel dan Wrapper ke posisi yang lebih relatif. Dengan lebar dan tinggi 100% dan membuat setiap panel menjadi sama persis dengan ukuran layar (karena adanya Container utama dan Wrapper panel).

Karena disini kita akan melakukan navigasi konten dengan menghidupkan wrapper panel, jadi kita hanya perlu mengatur body overflow menjadi tersembunyi:

body {
     overflow: hidden;
}
Dan dibawah ini Css untuk Container utama:

.st-container {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
Setelah itu, letakkan "navigasi" di bagian bawah halaman dengan memberinya posisi tetap (Position:fixed). Perhatikan, jika kita ingin mengatur lebar dan tinggi yang sama untuk input dan tautan. Idenya adalah buat overlay button radio pada elemen tautan sehingga dapat diklik, dan beri nilai 0 opacity agar tidak terlihat. Karena itu penting juga untuk mengatur z-indeks pada button radio.

Seperti contoh Css berikut ini:

.st-container > input,
.st-container > a {
 position: fixed;
 bottom: 0px;
 width: 20%;
 cursor: pointer;
 font-size: 16px;
 height: 34px;
 line-height: 34px;
}

.st-container > input {
 opacity: 0;
 z-index: 1000;
}

.st-container > a {
 z-index: 10;
 font-weight: 700;
 background: #e23a6e;
 color: #fff;
 text-align: center;
 text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
Karena disini kita menggunakan persentase untuk menyebarkan tautan dan input di lebar layar, tapi mungkin ini akan sedikit mengalami masalah pembulatan yang akan membuat beberapa celah muncul. Tapi, untuk menyembunyikannya, gunakan elemen pseudo yang ada di bawah tautan dan input. Karena ini akan memiliki warna latar belakang yang sama seperti elemen tautan:

container:before {
 content: '';
 position: fixed;
 width: 100%;
 height: 34px;
 background: #e23a6e;
 z-index: 9;
 bottom: 0;
}
Contoh Css diatas masih belum diposisikan, artinya masih belum lengkap. Dan untuk memaksimalkannya, lihat berikut:

#st-control-1, #st-control-1 + a {
 left: 0;
}

#st-control-2, #st-control-2 + a {
 left: 20%;
}

#st-control-3, #st-control-3 + a {
 left: 40%;
}

#st-control-4, #st-control-4 + a {
 left: 60%;
}

#st-control-5, #st-control-5 + a {
 left: 80%;
}
Dengan menggunakan prinsip yang sama, kita akan menetapkan status "selected" untuk elemen tautan. Setelah itu, kita akan memberi warna latar belakang elemen tautan:

Css nya seperti berikut:

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
 background: #821134;
}
Jika dirasa sudah, jangan lupa untuk menambahkan little triangel (segitiga kecil) menggunakan pseudo-class: after dan beri warna yang sama:

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
 bottom: 100%;
 border: solid transparent;
 content: '';
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-bottom-color: #821134;
 border-width: 20px;
 left: 50%;
 margin-left: -20px;
}
Kalian dapat melihat CSS Arrow tersebut Disini, itupun jika kalian ingin cara cepat untuk membuat arrow tersebut.

Dan mari kita lanjutkan untuk menentukan status hover untuk elemen tautan:

.st-container > input:hover + a{
 background: #AD244F;
}

.st-container > input:hover + a:after {
 border-bottom-color: #AD244F;
}
Wrapper untuk panel dan panel akan memiliki posisi relatif dengan memberinya lebar dan tinggi 100%. Panel wrapper juga akan mendapatkan posisi atas dan kiri 0 sementara itu, kita tidak perlu memberi nilai untuk panelnya (karena itu sudah otomatis).

Dan transisi itu akan menganimasikan nilai properti transformasi ke posisi masing-masing:

.st-scroll,
.st-panel {
 position: relative;
 width: 100%;
 height: 100%;
}

.st-scroll {
 top: 0;
 left: 0;
 transition: all 0.6s ease-in-out;
 
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-backface-visibility: hidden;
}

.st-panel{
 background: #fff;
 overflow: hidden;
} 
Selanjutnya, mari kita tentukan posisi wrapper st-scroll untuk setiap button radio yang dicentang. Karena kita tahu bahwa setiap panel memiliki ketinggian 100%, kita tahu posisi yang tepat. Maka dari itu, disini kita akan menggunakan properti transform untuk menerjemahkan wrapper panel dalam dimensi Y (atas dan ke bawah):

#st-control-1:checked ~ .st-scroll {
 transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
 transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
 transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
 transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
 transform: translateY(-400%);
}
Sekarang, mari kita beri style pada elemen konten. Untuk segitiga atas dengan ikon, kita cukup memutar dan menerjemahkan divisi st-deco. Kita akan memposisikannya di tengah atas layar dengan mengatur bagian atas ke 0 dan ke kiri menjadi 50% sambil memberikan margin kiri minus setengah dari lebar itu. Menerjemahkannya -50% akan membuat setengah dari kotak yang muncul sehingga menciptakan sebuah segitiga:

.st-deco{
 width: 200px;
 height: 200px;
 position: absolute;
 top: 0px;
 left: 50%;
 margin-left: -100px;
 background: #fa96b5;
 transform: translateY(-50%) rotate(45deg);
}
Untuk ikon kita akan menggunakan Raphaël Icon-Set via @font-face dan teknik data-atribut / pseudo-class. Konten elemen pseudo: after akan menjadi nilai ikon data yang telah kita tetapkan dalam HTML untuk elemen itu. Perhatikan, bahwa kita perlu memutarnya kembali ke arah yang berlawanan dari elemen induk untuk mengembalikannya ke "normal":

[data-icon]:after {
    content: attr(data-icon);
    font-family: 'RaphaelIcons';
    color: #fff;
 text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 position: absolute;
 width: 200px;
 height: 200px;
 line-height: 200px;
 text-align: center;
 font-size: 90px;
 top: 50%;
 left: 50%;
 margin: -100px 0 0 -100px;
 transform: rotate(-45deg) translateY(25%);
}
Judul akan ditempatkan di tengah layar dengan margin atas negatif untuk "menariknya" sedikit:

.st-panel h2 {
 color: #e23a6e;
 text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 position: absolute;
 font-size: 54px;
 font-weight: 900;
 width: 80%;
 left: 10%;
 text-align: center;
 line-height: 50px;
 margin: -70px 0 0 0;
 padding: 0;
 top: 50%;
 -webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
 animation: moveDown 0.6s ease-in-out 0.2s backwards;
}

@keyframes moveDown{
 0% { 
  transform: translateY(-40px); 
  opacity: 0;
 }
 100% { 
  transform: translateY(0px);  
  opacity: 1;
 }
}
Paragraf akan memiliki gaya seperti berikut:

.st-panel p {
 position: absolute;
 text-align: center;
 font-size: 16px;
 line-height: 22px;
 color: #8b8b8b;
 z-index: 2;
 padding: 0;
 width: 50%;
 left: 25%;
 top: 50%;
 margin: 10px 0 0 0;
 -webkit-backface-visibility: hidden;
}
Sementara tajuk panel akan turun, dan paragraf akan naik:

#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
 animation: moveUp 0.6s ease-in-out 0.2s backwards;
}

@keyframes moveUp{
 0% { 
  transform: translateY(40px); 
  opacity: 0;
 }
 100% { 
  transform: translateY(0px);  
  opacity: 1;
 }
}
Untuk membuat tata letak, kita perlu menambahkan class warna dan "membalikkan" warna untuk panel tersebut dan elemen kontennya:

/* Colored sections */

.st-color,
.st-deco{
 background: #fa96b5;
}
.st-color [data-icon]:after {
 color: #fa96b5;
}
.st-color .st-deco {
 background: #fff;
}
.st-color h2 {
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 
.st-color p {
 color: rgba(255,255,255,0.8);
}
Terakhir, namun tidak kalah pentingnya, kita akan menambahkan beberapa media query untuk mengontrol posisi dan ukuran font elemen untuk layar yang lebih kecil

@media screen and (max-width: 520px) {
 .st-panel h2 {
  font-size: 42px;
 }
 
 .st-panel p {
  width: 90%;
  left: 5%;
  margin-top: 0;
 }
 
 .st-container > a {
  font-size: 13px;
 }
}

@media screen and (max-width: 360px) {
 .st-container > a {
  font-size: 10px;
 }
 
 .st-deco{
  width: 120px;
  height: 120px;
  margin-left: -60px;
 }
 
 [data-icon]:after {
  font-size: 60px;
  transform: rotate(-45deg) translateY(15%);
 }
}
Mungkin untuk browser lama yang tidak mendukung beberapa penyeleksi, dan jika ingin kembali ke "target jump" klasik. Kita bisa melakukannya dengan mengubah beberapa style (simple.css). Secara khusus, disini kita perlu mengatur overflow body nya menjadi "otomatis" dan menyembunyikan input, dengan membuat elemen tautan yang dapat diklik (karena mereka memiliki ID panel masing-masing):

body {
 overflow: auto;
}
.st-container > input{
 display: none;
}
Untuk demo nya silahkan klik dibawah ini:

Live Demo

Nah, Demikianlah Tutorial Cara Membuat Responsive Layout Dengan Smooth Transiton Pure Css. Saya harap Anda menikmati tutorial ini dan menginspirasi!

Akhir kata saya ucapkan, terimakasih

Selengkapnya

Pengertian Dan Kegunaan Bootstrap Menurut Para Ahli

Apa itu Bootstrap?

Menurut para ahli mengatakan bahwa, Bootstrap adalah kerangka kerja front-end gratis untuk pengembangan web yang lebih cepat dan mudah. Bootstrap mencakup template desain berbasis HTML dan CSS untuk tipografi, bentuk, tombol, tabel, navigasi, modals, korsel gambar dan banyak lainnya, serta plugin JavaScript opsional. Bootstrap juga memberikan sobat kemampuan untuk membuat desain responsif dengan mudah.

Pengertian Dan Kegunaan Bootstrap Menurut Para Ahli

Apa itu Desain Web Responsif?

Desain web responsif adalah perihal yang terkait tentang membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga desktop besar.

Bootstrap sendiri dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada Agustus 2011 di GitHub dan pada bulan Juni 2014 Bootstrap adalah proyek No.1 di GitHub!

Nah, apa saja keuntungan jika menggunakan Bootstrap?

Mudah digunakan dan siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap. Salah satu fitur responsif pada Bootstrap adalah,dapat menyesuaikan dengan ponsel, tablet, dan desktop.

Dalam Bootstrap 3, gaya seluler pertama adalah bagian dari kerangka inti Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Edge, Safari, dan Opera).

Di mana tempat mendapatkan Bootstrap? Ada dua cara untuk mulai menggunakan Bootstrap di situs web kalian sendiri yaitu:

Kalian bisa mengunduh Bootstrap dari Getbootstrap dan sertakan Bootstrap dari CDN. Bilamana kalian ingin mengunduh dan menginangi Bootstrap sendiri, buka Getbootstrap kembali, dan ikuti petunjuk di sana.

Atau jika kalian tidak ingin mengunduh dan menginangi Bootstrap sendiri, kalian dapat menyertakannya dari CDN (Jaringan Pengiriman Konten).

MaxCDN menyediakan dukungan CDN untuk CSS dan JavaScript Bootstrap. Kalian juga harus menyertakan jQuery seperti berikut:

Contoh MaxCDN:

CSS:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
JQUERY:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
JAVASCRIPT:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Sudah banyak para pengembang dan pengguna lainnya yang telah memanfaatkan dan juga mengunduh Bootstrap dari MaxCDN.

JQuery

Bootstrap menggunakan jQuery untuk plugin JavaScript (seperti modals, tooltips, dll). Namun, jika kalian hanya menggunakan bagian CSS dari Bootstrap, kamu tidak perlu jQuery.

Contoh Membuat Suatu Halaman Web Pertama Dengan Bootstrap.

Tambahkan Doctype HTML5. Bootstrap menggunakan elemen HTML dan properti CSS yang memerlukan doctype HTML5. Selalu sertakan doctype HTML5 di awal halaman, bersama dengan atribut lang dan set karakter yang benar

Bootstrap 3.

Bootstrap 3 ini sudah dirancang khusus untuk responsif terhadap perangkat seluler. Gaya pertama seluler adalah bagian dari kerangka inti.

Untuk memastikan rendering yang tepat dan menyentuh zoom, tambahkan tag:

<meta name="viewport" content="width=device-width, initial-scale=1">


Width = bagian lebar perangkat menetapkan lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).

Initial-scale = 1 adalah suatu bagian untuk menetapkan tingkat zoom awal ketika halaman pertama kali dimuat oleh browser.

Dan yang terakhir,

Wadah

Bootstrap juga membutuhkan wadah elemen yang mengandung untuk membungkus isi situs.

Ada dua class container untuk dipilih:

Yang saya ketahui, class container ini menyediakan wadah lebar tapi tetap responsif. Sedangkan class container-fluida menyediakan wadah lebar penuh, yang mencakup keseluruhan lebar viewport.

Itulah sedikit pembahasan kali ini tentang, Pengertian Dan Kegunaan Bootstrap Menurut Para Ahli. Sedikit kurangnya mudah-mudahan informasi ini dapat bermanfaat.

Akhir kata saya ucapkan, terimakasih.

Selengkapnya