วิธีการเคลื่อนไหวด้วย Library Mo.js

Mo.js เป็นไลบรารีกราฟิก JavaScript ที่ไม่เหมือนใครที่ไม่เพียง แต่อำนวยความสะดวกในการเคลื่อนไหวของหน้าจอแบบเต็มหน้าจอ แต่ยังรวมถึงการโต้ตอบแบบไมโคร -

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

ต้องการแรงบันดาลใจในภาพเคลื่อนไหวหรือไม่? นี่คือตัวอย่างที่ยอดเยี่ยมของด้านบน ภาพเคลื่อนไหว CSS เพื่อสร้างใหม่ ต้องการสร้างเว็บไซต์โดยไม่ต้องเข้ารหัส? ลองเหล่านี้ ผู้สร้างเว็บไซต์ .

mo.js สามารถช่วยได้อย่างไร

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

mo.js สามารถช่วยด้วยสิ่งนี้ การใช้ห้องสมุดช่วยในการเคลื่อนไหวองค์ประกอบของไซต์ที่ไม่สมเหตุสมผลโดยใช้ส่วนประกอบในตัวเช่น HTML, Shape, Swirl, Burst และ Sochs ห้องสมุดใช้งานง่ายรวดเร็วเรตินาพร้อมตัวแบบแยกส่วนและโอเพ่นซอร์ส ในบทช่วยสอนนี้พื้นฐานของการทำงานกับ Mo.js ได้รับการแนะนำและสองเทคนิคที่แสดงให้เห็น ระเบิดและฟองสบู่

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

