Bagaimana Mereka Melakukannya: Alice in Videoland

Musim panas ini saya mulai membangun retelling modern "Alice in Wonderland", sebuah aplikasi buku cerita interaktif dengan nama Alice in Videoland. Ini akhirnya ditampilkan dalam artikel di Adobe Inspire dan juga menjadi presentasi pemenang encore yang saya berikan di CSS Dev Conf 2013. Proyek ini dimaksudkan untuk menjadi pendidikan, tempat uji coba untuk teknik animasi CSS baru dan desktop-to -tablet JavaScript. Saya menyimpan sumber Alice di GitHub di mana Anda yang bisa melihat kode saya, tapi kadang-kadang menyenangkan jika seseorang mempertimbangkan alasannya dengan Anda.

Pada artikel ini saya akan membahas beberapa rincian teknis paling banyak yang tidak bisa saya ceritakan atau artikel Inspire saya pelajari secara mendalam:

• ● Menggunakan Modernizr.js dengan animasi untuk meningkatkan degradasi yang anggun
• Mendeteksi halaman mana yang sedang dibaca dengan jQuery Waypoints
• Menambahkan scrolling parallax dengan Skrollr.js
• Mengatasi masalah scroll dan swipe di iPad
• Memetakan tap untuk mengklik

Jika Anda ingin belajar tentang storyboard, gambar retina, animasi CSS, dan interaksi lainnya, Anda harus melihat artikel tambahan di Adobe Inspire. Juga, sebelum membaca lebih lanjut, Anda pasti harus bermain dengan buku cerita itu sendiri!

Buku Cerita untuk iPad dan Chrome

Tujuan saya cukup sederhana: buatlah aplikasi buku cerita yang bekerja sama baiknya di Chrome dan di Safari iOS, khususnya di Retina iPad. Anda pikirkan, saya tidak merancang sebuah "konteks mobile", saya tahu persis di mana target audiens saya: pada koneksi wifi, dalam kenyamanan rumah mereka sendiri, baik itumembaca dengan anak-anak mereka di pangkuan mereka atau membedah kodenya di kantor.

Itu membuat saya tidak terlalu khawatir tentang kompatibilitas browser, hanya beberapa lingkungan produksi yang mewah. Tapi penting bahwa kita memiliki proyek seperti ini yang melompat di depan kurva karena mereka membantu kita memikirkan apa yang akan terjadi besok.

Saya selalu menikmati "Alice in Wonderland" dan "Through the Looking Glass" yang tumbuh dewasa, dan saya terjun untuk meneliti dan mengembangkan dunia baru dan karakter yang akan saya ciptakan dengan semangat. Perbedaan jelas dalam gaya seni harus ditetapkan, mulai dari Taman Impresionis dan steril dunia nyata hingga huru-hara abad ke-19 dari lubang kelinci itu.

Setiap karakter harus memiliki sejarah dan kepribadian mereka sendiri. Karena tenggat waktu yang ketat, saya hanya bisa membawa sebagian kecil dari buku itu ke kehidupan. Saya memulai dengan menulis ulang adegan pembukaan (yang dapat Anda baca dengan mematikan CSS atau mencetak halaman buku cerita) dan kemudian membuat storyboard untuk melakukannya.

Degradasi dan Peningkatan Progresif

Dari mata yang berkedip sampai Alice memberikan pengejaran, animasi digunakan secara halus di sepanjang cerita untuk memberi ilusi kehidupan, tidak seperti buku popup. Namun, sementara animasi CSS didukung di semua browser modern, Internet Explorer 8 dan versi di bawahnya tidak mendukungnya.

