ตัวอย่างแอนิเมชั่น CSS3 อย่างง่าย 9 ตัวอย่าง เก้าตัวอย่างง่ายๆ ของแถบความคืบหน้าแอนิเมชัน CSS3 ใน CSS

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

WOW.js เป็นไลบรารีขนาดเล็กที่ให้คุณเปิดใช้งานแอนิเมชั่นในขั้นตอนหนึ่งของการเลื่อนหน้า มันมีน้ำหนักน้อยมากและยังเป็นอิสระอย่างสมบูรณ์นั่นคือไม่จำเป็นต้องเชื่อมต่อ jQuery หรือสัตว์ประหลาดอื่น ๆ

Animate.CSS เป็นสคริปต์ที่รับผิดชอบโดยตรงต่อแอนิเมชันนั้นเอง อันที่จริงแล้ว wow.js ใช้แอนิเมชั่นจากสิ่งนี้ และมีหลายโหล

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

และในบันทึกย่อแรก (ลิงก์ในย่อหน้าถัดไป) เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น ฉันแสดงให้คุณเห็นว่าจะเขียนโค้ด js ได้อย่างไรและที่ไหน เพื่อให้แอนิเมชั่นเล่นในขั้นตอนหนึ่งของการเลื่อนหน้า มันไม่สะดวกอย่างยิ่ง แต่มันก็ใช้งานได้อย่างมีเสน่ห์

ดังนั้นก่อนที่คุณจะเริ่มฉันขอแนะนำให้คุณดูบทเรียน "" เนื่องจากฉันจะถือว่าคุณรู้วิธีใช้แอนิเมชั่นบนไซต์แล้ว ในขณะเดียวกันคุณจะเข้าใจได้ทันทีว่าทำอย่างไร wow.js ทำให้งานของคุณง่ายขึ้น- ท้ายที่สุด ตอนนี้เราไม่ต้องเขียนและเจาะลึกโค้ด js แล้ว เสียบปลั๊กแล้วลืมมันไปได้เลย

และแล้วการแนะนำตัวก็จบลงแล้ว เรามาใกล้ชิดกับ "ร่างกาย" กันดีกว่า ฉันบันทึกบทเรียนวิดีโอในหัวข้อนี้ แต่ก่อนที่จะดู ฉันต้องการแสดงให้คุณเห็นว่าคุณจะได้อะไรหากคุณเรียนบทเรียนภาคปฏิบัติจนจบ พูดง่ายๆ เพื่อเพิ่มแรงจูงใจ

แล้วคุณล่ะดูหรือยัง? นี่คือสิ่งที่คุณกำลังจะทำ ด้วยมือของฉันเอง- ตอนนี้วิ่งไปดูวิดีโอ

บทเรียน: WOW.js และ Animate.CSS - สนุกยิ่งขึ้นไปด้วยกัน!

ไปเลย!

การตั้งค่า WOW.js วิธีดาวน์โหลดและเชื่อมต่อ

1 ขั้นตอน

ดาวน์โหลดสคริปต์ wow.js และ animate.css จากเว็บไซต์อย่างเป็นทางการ (ดูลิงก์ด้านบนใต้วิดีโอ) และวางไว้ในโฟลเดอร์โครงการของคุณ

ขั้นตอนที่ 2

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

ขั้นตอนที่ 3 คุณต้องเริ่มต้นสคริปต์โดยเพิ่มโค้ดต่อไปนี้ทันทีหลังจากเชื่อมต่อ:

ใหม่ว้าว().init();

เมื่อถึงจุดนี้ การเชื่อมต่อจะสิ้นสุดลง และถึงเวลาสำหรับขั้นที่สอง

การใช้งาน WOW.js

ขั้นตอนที่ 1 เลือกองค์ประกอบที่เราต้องการทำให้เคลื่อนไหวและเพิ่ม class="wow" ลงไป ในโค้ดด้านล่าง ฉันแสดงสิ่งนี้โดยใช้รูปภาพตัวอย่าง:

ขั้นตอนที่ 2 เลือกภาพเคลื่อนไหวและเพิ่มคลาสเพิ่มเติมให้กับสุนัขของเรา:

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

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

การตั้งค่าภาพเคลื่อนไหว WOW.js ผ่านแอตทริบิวต์ data-wow-duration – ระบุเวลาเล่นภาพเคลื่อนไหว data-wow-delay – ตั้งค่าการหน่วงเวลาก่อนที่จะเล่นข้อมูลภาพเคลื่อนไหว wow-offset – เปิดใช้งานภาพเคลื่อนไหวเมื่อองค์ประกอบผ่านจำนวนพิกเซลที่กำหนดจาก ด้านล่างของหน้าจอ data-wow- iteration – จำนวนการทำซ้ำแอนิเมชั่น

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

เอาล่ะเพื่อนๆ นั่นอาจเป็นทั้งหมด หากคุณมีคำถามใด ๆ ถามในความคิดเห็น;)

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

กำลังเชื่อมต่อ Animate.css

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

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

ภาพเคลื่อนไหวแบบวนซ้ำ Animate.css

.new ( จำนวนภาพเคลื่อนไหวซ้ำ : ไม่มีที่สิ้นสุด ; )

ใหม่ (จำนวนภาพเคลื่อนไหวซ้ำ: ไม่มีที่สิ้นสุด;)

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

ตัวอย่างที่ง่ายที่สุดของการใช้ชุดค่าผสมนี้สามารถดูได้ด้านล่างของหน้านี้ สิ่งที่น่าสนใจที่สุดคือความงามนี้ (ภาพเคลื่อนไหวแบบเลื่อน) ทำงานได้โดยไม่ต้องมี jQuery ปรากฎว่าประตูทุกบานเปิดอยู่สำหรับสคริปต์นี้...และตัวอย่าง ให้เลื่อนลง...จงกล้าหาญ...

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

ภาพเคลื่อนไหวแบบเลื่อน: การรวมกัน
"WOW.js" และ "Animate.css"
บนเวิร์ดเพรส...

* หากต้องการทำซ้ำแอนิเมชั่น ให้โหลดหน้าซ้ำ

จะตั้งค่าได้อย่างไร?

ขั้นตอนที่ 1
ในการเริ่มต้น ให้ดาวน์โหลดไฟล์ทั้งสองนี้ (“WOW.js” และ “Animate.css”)

อัปเดต (25 กรกฎาคม 2019):
wow.min.js v1.2.1 | animate.min.css เวอร์ชัน 3.7.2
ขั้นตอนที่ 2
วางโฟลเดอร์ "wow-animation" ไว้ในโฟลเดอร์รูทของไซต์ แน่นอนคุณสามารถวางไว้ที่ใดก็ได้ตราบใดที่คุณระบุเส้นทางที่ถูกต้องไปยังไฟล์ ขอแนะนำให้วางโฟลเดอร์นี้ไว้ในโฟลเดอร์รูท: index.html หากเป็น WordPress ให้วางโฟลเดอร์ทุกที่ที่คุณต้องการ (สิ่งสำคัญคือการระบุเส้นทางที่ถูกต้อง)

ขั้นตอนที่ 3
เราใส่ในบรรทัดนี้:

* โดยปกติแล้ว เราจะระบุเส้นทางที่ถูกต้องไปยังไฟล์ หากคุณติดตั้งบน WordPress ฉันแนะนำให้ระบุเส้นทางแบบเต็ม เช่น เริ่มต้นด้วย httpS://YourDomain เป็นต้น หากต้องการตรวจสอบว่าคุณได้เชื่อมต่อไฟล์อย่างถูกต้องหรือไม่ ให้คัดลอก URL แล้วป้อน แถบที่อยู่และกด "Enter" หากเปิดไฟล์ที่มีรหัสที่เข้าใจไม่ได้แสดงว่าทุกอย่างก็โอเค :)

