ສ້າງ ໜ້າ ດິນທີ່ແບ່ງ ໜ້າ ຈໍແບບເຄື່ອນໄຫວ

ເນື້ອຫາ

• 01. ໄດ້ຮັບການຕັ້ງຄ່າ
• 02. ຈົບ HTML
• 03. ສຳ ຫຼວດຕົວແປ Sass
• 04. ປັບຮູບແບບຂອງຮ່າງກາຍ
• 05. ອອກແບບຫົວຂໍ້ພາກ
• 06. ເຮັດໃຫ້ CTAs ໂດດເດັ່ນ
• 07. ຕັ້ງພື້ນຫລັງແລະ ໜ້າ ຈໍຂອງພາຊະນະ
• 08. ເພີ່ມພາບພື້ນຫລັງ
• 09. ເພີ່ມການຫັນປ່ຽນແລະຜົນກະທົບດ້ານເທິງ
• 10. ຍ້າຍເຂົ້າໄປໃນ JavaScript
• 11. ເພີ່ມແລະຖອດຊັ້ນຮຽນ
• 12. ເຮັດໃຫ້ມັນຕອບສະ ໜອງ

ຫນ້າທີ່ດິນຂອງທ່ານແມ່ນອົງປະກອບທີ່ ສຳ ຄັນໃນຮູບແບບເວບໄຊທ໌ຂອງທ່ານ. ມັນແມ່ນໂອກາດ ທຳ ອິດທີ່ທ່ານຕ້ອງໄດ້ແນະ ນຳ ທຸລະກິດຂອງທ່ານ, ຫລືຜະລິດຕະພັນທີ່ທ່ານຂາຍ, ສະນັ້ນການອອກແບບມັນແມ່ນກຸນແຈ. ຫນ້າທີ່ດິນຖືກອອກແບບມາໂດຍມີຈຸດປະສົງສຸມໃສ່ດຽວທີ່ຮູ້ກັນວ່າເປັນການຮຽກຮ້ອງໃຫ້ມີການກະ ທຳ (CTA). ການ ນຳ ໃຊ້ສີແລະຮູບພາບເພື່ອປະກອບການຮຽກຮ້ອງໃຫ້ມີການກະ ທຳ ແລະປະສົບການຂອງຜູ້ໃຊ້ແມ່ນສິ່ງທີ່ ຈຳ ເປັນ.

• ເບິ່ງ CodePen ທີ່ເຮັດວຽກ ສຳ ລັບການສອນນີ້

ໃນ ຄຳ ແນະ ນຳ ນີ້, ພວກເຮົາຈະຍ່າງຜ່ານວິທີສ້າງ ໜ້າ ດິນ ສຳ ລັບຍີ່ຫໍ້ແຟຊັ່ນທີ່ນິຍົມ. ມັນຈະເປັນຈຸດສູນກາງປະມານການອອກແບບແບ່ງ ໜ້າ ຈໍທີ່ມີຮູບພາບຂະ ໜາດ ໃຫຍ່ແລະການເຄື່ອນຍ້າຍແບບເຄື່ອນໄຫວທີ່ເກີດຂື້ນໃນເວລາຍ່າງ.ໜ້າ ນີ້ຈະມີປຸ່ມໂທຫາການກະ ທຳ ສອງຢ່າງຊັດເຈນແລະພວກເຮົາຈະໃຊ້ HTML, Sass ສຳ ລັບຄໍເຕົ້າໄຂ່ແລະການ ສຳ ພັດກັບ vanilla JavaScript ທີ່ໃຊ້ syntax ES6 (ຈື່ໃຫ້ແນ່ໃຈວ່າເວັບໂຮດຕິ້ງ ເໝາະ ສົມກັບຄວາມຕ້ອງການຂອງເວບໄຊທ໌ຂອງທ່ານ). ຊັບຊ້ອນເກີນໄປບໍ? ສ້າງເວບໄຊທ໌ໂດຍບໍ່ ຈຳ ເປັນຕ້ອງມີລະຫັດ, ລອງໃຊ້ຜູ້ສ້າງເວບໄຊທ໌ງ່າຍໆ.

01. ໄດ້ຮັບການຕັ້ງຄ່າ

