สร้างอินโฟกราฟิกแบบเคลื่อนไหวด้วย CSS และ jQuery

เนื้อหา

• ภาพเคลื่อนไหวแผนภูมิแท่ง
• กำลังทริกเกอร์ภาพเคลื่อนไหว

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

ทุกอินโฟกราฟิกบอกเล่าเรื่องราว ฉันเลือกเรื่องราวของ Web Design Day ซึ่งเป็นงานประชุมที่ฉันดำเนินการเติบโตขึ้นในช่วงสี่ปีที่ผ่านมาสำหรับอินโฟกราฟิกของฉัน นี่คือข้อมูลที่เราจะใช้ในโครงการตัวอย่างของเรา

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

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

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

@keyframes popIn {0% {transform: scale (0);} 70% {transform: scale (1.05);} 100% {transform: scale (1);}}

ของเรา ปรากฏใน ภาพเคลื่อนไหวเริ่มต้นด้วยไฟล์ แปลง ปรับขนาดองค์ประกอบของเราเป็นขนาด 0, ซึ่งโดยพื้นฐานแล้วจะทำให้มองไม่เห็นเพื่อเริ่มต้นทางเข้า จากนั้น 70% ของวิธีการผ่านแอนิเมชั่นเรากำหนดมาตราส่วนของ 1.05ซึ่งจะแสดงองค์ประกอบของเราที่ใหญ่กว่าที่กำหนดไว้เล็กน้อย 110px เส้นผ่านศูนย์กลาง. สุดท้ายมันจะตกลงตามขนาดที่กำหนดจริงซึ่งเป็นมาตราส่วน 1ที่คีย์เฟรมสุดท้ายของภาพเคลื่อนไหวของเรา (100%). การประกาศคีย์เฟรมนี้จะไม่ทำให้สิ่งใดเคลื่อนไหวในตัวเอง ต้องกำหนดภาพเคลื่อนไหวให้กับองค์ประกอบเพื่อให้มีผลโดยใช้ .date-anim-in ชั้น:

.date-anim-in {แอนิเมชั่น: popIn .4s cubic-bezier (0.6, -0.28, 0.735, 0.045) ทั้งสอง; }

องค์ประกอบใด ๆ ที่เรากำหนด .date-anim-in ชั้นเรียนที่จะใช้ใน ปรากฏใน ภาพเคลื่อนไหวใช้เวลา 0.4 วินาทีในการทำภาพเคลื่อนไหวให้สมบูรณ์ใช้ไฟล์ แอนิเมชั่นเวลาฟังก์ชั่น คุณสมบัติที่กำหนดไว้ใน ลูกบาศก์เบเซียร์ และมีไฟล์ แอนิเมชั่นเติมโหมด ของ ทั้งสองอย่าง.

โปรดทราบว่าใน HTML ของเราเรากำหนดเฉพาะคลาสของ .date สำหรับเครื่องหมายปีของเราไม่ใช่ .date-anim-in ชั้นเรียนที่เราเพิ่งสร้างขึ้น เราจะกำหนดไฟล์ .date-anim-in แบบไดนามิกโดยใช้ jQuery เพื่อควบคุมว่าเมื่อใด ปรากฏใน แอนิเมชั่นดำเนินการ โดยไม่ต้องเขียน CSS เพิ่มเติมเรายังสามารถใช้ซ้ำเพื่อทำให้เครื่องหมายวันที่อื่น ๆ เคลื่อนไหวหรือแม้แต่องค์ประกอบอื่น ๆ ได้หากต้องการ แอนิเมชั่นวันที่ของเราถูกตั้งค่าและพร้อมใช้งานแล้ว!

ภาพเคลื่อนไหวแผนภูมิแท่ง

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

ขั้นแรก HTML สำหรับแต่ละแท่งของแผนภูมิแท่งของเรามีโครงสร้างดังนี้:

div> div> / div> div> span> 24 / span> br /> img src = "img / vegdog.svg" alt = "สุนัขผัก" /> / div> / div>