Jika Anda telah memeriksa laporan lalu lintas situs Anda dan sejumlah besar pengguna Anda bergantung pada Internet Explorer 8 atau sebelumnya (Anda selalu memeriksa analisis Anda sebelum merancang, bukan?), Anda tetap dapat mendukung peramban tersebut sambil menawarkan interaksi penuh ke peramban modern. Komunitas pengembangan web telah menghadapi masalah ini sebelumnya dan sekarang telah mengembangkan teknologi umum seperti font web dan AJAX. Solusinya sederhana: pengguna di browser modern mendapatkan pengalaman penuh, sementara browser yang kurang mampu masih mendapatkan pengalaman yang dapat dipahami dan berguna. Walt Disney mungkin menyebut pengalaman ini "memusatkan perhatian" pada pengguna. Pengembang web menyebutnya "peningkatan progresif" atau "degradasi anggun," bergantung pada apakah Anda membangun browser yang lebih tua atau yang lebih baru terlebih dahulu.

Ketika bicara mengenai animasi, saya suka mengambil apa yang saya sebut Pendekatan Buku Pop-Up. Sebagai ilustrasi, video berikut adalah contoh animasi kartu hadiah interaktif dari Square.com yang direkayasa oleh Madelin Woods. (Terima kasih, Madelin, untuk rekaman ini!)

Alice in Videoland: Giftcard With Animation

Alice in Videoland: Giftcard Without Animation

Orang-orang di Internet Explorer 8 dan yang lebih rendah masih akan senang dengan ilustrasi ini dan tidak akan memperhatikan bahwa itu seharusnya memilikianimasi, sementara orang-orang di peramban baru akan dihibur dengan animasi yang baik.

Di Alice di Videoland, saya melakukan hal yang sama. Dalam adegan di mana kelinci putih hipster melintas di layar, saya membuatnya terpusat dan tidak bergerak jika tidak bisa dianimasikan. Saya melakukan ini dengan modernizr.js.

Modernizr.js

Modernizr.js adalah JavaScript pembantu kecil yang dapat Anda gunakan di situs untuk memeriksa apakah browser mendukung fitur tertentu seperti animasi dan transisi CSS3. Jika fitur didukung, modernizr menambahkan kelas .cssanimations dan .csstransitions ke tag HTML induk.

Saya mengatur gaya default kelinci untuk meletakannya di tengah halaman. Jika transisi diaktifkan, saya menggunakan kelas .csstransitions untuk memposisikannya dari sisi kiri layar:

1

2

.rabbit {

3

   left: -50%; // rabbit is centered

4

}

5

6

.csstransitions .rabbit {

7

   left: -100%; // rabbit is hidden off left side of screen

8

}

Layar Loading

Tidak ada gunanya mulai memainkan animasi sementara semua gambar masih diunduh. Kita perlu memasang layar loading sampai semuanya siap untuk digunakan. jQuery kebetulan memiliki metode yang disebut .load yang hanya berjalan hanya pada kesempatan seperti itu. Saya memberi tag html pada kelas default untuk .loading dan menggunakan sedikit jQuery berikut untuk mengubah kelas itu menjadi .loaded segera setelah halaman terisi penuh dan ditampilkan:

1

2

$(window).load(function() {

3

   // It’s nice to set a short timeout so the loading

4

   // page has time to complete its animation

5

6

   setTimeout(function(){

7

      // change state to loaded

8

      $("html").addClass("loaded").removeClass("loading");

9

   }, 4000);

10

});

Lihat pena di Alice dalam layar Videoland oleh Rachel Nabors (@rachelnabors) CodePen

Mengetahui Halaman mana yang Telah Dibaca

Beberapa animasi ini, seperti kelinci yang sedang berjalan, seharusnya hanya terjadi saat bagian cerita dibacakan oleh pembaca. Sulit untuk mengetahui dengan pasti di mana mata pengguna akan berada pada waktu tertentu, namun kita dapat menyimpulkannya dengan menggunakan plugin jQuery Waypoints yang indah. Kita dapat menggunakannya untuk menetapkan kelas .in-view ke masing-masing halaman saat discroll ke tampilan seperti:

1

2

$(".scene-park .page").waypoint(function() {

3

   // when this .page comes into focus, give it a class of “in-view”

4

   $(this).addClass("in-view");

5

});

Kemudian kita lingkupkan gaya animasi ke kelas .in-view sehingga hanya dijalankan setelah discroll ke tampilan.