ขั้นตอนที่ 4
วางบรรทัดเหล่านี้ที่ด้านล่างสุดของหน้า:

ใหม่ว้าว().init();

* ระบุเส้นทางที่ถูกต้องไปยังไฟล์และตรวจสอบในเบราว์เซอร์

ข้อมูลบางอย่าง

ขั้นตอนที่ 6
การตั้งค่าขั้นสูง การเพิ่มคุณสมบัติ:
data-wow-duration : เปลี่ยนระยะเวลาของภาพเคลื่อนไหว
data-wow-delay : หน่วงเวลาก่อนที่แอนิเมชั่นจะเริ่ม;
data-wow-offset : ระยะทางก่อนที่แอนิเมชั่นจะเริ่ม (สัมพันธ์กับด้านล่างของหน้าต่างเบราว์เซอร์)
data-wow-iteration : ทำซ้ำแอนิเมชั่น “หลาย ๆ ครั้ง”

ข้อมูลบางอย่าง ข้อมูลบางอย่าง

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

ฉันดึงความสนใจของคุณไปที่ข้อเท็จจริงที่ว่าในการศึกษาเนื้อหานี้คุณจะต้องมีความรู้ที่คุณต้องได้รับในบทความก่อนหน้า ""

สถานะภาพเคลื่อนไหว

คุณสมบัติง่ายๆ ถัดไปที่เราจะดูคือ Animation-play-state ซึ่งจะกำหนดสถานะของภาพเคลื่อนไหว คุณสมบัตินี้ผ่านหนึ่งในสองคำหลักที่เป็นไปได้:

กำลังวิ่ง - มีการเล่นภาพเคลื่อนไหว (ค่าเริ่มต้น)
หยุดชั่วคราว - ภาพเคลื่อนไหวถูกหยุดชั่วคราว

