หลักการพื้นฐาน
กล่องเลื่อนแบบไดนามิกเหล่านี้ใช้หลักการพื้นฐานเดียวกัน แท็ก DIV ที่มี ".boxgrid" ทำหน้าที่เป็นหน้าต่างหลังจากที่คุณส่งอีกสองรายการในวัตถุที่คุณต้องการ "มองลอด" เข้าไป ไม่แน่ใจใช่ไหม ให้ภาพนี้ให้เบาะแสแก่คุณ:
หลังจากทำความเข้าใจหลักการพื้นฐานนี้แล้ว เราสามารถใช้เอฟเฟ็กต์ภาพเคลื่อนไหวขององค์ประกอบแบบเลื่อนเพื่อเปิดเผยหรือครอบคลุมพื้นที่ที่จะแสดงเพื่อสร้างเอฟเฟกต์แบบเลื่อนได้
คลิกเพื่อดูตัวอย่างเอฟเฟกต์ ดาวน์โหลดไฟล์ต้นฉบับสำหรับตัวอย่างนี้
ขั้นตอนที่หนึ่ง – พื้นฐาน CSS
ในแผนภาพแรงบันดาลใจด้านบนที่ให้โครงสร้างพื้นฐาน เราจำเป็นต้องใช้ CSS เล็กน้อยเพื่อให้แสดงเอฟเฟกต์ที่ต้องการ CSS ต่อไปนี้กำหนดหน้าต่างการดู (.boxgrid) และตั้งค่าตำแหน่งเริ่มต้นของรูปภาพเป็นด้านซ้ายและด้านบน ซึ่งมีความสำคัญมากสำหรับการอธิบายที่ทับซ้อนกันเมื่อเลื่อน และอย่าลืมว่า overflow:hidden จะทำให้สิ่งนี้เป็นไปได้
.boxgrid{
ความกว้าง: 325px;
ความสูง: 260px;
ระยะขอบ:10px;
ลอย:ซ้าย;
พื้นหลัง:#161613;
เส้นขอบ: ทึบ 2px #8399AF;
ล้น: ซ่อนเร้น;
ตำแหน่ง: ญาติ;
-
.boxgrid img{
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
ซ้าย: 0;
เส้นขอบ: 0;
-
หากคุณยังไม่พร้อมที่จะใช้ CSS เพื่อให้ได้คำอธิบายที่โปร่งใส คุณสามารถข้ามไปยังขั้นตอนที่ 2 ได้โดยตรง:
.boxcaption{
ลอย: ซ้าย;
ตำแหน่ง: แน่นอน;
พื้นหลัง: #000;
ความสูง: 100px;
ความกว้าง: 100%;
ความทึบ: .8;
/* สำหรับ IE 5-7 */
ตัวกรอง: progid: DXImageTransform.Microsoft.Alpha (ความทึบ = 80);
/* สำหรับ IE 8 */
-ตัวกรอง MS: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-
ตอนนี้ เราต้องตั้งค่าจุดเริ่มต้นเริ่มต้นสำหรับกล่องคำอธิบายภาพ (ฉันคิดว่าเลเยอร์ดีกว่ากล่อง) หากคุณต้องการให้ซ่อนไว้อย่างสมบูรณ์เมื่อเริ่มต้น คุณจะต้องตั้งค่า TOP และ LEFT ให้เป็นความสูงและความกว้างของหน้าต่าง (.boxgrid) ซึ่ง (แน่นอน) จะถูกกำหนดโดยทิศทางที่คุณต้องการเลื่อน คุณยังสามารถให้มันแสดงเพียงบางส่วนในการเริ่มต้น ตามที่กำหนดโดย .caption และ .boxcaption นี้ (กำหนดโดย CSS):
.captionfull .boxcaption {
ด้านบน: 260;
ซ้าย: 0;
-
.คำบรรยาย .boxcaption {
ด้านบน: 220;
ซ้าย: 0;
-
ที่มา: Happy Favourites