อาหารแต่ละรายการประกอบด้วย div> ที่จะแสดงแถบในแผนภูมิแท่งเช่นเดียวกับ div> ด้วยฉลากของมัน มีเพิ่มเติม ช่วง> รอบจำนวนทั้งหมดสำหรับแต่ละรายการเพื่อให้เราสามารถดึงสิ่งนั้นออกมาได้อย่างง่ายดายด้วย jQuery เพื่อกำหนดความกว้างให้กับแต่ละแถบในภายหลัง ซึ่งจะช่วยให้แอนิเมชั่นที่เราสร้างขึ้นสามารถนำมาใช้ซ้ำได้ในแผนภูมิแท่งของแต่ละปี CSS ที่อยู่เบื้องหลังการเคลื่อนไหวของแต่ละแผนภูมิจะเหมือนกันทุกประการแม้ว่าข้อมูลจะไม่เหมือนกันก็ตาม div>s กับคลาสของ .veg, .pierogi และ . เนื้อ จะกำหนดความกว้างสำหรับแต่ละส่วนของแผนภูมิ เด็กแต่ละคน .bar div> ถูกกำหนดความกว้างของ 100% ใน CSS ของเรา:

.bar {width: 100%; ความสูง: 2rem;}

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

.veg {z-index: 100; ความกว้าง: 0; การเปลี่ยนแปลง: width .5s Easy-in;} .pierogi {z-index: 50; ความกว้าง: 0; การเปลี่ยนแปลง: width .75s ง่ายใน. 2s;} .meaty {width: 0; การเปลี่ยนแปลง: ความกว้าง 1s ง่ายใน. 2s;}

แผนภูมิแท่งทั้งสามส่วนมีความกว้างเริ่มต้นอยู่ที่ 0 เริ่มต้นด้วยและ z- ดัชนี ตั้งค่าเพื่อรักษาลำดับการแบ่งชั้นภาพ ตัวอย่างเช่น, .veg จะบดบังการเปลี่ยนแปลงที่เกิดขึ้น .pierogi จนกว่าจะเปลี่ยนเป็นความกว้างที่กว้างกว่า .veg div> ชั้นเหนือมัน แต่ละส่วนยังมีการเปลี่ยนแปลงสำหรับความกว้างด้วยระยะเวลาที่แตกต่างกันเล็กน้อย (ตัวเลขแรกในชวเลข) และการหน่วงเวลา (ตัวเลขที่สองในชวเลข) เพื่อสร้างเอฟเฟกต์การขยายแบบเซ เมื่อกำหนดความกว้างทั้งหมดให้กับแต่ละสิ่งเหล่านี้ div>s ผ่าน jQuery การเปลี่ยนจะถูกทริกเกอร์และลูก .บาร์ องค์ประกอบจะเติบโตไปพร้อม ๆ กัน

ข้อความและรูปภาพป้ายกำกับที่ซ้อนกันของเราจะมีการเคลื่อนไหวในลักษณะที่คล้ายคลึงกัน ของเรา div> ด้วยคลาสของป้ายกำกับ (มีทั้งข้อความและรูปภาพ) อยู่ในตำแหน่งที่แน่นอนทางด้านขวาขององค์ประกอบหลัก เมื่อองค์ประกอบหลักขยายผ่านการเปลี่ยนแปลงป้ายกำกับก็จะเคลื่อนตามไปด้วยเช่นกัน นั่นคือการเปลี่ยนแปลงที่ยากลำบากอย่างหนึ่ง!

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

คีย์เฟรมของภาพเคลื่อนไหว fadeUp เริ่มต้นด้วยความทึบเป็น 0 และสิ้นสุดที่ความทึบ 1. นอกจากนี้เรายังมีคลาสที่แตกต่างกันสี่คลาสพร้อมที่จะกำหนดแอนิเมชั่นนี้ในการกำหนดค่าต่างๆ (เราจะใช้ชั้นเรียนเหล่านี้ในลักษณะเดียวกับ .date-anim-in ชั้นเรียนที่กล่าวถึงก่อนหน้านี้)

