Depan Papan Semak

Saya masih ingat ketika berusia sepuluh tahun, sepupu saya datang untuk melawat rumah saya. Dia adalah anak yang sejuk, jenis kanak -kanak yang akan membawa cakera permainan catur yang dia memprogramkan dirinya. Versi caturnya adalah sejuk seperti dia sendiri, kerana sebahagian daripada lembaga itu hilang selepas setiap langkah.

Apa yang lebih sejuk? Setiap bahagian yang hilang di papan akan menunjukkan gambar yang sangat indah.

Saya fikir idea yang sama boleh membuat beberapa antara muka pengguna yang sangat sejuk. Ia hanya mungkin tidak ada interaksi pengguna yang diperlukan untuk memaparkan latar belakang, ia boleh dimainkan hanya sebagai animasi. Ini adalah hasil akhir saya:

Idea ini mudah, dan terdapat banyak cara lain untuk mencapainya, tetapi ini adalah idea yang saya ikuti ...

Pertama, saya buat beberapa tag

Imej boleh diproses sebagai latar belakang dalam CSS pada elemen body , atau beberapa yang direka untuk menjadi saiz tertentu<div> pada elemen. Oleh itu, masalah ini tidak diperlukan untuk masa ini. Tetapi lembaga itu menyeronokkan. Ini adalah corak dengan kata -kata grid CSS yang ditulis di atasnya, jadi saya menggunakan elemen sebagai bekas grid dengan banyak yang lain di dalamnya<code><div> elemen. Saya tidak tahu berapa banyak dataran/dataran/apa sahaja yang ada untuk papan catur undang -undang, jadi saya hanya memilih nombor 7 dari udara tipis dan kemudian mengikatnya untuk mendapatkan 49 kotak.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>Ya, tulis semua ini<code><div> Unsur -unsur menyakitkan, dan JavaScript pasti dapat membantu. Tetapi jika saya hanya bereksperimen dan hanya memerlukan kemudahan pemaju, menggunakan Haml boleh membantu:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> .Grid - 49.Times lakukan %div</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Hasil akhir adalah sama. Sama ada cara, ini memberi saya semua tanda yang saya perlukan untuk memulakan reka bentuk gaya!</p> <h2 id="Tetapkan-imej-latar-belakang"> Tetapkan imej latar belakang</h2> <p> Sekali lagi, ini boleh berlaku sebagai <code>background-image pada body atau elemen lain, bergantung kepada bagaimana ia digunakan - selagi ia meliputi seluruh ruang. Oleh kerana saya memerlukan bekas grid, saya memutuskan untuk menggunakannya.

 .Checkerboard {
  Latar Belakang-imej: URL ('walrus.jpg');
  Latar Belakang: Cover;
  /* Sifat lain mungkin diperlukan untuk mencari gambar dengan betul*/
}

Kecerunan adalah sebahagian daripada fail imej raster, tetapi saya boleh mengendalikannya dengan bijak dengan beberapa jenis lapisan pada elemen body , menggunakan unsur-unsur pseudo, seperti :after . Malangnya, ini betul-betul teknologi biasa yang kini direka oleh CSS-Tricks.

Grid gaya

Ya, saya menggunakan grid CSS. Membuat grid 7 × 7 sangat mudah.

 .Checkerboard {
  Latar Belakang-imej: URL ('walrus.jpg');
  Latar Belakang: Cover;
  paparan: grid;
  Grid-template-lajur: Ulang (7, 1FR);
  grid-template-baris: ulangi (7, 1fr);
}

Saya fikir ia akan menjadi lebih baik apabila kita melihat aspect-ratio disokong secara meluas, sekurang-kurangnya jika saya memahaminya dengan betul. Masalah saya sekarang ialah grid tidak mengekalkan sebarang perkadaran. Ini bermakna blok papan catur akan menjadi sangat diperah pada saiz viewport yang berbeza. tidak bagus. Jika ini sangat penting, kita boleh melakukan beberapa helah kecil dalam tempoh ini, tetapi saya memutuskan untuk menyimpannya seperti itu.

Gaya Gaya

Mereka bergantian antara kelabu putih dan gelap, jadi:

 .Checkerboard> Div {
  latar belakang warna: #fff;
}
.Checkerboard> div: nth-child (walaupun) {
  latar belakang warna: #2F2F2F;
}

Percaya atau tidak, tanda dan gaya kami dilakukan! Selebihnya adalah ...

Kuadrat animasi

Semua animasi yang perlu dilakukan adalah menukar setiap persegi dari opacity: 1; kepada opacity: 0; , dan animasi CSS adalah sempurna untuk ini.

 @keyframes poof {
  ke {
    Kelegapan: 0;
  }
}

Luar Biasa! Saya tidak perlu menetapkan kerangka utama Start! Apa yang perlu saya lakukan ialah memanggil animasi di dataran.

 .Checkerboard> Div {
  nama animasi: poof;
  Animasi-jangkauan: 0.25s;
  Animasi-Fill-Mode: ke hadapan;
  Latar Belakang: #ffff;
}

