สร้างแอนิเมชั่น Slick UI

Sep 16, 2025

วิธีการ

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

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

15 บทช่วยสอนการออกแบบเว็บตอบสนอง

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

คุณต้องการเครื่องมือที่ตรงไปตรงมาสำหรับการสร้างเว็บไซต์หรือไม่ ใช้งานที่ยอดเยี่ยม สร้างเว็บไซต์ .

01. ตั้งค่า

เริ่มต้นด้วยการเปิดโค้ดและสร้างปากกาใหม่ เราจะใช้ Bootstrap 4 และ Sass (.SCSS) ดังนั้นให้แน่ใจว่าภายในการตั้งค่าคุณรวม Bootstrap CSS และ JS เป็นลิงก์ทรัพยากรของคุณและตั้งค่า CSS เป็น SCSS ลิงค์ทรัพยากรอื่นที่คุณจะต้องเพิ่มเป็นแบบอักษรที่ยอดเยี่ยมซึ่งเราจะใช้สำหรับไอคอนสังคมของเรา

02. สร้างตู้คอนเทนเนอร์แถวและคอลัมน์

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

 & lt; div class = "คอนเทนเนอร์" & gt;
 & lt; div class = "แถว" & gt;
 & lt; div class = "col-md-3" & gt;
 & lt; - เพิ่มลิงค์รูปภาพและสีที่นี่
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt;

03. ตั้งค่าภาพและสีโปรไฟล์

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

 & lt; div class = "team blue" & gt;
    & lt; div class = "ภาพถ่าย" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt;

04. เพิ่มชื่อโปรไฟล์และชื่อเรื่อง

The beginning of creating a team member entry showing that a team member photo, job description and social media information. — หนึ่งชิ้นสุดท้ายของ HTML จะเพิ่มชื่อชื่อเรื่องและไอคอนสังคม

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

 & lt; div class = "โปรไฟล์ -txt" & gt;
      & lt; h1 class = "ชื่อ" & gt; libby & lt; / h1 & gt;
      & lt; span class = "ตำแหน่ง" & gt; นักออกแบบเว็บไซต์ & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul class = "Social-icons" & GT;
       & lt; li & gt; & lt; a href = "class =" fa fa facebook "& gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "class =" fa fa-twitter "& gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "class =" fa fa- linkedin "& gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; a href = "class =" fa fa- dribbble "& gt; & lt; / a & gt; & lt; / li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt;

05. ตั้งค่าตัวแปร SASS

หากคุณกำลังติดตามการใช้ codepen คุณจะติดตั้ง SASS แล้วและพร้อมที่จะไปแล้ว คุณเพียงแค่ต้องคลิกที่ไอคอน / ปุ่มการตั้งค่าปากกาและเลือก SCS เป็นตัวประมวลผล CSS ของคุณ จากนั้นเราสามารถไปข้างหน้าและเพิ่มตัวแปรบางอย่างที่จะเก็บสีทั้งหมดของเรา เราใช้ RGBA เป็นค่าสีเพื่อให้สามารถควบคุมความทึบของสีทั้งหมดของเราได้มากขึ้น

 $ Bluegradient: RGBA (103, 188, 223, .8);
$ LightGreen: RGBA (188, 219, 183, .5);
$ Green: RGBA (119, 180, 109, 0.5);
$ Green-Border: RGBA (171, 221, 164, 0.5);
$ Blue: RGBA (80, 205, 227, 1);
$ Blue-Border: RGBA (147, 223, 236, 1);

06. อัปโหลดภาพพื้นหลัง

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

 ร่างกาย {
 พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, $ lighgreen, $ bluegradient), URL ('https://image.ibb.co/mddpu7/clouds_cornfield_countrysside_158827.jpg') ศูนย์ไม่มีการทำซ้ำ;
 ขนาดพื้นหลัง: ปก;
 ตำแหน่ง: ญาติ;
 ความสูง: 100vh;
 }

07. เลือกพื้นหลังและรูปภาพโปรไฟล์

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

. Team {
 padding: 30px 0 40px;
 อัตรากำไรขั้นต้น: 60px;
 พื้นหลัง: #fff;
 จัดเรียงข้อความ: กึ่งกลาง;
 ล้น: ซ่อน;
 ตำแหน่ง: ญาติ;
 เคอร์เซอร์: ตัวชี้;
 Box-Shadow: 0 0 25px 1px RGBA (0,0,0,0.3);
 .photo {
 จอแสดงผล: บล็อกแบบอินไลน์;
 ความกว้าง: 130px;
 ความสูง: 130px;
 อัตรากำไรขั้นต้น: 50px;
 ตำแหน่ง: ญาติ;
 z ดัชนี: 1;
 }
 }