@keyframes fadeUp {จาก {opacity: 0;} ถึง {opacity: 1;}} .fade-down {แอนิเมชั่น: fadeUp .15s ย้อนกลับทั้งสองแบบ } .food1 .label {แอนิเมชั่น: fadeUp 0.5s คลายออก 0.75s ทั้งสอง; } .food2 .label {แอนิเมชั่น: fadeUp 0.5s ง่าย - ออก 1s ทั้งสอง; } .food3 .label {แอนิเมชั่น: fadeUp 0.5s ง่าย - ออก 1.25s ทั้งสอง; }

.fade-down ชั้นเรียนอาจดูตลกเล็กน้อยในตอนแรก เรากำลังกำหนดภาพเคลื่อนไหวของ จางขึ้น แต่ยังตั้งค่าไฟล์ ทิศทางการเคลื่อนไหว คุณสมบัติที่จะย้อนกลับโดยใช้ชวเลข การดำเนินการนี้จะดำเนินการคีย์เฟรมในลำดับตรงข้ามกับที่ระบุไว้ (ความทึบของ 1 ถึงความทึบของ 0). ดังนั้นเราจึงสามารถใช้คีย์เฟรมชุดเดียวนี้เพื่อเลือนองค์ประกอบเข้าหรือออกได้ขึ้นอยู่กับ ทิศทางการเคลื่อนไหว เราตั้ง. นั่นไม่ใช่ทั้งหมด! เราสร้างคลาสเพิ่มเติมอีกสามคลาสเพื่อใช้สำหรับการซีดจางของป้ายกำกับแผนภูมิแท่งของเรา เราใช้เหมือนกัน จางขึ้น คีย์เฟรมในแต่ละคีย์เฟรม แต่มีไฟล์ ภาพเคลื่อนไหวล่าช้า มูลค่าสำหรับแต่ละ

เมื่อเรากำหนดไฟล์ .food1, .food2 และ .food3 คลาสผ่าน jQuery ป้ายกำกับภายในแต่ละอันจะถูกกำหนดให้กับไฟล์ จางขึ้น ภาพเคลื่อนไหวที่มีความล่าช้าจำนวนมาก เราจะเห็นพวกเขาจางหายไปทีละคน ด้วยการสร้างการกำหนดค่าคุณสมบัติภาพเคลื่อนไหวที่แตกต่างกันคุณจะได้รับไมล์สะสมจำนวนมากจากการประกาศคีย์เฟรมเดียว การนำกลับมาใช้ใหม่นี้เป็นหนึ่งในคุณสมบัติภาพเคลื่อนไหว CSS ที่ฉันชอบ

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

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

@keyframes swingIn {0% {transform: rotationY (90deg); แอนิเมชั่นไทม์มิ่งฟังก์ชั่น: คิวบิกเบเซียร์ (0.895, 0.03, 0.685, 0.22);} 5% {ความทึบ: .5; animation-timing-function: linear;} 60% {transform: rotationY (-20deg); แอนิเมชั่นไทม์มิ่งฟังก์ชั่น: คิวบิกเบซิเอร์ (0.165, 0.84, 0.44, 1);} 100% {ความทึบ: 1; แปลง: หมุน Y (0deg);}}

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

ul.cups {มุมมอง: 800; …}

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

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

