หนึ่งในเทคนิค "สุด" บนเว็บในปัจจุบันคือการเลื่อนลอยแบบ Parallax เราเคยไปที่ไซต์เหล่านั้นที่คุณหมุนล้อเลื่อนบนเมาส์และเนื้อหาบนหน้าเว็บจะเลื่อนขึ้นและลงหรือข้ามหน้าขณะที่คุณหมุนล้อเลื่อนเมาส์
สำหรับผู้ที่ยังใหม่กับการออกแบบเว็บและการออกแบบกราฟิกเทคนิคนี้สามารถทำได้ยากมากเนื่องจากต้องใช้ CSS จำนวนมาก
หากอธิบายว่าคุณมีแอปพลิเคชันมากมายที่อาจดึงดูดศิลปินกราฟิก โดยทั่วไปจะใช้วิธีการจัดหน้าเว็บที่คุ้นเคยกับหน้าเว็บซึ่งหมายความว่าไม่มีอะไรมากนักหากมีการเขียนโค้ด หนึ่งแอพพลิเคชันที่โดดเด่นเป็นอย่างมากคือ Adobe Muse
งานที่ทำโดยผู้เชี่ยวชาญกราฟิกโดยใช้ Muse เป็นที่น่าอัศจรรย์มากและคุณสามารถดูตัวอย่างของสิ่งที่คุณสามารถทำได้โดยไปที่ Muse Site of the Day แม้ว่าผู้เชี่ยวชาญด้านเว็บมักจะถือว่า Muse เป็นประเภท "ของเล่นลมๆ" แต่ก็ยังถูกใช้โดยนักออกแบบเพื่อสร้างต้นแบบบนอุปกรณ์เคลื่อนที่และเว็บที่จะส่งมอบให้กับนักพัฒนาซอฟต์แวร์ในทีมของพวกเขาในที่สุด
หนึ่งเทคนิคที่ง่ายอย่างไม่น่าเชื่อในการบรรลุ Muse คือการเลื่อนแบบ Parallax และถ้าคุณต้องการดูเวอร์ชันที่สมบูรณ์แบบของการออกกำลังกายเราจะเดินผ่านไปชี้เบราว์เซอร์ของคุณไปที่หน้านี้ เมื่อคุณหมุนล้อเลื่อนของเมาส์ข้อความดูเหมือนว่าจะเลื่อนขึ้นหรือลงหน้าและภาพจะเปลี่ยนไป
มาเริ่มกันเลย.
01 จาก 07
สร้างเว็บเพจ
เมื่อคุณเปิด Muse คลิกที่ลิงค์ New Site ซึ่งจะเป็นการเปิด New Site Properties โครงการนี้จะได้รับการออกแบบมาสำหรับแอปพลิเคชันบนเดสก์ท็อปและคุณสามารถเลือกได้ในเมนูแบบเลื่อนลง Initial Layout นอกจากนี้คุณยังสามารถตั้งค่าสำหรับจำนวนคอลัมน์ความกว้างรางน้ำส่วนขอบและฐานรอง ในกรณีนี้เราไม่ได้เกี่ยวข้องกับเรื่องนี้มากนักและคลิก ตกลง
02 จาก 07
จัดรูปแบบหน้า
เมื่อคุณตั้งค่าคุณสมบัติไซต์และคลิกตกลงคุณถูกนำไปยังสิ่งที่เรียกว่ามุมมอง แบบแผนการ มี หน้าแรก ที่ด้านบนและ หน้าหลัก ที่ด้านล่างของหน้าต่าง เราต้องการเพียงหนึ่งหน้าเท่านั้น เมื่อต้องการไปที่ Design View เราคลิกสองครั้งที่หน้าแรกซึ่งเปิดอินเทอร์เฟซ
ด้านซ้ายเป็นเครื่องมือพื้นฐานบางอย่างและด้านขวาเป็นแผงต่างๆที่ใช้เพื่อจัดการกับเนื้อหาบนหน้าเว็บ ด้านบนเป็นคุณสมบัติซึ่งสามารถนำไปใช้กับหน้าเว็บหรือสิ่งที่เลือกบนหน้าเว็บ ในกรณีนี้เราต้องการมีพื้นหลังเป็นสีดำ ในการดำเนินการนี้เราจะคลิกที่ชิปสี เบราว์เซอร์เติม และเลือกสีดำจากตัวเลือกสี
03 จาก 07
เพิ่มข้อความลงในเพจ
ขั้นตอนต่อไปคือการเพิ่มข้อความลงในเพจ เราเลือก เครื่องมือข้อความ และดึงกล่องข้อความ เราได้ป้อนคำว่า "Welcome" และใน Properties จะตั้งค่า Text เป็น Arial, 120 pixels White Center Aligned
จากนั้นเราก็เปลี่ยนไปใช้เครื่องมือการเลือกคลิกที่ Textbox และตั้ง ตำแหน่ง Y เป็น 168 พิกเซลจากด้านบน ด้วยการเลือกช่องข้อความเราได้เปิด แผงควบคุม และจัดแนวกล่องข้อความไว้ตรงกลาง
สุดท้ายเรา เลือก Option Box ไว้ที่ Option / Alt และ Shift และทำสำเนาข้อความสี่ชุด เราได้เปลี่ยนข้อความและตำแหน่ง Y ของแต่ละสำเนาเพื่อ:
- ถึง, 871
- กราฟิก 1621
- ซอฟต์แวร์, 2371
- @ About.com, 3181
คุณจะสังเกตเห็นเมื่อคุณตั้งค่าตำแหน่งของกล่องข้อความแต่ละหน้าจะปรับขนาดเพื่อรองรับตำแหน่งของข้อความ
04 จาก 07
เพิ่มตัวยึดตำแหน่งรูปภาพ
ขั้นตอนต่อไปคือการวางภาพระหว่างบล็อคข้อความ
ขั้นตอนแรกคือการเลือก เครื่องมือสี่เหลี่ยมผืนผ้า และวาดกล่องของเราที่ทอดยาวจากด้านใดด้านหนึ่งไปอีกหน้า เมื่อเลือกสี่เหลี่ยมผืนผ้าเราจะกำหนด ความสูงเป็น 250 พิกเซล และ ตำแหน่ง Y ถึง 425 พิกเซล แผนคือการให้พวกเขาเสมอยืดหรือทำสัญญากับความกว้างของหน้าเพื่อรองรับมุมมองเบราว์เซอร์ของผู้ใช้ เมื่อต้องการทำเช่นนี้เราคลิกที่ปุ่ม ความกว้าง 100% ใน Properties สิ่งนี้ทำออกมาเป็นสีเทาออกค่า X และเพื่อให้แน่ใจว่าภาพมีความกว้าง 100% ของความกว้างของวิวพอร์ตในเบราเซอร์
05 จาก 07
เพิ่มรูปภาพไปยังตัวยึดตำแหน่งรูปภาพ
เมื่อเลือกสี่เหลี่ยมผืนผ้าเราคลิกที่ ลิงก์เติม - ไม่ใช่ชิปสี - และคลิก หมึก I mage เพื่อเพิ่มภาพในสี่เหลี่ยมผืนผ้า ในส่วนการ ติดตั้ง เราเลือก Scale To Fit และคลิกที่ที่ จับตรงกลาง ในบริเวณ Position เพื่อให้แน่ใจว่าภาพถูกปรับตั้งแต่กึ่งกลางของภาพ
จากนั้นเราใช้เทคนิค Option / Alt-Shift-drag เพื่อสร้างสำเนาของภาพระหว่างบล็อคข้อความสองชุดแรกเปิดแผงป้อนข้อมูลและเปลี่ยนภาพอีกอัน เราทำเช่นนี้สำหรับภาพที่เหลืออีกสองภาพเช่นกัน
ด้วยภาพในสถานที่เป็นเวลาที่จะเพิ่มการเคลื่อนไหว
06 จาก 07
เพิ่ม Parallax Scrolling
มีหลายวิธีในการเพิ่มการเลื่อนล้าง Parallax ใน Adobe Muse เราจะแสดงวิธีง่ายๆในการทำ
เมื่อเปิดแผงป้อนข้อมูลให้คลิก แท็บ Scroll และเมื่อเปิดขึ้นให้คลิกที่ ช่องทำเครื่องหมาย Motion
คุณจะเห็นค่าสำหรับการ เคลื่อนไหว ครั้งแรก และ ขั้นสุดท้าย เหล่านี้กำหนดความเร็วของภาพที่เลื่อนไปตามความสัมพันธ์กับ Scroll Wheel ตัวอย่างเช่นค่า 1.5 จะทำให้ภาพเร็วกว่าล้อ 1.5 เท่า เราใช้ค่าเป็น 0 เพื่อล็อคภาพในสถานที่
ลูกศรแนวนอนและแนวตั้ง จะกำหนดทิศทางของการเคลื่อนที่ หากค่าเป็น 0 ภาพจะไม่เคลื่อนที่โดยไม่คำนึงถึงลูกศรที่คุณคลิก
ค่ากลาง - Key Position - แสดงตำแหน่งที่ภาพเริ่มเคลื่อนไหว บรรทัดด้านบนภาพเริ่มต้นสำหรับภาพนี้ 325 พิกเซลจากด้านบนของหน้า เมื่อเลื่อนถึงค่าที่ภาพเริ่มเคลื่อนไหว คุณสามารถเปลี่ยนค่านี้ได้โดยการเปลี่ยนค่าในกล่องโต้ตอบหรือโดยการคลิกและลากจุดที่ด้านบนของบรรทัดขึ้นหรือลง
ทำซ้ำกับภาพอื่น ๆ บนหน้า
07 จาก 07
ทดสอบเบราเซอร์
ตอนนี้เราเสร็จสิ้นแล้ว สิ่งแรกที่เราทำเพื่อเหตุผลที่ชัดเจนคือเลือก File> Save Site ในการทดสอบเบราว์เซอร์เราเลือก ไฟล์> หน้าแสดงตัวอย่างในเบราว์เซอร์ การดำเนินการนี้เปิดเบราว์เซอร์เริ่มต้นของคอมพิวเตอร์ของเราและเมื่อหน้าเว็บเปิดขึ้นเราเริ่มเลื่อนดู