ในบทช่วยสอนนี้ เราจะดูเอฟเฟกต์การเลื่อนพารัลแลกซ์ที่สวยงามด้วยวิธีที่ง่ายที่สุด โดยมีพื้นหลังอยู่กับที่และเนื้อหาแบบเลื่อน

ดาวน์โหลดไฟล์ต้นฉบับ ดูการสาธิต

บทนำสั้นๆ

Parallax เป็นเอฟเฟกต์ที่ตำแหน่งของวัตถุดูแตกต่างเมื่อดูจากตำแหน่งที่ต่างกัน การเคลื่อนที่แบบพารัลแลกซ์ หรือในกรณีของเรา การเลื่อนแบบพารัลแลกซ์ ทำให้เราเห็นภาพมายาว่าวัตถุสองชิ้นอยู่ในแนวสายตาเดียวกัน แต่ด้วยระยะห่างระหว่างวัตถุ ดูเหมือนว่าจะเคลื่อนที่ด้วยความเร็วต่างกัน หากคุณเคยมองออกไปนอกหน้าต่างรถขณะขับรถไปตามทางหลวงด้วยความเร็ว 100 กม.ต่อชั่วโมง คุณจะสังเกตเห็นว่าเสาไฟฟ้าดูเหมือนจะเคลื่อนตัวไปอย่างรวดเร็ว ในขณะที่ภูเขาที่อยู่ด้านหลังดูเหมือนจะเคลื่อนตัวช้ามาก เกือบจะหยุดนิ่ง นี่คือการเคลื่อนไหวแบบพารัลแลกซ์ในการดำเนินการ

เท่าที่ใช้เว็บ เราสามารถทำให้เกิดเอฟเฟกต์พารัลแลกซ์บนคอนเทนเนอร์ที่มีรูปภาพพื้นหลังและข้อความอยู่ด้านบน ในรูปแบบที่ง่ายที่สุด การเลื่อนแบบพารัลแลกซ์จะทำให้เนื้อหาเลื่อนได้ตามปกติ และพื้นหลังจะอยู่กับที่ ความงามของเทคนิคนี้ในรูปแบบที่ง่ายที่สุดคือต้องใช้ CSS เท่านั้น มาขุดกันเถอะ

มาร์กอัปและโครงสร้าง

หากคุณแก้ไขเว็บไซต์ที่ไม่ตอบสนอง ก็จะไม่มีกลอุบายใด ๆ ในการดำเนินการนี้ เราอยู่ในยุคของการออกแบบเว็บที่ตอบสนอง ดังนั้นจึงไม่ต้องทำอะไรเลย อย่ากลัว! เรามี CSS ดีๆ ไว้คอยบริการ แต่ก่อนอื่นให้ดูที่มาร์กอัป มาร์กอัปนั้นเรียบง่าย เราจะมีพื้นหลัง/ส่วนหัวของข้อความและ sections เนื้อหาสลับ sections เพื่อให้ได้ผลลัพธ์สูงสุด นี่คือสิ่งที่ดูเหมือน:

  

    
เงียบสงบ
  



  

    
ลอเรม อิปซัม โดลอร์
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
ลุกขึ้น
  



  

    
ลอเรม อิปซัม โดลอร์
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
ความสงบ
  



  

    
ลอเรม อิปซัม โดลอร์
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...



  

แต่ละ section ที่มีคลาส parallax ลแลกซ์จะมีภาพพื้นหลังและข้อความส่วนหัว ในขณะที่แต่ละ section ที่มีคลาสของ content จะเป็นส่วนที่ประกอบด้วยเนื้อหาอย่างง่าย คลาส container เป็น div แบบไหลที่มีความกว้างสูงสุด ทำให้การตอบสนองของทุกอย่างทำได้ง่ายมาก ตอนนี้ มาเจาะลึกใน CSS กัน

จัดแต่งทรงผมและทำให้ใช้งานได้ด้วย CSS

จุดแรกที่ควรทราบคือภาพพื้นหลังทั้งหมดของฉันมี width 1600px และ height 600px ที่ช่วยให้ฉันสามารถตั้งค่าส่วนพารัลแลกซ์ของฉันให้มีความสูงคงที่ 600px มีมากกว่านั้นเล็กน้อย เนื่องจากฉันไม่ต้องการให้พื้นหลังซ้ำกัน (ฉันใช้รูปภาพขนาดใหญ่และเป็นตัวหนา) ฉันจึงไม่สามารถคาดหวังให้ผู้ใช้มีความกว้างสูงสุดได้เสมอ (ซึ่งจะทำให้ภาพพื้นหลังแสดงในมุมมองแบบเต็ม) โชคดีสำหรับเรา เราสามารถใช้คุณสมบัติ background-size CSS และตั้งค่าให้ cover สิ่งนี้บังคับให้ภาพพื้นหลังใช้พื้นที่ว่างทั้งหมดโดยการขยายตามสัดส่วน ต้องมีคำนำหน้าเพื่อให้ได้รับการสนับสนุนสูงสุด ดังนั้นพึงระลึกไว้เสมอว่า