Turun ke Lubang Kelinci dengan Parallax

Awalnya saya akan menghidupkan latar belakang Alice, tapi seiring berjalannya proyek, saya menyadari bahwa efek yang saya inginkan adalah membuatnya jatuh ke bagian bawah layar saat pembaca scrolling ke bawah. Pembaca harus terlibat dengan cerita untuk melihat apa yang akan terjadi selanjutnya, dan mereka akan diberi imbalan tidak hanya dengan kemajuan menuju tujuan (bagian bawah halaman), tetapi juga dengan perubahan suasana hati Alice dari ketakutan, penasaran, mengantuk.

Pertama, saya harus membuat Alice sticky. Artinya, saya perlu membuatnya beralih ke posisi tetap setelah pembaca mulai melakukan scroll, jadi dia tidak akan scroll ke bagian atas halaman. Saya melakukan ini dengan menggunakan pintasan jQuery Waypoints yang praktis untuk elemen sticky daripada mencoba menulis sistem saya sendiri.

Untuk bagian paralaks, saya menetap di Skrollr, yang bekerja dengan mengambil dua atribut data numerik pada elemen, data-pixel-distance dan interpolasi di antara keduanya, pixel-distance adalah jarak dari bagian atas halaman dimana perubahan perlu dilakukan. mulai terjadi. Karena terowongan sangat jauh dari halaman, saya menggunakan JavaScript untuk mengukur jarak mereka dari bagian atas halaman, dan saya menggunakan ketinggian mereka untuk mendapatkan atribut data tersebut:

1

2

var tunnelTop = Math.round($tunnel.offset().top);

3

var tunnelTopData = "data-" + tunnelTop;

4

var tunnelBottomData =  "data-" + (tunnelTop + Math.round($tunnel.height()));

5

6

// Give Falling Alice her skrollr measurements as data attributes

7

8

$alice.attr(tunnelTopData, "top:0%").attr(tunnelBottomData, "top:80%");

Yang memberikan sesuatu seperti ini:

1

</pre>

2

<div data-5205="top:0%" data-9810="top:80%"></div>

3

<pre>

Lihat Pena Jatuh ke Lubang Kelinci oleh Rachel Nabors (@rachelnabors) di CodePen

Scroll dan Swipe iPad

Di Safari pada iOS, saat Anda memulai scroll, Anda menyentuh layar, menggeser jari ke atas atau ke bawah, lalu angkat jari Anda dari layar. Untuk menghemat daya, Safari tidak melakukan apapun saat jari Anda menyentuh layar. Ini menghentikan semua animasi dan bahkan tidak menjalankan JavaScript sampai Anda melepaskan jari Anda.

Sebagai gantinya, dibutuhkan snapshot dari layar dan memindahkannya ke arah jari Anda, memberi ilusi bahwa Anda sedang menscroll seperti pada desktop. Tapi jika halaman berisi animasi, ilusi dipecahkan dengan setiap scroll dari jari Anda. Ini berarti seseorang bisa menscroll sampai ke dasar lubang tanpa sekali pun berhenti untuk memperhatikan bahwa suasana hati Alice berubah atau dia terjatuh:

Alice in Videoland: Scrolling Without Fix

Skrollr hadir dengan fitur ramah seluler secara default, yang mencoba memperbaiki masalah ini dengan menerapkan transformasi CSS ke keseluruhan halaman dan kemudian menghidupkannya ke posisi baru dengan CSS ketika scroll. Namun, metode ini melewati event scroll yang dibutuhkan Waypoint untuk mengubah sikap Alice:

Alice in Videoland: Scrolling With Almost Fix

Terjebak di Lubang Kelinci

Di sinilah saya kehilangan akal. Saya mempertimbangkan untuk mengatur urutan jatuhnya adalah animasi di iPad dan interaksi scroll di desktop, tapi saya membenci gagasan itu. Pertama, saya harus mempertahankan dua interaksi terpisah dankedua, jika saya memperjuangkan begitu banyak kisah, mengapa saya tidak membuat video saja?

