เพิ่มอนิเมชั่น UI ในเว็บไซต์ของคุณ

Sep 11, 2025

วิธีการ

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

สำรวจชายแดนใหม่ของภาพเคลื่อนไหว CSS

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

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

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

UI animations: icons — เรามีไอคอนการนำทางทั้งหกและหนึ่งในนั้นแสดงให้เห็นว่าสถานะของโฮเวอร์จะมีลักษณะอย่างไรเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์

สร้างการนำทาง

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

 & lt; div class = "navigationbar" & gt;
& lt; a href = "#" class = "navlogo ion-ios-star-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-listline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-chatboxes-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-home-upline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-pie-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-gear-upline" & gt; & lt; / a & gt;
& lt; / div & gt;

เราจะไม่ครอบคลุมเอกสาร HTML หรือ CSS แบบเต็มรายละเอียด แต่คุณสามารถ รับรายชื่อรหัสเต็มจาก GitHub .

ถัดไปเราจะต้องสร้างไฟล์ CSS ที่เรียกว่า Style.css แล้วใส่รหัสต่อไปนี้เพื่อนำเข้า Ionicons:

 @import URL (https://code.ionicframework.com/codons/2.0.1/css/ionicons.min.css);

ตอนนี้เราจะตั้งค่าชั้นเรียน navlogo สำหรับภาพการนำทางของเราภายในสไตล์ชีท ที่นี่เราจะตั้งค่าตำแหน่งความสูงขนาดตัวอักษร ฯลฯ

. navlogo {
  ตำแหน่ง: ญาติ;
  ขนาดตัวอักษร: 40px;
  ความกว้าง: 75px;
  มาร์จิ้น: 40px;
  ความสูง: 75px;
  เส้นความสูง: 75px;
  จอแสดงผล: บล็อกแบบอินไลน์;
  สี: #FFF;
}

. navlogo: หลังจาก {
  ตำแหน่ง: แน่นอน;
  ด้านบน: 0;
  ด้านล่าง: 0;
  ซ้าย: 0;
  ขวา: 0;
  ชายแดน: 2px ของแข็ง # E6E6E6;
  เนื้อหา: '';
  z-index: -1;
  รัศมีชายแดน: 50%;
}

ต่อไปเราต้องตั้งค่าภาพเคลื่อนไหวสำหรับเรา . navlogo ธาตุ. ที่นี่เราจะสร้างผลการหมุนและผลการเปลี่ยนแปลงรวมถึงการเปลี่ยนสีองค์ประกอบบนโฮเวอร์

. navlogo: ก่อนหน้านี้
. navlogo: หลังจาก {
  -Webkit-Transition: ทั้งหมด 0.45 วินาทีเข้าออก
  การเปลี่ยนแปลง: ทั้งหมด 0.45s ease-out;
}
. Navlogo: โฮเวอร์
.navlogo: ใช้งาน
. navlogo.hover {
  สี: # C0392B;
}
. navlogo: โฮเวอร์: หลังจากนั้น
.navlogo: ใช้งานอยู่: หลังจากนั้น
. navlogo.hover: หลังจาก {
  เส้นขอบสี: โปร่งใส # C0392B;
  -webkit-transform: หมุน (360deg);
  แปลง: หมุน (360deg);
}

ในที่สุดเราจะต้องเพิ่มกิจกรรมที่ลบคลาสโฮเวอร์เมื่อเมาส์ไม่ได้โฉบเหนือโลโก้ของเราอีกต่อไป นี่คือการตรวจสอบให้แน่ใจว่าโลโก้ของเราออกมาจากภาพเคลื่อนไหวของมัน สร้างไฟล์ JavaScript ใหม่ที่เรียกว่า main.js แล้วป้อนรหัสต่อไปนี้:

 $ (". Hover") Mouseleave (
  ฟังก์ชั่น () {
    $ (นี้) .removeclass ("โฮเวอร์");
  }
);

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

สร้างและเคลื่อนไหวปุ่มในการโหลด

UI animations: animated buttons — ปุ่มจะปรากฏขึ้นทีละหนึ่งด้วยความล่าช้าหนึ่งวินาทีในระหว่าง Greensock ช่วยให้คุณสามารถทำสิ่งนี้กับองค์ประกอบ HTML ใด ๆ

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

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

 & lt; div id = "buttonarea" & gt;
& lt; ปุ่ม class = "anibutton" & gt; เปลี่ยนสีพื้นหลัง & lt; / ปุ่ม & gt;
& lt; button class = "anibutton" & gt; ตัวเลือก 1 & lt; / ปุ่ม & gt;
& lt; button class = "anibutton" & gt; ตัวเลือก 2 & lt; / ปุ่ม & gt;
& lt; button class = "anibutton" & gt; ตัวเลือก 3 & lt; / ปุ่ม & gt;
& lt; / div & gt;

จากนั้นเราต้องตั้งค่าการอ้างอิงไปยังห้องสมุด Greensock ภายใน & lt; head & gt; มาตรา.

 & lt; สคริปต์ SRC = "https://cdnjscloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js" & gt; & lt; / script & gt;

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

 tweenmax.staggromfrom ('anibutton', 1, {ความทึบ: 0}, 1);

พื้นหลังและองค์ประกอบการเปลี่ยนสี

UI animations: colour transition — นี่คือวิธีที่ UI จะดูแลพื้นหลังและปุ่มเปลี่ยนจากสีหนึ่งไปยังอีกสีหนึ่ง

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

ตรวจสอบให้แน่ใจว่าคุณมีสีพื้นหลังและตั้งค่าสีและสีของข้อความสำหรับหน้าของคุณในไฟล์ Style.css

 .anibutton {
ชายแดน: 2px Solid # 000;
สี: # 000;
}

ต่อไปเราจะสร้างฟังก์ชั่น JavaScript เพื่อตั้งค่าการเปลี่ยนสี Greensock ต่าง ๆ ของเรา

 ฟังก์ชั่นการเปลี่ยนแปลงพื้นหลัง ()
{
   tweenmax.to ("ร่างกาย", 3, {backgroundimage: "การไล่ระดับสีเชิงเส้น (ไปทางซ้าย, # 646580, # 212121)"});
   tweenmax.to ("anibutton", 3, {สี: "# FFF"};
   tweenmax.to ("anibutton", 3, {border: "2px Solid #FFF"};
}

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

ในที่สุดเราจะต้องเรียก เปลี่ยนพื้นหลัง() ฟังก์ชั่นจากปุ่มหนึ่งของเราที่พบในไฟล์ index.html

 & lt; blass class = "anibutton" onclick = "changebackground ()" & gt; เปลี่ยนพื้นหลัง & lt; / ปุ่ม & gt;

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

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 309 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 309 ที่นี่ หรือ สมัครสมาชิกที่นี่ .

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

Animate และ Switch Titles ด้วย CSS
5 เคล็ดลับสำหรับ CSS ที่รวดเร็วสุด ๆ
การแนะนำคุณสมบัติที่กำหนดเอง CSS

เพิ่มอนิเมชั่น UI ในเว็บไซต์ของคุณ

สร้างการนำทาง

สร้างและเคลื่อนไหวปุ่มในการโหลด

พื้นหลังและองค์ประกอบการเปลี่ยนสี

วิธีการ - บทความยอดนิยม

วิธีใช้ภาพอ้างอิง: 13 เคล็ดลับสำคัญสำหรับศิลปิน

ใช้ Adobe XD เพื่อสร้างปฏิสัมพันธ์แบบไมโคร

เทคนิคการซ้ำซ้อนของ Zbrush ที่จำเป็น 3 เทคนิค

วิธีการทาสีเหมือนต้นแบบศตวรรษที่ 19

สร้างอิมเมจ Parallax แบบโต้ตอบ

วิธีจำลองการระเบิดในมายา

วิธีการวาดภูมิทัศน์ด้วยพาสเทล

สร้างหมึกผสมกับ InDesign

หมวดหมู่