เริ่มต้นด้วยการสร้างโฟลเดอร์ MO.JS บนเดสก์ท็อปของคุณเพื่อเก็บไฟล์การสอน สร้างโฟลเดอร์เพิ่มเติมสามโฟลเดอร์ภายใน: CSS เพื่อเก็บไฟล์จัดแต่งทรงผม img สำหรับรูปภาพและ JS สำหรับไฟล์ JavaScript ไฟล์ HTML จะถูกเก็บไว้ในโฟลเดอร์รูท (คุณอาจต้องการที่จะสนับสนุนการสำรอง การจัดเก็บเมฆ .

02. สร้างโครงสร้างหน้า

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

 & lt;! Doctype HTML & GT;
& lt; html lang = "en" & gt;
    & lt; หัว & gt;
        & lt; Meta Charset = "UTF-8" & GT;
        & lt; ชื่อ & GT; เทคนิคการระเบิด & lt;
ชื่อ & GT;
 & lt; / head & gt;
& lt; ร่างกาย & gt; & lt; / body & gt;
& lt; / html & gt; 

03. โครงสร้างหน้า

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

 & lt; ร่างกาย & gt;
      & lt; div class = "ข้อความ" & gt;
& lt; p & gt; Mo.js Animation & Lt; / P & GT;
     & lt; / div & gt;
& lt; / body & gt;

04. เชื่อมโยง CSS

เปิดตัวแก้ไขโค้ดของคุณและสร้างไฟล์ Styles.css ภายในโฟลเดอร์ CSS สร้างลิงค์ไปยังไฟล์นี้ในเอกสาร HTML ของคุณโดยเพิ่มรหัสนี้ในส่วนหัว & lt; link rel = "stylesheet" href = "css / styles.css" & gt; . เนื่องจากไม่มีการเพิ่มรูปแบบหน้าเว็บดังที่แสดงในขั้นตอนที่ 3 อีกทางหนึ่งเนื่องจากการจัดแต่งทรงผมน้อยที่สุดคุณสามารถเลือกใช้สไตล์อินไลน์ได้โดยการรวม HTML และ CSS

05. สไตล์พื้นหลัง

ต่อไปเราจัดทรงพื้นหลังโดยการเพิ่มภาพพื้นหลัง เราใช้พื้นหลังภูมิทัศน์ที่สวยงามฟรีโดย Nikolai Ultang จาก Pexels คุณสามารถ ดาวน์โหลดที่นี่ . บันทึกนี้ (หรือรูปภาพของคุณเอง) ภายในโฟลเดอร์ img แสดงหน้าเพื่อแสดงการเปลี่ยนแปลงของพื้นหลัง

 ร่างกาย, html {
  พื้นหลังภาพ: URL (bg.jpg);
  ขนาดพื้นหลัง: ปก;
  padding: 0;
  มาร์จิ้น: 0;
  ความกว้าง: 100%;
  ความสูง: 100%;
  ล้น: ซ่อน;
}

06. สไตล์ข้อความ

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

 ข้อความ {
  ตัวอักษร - ครอบครัว: ศตวรรษโกธิค Sans-Serif;
  สี: #FFF;
  ข้อความการแปลง: ตัวพิมพ์ใหญ่;
  ขนาดตัวอักษร: 50px;
  ตัวอักษร - น้ำหนัก: Bolder;
  ตำแหน่ง: แน่นอน;
  ด้านบน: 50px;
 ซ้าย: 25%;
 ขวา: 30%;
  จัดเรียงข้อความ: กึ่งกลาง;
     }

07. ติดตั้ง mo.js

เช่นเดียวกับห้องสมุดอื่น ๆ MO.JS ถูกติดตั้งผ่านตัวเลือกหลายตัว วิธีที่ง่ายที่สุดซึ่งเราจ้างเข้าถึงได้โดยตรงจากเซิร์ฟเวอร์ CDN เพิ่มรหัสต่อไปนี้ในส่วนของร่างกาย

 & lt; สคริปต์ SRC = '//cdn.jsdelivr.net
MOJS / 0.265.6 / mo.min.js '& gt; & lt; / script & gt; 

ในกรณีที่คุณกำลังพัฒนาบรรทัด FF ห้องสมุดสามารถ ดาวน์โหลดโดยตรงจาก GitHub และติดตั้งโดยใช้แพ็คเกจ Bower หรือ NPM โดยใช้คำสั่งที่เหมาะสม

 Bower ติดตั้ง Mo-JS
NPM ติดตั้ง MO-JS

เมื่อดาวน์โหลดแล้วมันสามารถอ้างอิงได้โดยตรง

 & lt; สคริปต์ SRC = "mo.js" type = "ข้อความ
Javascript "& GT; & LT; / สคริปต์ & GT;

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

 & lt; ร่างกาย & gt;
& lt; div class = "ข้อความ" & gt;
& lt; p & gt; Mo.js Animation & Lt; / P & GT;
& lt; / div & gt;
   & lt; สคริปต์ SRC = 'https: //cdn.jsdelivr
net / mojs / 0.265.6 / mo.min.js '& gt; & lt; / script & gt;
  & lt; สคริปต์ src = "js / script.js" & gt; & lt;
สคริปต์ & GT;
& lt; / body & gt;

08. สร้างการระเบิดครั้งแรก

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

09. สร้างวัตถุวงกลม

ก่อนที่วัตถุจะถูกสร้างขึ้น (วงกลม) อย่างไรก็ตาม MO.JS รองรับรูปร่างอื่น ๆ รวมถึงสี่เหลี่ยมผืนผ้า (RECT), ข้าม, เท่ากับ, ซิกแซกและรูปหลายเหลี่ยม ที่ที่คุณล้มเหลวในการระบุประเภทรูปร่างมันจะเริ่มต้นเป็นวงกลมเพื่อสร้างวงกลมง่ายๆประกาศใช้ var หรือ const และกำหนดแอตทริบิวต์ของมันโดยการเรียกใช้ฟังก์ชั่นรูปร่าง

 // การสร้างวัตถุง่าย ๆ
Const Circ = New Mojs.shape ({
  isshowstart: จริง
             รัศมี: 100,
});

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

10. เคลื่อนไหววงกลม

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

 document.addeventlistener ('คลิก' ฟังก์ชั่น
(e) {
circ.
 เล่นซ้ำ ();
}); 

11. ทำให้รูปหลายเหลี่ยมระเบิด

ตอนนี้วงกลมกำลังเคลื่อนไหวเราสร้างอนิเมชั่นระเบิดที่ทำให้วาทกรรมในเวลาเดียวกัน การระเบิดครั้งแรกใช้รูปทรงรูปหลายเหลี่ยมเพื่อดึงการระเบิดออกมา ในการสร้างการระเบิดให้ใช้ฟังก์ชั่น Mo.js ต่อการแสดงในโค้ดตัวอย่างด้านล่าง

 Const Burst1 = New Mojs.burst ({
  ซ้าย: 0, ยอดนิยม: 0,
  นับ: 7,
  รัศมี: {50: 250}
  เด็ก ๆ : {
    เติม: 'สีขาว',
    รูปร่าง: 'รูปหลายเหลี่ยม',
    โรคหลอดเลือดสมอง: {'สีขาว': '# A50710'}
    strokewidth: 4,
    รัศมี: 'แรนด์ (30, 60)',
    รัศมี: 0,
    สเกล: {1: 0},
    prunscale: 'rand (.5, 1)',
    ปริญญา: 360,
    ISForce3D: TRUE}});

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

 document.addeventlistener ('คลิก' ฟังก์ชั่น
(e) {
             Burst1
  ปรับแต่ง ({x: e.pagex, y: e.pagey})
  สร้าง ().
 เล่นซ้ำ ();
circ.
 เล่นซ้ำ ();
});

12. สร้างการระเบิดครั้งที่สอง

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

 Const Burst2 = Mojs.Burst ({
  ด้านบน: 0, ซ้าย: 0,
  นับ: 4,
  รัศมี: {0: 250},
เด็ก ๆ : {
    รูปร่าง: ['วงกลม', 'rect'],
    คะแนน: 5,
    เติม: ['สีขาว'],
    รัศมี: 'แรนด์ (30, 60)',
    ความล่าช้า: 'โซเซ (50)',
    การผ่อนคลาย: ['cubic.out', 'cubic.out',
'cubic.out'],
    สเกล: {1: 0},
    prunscale: 'rand (.5, 1)',
    ISForce3D: TRUE}});

เพิ่มการระเบิดไปยังฟังก์ชั่นฟังเหตุการณ์

 document.addeventlistener ('คลิก' ฟังก์ชั่น
(e) {
             Burst1
  ปรับแต่ง ({x: e.pagex, y: e.pagey})
  สร้าง ().
 เล่นซ้ำ ();
             burst2.
             ปรับแต่ง ({x: e.pagex, y: e.pagey
})
             สร้าง().
             เล่นซ้ำ ();
circ.
 เล่นซ้ำ ();
});

13. เพิ่มการระเบิดของวงกลม

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

 // การสร้างตัวแปรที่คล้ายกัน
พารามิเตอร์
    const circle_opts = {
  ซ้าย: 0, ยอดนิยม: 0,
   เติม: 'สีขาว',
  สเกล: {.2: 1}
  ความทึบ: {1: 0}
  isforce3d: จริง
  isshowend: false
};

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

 const circle1 = new mojs.shape ({
  ... circle_opts,
  รัศมี: 200});
const circle2 = ใหม่ mojs.shape ({
  ... circle_opts,
  รัศมี: 240,
  การผ่อนคลาย: 'cubic.out',
  ล่าช้า: 300});

เพิ่มรูปร่างวงกลม

 document.addeventlistener ('คลิก' ฟังก์ชั่น
(e) {
             Burst1
  ปรับแต่ง ({x: e.pagex, y: e.pagey})
  สร้าง ().
 เล่นซ้ำ ();
             burst2.
             ปรับแต่ง ({x: e.pagex, y: e.pagey
})
             สร้าง().
             เล่นซ้ำ ();
circ.
 เล่นซ้ำ ();
});

14. ทำให้ฟองสบู่พื้นฐาน

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

 Const OpenBackground = New Mojs.shape ({
  เติม: '# FC2D79',
  ซ้าย: 0, ยอดนิยม: 0,
  สเกล: {0: 4.5},
  isshowstart: จริง
  รัศมี: 15,
  isforce3d: จริง
  istimelineless: จริง
ล่าช้า: 150,
  รัศมี: 200,
  การผ่อนคลาย: 'cubic.out',
  Backwardeasing: 'Expo.in',});

ตรวจสอบให้แน่ใจว่าเพิ่มตัวแปรพื้นหลังไปยังฟังก์ชั่นฟังเหตุการณ์

 OpenBackground
  ปรับแต่ง ({x: e.pagex, y: e.pagey})
  เล่นซ้ำ (); 

15. เพิ่มหลายรูปร่าง

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

16. เพิ่มไลบรารีผู้ช่วย

ถัดไปไลบรารีเพิ่มเติมบางส่วนจะถูกเพิ่มในส่วนของร่างกายเพื่ออำนวยความสะดวกในการเลื่อนและผลิตเสียงเมื่อมีการคลิกวัตถุ

& lt; script src = 'https: //cdnjscloudflare.com
Ajax / Libs / Howler / 1.1.26 / Howler.min.js '& GT; & Lt;
สคริปต์ & GT;
& lt; สคริปต์ SRC = 'https: //cdn.jsdelivr.net
MOJS / 0.119.0 / mo.min.js '& gt; & lt; / script & gt;
& lt; สคริปต์ SRC = 'https: //cdn.jsdelivr.net
hammerjs / 2.0.4 / hammer.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https: //cdnjscloudflare.com
ajax / libs / iscroll / 5.1.1 / iscroll-probe.min
JS '& GT;
& lt; / สคริปต์ & gt;

17. แอนิเมชันล่วงหน้า

ต่อไปเราเพิ่มสไตล์สำหรับแต่ละคลาสที่เน้นในไฟล์ HTML จากนั้นมีการเพิ่มฟังก์ชันการทำงาน Mo.js แล้ว รหัสเต็ม (CSS และ JS) จะถูกแชร์กับไฟล์การสอนสำหรับการตรวจสอบ

18. เรียนรู้เพิ่มเติมเกี่ยวกับ Mo.js

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

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

อ่านเพิ่มเติม:

• CSS Art ถูกทำลายอย่างยอดเยี่ยมโดยเบราว์เซอร์เก่า
• ซอฟต์แวร์ทดสอบผู้ใช้ที่ดีที่สุด
• การออกแบบ UI ที่ยอดเยี่ยม