หนึ่งในเทคนิค "สุด" บนเว็บในปัจจุบันคือการเลื่อนลอยแบบ Parallax เราเคยไปที่ไซต์เหล่านั้นที่คุณหมุนล้อเลื่อนบนเมาส์และเนื้อหาบนหน้าเว็บจะเลื่อนขึ้นและลงหรือข้ามหน้าขณะที่คุณหมุนล้อเลื่อนเมาส์
สำหรับผู้ที่ยังใหม่กับการออกแบบเว็บและการออกแบบกราฟิกเทคนิคนี้สามารถทำได้ยากมากเนื่องจากต้องใช้ CSS จำนวนมาก
หากอธิบายว่าคุณมีแอปพลิเคชันมากมายที่อาจดึงดูดศิลปินกราฟิก โดยทั่วไปจะใช้วิธีการจัดหน้าเว็บที่คุ้นเคยกับหน้าเว็บซึ่งหมายความว่าไม่มีอะไรมากนักหากมีการเขียนโค้ด หนึ่งแอพพลิเคชันที่โดดเด่นเป็นอย่างมากคือ Adobe Muse
งานที่ทำโดยผู้เชี่ยวชาญกราฟิกโดยใช้ Muse เป็นที่น่าอัศจรรย์มากและคุณสามารถดูตัวอย่างของสิ่งที่คุณสามารถทำได้โดยไปที่ Muse เว็บไซต์ของวัน . แม้ว่าผู้เชี่ยวชาญด้านเว็บมักจะถือว่า Muse เป็นประเภท "ของเล่นลมๆ" แต่ก็ยังถูกใช้โดยนักออกแบบเพื่อสร้างต้นแบบบนอุปกรณ์เคลื่อนที่และเว็บที่จะส่งมอบให้กับนักพัฒนาซอฟต์แวร์ในทีมของพวกเขาในที่สุด
เทคนิคหนึ่งที่ทำได้ง่ายอย่างไม่น่าเชื่อคือ Muse คือการเลื่อนแบบ Parallax และหากคุณต้องการดูเวอร์ชันที่สมบูรณ์ของการออกกำลังกาย เมื่อคุณหมุนล้อเลื่อนของเมาส์ข้อความดูเหมือนว่าจะเลื่อนขึ้นหรือลงหน้าและภาพจะเปลี่ยนไป
มาเริ่มกันเลย.
01 จาก 07สร้างเว็บเพจ
เมื่อคุณเปิด Muse ให้คลิกที่ ไซต์ใหม่ ลิงค์ ซึ่งจะเป็นการเปิด คุณสมบัติเว็บไซต์ใหม่. โครงการนี้จะออกแบบมาสำหรับแอพพลิเคชันเดสก์ท็อปและคุณสามารถเลือกได้ใน เค้าโครงเริ่มต้น เมนูป็อปอัพ นอกจากนี้คุณยังสามารถตั้งค่าสำหรับจำนวนคอลัมน์ความกว้างรางน้ำส่วนขอบและฐานรอง ในกรณีนี้เราไม่ได้เกี่ยวข้องกับเรื่องนี้มากนักและคลิกเพียงครั้งเดียว ตกลง.
จัดรูปแบบหน้า
เมื่อคุณกำหนดคุณสมบัติไซต์แล้วคลิก ตกลง คุณถูกนำตัวไปยังสิ่งที่เรียกว่า วางแผน ดู. มี a บ้าน ที่ดานบนและก มาสเตอร์เพจ ที่ด้านล่างของหน้าต่าง เราต้องการเพียงหนึ่งหน้าเท่านั้น เมื่อต้องการไปที่ Design View เราคลิกสองครั้งที่หน้าแรกซึ่งเปิดอินเทอร์เฟซ
ด้านซ้ายเป็นเครื่องมือพื้นฐานบางอย่างและด้านขวาเป็นแผงต่างๆที่ใช้เพื่อจัดการกับเนื้อหาบนหน้าเว็บ ด้านบนเป็นคุณสมบัติซึ่งสามารถนำไปใช้กับหน้าเว็บหรือสิ่งที่เลือกบนหน้าเว็บ ในกรณีนี้เราต้องการมีพื้นหลังเป็นสีดำ เพื่อให้บรรลุเป้าหมายนี้เราคลิกที่ เบราเซอร์เติม ชิปสีและเลือกสีดำจากตัวเลือกสี
03 จาก 07เพิ่มข้อความลงในเพจ
ขั้นตอนต่อไปคือการเพิ่มข้อความลงในเพจ เราเลือก เครื่องมือข้อความ และดึงกล่องข้อความ เราป้อนคำว่า "ยินดีต้อนรับ" และในคุณสมบัติตั้งค่าข้อความไว้ Arial, 120 พิกเซลสีขาว Center Aligned
จากนั้นเราก็เปลี่ยนไปใช้เครื่องมือเลือกแล้วคลิกที่ Textbox แล้วตั้งค่า ตำแหน่ง Y ถึง 168 พิกเซลจากด้านบน ด้วยการเลือกกล่องข้อความเราจึงเปิด จัดเรียงแผงควบคุม และจัดให้กล่องข้อความตรงกลาง
สุดท้ายเราเลือกกล่องข้อความไว้ ตัวเลือก / Alt และ เปลี่ยน คีย์และทำสี่สำเนาของกล่องข้อความ เราได้เปลี่ยนข้อความและตำแหน่ง Y ของแต่ละสำเนาเพื่อ:
- ถึง, 871
- กราฟิก 1621
- ซอฟต์แวร์, 2371
คุณจะสังเกตเห็นเมื่อคุณตั้งค่าตำแหน่งของกล่องข้อความแต่ละหน้าจะปรับขนาดเพื่อรองรับตำแหน่งของข้อความ
04 จาก 07เพิ่มตัวยึดตำแหน่งรูปภาพ
ขั้นตอนต่อไปคือการวางภาพระหว่างบล็อคข้อความ
ขั้นตอนแรกคือการเลือก เครื่องมือสี่เหลี่ยมผืนผ้า และวาดกล่องของเราที่ทอดยาวจากด้านหนึ่งของหน้าไปที่อื่น ๆ เมื่อเลือกรูปสี่เหลี่ยมผืนผ้าเราจะตั้งค่า สูงเป็น 250 พิกเซล และมัน ตำแหน่ง Y ถึง 425 พิกเซล. แผนคือการให้พวกเขาเสมอยืดหรือทำสัญญากับความกว้างของหน้าเพื่อรองรับมุมมองเบราว์เซอร์ของผู้ใช้ เพื่อให้บรรลุนี้เราคลิกที่ ความกว้าง 100% ในคุณสมบัติ สิ่งนี้ทำออกมาเป็นสีเทาออกค่า X และเพื่อให้แน่ใจว่าภาพมีความกว้าง 100% ของความกว้างของวิวพอร์ตในเบราเซอร์
05 จาก 07เพิ่มรูปภาพไปยังตัวยึดตำแหน่งรูปภาพ
เลือกสี่เหลี่ยมผืนผ้าที่เราคลิก ลิงก์เติม - ไม่ใช่ชิปสี - และคลิก Iหมึก mage เพื่อเพิ่มภาพลงในสี่เหลี่ยมผืนผ้า ใน ฟิตติ้ง พื้นที่ที่เราเลือกไว้ ปรับให้พอดี และคลิกที่ ที่จับศูนย์กลาง ใน ตำแหน่ง เพื่อให้ภาพมีการปรับขนาดจากกึ่งกลางของภาพ
ต่อไปเราใช้ ตัวเลือก / Alt-Shift-ลาก เทคนิคในการสร้างสำเนาของภาพระหว่างบล็อคข้อความสองชุดแรกเปิดแผงป้อนข้อมูลและสลับภาพสำหรับอีกชุดหนึ่ง เราทำเช่นนี้สำหรับภาพที่เหลืออีกสองภาพเช่นกัน
ด้วยภาพในสถานที่เป็นเวลาที่จะเพิ่มการเคลื่อนไหว
06 จาก 07เพิ่ม Parallax Scrolling
มีหลายวิธีในการเพิ่มการเลื่อนล้าง Parallax ใน Adobe Muse เราจะแสดงวิธีง่ายๆในการทำ
เมื่อเปิดแผงป้อนข้อมูลให้คลิกที่ แท็บเลื่อน และเมื่อเปิดขึ้นให้คลิกที่ เช็คบ็อกซ์ Motion.
คุณจะเห็นค่าสำหรับ แรกเริ่ม และ Final Motion. เหล่านี้กำหนดความเร็วของภาพที่เลื่อนไปตามความสัมพันธ์กับ Scroll Wheel ตัวอย่างเช่นค่า 1.5 จะทำให้ภาพเร็วกว่าล้อ 1.5 เท่า เราใช้ค่าเป็น 0 เพื่อล็อคภาพในสถานที่
ลูกศรแนวนอนและแนวตั้ง กำหนดทิศทางของการเคลื่อนไหวหากค่าเป็น 0 ภาพจะไม่เคลื่อนที่โดยไม่คำนึงถึงลูกศรที่คุณคลิก
ค่ากลาง – ตำแหน่งสำคัญ - แสดงจุดที่ภาพเริ่มเคลื่อนไหว บรรทัดด้านบนภาพเริ่มต้นสำหรับภาพนี้ 325 พิกเซลจากด้านบนของหน้า เมื่อเลื่อนถึงค่าที่ภาพเริ่มเคลื่อนไหว คุณสามารถเปลี่ยนค่านี้ได้โดยการเปลี่ยนค่าในกล่องโต้ตอบหรือโดยการคลิกและลากจุดที่ด้านบนของบรรทัดขึ้นหรือลง
ทำซ้ำกับภาพอื่น ๆ บนหน้า
07 จาก 07ทดสอบเบราเซอร์
ตอนนี้เราเสร็จสิ้นแล้ว สิ่งแรกที่เราทำเพื่อเหตุผลที่ชัดเจนคือการเลือก ไฟล์> บันทึกเว็บไซต์. เพื่อทดสอบเบราว์เซอร์เราเพียงแค่เลือก ไฟล์> หน้าตัวอย่างในเบราเซอร์. การดำเนินการนี้เปิดเบราว์เซอร์เริ่มต้นของคอมพิวเตอร์ของเราและเมื่อหน้าเว็บเปิดขึ้นเราเริ่มเลื่อนดู