ຖ້າທ່ານ ກຳ ລັງໃຊ້ CodePen, ໃຫ້ແນ່ໃຈວ່າ CSS ຖືກ ກຳ ນົດໃຫ້ 'SCSS' ໃນ Pen settings. ທ່ານສາມາດເຮັດການປ່ຽນແປງນີ້ໂດຍການກົດທີ່ແຖບຕັ້ງຄ່າ, ເລືອກ 'CSS' ແລະປ່ຽນ CSS Preprocessor ເປັນ SCSS ໃນຕົວເລືອກແບບເລື່ອນລົງ.

ຈາກນັ້ນພວກເຮົາສາມາດເລີ່ມຕົ້ນຕື່ມໃນ HTML ຂອງພວກເຮົາ. ພວກເຮົາ ກຳ ລັງຈະຫໍ່ພາກສ່ວນທີ່ເອີ້ນວ່າ 'ດ້ານຊ້າຍ' ແລະສ່ວນທີ່ເອີ້ນວ່າ 'ທາງຂວາ' ພາຍໃນຫ້ອງບັນຈຸ, ທັງສອງພາກໄດ້ໃຫ້ຊັ້ນ 'ໜ້າ ຈໍ'.

div> ພາກສ່ວນ / ພາກສ່ວນ> ພາກສ່ວນ / ພາກສ່ວນ / / div>

02. ຈົບ HTML

ເພື່ອສະຫຼຸບ HTML ຂອງພວກເຮົາ, ພວກເຮົາຈະເພີ່ມໃນຫົວຂໍ້ ສຳ ລັບແຕ່ລະພາກສ່ວນໂດຍ ນຳ ໃຊ້ເອກະສານ h1 ແທັກ. ພາຍໃຕ້ວ່າພວກເຮົາຈະຕ້ອງເພີ່ມປຸ່ມ, ເຊິ່ງຈະເຊື່ອມໂຍງກັບ ໜ້າ ອື່ນຖ້າວ່ານີ້ແມ່ນໂຄງການຕົວຈິງ. ພວກເຮົາຈະໃຫ້ຫ້ອງຮຽນຂອງ ປຸ່ມ ເພື່ອຮັກສາສິ່ງທີ່ງາມແລະລຽບງ່າຍ.

div> section> h1> ແຟຊັ່ນ Mens / h1> ປຸ່ມ> href = "#"> ຮຽນຮູ້ເພີ່ມເຕີມ / a> / ປຸ່ມ> / ສ່ວນ> ພາກ> h1> ເສື້ອຜ້າແຟຊັ່ນ / h1> ປຸ່ມ> href = "#"> ຮຽນຮູ້ ເພີ່ມເຕີມ / a> / ປຸ່ມ> / ສ່ວນ>

03. ສຳ ຫຼວດຕົວແປ Sass

ສິ່ງ ໜຶ່ງ ທີ່ພວກເຮົາທຸກຄົນຮັກກ່ຽວກັບ Sass ແມ່ນການ ນຳ ໃຊ້ຕົວແປ. ເຖິງແມ່ນວ່າຕົວແປ CSS ພື້ນເມືອງໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຫຼາຍ, ພວກເຮົາຈະຮັກສາສິ່ງຕ່າງໆໃຫ້ປອດໄພໂດຍການໃຊ້ Sass. ພວກເຮົາຈະເອົາສິ່ງເຫລົ່ານີ້ຢູ່ເທິງສຸດຂອງພວກເຮົາ .scss, ແລະທ່ານສາມາດເລືອກສີໃດກໍ່ຕາມທີ່ທ່ານຕ້ອງການ, ແຕ່ວ່າໃຊ້ rgba ຄຸນຄ່າຈະຊ່ວຍໃຫ້ພວກເຮົາມີຄວາມຍືດຫຍຸ່ນຫຼາຍຂື້ນ.

/ * * ຕົວແປ * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ left-button-hover: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ ຂວາ-button-hover: rgba (255, 140, 219, 0.7); $ hover-width: 75%; $ small-width: 25%; $ animateSpeed: 1000ms;

04. ປັບຮູບແບບຂອງຮ່າງກາຍ