08. เพิ่มภาพเคลื่อนไหว

An image show that the rollover animation bringing down a coloured circle from the top of the frame. — เราสามารถควบคุมจำนวนวงกลมสีน้ำเงินที่สามารถมองเห็นได้โดยการตั้งค่าเปอร์เซ็นต์ด้านล่างสำหรับตำแหน่งของมัน

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

 .blue .photo: ก่อน {
 เนื้อหา: "";
 ความกว้าง: 100%;
 ความสูง: 0px;
 รัศมีชายแดน: 50%;
 พื้นหลัง: $ blue;
 ตำแหน่ง: แน่นอน;
 ด้านล่าง: 130%;
 ขวา: 0;
 ซ้าย: 0;
 แปลง: สเกล (3);
 การเปลี่ยนแปลง: ทั้งหมด. 3s เชิงเส้น 0S;
}
. Team: โฮเวอร์ .photo: ก่อน {
 ความสูง: 100%;
}

09. เคลื่อนไหวภาพถ่ายทีม

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

 .Blue .Pic: หลังจาก {
 เนื้อหา: "";
 ความกว้าง: 100%;
 ความสูง: 100%;
 รัศมีชายแดน: 50%;
 พื้นหลัง: $ blue;
 ตำแหน่ง: แน่นอน;
 ด้านบน: 0;
 ซ้าย: 0;
 z ดัชนี: 1;
}
. Team .Photo img {
 ความกว้าง: 100%;
 ความสูง: อัตโนมัติ;
 รัศมีชายแดน: 50%;
 แปลง: สเกล (1);
 การเปลี่ยนแปลง: ทั้งหมด 0.9s ง่าย 0s;
}
.blue: โฮเวอร์ .photo img {
 กล่อง - เงา: 0 0 0 14px $ blue-border;
 แปลง: สเกล (0.6);
 }

10. ปรับแต่งชื่อและตำแหน่งโปรไฟล์

An image showing the half completed rollover animation, showing the team member photo shrinking and generating a thick border. — เมื่อโฉบเหนือเส้นขอบสีฟ้าอ่อนจะถูกเพิ่มลงในภาพถ่าย

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

 .profile-txt {
 อัตรากำไรขั้นต้น: 30px;
 .title {
 ขนาดตัวอักษร: 2Rem;
 ฟอนต์ - น้ำหนัก: 700;
 สี: # 333;
 จดหมายระยะห่าง: 1.5px;
 ข้อความการแปลง: ใช้ประโยชน์;
 ระยะขอบด้านล่าง: 6px;
 }
 .ตำแหน่ง{
 จอแสดงผล: บล็อก;
 ขนาดตัวอักษร: 1Rem;
 สี: # 555;
 }
}

11. เพิ่มไอคอนสังคม

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

 .Blue.social-icons {
 ความกว้าง: 100%;
 รูปแบบรายการ: ไม่มี;
 padding: 0;
 มาร์จิ้น: 0;
 พื้นหลัง: $ blue;
 ตำแหน่ง: แน่นอน;
 ด้านล่าง: -100px;
 ซ้าย: 0;
 การเปลี่ยนแปลง: ความสะดวก 0.6 ทั้งหมด;
 li {
 จอแสดงผล: บล็อกแบบอินไลน์;
 
 {
 จอแสดงผล: บล็อก;
 padding: 8px;
 ขนาดตัวอักษร: 1Rem;
 สี: #FFF;
 ข้อความตกแต่ง: ไม่มี;
 การเปลี่ยนแปลง: ความสะดวก 0.5 ทั้งหมด;
 & amp;: โฮเวอร์ {
 สี: $ blue;
 พื้นหลัง: #fff;
 }
 }
 }
}
. Team: โฮเวอร์. โซเซียลไอคอน {
 ด้านล่าง: 0px;
}

12. ทำให้สมาชิกทีมสีเขียว

ในการผสมสิ่งต่าง ๆ ขึ้นมาเราสามารถเริ่มเพิ่มสมาชิกให้กับทีมของเรามากขึ้น สีที่เราจะใช้สำหรับสิ่งต่อไปนี้จะเป็นสีเขียว แต่ก่อนอื่นให้กลับไปที่ส่วน HTML / ไฟล์และสิ่งที่เราต้องทำคือคัดลอกคลาส COL-MD-3 - ไม่ใช่แถว - ลงไปที่แท็ก DIV สุดท้ายภายใต้ไอคอนโซเชียลและวางลงใน

 & lt; div class = "Team Green" & GT;
 & lt; div class = "ภาพถ่าย" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt;

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

