เพิ่มตัวกรอง SVG ด้วย CSS

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

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

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

สนใจเรียนรู้เพิ่มเติมเกี่ยวกับ SVG หรือไม่ ลองดูบทความของเราใน ทุกสิ่งที่คุณต้องรู้เกี่ยวกับ SVG บนเว็บ . หรือเพิ่มความสนใจในเว็บไซต์ของคุณด้วยหนึ่งในเท่ห์เหล่านี้ ตัวอย่างภาพเคลื่อนไหว CSS .

• ดาวน์โหลดไฟล์ สำหรับบทช่วยสอนนี้จาก Filesilo

01. เริ่มต้นใช้งาน

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

 & lt; div class = "bg" & gt;
& lt; div class = "กลาง" & gt;
& lt; h2 class = "พาดหัว" & gt; ใต้น้ำ
Adventure Park & ​​Lt; / H2 & GT;
& lt; div class = "intro_block" & gt; 

02. ปิดส่วนหัว

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

 & lt; h3 class = "subhead" & gt; สัมผัสกับมหาสมุทร
& lt; BR & GT; อย่างที่ไม่เคยมีมาก่อน & lt; / h3 & gt;
& lt; p class = "intro" & gt; ใต้น้ำ
Adventure Park เป็นประสบการณ์
ปลดเปลื้องอะไรก็ได้ที่คุณเคยมี
มี. เดินทางไปที่ระดับความลึกของ
มหาสมุทรและเดินท่ามกลาง
Sea Life! & Lt; / P & GT;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. สร้างตัวกรอง SVG

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

 & lt; svg xmlns = "http://www.w3.org/2000/svg" & gt;
& lt; id ตัวกรอง = "displacementfilter" & gt;
& lt; feturbulence type = "ความปั่นป่วน"
basefrequency = "0.004" numoctaves =
"2" ผลลัพธ์ = "ความปั่นป่วน" / & gt;
& lt; / filter & gt;
& lt; / svg & gt; 

04. ซ่อน SVG

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

 SVG {
แสดง: ไม่มี;
}
h2 {
ขนาดตัวอักษร: 5.5VW;
ตัวอักษรตระกูล: 'ครีตรอบ', serif;
} 

05. เพิ่มไปยังพาดหัว

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