ກ່ອນອື່ນ ໝົດ, ພວກເຮົາຈະ ກຳ ຈັດແຜ່ນຮອງແລະຂອບທັງ ໝົດ ໃນຮ່າງກາຍແລະຈາກນັ້ນຕັ້ງຄອບຄົວຕົວອັກສອນໄປ Open Sans. ສິ່ງນີ້ຈະສົ່ງຜົນກະທົບຕໍ່ປຸ່ມເທົ່ານັ້ນ, ສະນັ້ນມັນບໍ່ ສຳ ຄັນຫຼາຍວ່າເຮົາຈະໃຊ້ຕົວອັກສອນໃດ. ຈາກນັ້ນພວກເຮົາຈະ ກຳ ນົດຄວາມກວ້າງແລະຄວາມສູງໃຫ້ 100% ແລະໃຫ້ແນ່ໃຈວ່າທຸກຢ່າງທີ່ລົ້ນໄປຕາມແກນ X ຈະຖືກປິດບັງ.

html, ຮ່າງກາຍ {ແຜ່ນຮອງ: 0; ຂອບ: 0; font-family: 'Open Sans', sans-serif; ຄວາມກວ້າງ: 100%; ລະດັບຄວາມສູງ: 100%; overflow-x: ເຊື່ອງໄວ້; }

05. ອອກແບບຫົວຂໍ້ພາກ

ມັນເຖິງເວລາທີ່ຈະເລືອກເອົາຕົວອັກສອນ Google ສຳ ລັບຫົວຂໍ້ສ່ວນຕ່າງໆ - ພວກເຮົາໄດ້ເລືອກ Playfair Display. ຈາກນັ້ນໃຊ້ translateX ພວກເຮົາສາມາດຮັບປະກັນວ່າຫົວຂໍ້ພາກສ່ວນແມ່ນຕັ້ງຢູ່ໃນແກນ X ສະ ເໝີ.

