. . . - | Facebook | Twitter |

Membuat Image Center Vertical Horizontal



Trigger a CSS Animation on Scroll

0











..





..





..





.. 1


!





..





..





..!





..





.

CSS efek Bounce-in Animation CSS saja

CSS Animation

loader

gelatine

spin

elastic spin

pulse

flash

hi there!

grow

fade in

fade out

bounce

bounce 2

shake

flip

swing

wobble

fade in down

fade in left

fade out down

fade out right

bounce in

bounce in right

bounce out

bounce out down

rotate in down left

rotate in up left

roll in

roll out

hinge

Animasi Javascrip Sederhana Ringan Viewport Scroll

scroll ke bawah utk melihat efek animasi





..





..





.. 0
1
2
3
3a
4
5
6
7







..





..





..

.. 0 1 2 3 4 5 6 7
....

 

<div class="ani vis"></div>
<div class="ani vis" ef="FIR"></div>
<div class="ani" ef="SU"></div>
<div class="ani" ef="SD"></div>
<div class="ani" ef="FID"></div>
<div class="ani" ef="FIU"></div>
<div class="ani vis" ef="FI"></div>

|||
|||
|||
|||
|||
|||
|||

CSS Jalankan Animasi saat Scroll

SCROLL

|
|
|
V

FadeIn

F00

FadeInUP

F00

FromRight

F00

FromRight

F00

Animasi saat di scroll dibuka

Trigger a CSS animation on scroll

Read the tutorial about 'reveal animations on scroll'

...scroll down...











































Other animation

Block 1

Block 2

Block 3

Read the tutorial


Membuat Formulir Order dengan Kirim Menuju Whatsapp

Link blog Anda, gunakan http:// atau https://

Send to Whatsapp

Membuat Related Post di Blogspot

Proyek Perumahan Syariah:

Menu khusus untuk Mobile Navigasi

Vertical Mobile Navbar

This example demonstrates how a navigation menu on a mobile/smart phone could look like.

Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.

Membuat Mobile Navigation Menu

Vertical Mobile Navbar

This example demonstrates how a navigation menu on a mobile/smart phone could look like.

Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.

Menyisipkan div ke dalam div

GeeksforGeeks

This is the text which has already been typed into the div

#player



DepoAir


  • Pupuler
  • Membuat Link Popup Video Youtube

    Tinggal copas kode html, css, dan javascript berikut ini. Sesuaikan yang diberi tanda warna merah. Semoga berguna. dan sebagai catatan saat diperlukan dikemudian hari. Jika ada kesulitan, silakan menulis di komentar.

     <style>
    #myBtn{cursor:pointer;border-width:0;font-weight:bold;background-color:transparent;color: #6fa5b8}
    #myBtn:hover{color: #2fa5a8}
    .modal{display:none;position:fixed;z-index:1;padding-top:calc(50vh - 305px);left:0;top: 0;
      width: 100%;height: 100%;overflow: auto; background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
    .modal-content{margin:auto;width:720px;max-width:100%;}
    .close {color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;}
    .close:hover,.close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer}
    </style>


    Saksikan mereka yang telah sukses membangun masa depan bersama Ahsana Property: <a title="klik untuk membuka Video"><button id="myBtn"> Selebrasi Akbar STB 300++ </button></a>
    <div id="myModal" class="modal">
    <div class="modal-content">
    <span class="close">&times;</span>
    <p><iframe width="720" height="405" src="https://www.youtube.com/embed/videoseries?list=PLORQNvDdGpeHvr2g12XjCbpy8FrU20Ult" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
    </div>
    </div>


    <script>
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];
    btn.onclick = function() {
      modal.style.display = "block";
    }
    span.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
    </script>

    Contoh hasil script di atas, bisa dengan mencoba link sebagai berikut:


    Contoh link video youtube dengan menampilkan popup saat diklik:



    .... diklik: Contoh Youtube popup

    Membuat Hide Menu on Scroll

    .

    !

    .

    .

    .

    Tab Produk Perumahan Syariah

    Membuat TAB menggunakan CSS dan JavaScript

    Tabs

    Click on the buttons inside the tabbed menu:



    Tipe Property
    Rumah Masjid Besar
    Rumah ibadah warga muslim di perumahan

    Rumah Tahfidz
    Terintegrasi Rumah Tahfidz Al-Qur'an

    Taman Hijau
    4 Letak Taman

    One Gate System
    One Gate System (Akses keluar masuk perumahan 1 jalur)

    Security
    Safety Security 24 Jam

    CCTV
    Full CCTV



    Lokasi Strategis Lokasi dekat dengan pusat perekonomian, pendidikan, perkantoran dan bernilai investasi yang terus tumbuh.

    Bangunan Berkualitas dan Bergaransi
    Anda berhak mendapatkan garansi siap huni untuk struktur bangunan, garansi umum bangunan, dan garansi kebocoran

    Harga Terjangkau
    Selain harga yang terjangkau, Ahsana menawarkam skema pembayaran yang fleksibel.

    Garansi Struktur Konstruksi (Selama 15 TAHUN)
    Garansi kerusakan pondasi yang menyebabkan rumah roboh. Kerusakan kolom yang menyebabkan rumah roboh. Kerusakan sloof yang menyebabkan rumah roboh. Kerusakan pada struktur atap yang menyebabkan atap roboh

    Garansi Dinding & Lantai (Selama 1 Tahun)
    Kerusakan dinding yang menyebabkan dinding retak dan kerusakan lantai yang menyebabkan lantai retak.

    Garansi Atap (Selama 1 tahun)
    Kerusakan pada konstruksi atap yang menyebabkan atap bocor

    Garansi Umum (Selama 6 Bulan)
    Cat mengelupas, Sanitasi macet, Lampu tidak menyala/konslet, dan Pintu mengembang/menyusut sehingga tidak bisa ditutup.

    Garansi 100% Uang Kembali
    Ketika Anda tidak jadi beli

    Hunian Syar’i
    Lingkungannya Islami, Pilihan Keluarga-Keluarga yang Peduli dengan Masa Depan Generasi Terbaik.

    7 Tipe Rumah, yaitu
    Tipe 100/102
    Tipe 75/102
    Tipe 65/75
    Tipe 60/78
    Tipe 45/78
    Tipe 45/72 (1 Lantai)
    Tipe 36/66 (1 Lantai)


    Lokasi Perumahan berada di Jl. Sidodadi VII No.5 Nambangan Kidul, Manguharjo, Kota Madiun, Jawa Timur 63161. Lokasi yang sangat strategis di Kawasan Kota Madiun dengan sarana sosial yang lengkap seperti: Perbelanjaan, Pendidikan, Kesehatan, Hiburan, Kawasan Industri, juga selain memberikan kemudahan-kemudahan fasilitas umum sekaligus menjadi tempat tinggal favorit.
    [iklan]
    terima-pesanan-pembuatan- sepatu sandal perumahan di Mojokerto kota
     
    © 2017 Catatan Afandi Kusuma | www.suwur.com | Furniture.Omasae | JayaSteel | OmaSae | suwur | Facebook | DepoAirIsiUlang | Seluruh Arsip