5. City Site : Hill Valley

ระวังดูแล้วอ้วกเพราะมีแต่ GIF ทั้งโพสเลย ทำไปก็จะอ้วกไป

การบ้านทำเว็บคราวนี้โจทย์คือให้เลือกเมืองอะไรก็ได้มาทำเว็บให้ เป็นในจินตนาการหรือว่าจริงก็ได้ ตอนแรกก็คิดถึงเกาหลีเหนือแต่ว่าไหนๆ จินตนาการได้ก็เลยเลือก Hill Valley จาก Back to the Future เพราะว่าเป็นเมืองที่มีไทม์ไลน์ของตัวเองครบมาก แล้วก็รักหนังเรื่องนี้มาก

ใน Back to the Future มี timeline หลักๆ คือปี 1885 1955 1985 1985 ภาคดิสโทเปีย แล้วก็ 2015 เราก็เริ่มจากการไปดูหนังแบบกรอเร็วมากแล้วแคปฉากไว้ กับรีเสิร์ชซึ่งมีคนรักเมืองนี้มากมายทำแผนที่ไว้ ก็เลยคิดว่าจะทำเว็บที่มันเปลี่ยนไปเปลี่ยนมาตลอดเวลาเหมือน Hill Valley ตัวจริง แต่เสียดายที่เวลาน้อยเกินไปไม่งั้นคงจะเล่นเรื่องการหักเหไทม์ไลน์แล้วก็ใส่ตัวละครสนุกๆ แบบคนจรจัด Red หรือนายกผิวดำ Goldie Wilson ได้อีก ตอนนี้ทำได้แค่เมืองแห้งๆ ก่อน

เปิดโฮมเพจมา เป็นหอนาฬิกา อยากให้มีฟ้าผ่าทุกสิบวิ แล้วให้มันเป็นอนิเมชั่นวิดีโอเนียนๆ เล่นไป แต่ฝีมือทำได้เท่านี้ จริงๆ เว็บมันจะหน้าต่อกันไปเรื่อยๆ

homepage

หน้าที่สองเป็น History เอาเรื่องเข็มนาฬิกามาใช้ ถ้าเลื่อนเข็มไปก็มีประวัติในแต่ละช่วงยุคของเมืองเขียนขึ้นมาตรงช่องระหว่างเข็มสองอัน รูปแบคกราวด์ข้างหลังก็เปลี่ยนด้วย

history.gif

อันถัดมาเป็นข่าวเมือง ก็เลยเอาลูกเล่นเครื่องย้อนเวลามาใช้ ถ้ากรอกเลขวันเดือนปีก็จะได้ข่าวเมืองในยุคนั้น  หรือจะใช้ลูกศรขึ้นลงเปลี่ยนเลขปีแบบเร็วๆ ก็ได้ พวกข่าวก็วิ่งไปทางซ้าย ซึ่งยิ่งปีเก่าๆ ยิ่งวิ่งช้าลง เพราะอยากให้นึกถึงถนนรถบินในปี 2015 ของหนัง

หน้าข่าวจะเชื่อมกับหน้าแผนที่แบบเลื่อนต่อกันได้ ฉะนั้นแบคกราวด์จะเป็นสีเดียวกับปีหน้าที่ดูข่าวค้างไว้แผนที่ก็จะเปลี่ยนไปตามปีด้วย

news.gif

 

การดูรีวิวสถานที่ แค่กดคลิกขึ้นมาเฉยๆ ตรงรูปเราเอาฉากที่ถ่ายร้านเดิมแต่คนละยุคมาซ้อนสลับกัน

 

loucourthouse

 

นี่คือไซต์แมพอันงงงวย แต่ไม่กะพริบแล้ว แมพสีเหลืองคือของปี 1885 ซึ่งทำเล่น

 

sitemap-01.jpg

 

จบแล้ว อยากจะกรี๊ดดดดด ต้องไปมหาวิทยาลัยแล้ว ลาไปก่อน เดี๋ยวจะมาเม้าเรื่องหนังชุดนี้ทีหลัง สวัสดี

Gotta get back to the future

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s