h1 {font-size: 5rem; ສີ: #fff; ຕຳ ແໜ່ງ: ເດັດຂາດ; ຊ້າຍ: 50%; ອັນດັບ: 20%; ຫັນປ່ຽນ: translateX (-50%); white-space: nowrap; font-family: 'Playfair Display', serif; }

06. ເຮັດໃຫ້ CTAs ໂດດເດັ່ນ

ປຸ່ມຂອງພວກເຮົາຈະເຮັດ ໜ້າ ທີ່ເປັນການຮຽກຮ້ອງຂອງພວກເຮົາໃຫ້ມີການກະ ທຳ, ດັ່ງນັ້ນສິ່ງເຫຼົ່ານີ້ ຈຳ ເປັນຕ້ອງໃຫຍ່, ກ້າຫານແລະຕັ້ງ ຕຳ ແໜ່ງ ບ່ອນທີ່ພວກມັນງ່າຍທີ່ຈະກົດ. ປຸ່ມທັງສອງຈະມີເສັ້ນຊາຍແດນສີຂາວແລະຜົນກະທົບການປ່ຽນແປງທີ່ ໜ້າ ສົນໃຈ. ຄໍເຕົ້າໄຂ່ທີ່ເລີ່ມຕົ້ນ ສຳ ລັບທັງສອງປຸ່ມຈະມີຄືກັນ, ຢ່າງໃດກໍ່ຕາມພວກເຮົາຈະປ່ຽນສີຂອງພວກມັນໄວ້.

. ປຸ່ມ {display: block; ຕຳ ແໜ່ງ: ເດັດຂາດ; ຊ້າຍ: 50%; ອັນດັບ: 50%; ລະດັບຄວາມສູງ: 2.6rem; padding-top: 1.2rem; width: 15rem; text-align: ສູນກາງ; ສີ: ສີຂາວ; ຊາຍແດນ: 3px ແຂງ #fff; ຊາຍແດນ - ລັດສະ ໝີ: 4px; font-weight: 600; ຕົວ ໜັງ ສືຕົວປ່ຽນ: uppercase; text-decoration: none; ຫັນປ່ຽນ: translateX (-50%); ການຫັນປ່ຽນ: ທັງ ໝົດ .2s;

ປຸ່ມຕົ້ນຕໍຈະມີຜົນກະທົບ hover ທີ່ລຽບງ່າຍແລະພວກເຮົາຈະໃຊ້ຕົວແປ Sass ທີ່ພວກເຮົາໄດ້ລະບຸໄວ້ ສຳ ລັບສີ, ເຊິ່ງຈະເປັນສີທີ່ຄ້າຍຄືກັນກັບພື້ນຫລັງຂອງ ໜ້າ.

.screen.left .button: hover {ພື້ນຫລັງສີ: $ left-button-hover; border-color: $ left-button-hover;; } .screen.right. ປຸ່ມ: hover {ພື້ນຫລັງສີ: $ ຂວາ-button-hover; border-color: $ ຂວາ-button-hover;

07. ຕັ້ງພື້ນຫລັງແລະ ໜ້າ ຈໍຂອງພາຊະນະ

ຊັ້ນບັນຈຸຈະເຮັດ ໜ້າ ທີ່ຫໍ່ ໜ້າ ເວບໄຊທ໌ຂອງພວກເຮົາແລະພວກເຮົາຈະ ກຳ ນົດ ຕຳ ແໜ່ງ ນີ້ໃຫ້ກົງກັນຂ້າມ, ເພາະວ່າພວກເຮົາຕ້ອງການຈັດວາງ ໜ້າ ຈໍໃຫ້ເປັນ ຕຳ ແໜ່ງ ທີ່ສົມບູນ. ພວກເຮົາຈະໃຫ້ພື້ນຖານບັນຈຸສີພື້ນຫລັງ, ແຕ່ແນ່ນອນວ່າມັນຈະບໍ່ໄດ້ເຫັນເພາະວ່າພວກເຮົາຈະ ກຳ ນົດສີທີ່ແຕກຕ່າງກັນໃຫ້ທັງສອງພື້ນຫລັງ.

. ຕຳ ແໜ່ງ {ຕຳ ແໜ່ງ: ພີ່ນ້ອງ; ຄວາມກວ້າງ: 100%; ລະດັບຄວາມສູງ: 100%; ພື້ນຫລັງ: $ container-BgColor; .screen {ຕຳ ແໜ່ງ: ຢ່າງແທ້ຈິງ; ຄວາມກວ້າງ: 50%; ລະດັບຄວາມສູງ: 100%; overflow: hidden; }}

08. ເພີ່ມພາບພື້ນຫລັງ

ທັງພາກສ່ວນເບື້ອງຊ້າຍແລະຂວາຈະສະແດງຮູບພາບ, ແລະທ່ານສາມາດຊອກຫາຮູບພາບຫຼັກຊັບທີ່ບໍ່ມີຄ່າລິຂະສິດຈາກເວບໄຊທ໌ຕ່າງໆເຊັ່ນ Unsplash, Pixabay ຫຼື Pexels (ເຊິ່ງຂ້ອຍເຄີຍໃຊ້ໃນບົດແນະ ນຳ ນີ້). ເພື່ອເຮັດໃຫ້ສິ່ງຕ່າງໆງ່າຍຂຶ້ນ, ຂ້າພະເຈົ້າໄດ້ໃຊ້ໂປແກຼມໂຮດຕິ້ງແລະການແບ່ງປັນຮູບພາບທີ່ບໍ່ເສຍຄ່າທີ່ເອີ້ນວ່າ imgbb ທີ່ພວກເຮົາສາມາດເຊື່ອມຕໍ່ເຂົ້າໄປໃນ CSS ຂອງພວກເຮົາ.

.screen.left {ເບື້ອງຊ້າຍ: 0; ພື້ນຫລັງ: url ('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp') ສູນກາງບໍ່ຕ້ອງເຮັດຊ້ ຳ ອີກ; ພື້ນຫລັງຂະຫນາດ: ການປົກຫຸ້ມຂອງ; &: ກ່ອນ {ຕຳ ແໜ່ງ: absolute; ເນື້ອໃນ: ""; ຄວາມກວ້າງ: 100%; ລະດັບຄວາມສູງ: 100%; ພື້ນຫລັງ: $ left-bgColor; }}

ເບື້ອງຂວາຂອງ ໜ້າ ເວັບກໍ່ຈະສະແດງພາບພື້ນຫລັງໂດຍໃຊ້ imgbb, ແລະພວກເຮົາຈະຕັ້ງສີພື້ນຫລັງເປັນສີບົວ. ອີກເທື່ອ ໜຶ່ງ, ພວກເຮົາ ກຳ ນົດຂະ ໜາດ ພື້ນຫລັງໃຫ້ ກວມເອົາ. ນີ້ຈະຊ່ວຍໃຫ້ພວກເຮົາສາມາດປົກປິດອົງປະກອບທັງ ໝົດ, ເຊິ່ງໃນກໍລະນີຂອງພວກເຮົາແມ່ນ ໜ້າ ຈໍ ຊັ້ນ

. ຫນ້າຈໍ. ສິດ {ສິດ: 0; ພື້ນຫລັງ: url ('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp') ສູນກາງບໍ່ຕ້ອງເຮັດຊ້ ຳ ອີກ; ພື້ນຫລັງຂະຫນາດ: ການປົກຫຸ້ມຂອງ; &: ກ່ອນ {ຕຳ ແໜ່ງ: absolute; ເນື້ອໃນ: ""; ຄວາມກວ້າງ: 100%; ລະດັບຄວາມສູງ: 100%; ພື້ນຫລັງ: $ right-bgColor; }}

09. ເພີ່ມການຫັນປ່ຽນແລະຜົນກະທົບດ້ານເທິງ

ຄວາມໄວຂອງພາບເຄື່ອນໄຫວ ສຳ ລັບຜົນກະທົບຂອງພວກເຮົາທີ່ມີຢູ່ເທິງຈໍທັງສອງຈະຖືກຄວບຄຸມໂດຍການປ່ຽນທີ່ຖືຄ່າຂອງຕົວປ່ຽນຂອງພວກເຮົາ $ animateSpeed, ເຊິ່ງແມ່ນ 1000ms (ໜຶ່ງ ວິນາທີ). ຫຼັງຈາກນັ້ນພວກເຮົາຈະຈົບລົງດ້ວຍການໃຫ້ພາບເຄື່ອນໄຫວຜ່ອນຄາຍ, ເຊິ່ງເປັນຄວາມສະດວກສະບາຍໃນແລະພາຍນອກເຊິ່ງຈະຊ່ວຍໃຫ້ພວກເຮົາມີພາບເຄື່ອນໄຫວທີ່ລຽບງ່າຍ.

.screen.left, .screen.right, .screen.right: ກ່ອນ, .screen.left: ກ່ອນ {ການປ່ຽນແປງ: $ animateSpeed ​​ທັງ ໝົດ ໃນການອອກ; }

ສິ່ງທີ່ພວກເຮົາຕ້ອງການຈະເກີດຂື້ນໃນປັດຈຸບັນແມ່ນວ່າເມື່ອທ່ານເລື່ອນ ໜ້າ ຈໍດ້ານຊ້າຍ, ຈະມີຊັ້ນຮຽນທີ່ເພີ່ມເຂົ້າໃນສ່ວນນັ້ນໂດຍໃຊ້ JavaScript (ເຊິ່ງພວກເຮົາຈະຂຽນໃນບາດກ້າວຕໍ່ມາ). ເມື່ອຫ້ອງຮຽນນີ້ຖືກເພີ່ມເຂົ້າມາ, ຫຼັງຈາກນັ້ນ ໜ້າ ຈໍນັ້ນຈະຂະຫຍາຍໄປເຖິງຄວາມກວ້າງຂອງຕົວແປທີ່ພວກເຮົາໄດ້ລະບຸໄວ້ - ເຊິ່ງຈະເປັນ 75%, ແລະຈາກນັ້ນເບື້ອງຂວາຈະຖືກຕັ້ງຄ່າໃຫ້ເປັນຕົວແປຄວາມກວ້າງນ້ອຍກວ່າ (25%).

.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: ກ່ອນ {z-index: 2; }

ນີ້ເຮັດວຽກຄືກັນກັບເບື້ອງຊ້າຍ, ບ່ອນທີ່ຫ້ອງຮຽນ ໃໝ່ ຈະຖືກເພີ່ມໃສ່ເມົ້າເລື່ອນເມົ້າໂດຍໃຊ້ JavaScript, ແລະ ໜ້າ ຈໍດ້ານຂວາຈະຍືດອອກໄປ. ພວກເຮົາຍັງຕ້ອງການໃຫ້ແນ່ໃຈວ່າ z-index ຖືກຕັ້ງໃຫ້ 2 ສະນັ້ນປຸ່ມ CTA ກາຍເປັນທີ່ໂດດເດັ່ນຂື້ນ.

.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: ກ່ອນ {z-index: 2; }

10. ຍ້າຍເຂົ້າໄປໃນ JavaScript

ພວກເຮົາຈະ ນຳ ໃຊ້ການ ສຳ ພັດຂອງ vanilla JavaScript ເພື່ອຊ່ວຍພວກເຮົາເພີ່ມແລະຖອດ CSS ຊັ້ນຮຽນແລະພວກເຮົາຍັງຈະ ນຳ ໃຊ້ບາງສ່ວນຂອງຄຸນລັກສະນະ ໃໝ່ ຂອງ ES6 ເຊັ່ນກັນ. ສິ່ງ ທຳ ອິດທີ່ພວກເຮົາຕ້ອງເຮັດຄືການປະກາດຕົວແປ ຈຳ ນວນ ໜຶ່ງ ທີ່ຄົງທີ່.

ເພາະວ່າພວກເຮົາຈະ ນຳ ໃຊ້ ເອກະສານ ຫຼາຍກ່ວາຫນຶ່ງຄັ້ງ, ພວກເຮົາຈະຕັ້ງຄ່າຕົວປ່ຽນແປງແບບຄົງທີ່ເອີ້ນວ່າ doc ແລະເກັບຮັກສາເອກະສານພາຍໃນນັ້ນພວກເຮົາສາມາດຮັກສາ ຄຳ ສັບ 'ເອກະສານ' ໃຫ້ດີແລະສັ້ນ.

const doc = ເອກະສານ;

ໃນປັດຈຸບັນພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ກໍານົດສາມຄົງທີ່ທີ່ຈະເກັບຮັກສາ ຖືກແລ້ວ, .left ແລະ ຜູ້ຕໍ່ຕ້ານ ຜູ້ຄັດເລືອກ. ເຫດຜົນທີ່ພວກເຮົາ ກຳ ລັງ ນຳ ໃຊ້ຄົງທີ່ແມ່ນຍ້ອນວ່າພວກເຮົາຮູ້ວ່າພວກເຮົາບໍ່ຕ້ອງການປ່ຽນຄຸນຄ່າຂອງສິ່ງເຫລົ່ານີ້, ສະນັ້ນການ ນຳ ໃຊ້ຄົງທີ່ກໍ່ມີຄວາມ ໝາຍ. ດ້ວຍສິ່ງເຫລົ່ານີ້ທີ່ ກຳ ນົດໄວ້ໃນຕອນນີ້, ພວກເຮົາສາມາດສືບຕໍ່ເດີນ ໜ້າ ແລະເພີ່ມກິດຈະ ກຳ ຂອງຫນູບາງຢ່າງໃຫ້ພວກເຂົາ.

const right = doc.querySelector (". ສິດ"); const left = doc.querySelector (". ຊ້າຍ"); const container = doc.querySelector (". ພາຊະນະ");

ການ ນຳ ໃຊ້ ຊ້າຍ ຕົວປ່ຽນແປງຄົງທີ່ພວກເຮົາປະກາດໃນບາດກ້າວສຸດທ້າຍ, ດຽວນີ້ພວກເຮົາສາມາດເພີ່ມຜູ້ຟັງເຫດການເຂົ້າໃນມັນ. ເຫດການນີ້ຈະເປັນ ຫນູ ເຫດການແລະແທນທີ່ຈະໃຊ້ຟັງຊັນການເອີ້ນຄືນ, ພວກເຮົາຈະໃຊ້ຄຸນສົມບັດ ES6 ອື່ນທີ່ເອີ້ນວ່າ ຫນ້າທີ່ລູກສອນ '(() =>).

// ເພີ່ມຫ້ອງຮຽນໃຫ້ກັບສ່ວນປະກອບຂອງພາຊະນະທີ່ hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});

11. ເພີ່ມແລະຖອດຊັ້ນຮຽນ

ໃນບາດກ້າວສຸດທ້າຍ, ຜູ້ຟັງເຫດການຂອງພວກເຮົາໄດ້ເພີ່ມ a ຫນູ ເຫດການທີ່ແນເປົ້າ ໝາຍ ໃສ່ຫ້ອງຮຽນຫລັກແລະເພີ່ມຫ້ອງຮຽນ ໃໝ່ ທີ່ເອີ້ນວ່າ hover- ຊ້າຍ ກັບສ່ວນປະກອບສ່ວນເບື້ອງຊ້າຍ. ດ້ວຍສິ່ງທີ່ເອີ້ນວ່າເພີ່ມນີ້, ດຽວນີ້ພວກເຮົາ ຈຳ ເປັນຕ້ອງເອົາມັນອອກເມື່ອພວກເຮົາຖີ້ມມັນ. ພວກເຮົາຈະເຮັດສິ່ງນີ້ໂດຍການ ນຳ ໃຊ້ mouseleave ເຫດການແລະ .remove () ວິທີການ.

// ລົບຊັ້ນທີ່ຖືກເພີ່ມໃສ່ hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});

ຈົນເຖິງດຽວນີ້ພວກເຮົາໄດ້ເຮັດທຸກຢ່າງໃນ ໜ້າ ຈໍເບື້ອງຊ້າຍແລ້ວ. ຕອນນີ້ພວກເຮົາຈະເຮັດ ສຳ ເລັດ JavaScript ແລະເພີ່ມແລະ ກຳ ຈັດຊັ້ນຮຽນທີ່ຢູ່ໃນສ່ວນປະກອບທີ່ຖືກຕ້ອງ. ອີກເທື່ອ ໜຶ່ງ ພວກເຮົາໄດ້ ນຳ ໃຊ້ ຄຳ ສັບ ສຳ ລັບລູກສອນທີ່ນີ້ເພື່ອເຮັດໃຫ້ທຸກສິ່ງທຸກຢ່າງເບິ່ງຄືວ່າງາມແລະກະທັດຮັດ.

right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});

12. ເຮັດໃຫ້ມັນຕອບສະ ໜອງ

ບໍ່ມີໂຄງການໃດ - ບໍ່ວ່າໃຫຍ່ຫລືນ້ອຍ - ຄວນຫລີກລ້ຽງການເຮັດໃຫ້ມີການຕອບຮັບ. ສະນັ້ນ, ໃນຂັ້ນຕອນນີ້ພວກເຮົາຈະເພີ່ມບາງ ຄຳ ຖາມກ່ຽວກັບສື່ໃນ CSS ຂອງພວກເຮົາ, ແລະເຮັດໃຫ້ໂຄງການນ້ອຍໆນີ້ສາມາດປັບຕົວເຂົ້າກັບອຸປະກອນມືຖືໄດ້ດີທີ່ສຸດເທົ່າທີ່ພວກເຮົາສາມາດເຮັດໄດ້. ມັນຄຸ້ມຄ່າທີ່ຈະກວດເບິ່ງ CodePen ເດີມເພື່ອເບິ່ງວ່າມັນເຮັດວຽກແນວໃດ.

@media (ຄວາມກວ້າງສູງສຸດ: 800px) {h1 {font-size: 2rem; } .button {ຄວາມກວ້າງ: 12rem; }

ພວກເຮົາໄດ້ເຮັດໃຫ້ແນ່ໃຈວ່າເມື່ອຄວາມກວ້າງຂອງ ໜ້າ ເວັບຫຼຸດລົງເຖິງ 800px, ຕົວອັກສອນແລະປຸ່ມຈະຫຼຸດລົງໃນຂະ ໜາດ. ດັ່ງນັ້ນ, ເພື່ອເຮັດສິ່ງຕ່າງໆໃຫ້ ສຳ ເລັດພວກເຮົາຕ້ອງການເປົ້າ ໝາຍ ຄວາມສູງເຊັ່ນກັນແລະຮັບປະກັນວ່າປຸ່ມຂອງພວກເຮົາເລື່ອນລົງ ໜ້າ ເວລາທີ່ຄວາມສູງຂອງ ໜ້າ ເວັບສູງກວ່າ 700px.

@media (ຄວາມສູງສຸດສູງສຸດ: 700px) {.button {ສູງສຸດ: 70%; }}

ຕ້ອງການບັນທຶກ ໜ້າ ເວັບຂອງທ່ານບໍ່? ສົ່ງອອກເປັນເອກະສານ PDF ແລະບັນທຶກມັນໄວ້ໃນບ່ອນເກັບຮັກສາຟັງທີ່ປອດໄພ.

ເຫດການອອກແບບເວບໄຊທ໌ ສ້າງລອນດອນ ກັບມາຮອດວັນທີ 19-21 ກັນຍາ 2018, ສະ ເໜີ ຕາຕະລາງທີ່ເຕັມໄປດ້ວຍ ລຳ ໂພງທີ່ ນຳ ພາອຸດສາຫະ ກຳ, ມື້ເຕັມທີ່ຂອງການເຮັດວຽກແລະໂອກາດການສ້າງເຄືອຂ່າຍທີ່ມີຄ່າ - ຢ່າລືມ. ໄດ້ຮັບປີ້ທົ່ວໄປຂອງທ່ານແລ້ວ.

ບົດຂຽນນີ້ຖືກລົງໃນເບື້ອງຕົ້ນໃນວາລະສານສຸດທິ ສະບັບ 305. ຈອງດຽວນີ້.