Ya, saya boleh menggunakan sifat singkatan animasi di sini, tetapi saya sering mendapati lebih mudah untuk memisahkan sifat konstituennya secara berasingan kerana ... baik, mereka terlalu banyak dan sukar untuk dibaca dan dikenali dalam satu baris.

Jika anda tertanya-tanya mengapa animation-fill-mode diperlukan di sini, itu kerana ia menghalang animasi dari gelung kembali ke permulaan animasi apabila ditetapkan ke forwards . Dalam erti kata lain, apabila animasi selesai, setiap persegi akan kekal opacity: 0; bukannya muncul semula.

Saya benar-benar mahu melakukan sesuatu yang bijak untuk menghubungkan animation-delay blok, tetapi saya berlari ke beberapa halangan dan akhirnya memutuskan untuk melepaskan usaha saya untuk menggunakan CSS asli 100% dan beralih ke beberapa SCS ringan. Dengan cara ini saya dapat melangkah melalui semua dataran dan menggunakan fungsi yang agak standard untuk menarik sebahagiannya beralih untuk setiap persegi. Jadi, maaf kerana beralih tiba -tiba! Itu hanya sebahagian daripada perjalanan.

 $ lajur: 7;
$ baris: 7;
$ sel: $ lajur * $ baris;

@for $ i dari 1 hingga $ sel {
  .Checkerboard> div: nth-child (#{$ i}) {
    Animasi-Delay: (Rawak ($ ​​sel) / $ lajur) s;
  }
}

Mari Pecahkannya:

• Pembolehubah dengan bilangan lajur grid ( $columns ), bilangan baris grid ( $rows ) dan jumlah sel ( $cells ). Yang terakhir adalah produk dari dua yang pertama berlipat ganda bersama. Jika kita tahu bahawa kita sentiasa bekerja dalam grid persegi yang sempurna, maka kita boleh melakukan beberapa refactoring, menggunakan eksponen untuk mengira bilangan sel.
• Kemudian bagi setiap contoh sel antara jumlah 1 dan $cells (49 dalam kes ini), setiap persegi individu akan mendapat animation-delay berdasarkan nilai :nth-child() . Jadi persegi pertama adalah div:nth-child(1) , kemudian div:nth-child(2) , dan sebagainya. Semak CSS yang disusun dalam demo dan anda akan melihat bagaimana ia mengembang semua.

 / * Ya, autoprefixer ada di sana ... */
.Checkerboard> Div: nth-Child (1) {}
.Checkerboard> Div: nth-Child (2) {}
/ * dll */

• Akhirnya, animation-delay adalah pengiraan yang mengambil nombor rawak antara 1 dan jumlah $cells , membahagikan bilangan $columns , dan menambah detik selepas nilai. Adakah ini cara terbaik? Saya tidak mempunyai idea. Ia datang untuk bermain -main dengan sesuatu dan mencari sesuatu yang terasa "betul" kepada anda. Ini terasa "betul" kepada saya.

Saya benar -benar ingin mendapatkan kreatif dan menyesuaikan sifat dengan CSS dan bukannya menggunakan SCSS. Saya suka sifat dan nilai tersuai boleh dikemas kini di sisi klien, manakala nilai -nilai yang dikira dalam SCSS disusun dan dibiarkan tidak berubah pada masa membina. Sekali lagi, ini adalah tepat di mana saya benar -benar mahu beralih ke JavaScript. Walau bagaimanapun, saya telah menyediakan katil dan hanya boleh tidur di atasnya.

Jika anda melihat CSS yang disusun sebelum ini, anda akan melihat nilai yang dikira:

 .Checkerboard> Div: nth-Child (1) {
  Animasi-Delay: 4.5714285714S;
}

.Checkerboard> Div: nth-Child (2) {
  Animasi-Delay: 5.2857142857S;
}

.Checkerboard> Div: nth-Child (3) {
  Animasi-Delay: 2.7142857143S;
}

.Checkerboard> Div: nth-Child (4) {
  Animasi-Delay: 1.5714285714S;
}

Nah, mungkin animasi harus menjadi pilihan ...

Sesetengah orang sensitif terhadap gerakan dan pergerakan, jadi lebih baik mengubah tetapan supaya gaya dan animasi dataran hanya ditetapkan jika pengguna menyukainya. Kami mempunyai pertanyaan media untuk mencapai matlamat ini!

 Skrin @media dan (lebih suka-dikurangkan-gerakan: tidak ada pilihan) {
  .Checkerboard> Div {
    nama animasi: poof;
    Animasi-jangkauan: 0.25s;
    Animasi-Fill-Mode: ke hadapan;
    Latar Belakang: #ffff;
  }
  .Checkerboard> div: nth-child (walaupun) {
    Latar Belakang: #2F2F2F;
  }
}

Itu sahaja!