คล้ายกับไฟล์ จางขึ้น ภาพเคลื่อนไหวสำหรับฉลากแผนภูมิแท่งภาพเคลื่อนไหวสำหรับถ้วยกาแฟจะถูกกำหนดให้กับ li>ในแต่ละรายการโดยใช้จำนวนชั้นเรียน ในกรณีนี้เนื่องจากจำนวนถ้วยกาแฟทั้งหมดแตกต่างกันไปมาก : ที่ n-of-type pseudo-class selector ใช้เพื่อกำหนดค่าต่างๆ ภาพเคลื่อนไหวล่าช้า ค่าคุณสมบัติของถ้วยกาแฟ li>ในกลุ่ม 10 คนเมื่อดูรายการถ้วยกาแฟแต่ละรายการ li> จะได้รับการกำหนดคลาสของ .swing-in ผ่าน jQuery : ที่ n-of-type กฎใน CSS ของเราจะกำหนดคุณสมบัติของภาพเคลื่อนไหวที่กำหนดให้กับถ้วยกาแฟแต่ละใบ li>:

.swing-in: nth-of-type (2n + 1) {ภาพเคลื่อนไหว: swingIn 0.9s 0.75s; }

ชั้นเรียนเหล่านี้ใช้ไฟล์ .swing-in คลาสเพื่อกำหนดลำดับสำหรับองค์ประกอบที่จะใช้กับ แกว่งใน ภาพเคลื่อนไหว องค์ประกอบยังมีค่าที่แตกต่างกันสำหรับ ภาพเคลื่อนไหวล่าช้า คุณสมบัติ (ตัวเลขที่สองในชวเลข) สิ่งเหล่านี้จะลบล้างซึ่งกันและกันทำให้ถ้วยกาแฟเคลื่อนไหวเป็นกลุ่ม 10 ทำให้แอนิเมชั่นมีลักษณะเกือบเป็นลายเนื่องจากถ้วยทั้งหมดปรากฏขึ้นจากการกำหนดชั้นเรียนเดียว ฉันใช้ Sass ลูปเพื่อสร้างกฎเหล่านี้ด้วยจำนวนที่เพิ่มขึ้นของ ภาพเคลื่อนไหวล่าช้า. ตอนนี้เรามาดู JavaScript ที่ดูแลตรรกะและตัวนำการเล่นสำหรับภาพเคลื่อนไหวและการเปลี่ยน CSS ทั้งหมดของเราในอินโฟกราฟิกของเรา

กำลังทริกเกอร์ภาพเคลื่อนไหว

ภาพเคลื่อนไหวแต่ละภาพของเราจะต้องได้รับการทริกเกอร์เมื่อเข้ามาดูโดยพิจารณาจากความยาวของหน้าเว็บที่เราเลื่อนลงไป มีไลบรารีและสคริปต์จำนวนมากที่สามารถให้ข้อมูลประเภทนั้นแก่เราได้ ฉันเลือกใช้ปลั๊กอิน inview jQuery ปลั๊กอินนี้สามารถเริ่มการทำงานของเหตุการณ์เมื่อใดก็ตามที่องค์ประกอบใดองค์ประกอบหนึ่งอยู่ภายในพื้นที่วิวพอร์ตที่มองเห็นได้ โดยใช้เหตุการณ์นั้นฉันกำหนดคลาส CSS ที่มีคุณสมบัติภาพเคลื่อนไหวของฉันเมื่อมองเห็นองค์ประกอบที่เป็นปัญหาแล้วจึงลบออกเมื่อไม่ได้ ภาพเคลื่อนไหว CSS จะดำเนินการเมื่อได้รับมอบหมาย ดังนั้นการเพิ่มและลบคลาสที่มีคุณสมบัติของภาพเคลื่อนไหวด้วยวิธีนี้จะทำให้เกิดการเคลื่อนไหวซ้ำทุกครั้งที่มีการเพิ่ม นั่นคือสิ่งที่ฉันต้องการทำที่นี่ จำไฟล์ .date-anim-in คลาสที่มีคุณสมบัติแอนิเมชั่นที่เราต้องการให้ใช้เครื่องหมายวันที่? เราสามารถกำหนดให้เป็นเครื่องหมายของแต่ละปีตามที่เห็นได้ดังนี้:

$ (". date"). bind ('inview', function (event, visible, visiblePartX, visiblePartY) {if (visible) {$ (this) .addClass ('date-anim-in');} else {$ (นี้) .removeClass ('date-anim-in');}});