. กรีน: โฮเวอร์ .photo img {
 กล่อง - เงา: 0 0 0 14px $ green-border;
 แปลง: สเกล (0.6);
 }
.green .photo: ก่อน {
 เนื้อหา: "";
 ความกว้าง: 100%;
 ความสูง: 0px;
 รัศมีชายแดน: 50%;
 พื้นหลัง: $ Green;
 ตำแหน่ง: แน่นอน;
 ด้านล่าง: 135%;
 ขวา: 0;
 ซ้าย: 0;
 แปลง: สเกล (3);
 การเปลี่ยนแปลง: ทั้งหมด. 3s เชิงเส้น 0S;
}
. กรีน. สังคมไอคอน {
 ความกว้าง: 100%;
 รูปแบบรายการ: ไม่มี;
 padding: 0;
 มาร์จิ้น: 0;
 พื้นหลัง: $ Green;
 ตำแหน่ง: แน่นอน;
 ด้านล่าง: -100px;
 ซ้าย: 0;
 การเปลี่ยนแปลง: ความสะดวก 0.6 ทั้งหมด;
 li {
 จอแสดงผล: บล็อกแบบอินไลน์;
 {
 จอแสดงผล: บล็อก;
 padding: 8px;
 ขนาดตัวอักษร: 1Rem;
 สี: #FFF;
 ข้อความตกแต่ง: ไม่มี;
 การเปลี่ยนแปลง: ความสะดวก 0.5 ทั้งหมด;
 & amp;: โฮเวอร์ {
 สี: $ green;
 พื้นหลัง: #fff;
 }
 }
 }
}

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

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

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

ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ins and outs of ui animation หรือไม่?

Steven Roberts is giving his talk CSS Animation: Beyond Transitions at Generate London from 19-21 September 2018. — Steven Roberts กำลังให้ภาพเคลื่อนไหว CSS ของเขา: นอกเหนือจากการเปลี่ยนที่สร้างลอนดอน

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

นักออกแบบและนักพัฒนาระดับแนวหน้าที่ทำงานเป็นนักพัฒนาสร้างสรรค์สำหรับ Asemblr.com Steven Roberts จะส่งมอบการพูดคุยของเขา - CSS Animation ของเขา: นอกเหนือจากการเปลี่ยนผ่าน - ซึ่งเขาจะแสดงเครื่องมือที่ดีที่สุดสำหรับงานและสร้างภาพเคลื่อนไหวที่ดีที่สุด เว็บมีให้ในขณะที่ค้นหาความเป็นไปได้และข้อ จำกัด ของการเคลื่อนไหวด้วย CSS เพียงแค่

สร้างลอนดอนเกิดขึ้นตั้งแต่วันที่ 19-21 กันยายน 2561 รับตั๋วของคุณตอนนี้ .

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

วิธีใช้แอนิเมชั่นในแอพมือถือ
คู่มือโปรในการออกแบบ UI
คู่มือการเริ่มต้นในการออกแบบภาพเคลื่อนไหวของอินเตอร์เฟส

สร้างแอนิเมชั่น Slick UI

01. ตั้งค่า

02. สร้างตู้คอนเทนเนอร์แถวและคอลัมน์

03. ตั้งค่าภาพและสีโปรไฟล์

04. เพิ่มชื่อโปรไฟล์และชื่อเรื่อง

05. ตั้งค่าตัวแปร SASS

06. อัปโหลดภาพพื้นหลัง

07. เลือกพื้นหลังและรูปภาพโปรไฟล์

08. เพิ่มภาพเคลื่อนไหว

09. เคลื่อนไหวภาพถ่ายทีม

10. ปรับแต่งชื่อและตำแหน่งโปรไฟล์

11. เพิ่มไอคอนสังคม

12. ทำให้สมาชิกทีมสีเขียว

ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ins and outs of ui animation หรือไม่?

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

8 บทช่วยสอนการออกแบบกราฟิกใหม่ที่น่าตื่นตาตื่นใจ

สำรวจการสร้างภาพข้อมูลด้วย P5.js

วิธีปรับขนาดภาพใน Photoshop

วิธีการแสดงให้เห็นถึงเหตุการณ์

ทาสีแนวตั้งสไตล์เคี้ยวใน Photoshop CC

พื้นผิวที่สวมใส่ K-2SO Droid

5 วิธีในการสร้างประสบการณ์ VR ที่ดื่มด่ำมากขึ้น

การเปิดรับสองครั้งใน Photoshop

หมวดหมู่