. headline {
บรรทัดความสูง: 0;
จอแสดงผล: บล็อกแบบอินไลน์;
padding: 70px;
สี: #ccffff; 

06. เสร็จสิ้นพาดหัว

ในการจบชั้นเรียนพาดหัวบรรทัดถัดไปจะใช้ displacementfilter ID ใน SVG กับข้อความ ที่ translate3d ตรวจสอบให้แน่ใจว่าข้อความกลายเป็นฮาร์ดแวร์เร่ง สเกลมีการเปลี่ยนแปลงเล็กน้อยเพื่อให้แน่ใจว่าเมื่อใช้การกระจัดมันดูถูกต้อง

 ตัวกรอง: URL (#displacementfilter);
แปลง: translate3d (0, 0, 0);
แปลง: scaly (1.8) rotatey (-2deg);
} 

07. ทำให้มันแทนที่

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

 & lt; fedisplacementmap in2 = "ความปั่นป่วน" ใน = "
SourceGraphic "Scale =" 30 "xchannmelelector =" r "
ychannmelselector = "g" ผลลัพธ์ = "DISP" / & GT; 

08. นุ่มนวลขอบ

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

 & lt; fegaussianblur ใน = "แหล่งข้อมูลกราฟิก"
stddeviation = "15" ผลลัพธ์ = "BLR" / & GT; 

09. คอมโพสิตทั้งสอง

เพิ่มบรรทัดคอมโพสิตที่นี่ด้านล่าง Blur Gaussian ก่อนหน้านี้ คุณจะเห็นว่าสิ่งนี้ผสมผสานความเบลอและการกระจัดเข้าด้วยกันและยังสร้างเอฟเฟกต์โปร่งแสงด้วยน้ำต่อข้อความ มันหายไปหน่อยในการทำให้ขอบอ่อนลง แต่ไม่เพียงพอ มันจะดีถ้าการเบลอดั้งเดิมสามารถเพิ่มเข้าไปในนี้

 & lt; fecomposite ใน = "blr" in2 = "disp" operator = "ใน" ผลลัพธ์ = "comp" / & gt; 

10. รวมพร่ามัว

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

 & lt; ผลลัพธ์ femerge = "สุดท้าย" & gt;
& lt; femererkenode ใน = "blr" / & gt;
& lt; femerergenode ใน = "comp" / & gt;
& lt; / femerge & gt; 

11. สร้างภาพเคลื่อนไหว

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

 @Keyframes Scaler {
จาก {
ขนาดตัวอักษร: 0vw;
}
ถึง {
ขนาดตัวอักษร: 5.5VW;
}
} 

12. เปลี่ยนสไตล์ H2

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

 H2 {
บรรทัดความสูง: 0;
ขนาดตัวอักษร: 0vw;
แอนิเมชัน - ชื่อ: Scaler;
แอนิเมชัน - ระยะเวลา: 4S;
Animation-Fill-Mode: Forwards;
ตัวอักษรตระกูล: 'ครีตรอบ', serif;
} 

13. เพิ่มการนำทาง

ตอนนี้เรามาสร้างแอนิเมชั่นที่ได้รับแรงบันดาลใจจากน้ำที่ได้รับแรงบันดาลใจจากน้ำที่เหมาะสมโดยใช้ตัวกรอง SVG อื่น เพิ่มเนื้อหาการนำทางต่อไปนี้ไปยังด้านบนของรหัสร่างกายก่อนที่จะมีการเริ่มต้นในขั้นตอนแรกของการกวดวิชา สิ่งนี้จะสร้างพื้นฐานของเมนูแฮมเบอร์เกอร์ในวงกลม

& lt; nav class = "เมนู" & gt;
& lt; input type = "ช่องทำเครื่องหมาย" href = "#" คลาส =
"เมนูเปิด" name = "เมนูเปิด" id = "เมนู -
เปิด "/ & gt;
& lt; label class = "เมนูเปิดปุ่ม"
สำหรับ = "เปิดเมนู" & gt;
& lt; span class = "แฮมเบอร์เกอร์
แฮมเบอร์เกอร์ -1 "& gt; & lt; / span & gt;
& lt; span class = "แฮมเบอร์เกอร์
แฮมเบอร์เกอร์ -2 "& GT; & lt; / span & gt;
& lt; span class = "แฮมเบอร์เกอร์
แฮมเบอร์เกอร์ -3 "& gt; & lt; / span & gt;
& lt; / ฉลาก & gt; 

14. เสร็จสิ้นการนำทาง

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

 & lt; a href = "#" class = "รายการเมนู" & gt; & lt; i class = "fa
FA-CAR "& GT; & LT; / I & GT; & LT; / A & GT;
& lt; a href = "#" class = "รายการเมนู" & gt; & lt; i
Class = "FA FA- เรือ" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; a href = "#" class = "รายการเมนู" & gt; & lt; i
Class = "FA FA-Map" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; a href = "#" class = "รายการเมนู" & gt; & lt; i
Class = "Fa Fa- Suitcase" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; / nav & gt; 

15. เพิ่มตัวกรองใหม่

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

 & lt; id filter = "shadowed-blob" & gt;
& lt; fegaussianblur ใน = "แหล่งข้อมูลกราฟิก"
ผลลัพธ์ = "เบลอ" stddeviation = "20" / & gt;
& lt; fecolormatrix ใน = "เบลอ" โหมด =
"เมทริกซ์" ค่า = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7 "
ผลลัพธ์ = "Blob" / & GT;
& lt; fegaussianblur ใน = "หยด"
stddeviation = "3" ผลลัพธ์ = "เงา" / & gt;
& lt; fecolormatrix ใน = โหมด "เงา" =
"เมทริกซ์" ค่า = "0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 1 -0.2 "
ผลลัพธ์ = "เงา" / & gt; 

16. เสร็จสิ้นตัวกรอง

ส่วนที่เหลือของตัวกรองจะถูกเพิ่มที่นี่ซึ่งเสร็จสิ้นเอฟเฟกต์ที่จะวางไว้ในแต่ละวงกลมของรายการเมนู สิ่งนี้จะทำให้องค์ประกอบที่มีผลต่อการหยดน้ำของเหลวเพิ่มขึ้น บันทึกหน้านี้แล้วสลับไปที่ไฟล์ 'Design.css'

 & lt; feoffset ใน = "เงา" dx = "0" dy = "2"
ผลลัพธ์ = "เงา" / & gt;
& lt; fecomposite in2 = "เงา" ใน = "Blob"
ผลลัพธ์ = "Blob" / & GT;
& lt; fecomposite in2 = "Blob"
ใน = ผลลัพธ์ "sourcegraphic" = "ผสม" / & gt;
& lt; / filter & gt; 

17. ใช้ตัวกรอง

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

 .menu {
ตัวกรอง: URL ("# Shadowed-Blob");
ตำแหน่ง: แก้ไข;
Padding-Top: 20px;
Padding-Left: 80px;
ความกว้าง: 650px;
ความสูง: 150px;
การปรับขนาดกล่อง: กล่องแดน;
ขนาดตัวอักษร: 20px;
จัดส่งข้อความ: ซ้าย;
} 

18. ทำให้เมนูทำงาน

เมนูถูกตั้งค่าให้มองไม่เห็นเมื่อเมนูเปิดอยู่ องค์ประกอบการโฮเวอร์ของรายการเมนูแต่ละรายการถูกสร้างขึ้นเพื่อให้มีการเปลี่ยนแปลงเมื่อผู้ใช้อยู่เหนือสิ่งนี้ เด็กแต่ละคนของเมนูจะได้รับการเปลี่ยนแปลง 0.4 วินาทีเมื่อรายการเมนูกลับไปที่ตำแหน่งเดิม

 .menu-open {
แสดง: ไม่มี;
}
.mu-item: โฮเวอร์ {
พื้นหลัง: # 47959F;
สี: # B2F0F8;
}
.menu-item: nth-child (3), .menu-item: nth-
เด็ก (4), .menu-item: nth-child (5), .menu-
รายการ: nth-child (6) {
ช่วงการเปลี่ยนผ่าน: 400ms;
} 

19. เพิ่มแฮมเบอร์เกอร์

ไอคอนเบอร์เกอร์ยกระดับเหนือองค์ประกอบอื่น ๆ โดยการเปลี่ยน z ดัชนี . เมนูเติบโตขึ้นเมื่อผู้ใช้วางอยู่เหนือสิ่งนี้และคลิกเมนูตอนนี้จะได้รับเบอร์เกอร์เพื่อสร้างภาพเคลื่อนไหวจาก Burger สามบรรทัดไปยัง 'X' เพื่อระบุตัวเลือกในการลบเมนู

 .menu-open-button {
z-index: 2;
การเปลี่ยนเวลา - ฟังก์ชั่น: ลูกบาศก์ -
Bezier (0.175, 0.885, 0.32, 1.275);
ช่วงการเปลี่ยนผ่าน: 400ms;
แปลง: สเกล (1.1, 1.1) translate3d
(0, 0, 0);
เคอร์เซอร์: ตัวชี้;
}
.mu-open-button: โฮเวอร์ {
แปลง: สเกล (1.2, 1.2) translate3d
(0, 0, 0);
}

20. ย้ายองค์ประกอบ

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

.menu-open: ตรวจสอบ + .menu-open-button {
การเปลี่ยนช่วงเวลา - ฟังก์ชั่น: เชิงเส้น;
ช่วงการเปลี่ยนผ่าน: 400ms;
แปลง: สเกล (0.8, 0.8) translate3d
(0, 0, 0);
}
.mu-open: ตรวจสอบ ~ .menu-item {
การเปลี่ยนเวลา - ฟังก์ชั่น: ลูกบาศก์ -
Bezier (0.165, 0.84, 0.44, 1);
}
.menu-open: ตรวจสอบ ~ .menu-item: nth-child (3) {
ช่วงการเปลี่ยนภาพ - ระยะเวลา: 390ms;
แปลง: translate3d (110px, 0, 0);
} 

21. แก้ไขการเคลื่อนไหวที่เหลืออยู่

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

 .menu-open: ตรวจสอบ ~ .menu-item: nth-child (4) {
ช่วงการเปลี่ยนภาพ: 490ms;
แปลง: translate3d (220px, 0, 0);
}
.menu-open: ตรวจสอบ ~ .menu-item: nth-child (5) {
ช่วงการเปลี่ยนผ่าน: 590ms;
แปลง: translate3d (330px, 0, 0);
}
.menu-open: ตรวจสอบ ~ .menu-item: nth-child (6) {
ช่วงการเปลี่ยนภาพ: 690ms;
แปลง: translate3d (440px, 0, 0);
} 

บทความนี้ได้รับการตีพิมพ์ในนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 283 ที่นี่ หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

• Animate SVG พร้อม JavaScript
• คำแนะนำที่สมบูรณ์ไปยัง SVG
• Super Charge SVG แอนิเมชั่นกับ GSAP