Inti dari interaksi scroll adalah bahwa ia menarik pembaca ke dalam cerita; mereka mengendalikan Alice. Mereka adalah Alice. Ini melibatkan mereka. Jika yang harus mereka lakukan hanyalah klik pada lubang kelinci, apa gunanya itu?

Saya menghubungi banyak pemilik repo dan berkonsultasi dengan Stack Overflow untuk mencari solusi. John Polacek, salah satu pengelola library Super Scrollorama lainnya, yang menyarankan agar saya melihat Hammer.js, sebuah perpustakaan JavaScript kecil untuk menangani gerakan seperti pinch dan menggesek perangkat mobile (yang memiliki versi yang dihubungkan langsung ke jQuery!) Saya telah melihat library ini sejak awal dalam pengembangan dan memilih untuk tidak meneruskannya, tapi saya memutuskan untuk melihat lagi.

Waktunya Hammer

Saya menghabiskan banyak waktu untuk melihat bagaimana orang-orang bergerak melalui cerita menggunakan sentuhan di iPad. Saya perhatikan bahwa mereka tidak menggulir halaman sebanyak melakukan swipe. Saya pikir jika saya bisa memetakan memajukan cerita dari satu halaman ke halaman ke sebuah tindakan swipe, saya masih dapat mempertahankan hubungan yang cukup erat antara pengalaman desktop dan touch. Hammer.js mengizinkan saya untuk terhubung ke event swipe di iPad, dan saya dapat membuatnya sehingga pada swipe, pembaca melanjutkan ke halaman berikutnya:

1

2

if(Modernizr.touch) {

3

   //Swipe to previous page

4

   $(document).hammer({prevent_default:true}).on("swipedown", function(event) {

5

      scrollPageIntoCenter($(".page").get(prevPage));

6

      currentPage = prevPage;

7

      calcPrevNext(currentPage);

8

   });

9

}

Ini adalah penyederhanaan kode secara besar-besaran. Untuk kasus penggunaan berbasis sentuhan ini, saya harus menggunakan untuk melacak halaman saat ini, sebelumnya, dan berikutnya menggunakan variabel counter. Ada juga beberapa hal menarik yang terjadi dengan menghitung ulang ketinggian dan semacamnya pada perubahan lingkungan. Saya sangat menyarankan Anda melihat kode sumber (jika bermanfaat) jika Anda benar-benar ingin membuat tangan Anda kotor.

Tap vs Klik

Salah satu masalah dengan pengembangan iPads adalah klik tidak langsung dipetakan ke tap. Saat Anda mengtap link di Safari iOS, ada sedikit jeda saat sistem memeriksa dua kali bahwa Anda tidak akan membuat semacam isyarat. Ini bertanya, "Anda yakin ingin mengikuti tautan itu? Atau apakah Anda mencubit atau melakukan dua kali tap? "Hal ini membuat interaksi berbasis klik terasa lamban dan tidak alami.

Dalam kasus kita, ketika lubang kelinci diklik atau ditap, kita ingin menjalankan fungsi downTheHole() yang menscroll halaman turun ke bumi. Solusinya adalah dengan menggunakan event listener klik dan touchend! Rodney Rehm membantu saya membuat versi yang lebih efisien dari metode activate() saya yang asli. Setelah itu, mudah untuk memanggilnya seperti:

1

2

$("#to-tunnels").activate(downTheHole);

Pekerjaan yang masih Berjalan

Alice in Videoland akan selalu menjadi pekerjaan yang terus berjalan untuk saya. Seiring waktu memungkinkan, saya dapat kembali memperluas jumlah perangkat dan peramban yang dia lakukan dengan mulus. Atau saya dapat terus maju dan menambahkan bab baru ke dalam cerita untuk menunjukkan hal-hal seperti kanvas, animasi SVG, atau API animasi web.

Saya selalu terbuka terhadap cara baru untuk menulis kode dan membuat kode lama berjalan lebih cepat. Saya berharap bahwa "Alice" akan berfungsi sebagai demo hal-hal yang panjang dan bertingkat di sekitar disain interaksi.