นี่คือเอฟเฟกต์พิเศษของรูปแบบที่แตกต่างกันของสไลด์โชว์เค้าโครงหน้าด้วยเอฟเฟกต์เจ๋งมาก ในเอฟเฟกต์พิเศษนี้สไลด์โชว์จะถูกสลับผ่านปุ่มนำทางด้านหน้าและด้านหลังและรูปภาพในแต่ละสไลด์มีเอฟเฟกต์เค้าโครงที่แตกต่างกัน
เอฟเฟกต์สไลด์นี้ใช้ anime.js เพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหวสำหรับสไลด์และใช้คุณสมบัติ CSS3 จำนวนมาก ต้องใช้เบราว์เซอร์สมัยใหม่รุ่นล่าสุดเพื่อดูเอฟเฟกต์ สำหรับเบราว์เซอร์ IE เอฟเฟกต์ก่อนหน้านี้สามารถเห็นได้ในเบราว์เซอร์ที่มี IE11 ขึ้นไป ไม่สามารถมองเห็นเอฟเฟกต์สุดท้ายได้เนื่องจากเบราว์เซอร์เช่นเบราว์เซอร์ไม่รองรับแอตทริบิวต์คลิป SVG
วิธีใช้
โครงสร้าง HTML
โครงสร้าง HTML พื้นฐานของสไลด์นี้มีดังนี้: แต่ละสไลด์มีคลาสเลย์เอาต์คลาสของตัวเองและคุณสมบัติการวางข้อมูลเพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหวของตัวเอง
<div> <div data-layout = "layout1"> <div> <div> <div style = "background-image: url (img/1.jpg);"> </div> </div> <div> <div style = "พื้นหลัง-ภาพ: url (img/2.jpg);"> </div> url (img/3.jpg); "> </div> </div> </div> <div> <h3> ตอนนี้หรือไม่เคย </h3> <p> ... <a href ="#"> อ่านเพิ่มเติม </a> </p> </div> </div> <! /สไลด์โชว์ ->
สไตล์ CSS
นี่คือสไตล์ CSS สำหรับหนึ่งในเลย์เอาต์:
/ * เลย์เอาต์ 1: 3 ภาพกริด */. สไลด์-layout-1 .Slide__img {ตำแหน่ง: สัมบูรณ์; ความกว้าง: Calc (50% - 1EM); } .Slide-layout-1 .Slide__img: ลูกคนแรก {ซ้าย: 0.5EM; ความสูง: 100%; } .Slide-layout-1 .Slide__img: nth-child (n + 2) {ซ้าย: calc (50% + 0.5em); ความสูง: Calc (50% - 0.5em); } .Slide-layout-1 .Slide__img: nth-child (3) {top: calc (50% + 0.5em);}ผลลัพธ์จะแสดงในรูปด้านล่าง:
จาวาสคริปต์
เอฟเฟกต์ภาพเคลื่อนไหวของแต่ละเค้าโครงสไลด์ถูกกำหนดไว้ในไฟล์ JS โครงสร้างคือ: [ชื่อเลย์เอาต์]: {out: {นำทางคุณสมบัติออก}, ใน: {การนำทางในคุณสมบัติ}} เอฟเฟกต์ภาพเคลื่อนไหวที่แตกต่างกันสามารถตั้งค่าสำหรับการเข้าและออกสไลด์ รหัสต่อไปนี้คือรหัสตัวอย่างสำหรับเค้าโครงแรก:
mlslideshow.prototype.options = {// ตำแหน่งเริ่มต้น startIdx: 0, // การกำหนดค่าเค้าโครง // [ชื่อเค้าโครง]: {out: {นำทางออกจากคุณสมบัติ}, ใน: {นำทางในคุณสมบัติ}} layoutconfig: {layout1: {out: {translatex: {ถัดไป: '-100%', prev: '100%'}, rotatez: {next }, ก่อนหน้า: ฟังก์ชั่น (el, ดัชนี) {return anime.random (0, 15); }}, ความทึบ: 0, ระยะเวลา: 1200, การผ่อนคลาย: 'EaseOutquint', itemsDelay: 80}, ใน: {resetProps: {translatex: {ถัดไป: '100%', ก่อนหน้า: '-100%'}, Rotatez: {next: function }, ก่อนหน้า: ฟังก์ชั่น (el, ดัชนี) {return anime.random (-15, 0); }}, ความทึบ: 0,}, translatex: '0%', rotatez: 0, ความทึบ: 1, ระยะเวลา: 700, การผ่อนคลาย: 'EaseOutquint', itemsDelay: 80}}, layout2: { / * ... * /}, layout3: { / * ... * /}ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น