จนถึงตอนนี้ดีมากยกเว้นสิ่งที่สำคัญที่สุด เราต้องการให้ภาพพื้นหลังคงอยู่กับที่ในขณะที่เนื้อหาเลื่อนผ่าน อีกครั้ง CSS ทำให้ชีวิตง่ายสำหรับเรา เราใช้คุณสมบัติ background-attachment และตั้งค่าเป็น fixed เรียบง่าย! CSS ของฉันมีลักษณะดังนี้ พร้อมตัวอย่างการสืบค้นสื่อ:

 /* =============================================== ============
  โครงสร้างหลัก
================================================= ========== */
.คอนเทนเนอร์ {
  ความกว้างสูงสุด: 960px;
  ระยะขอบ: 0 อัตโนมัติ;
}
/* =============================================== ============
  ส่วน
================================================= ========== */
section.module:last-child {
  ระยะขอบล่าง: 0;
}
ส่วน.โมดูล h2 {
  ระยะขอบล่าง: 40px;
  ตระกูลแบบอักษร: "Roboto Slab", serif;
  ขนาดตัวอักษร: 30px;
}
ส่วน.โมดูล p {
  ระยะขอบล่าง: 40px;
  ขนาดตัวอักษร: 16px;
  ตัวอักษร-น้ำหนัก: 300;
}
section.module p:last-child {
  ระยะขอบล่าง: 0;
}
section.module.content {
  ช่องว่างภายใน: 40px 0;
}
ส่วน.โมดูล.พารัลแลกซ์ {
  ความสูง: 600px;
  พื้นหลังตำแหน่ง: 50% 50%;
  พื้นหลังซ้ำ: ไม่ซ้ำ;
  ไฟล์แนบพื้นหลัง: แก้ไข;
  ขนาดพื้นหลัง: ปก;
}
section.module.parallax h1 {
  สี: rgba (255, 255, 255, 0.8);
  ขนาดตัวอักษร: 48px;
  ความสูงของบรรทัด: 600px;
  ตัวอักษร-น้ำหนัก: 700;
  จัดข้อความ: ศูนย์;
  การแปลงข้อความ: ตัวพิมพ์ใหญ่;
  ข้อความเงา: 0 0 10px rgba(0, 0, 0, 0.2);
}
ส่วน.โมดูล.พารัลแลกซ์-1 {
  ภาพพื้นหลัง: url("../img/demo/_small/1.jpg");
}
ส่วน.โมดูล.พารัลแลกซ์-2 {
  ภาพพื้นหลัง: url("../img/demo/_small/2.jpg");
}
ส่วน.โมดูล.พารัลแลกซ์-3 {
  ภาพพื้นหลัง: url("../img/demo/_small/3.jpg");
}

@media ทั้งหมดและ (ความกว้างขั้นต่ำ: 600px) {
  ส่วน.โมดูล h2 {
    ขนาดตัวอักษร: 42px;
  }
  ส่วน.โมดูล p {
    ขนาดตัวอักษร: 20px;
  }
  section.module.parallax h1 {
    ขนาดตัวอักษร: 96px;
  }
}
@media ทั้งหมดและ (ความกว้างต่ำสุด: 960px) {
  section.module.parallax h1 {
    ขนาดตัวอักษร: 160px;
  }
}

การสนับสนุนเบราว์เซอร์และข้อมูลทรัพย์สิน

การสนับสนุนเบราว์เซอร์โดยทั่วไปนั้นยอดเยี่ยมมาก IE8 และ down จะไม่รองรับคุณสมบัติ background-size แต่สไตล์ตามเงื่อนไขอย่างง่ายควรดูแลสิ่งนั้น นอกจากนั้น ทุกอย่างได้รับการสนับสนุน และคุณไม่ควรมีปัญหาใดๆ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติ CSS ที่ใช้ในบทช่วยสอนนี้ โปรดดูที่ MDN:

• ตำแหน่งเบื้องหลัง – ข้อมูลอ้างอิง MDN
• ขนาดพื้นหลัง – ข้อมูลอ้างอิง MDN
• ไฟล์แนบพื้นหลัง – ข้อมูลอ้างอิง MDN

สรุป

ที่นี่ เราได้นำสิ่งที่เรียบง่าย มีประสิทธิภาพ และแตกต่างไปจากรูปลักษณ์แบบเลื่อนทุกอย่างในครั้งเดียวทั่วไปเล็กน้อย เราใช้เทคนิค CSS ที่ดีแต่ไม่ค่อยมีใครรู้จักเพื่อให้ได้ผลลัพธ์ที่ต้องการ และนั่นคือห่อ! อย่าลืม คุณสามารถดูการสาธิตและดาวน์โหลดแหล่งที่มาได้โดยคลิกลิงก์ด้านล่าง และหากคุณมีคำถาม ข้อคิดเห็น หรือข้อเสนอแนะ คุณสามารถฝากไว้ด้านล่าง