หยุดชั่วคราวและเริ่มภาพเคลื่อนไหว .test ( width : 100px ; /* ความกว้างขององค์ประกอบ */ ความสูง : 100px ; /* ความสูงขององค์ประกอบ */ color : white ; /* สีตัวอักษรสีขาว */ พื้นหลัง : สีเขียว ; /* สีพื้นหลัง */ ตำแหน่ง : สัมพันธ์ ; /* องค์ประกอบที่มีตำแหน่งสัมพันธ์กัน */ แอนิเมชั่น-ชื่อ: ทำซ้ำอย่างไม่มีที่สิ้นสุด */ แอนิเมชั่นเล่น- state : running ; /* การเล่นภาพเคลื่อนไหว (ค่าเริ่มต้น) */ .test:hover ( Animation-play-state : Paused ; /* ระบุว่าภาพเคลื่อนไหวหยุดชั่วคราวเมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ */ ) @keyframes iliketoveit ( 0% ( left : 0px ;) /* เริ่มต้นวงจรภาพเคลื่อนไหว */ 25% ( left : 400px ;) /* 25% ของระยะเวลาภาพเคลื่อนไหว */ 75% ( left : 200px ;) /* 75 % ของระยะเวลาภาพเคลื่อนไหว */ 100 % ( left : 0px ;) /* สิ้นสุดลูปภาพเคลื่อนไหว */ ) ชี้มาที่ฉัน

ในตัวอย่างนี้เราสร้างขึ้น แอนิเมชั่นง่ายๆซึ่งการใช้ คุณสมบัติซีเอสเอส left ออฟเซ็ตองค์ประกอบที่มีตำแหน่งสัมพัทธ์สัมพันธ์กับขอบด้านซ้ายของตำแหน่งปัจจุบัน

เมื่อวางเคอร์เซอร์เหนือองค์ประกอบด้วยเคอร์เซอร์ของเมาส์ (คลาสหลอก :hover()) ภาพเคลื่อนไหวจะถูกหยุดชั่วคราวโดยการตั้งค่าคุณสมบัติ Animation-play-state เป็น Paused และภาพเคลื่อนไหวจะกลับมาทำงานต่อเมื่อเคอร์เซอร์ออกจากองค์ประกอบ

ผลลัพธ์ของตัวอย่างของเรา:

ทิศทางแอนิเมชั่น

การใช้คุณสมบัติภาพเคลื่อนไหวทั่วไป เราได้ระบุพารามิเตอร์ภาพเคลื่อนไหวต่อไปนี้:

ชื่อแอนิเมชั่น- iliketoveit.
ระยะเวลาของภาพเคลื่อนไหว- 4 วินาที
เส้นโค้งความเร็ว- ขั้นตอนแอนิเมชั่นขั้นตอน (3, เริ่มต้น) จะมีการผลิตสำหรับแต่ละส่วนของคีย์เฟรม 3 ขั้นตอน.
ความล่าช้าของภาพเคลื่อนไหว- 500 มิลลิวินาที
จำนวนรอบ- อนันต์ (อนันต์)
ทิศทางแอนิเมชั่น- ย้อนกลับ (ในทิศทางตรงกันข้าม)

ผลลัพธ์ของตัวอย่างของเรา:

ลองพิจารณาตัวอย่างต่อไปนี้ซึ่ง

กำลังโหลดภาพเคลื่อนไหวบนเนื้อหา CSS ( margin : 0 ; /* padding */ padding : 0 ; /* padding */ ) .container ( width : 100px ; /* element width */ padding-top : 100px ; /* padding top */ Margin : 0 auto ; /* จัดกึ่งกลางองค์ประกอบด้วยระยะขอบด้านนอก */ ) div > div ( display : inline-block ; /* ตั้งค่าองค์ประกอบที่ซ้อนกันเป็น block-line (มีเส้นบรรทัด) */ width : 10px ; /* width element */ height : 10px ; /* ความสูงขององค์ประกอบ */ margin : 0 auto ; /* จัดกึ่งกลางองค์ประกอบด้วยระยะขอบภายนอก */ border-radius : 50px ; 1) ( พื้นหลัง : สีส้ม ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว : ขึ้น 1 วินาทีเชิงเส้น 1 วินาทีไม่มีที่สิ้นสุด ; .item:nth-child(2) ( พื้นหลัง : สีม่วง ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว : ขึ้น 1 วินาทีเชิงเส้น 1.2 วินาทีไม่มีที่สิ้นสุด ; /* ชื่อระยะเวลา เวลา-ฟังก์ชัน หน่วงเวลานับการวนซ้ำ */ ) .item:nth-child(3) ( พื้นหลัง: สีม่วงแดง ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว: ขึ้น 1 วินาทีเชิงเส้น 1.4 วินาทีไม่มีที่สิ้นสุด ; /* ชื่อระยะเวลา timing-function หน่วงเวลานับซ้ำ */ ) .item:nth-child(4) ( พื้นหลัง: lightseagreen ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว: ขึ้น 1 วินาทีเชิงเส้น 1.6 วินาทีไม่สิ้นสุด ; /* ระยะเวลาชื่อ ฟังก์ชั่นจับเวลา การนับการวนซ้ำล่าช้า */ ) .item:nth-child(5) ( พื้นหลัง : ป่าไม้ ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว : ขึ้น 1 วินาทีเชิงเส้น 1.8 วินาทีไม่มีที่สิ้นสุด ; /* ระยะเวลาชื่อ ฟังก์ชั่นการจับเวลา การนับการวนซ้ำล่าช้า * / ) @keyframes up ( 0%, 100% ( /* เริ่มต้นและสิ้นสุดของลูปภาพเคลื่อนไหว */ แปลง : TranslateY(-15px) ; /* เลื่อนองค์ประกอบไปตามแกน Y */ ) 50% ( /* ตรงกลางของภาพเคลื่อนไหว */ แปลง : Translate(5px, 0) ; /* เลื่อนองค์ประกอบไป 5px ตามแกน X ไม่มีการเลื่อนไปตามแกน Y */ ) )

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

ชื่อแอนิเมชั่น-ขึ้น.
ระยะเวลาของภาพเคลื่อนไหว- 1 วินาที
เส้นโค้งความเร็ว- เชิงเส้น (ความเร็วเท่ากันตลอดทั้งภาพเคลื่อนไหว)
ความล่าช้าของภาพเคลื่อนไหว- จาก 1 วินาทีถึง 1.8 วินาที
จำนวนรอบ- อนันต์ (อนันต์)

มาดูภาพเคลื่อนไหวง่ายๆ จากไลบรารีที่เปลี่ยนความโปร่งใสขององค์ประกอบ:

@keyframes fadeIn ( จาก ( /* จุดเริ่มต้นของลูปภาพเคลื่อนไหว (เหมือนกับ 0%) */ ความทึบ : 0 ; /* องค์ประกอบโปร่งใสอย่างสมบูรณ์ */ ) ถึง ( /* สิ้นสุดลูปภาพเคลื่อนไหว (เหมือนกับ 100%) * / ความทึบ : 1 ; /* องค์ประกอบทึบแสง */ ) .fadeIn ( ชื่อภาพเคลื่อนไหว : fadeIn ; /* ชื่อภาพเคลื่อนไหว (ตรงกับชื่อในกฎ @keyframes) */ )

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

แต่นี่ยังไม่เพียงพอที่จะเปิดแอนิเมชั่นของไลบรารี Animate.css ที่คุณสนใจ ในการเริ่มแอนิเมชั่น คุณสามารถใช้คลาสต่อไปนี้ที่สร้างโดยผู้สร้างโปรเจ็กต์ได้ แต่ไม่จำเป็น:

/* คลาสพื้นฐานซึ่งช่วยให้ภาพเคลื่อนไหวทำงานได้หนึ่งรอบ */ .animated ( Animation-duration : 1s ; /* ระยะเวลาของภาพเคลื่อนไหว 1 วินาที */ Animation-fill-mode : ทั้งสอง ; /* ตั้งค่าสไตล์สำหรับองค์ประกอบเมื่อภาพเคลื่อนไหวไม่ได้เล่น (เมื่อแอนิเมชั่นเสร็จสิ้นและก่อนที่จะเริ่ม - ระหว่างการดีเลย์) */ ) /* การเพิ่มคลาส .infinite ให้กับองค์ประกอบที่มีคลาส .animated จะทำให้แอนิเมชั่นเล่นได้อย่างไม่มีกำหนด */ .animated.infinite ( Animation-iteration-count : อนันต์ ; / * แอนิเมชั่นจะเล่นอย่างไม่มีที่สิ้นสุด */ )

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

ลองดูตัวอย่าง:

แอนิเมชันโดยใช้ไลบรารี Animate.CSS

ในตัวอย่างนี้ เราเชื่อมต่อไลบรารี Animate.css โดยใช้แท็ก และวางรูปภาพที่เราเชื่อมต่อ (ระบุโดยคั่นด้วยช่องว่าง) ใน 3 คลาสต่อไปนี้จากไลบรารี

เพิ่มมากขึ้นในหลายๆ หน้า Landing Pageหรือหน้าส่งเสริมการขาย คุณจะพบเอฟเฟกต์แอนิเมชันต่างๆ ท้ายที่สุดแล้วพวกเขาทำให้เพจน่าสนใจและน่าดึงดูดยิ่งขึ้น

โดยพื้นฐานแล้ว เอฟเฟกต์เหล่านี้จะถูกตั้งค่าในบางเหตุการณ์ (คลิกหรือวางเมาส์เหนือองค์ประกอบ) หรือในขณะที่เลื่อนหน้า ฉันคิดว่าคุณเคยเจอไซต์ประเภทนี้เมื่อเลื่อนหน้าองค์ประกอบต่าง ๆ ปรากฏอย่างราบรื่นและสวยงาม

ก่อนหน้านี้ หากต้องการใช้เอฟเฟกต์เหล่านี้ คุณต้องใช้เพียง JS เท่านั้น แต่การพัฒนาไม่ได้หยุดนิ่ง และด้วยการเปิดตัว CSS3 เอฟเฟกต์ทั้งหมดนี้ก็สามารถนำไปใช้กับเอฟเฟกต์เหล่านี้ได้

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

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

มาดู animate.css กันดีกว่า

มาร์กอัป HTML พื้นฐาน

ชมวิดีโอสอน

เด้ง
แฟลช
ชีพจร
ยางรัด
เขย่า
แกว่ง
โยกเยก
เด้งเข้า
เด้งเข้าลง
ตีกลับซ้าย
ตีกลับขวา
เด้งอินอัพ
เด้งออก
เด้งออกDown
เด้งออกซ้าย
ตีกลับOutRight
ตีกลับOutUp
จางหายไป
จางหายไป
จางลงInDownBig
จางหายไปทางซ้าย
จางหายไปในซ้ายใหญ่
จางหายไปทางขวา
จางหายไปทางขวาใหญ่
จางหายไปInUp
จางหายไปInUpBig
จางหายไป
จางหายไปลง
fadeOutDownใหญ่
จางหายไปจากซ้าย
จางหายไปซ้ายใหญ่
จางหายไปทางขวา
จางหายไปขวาใหญ่
fadeOutUp
fadeOutUpBig
ฟลิปอินเอ็กซ์
ฟลิปอินวาย
ฟลิปเอาท์เอ็กซ์
พลิกออกY
lightSpeedIn
lightSpeedOut
หมุนเข้า
หมุนในลงซ้าย
หมุนInDownRight
หมุนในขึ้นซ้าย
หมุนInUpRight
หมุนออก
หมุนออกลงซ้าย
หมุนออกลงขวา
หมุนออกขึ้นซ้าย
หมุนOutUpRight
บานพับ
ม้วนเข้า
การเปิดตัว
ซูมเข้า
ซูมเข้าลง
ซูมเข้าซ้าย
ซูมเข้าขวา
ซูมอินอัพ
ซูมออก
ซูมออกลง
ซูมออกซ้าย
ซูมออกขวา
ซูมเอาท์อัพ
สไลด์อินดาวน์
เลื่อนไปทางซ้าย
สไลด์ด้านขวา
สไลด์อินอัพ
สไลด์เอาท์ดาวน์
สไลด์OutLeft
สไลด์เอาท์ไรท์
สไลด์เอาท์อัพ

แอนิเมชั่นที่ไม่มีที่สิ้นสุด

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

แต่ถ้าคุณต้องการให้แอนิเมชั่นดำเนินต่อไปโดยไม่หยุดล่ะ

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

หัวเรื่อง

ตั้งค่าภาพเคลื่อนไหวเมื่อคุณวางเมาส์เหนือองค์ประกอบ

ชมวิดีโอสอน

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

HTML

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

หัวเรื่อง

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

ฟังก์ชั่น เคลื่อนไหว(elem)( var effect = elem.data("effect"); if(!effect || elem.hasClass(effect)) return false; elem.addClass( effect); setTimeout(function())( elem. RemoveClass (เอฟเฟกต์); 1,000); ) $(".animated").mouseenter(function() ( เคลื่อนไหว($(นี้)); ));

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

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

ชมวิดีโอสอน

สุดท้ายนี้ เรามาดูอีกตัวอย่างหนึ่งที่คุณสามารถใช้ animate.css ได้อย่างง่ายดาย

กล่าวคือ คุณสามารถตั้งค่าเอฟเฟกต์ต่างๆ สำหรับองค์ประกอบต่างๆ เมื่อเลื่อนหน้าได้ เพื่อจุดประสงค์เหล่านี้ นอกจาก animate.css แล้ว เรายังต้องมีสคริปต์ wow.js พิเศษอีกด้วย