เมื่อใช้ปลั๊กอินมุมมองเรามองหาไฟล์ div> กับคลาสของ .date และเพิ่มไฟล์ .date-anim-in ชั้นเรียนเมื่อถูกตั้งค่าสถานะว่ามองเห็นได้ เมื่อเพิ่มคุณสมบัติของภาพเคลื่อนไหวที่เกี่ยวข้องจะถูกนำไปใช้และเครื่องหมายวันที่ของเราจะเคลื่อนไหวด้วย ปรากฏใน ภาพเคลื่อนไหว เมื่อมองไม่เห็นไฟล์ .date-anim-in ชั้นเรียนถูกลบออก . วันที่ div> จะกลับสู่รูปแบบที่แท้จริงและเราพร้อมที่จะกำหนดใหม่ .date-anim-in ชั้นเรียนเมื่อกลับมาดู เครื่องหมายปีของเรากำลังปรากฏขึ้นในขณะที่เราเลื่อนไทม์ไลน์ลง ในขณะที่ถ้วยกาแฟถูกควบคุมในลักษณะเดียวกันภาพเคลื่อนไหวของแผนภูมิแท่งก็มีมากขึ้น:

$ (". nine .food"). bind ('inview', function (event, visible, visiblePartX, visiblePartY) {if (visible) {$ (". nine .veg"). removeClass ('fade-down') .addClass ('food1'). css ('width', $ (". nine .veg .label span"). text () * 2); $ (". nine .pierogi"). removeClass ('fade- ลง '). addClass (' food2 '). css (' width ', $ (". nine .pierogi .label span"). text () * 2); $ (". nine .meaty"). removeClass ( 'จางลง'). addClass ('food3'). css ('width', $ (". nine .meaty .label span"). text () * 2);} else {$ (". nine. veg "). toggleClass ('fade-down food1'). css ('width', '0px'); $ (". nine .pierogi "). toggleClass ('fade-down food2'). css ('width' , '0px'); $ (". nine .meaty"). toggleClass ('fade-down food3'). css ('width', '0px');}});

ในกรณีนี้เป็นไฟล์ .อาหาร ในแต่ละปีจะปรากฏให้เห็นเราทำการเปลี่ยนแปลงสามรายการในแต่ละรายการอาหารสามรายการที่แสดงในแผนภูมิแท่งของเรา ขั้นแรกเราลบชั้นเรียน . จางลง จากมัน (ถ้ามี) ตัวอย่างเช่นหากเราเลื่อนย้อนกลับไปในอินโฟกราฟิกของเราไฟล์ . จางลง คลาสจะถูกนำไปใช้กับแผนภูมิที่เราเลื่อนผ่านมาแล้ว ถัดจาก .food1 (หรือ .food2 หรือ .อาหาร 3) เพิ่มคลาสแล้ว นี่คือคลาสที่เกี่ยวข้องกับความล่าช้าที่เซของเรา จางขึ้น ภาพเคลื่อนไหว สุดท้ายนี้เรากำหนดความกว้างให้กับรายการอาหารของเราตามจำนวนทั้งหมดที่ห่อไว้ในไฟล์ ช่วง> เพื่อทริกเกอร์การเปลี่ยนแปลงที่เราตั้งไว้ก่อนหน้านี้ ในทางกลับกันเมื่อมองไม่เห็นส่วน. food อีกต่อไปเราจะย้อนกลับการมอบหมายชั้นเรียนและตั้งค่า ความกว้าง ถึง 0 เพื่อให้พร้อมเล่นอีกครั้งหากกลับมาแสดงผล และด้วยเหตุนี้อินโฟกราฟิกของเราจึงเป็นภาพเคลื่อนไหวอย่างสมบูรณ์!

คำ: วาลหัวหน้า

บทความนี้เคยปรากฏในนิตยสาร net ฉบับ 246