ເນື້ອຫາ
- 01. ເພີ່ມລະຫັດໃສ່ແທັກຮ່າງກາຍຂອງ ໜ້າ ຂອງທ່ານ
- 02. ຄໍເຕົ້າໄຂ່ທີ່ການສະແດງ
- 03. ການສະແດງຂອບເຂດ
- 04. ຖືທຸກຢ່າງ
- 05. ການແລ່ນຄວາມອວດອ້າງ
- 06. ກັບສູ່ສະພາບປົກກະຕິ
- ຮັບປີ້ຂອງທ່ານ ສຳ ລັບ Generate New York ດຽວນີ້
ວິທີທີ່ດີທີ່ຈະດຶງດູດຄວາມສົນໃຈ - ແລະຮັກສາມັນໄວ້ - ແມ່ນການສ້າງແຜນຜັງເວບໄຊທ໌ທີ່ສະແດງຄວາມສາມາດຂອງທ່ານຈາກສິ່ງທີ່ປິດ (ຜູ້ສ້າງເວບໄຊທ໌ທີ່ ເໝາະ ສົມສາມາດຊ່ວຍໃນການກໍ່ສ້າງໄດ້). ເວັບໄຊຂອງອົງການ Vintage ຂອງຢູເຄລນແມ່ນຕົວຢ່າງທີ່ດີຂອງສິ່ງນີ້, ການດຶງດູດໃຫ້ທ່ານເຂົ້າໄປໃນຮູບແບບການອອກແບບ VR ຂອງມັນດ້ວຍການປະສົມປະສານທີ່ຈັບຕາຂອງໂລໂກ້ທີ່ສ້າງຂື້ນຈາກອະນຸພາກແກ້ວແລະຄວາມ ໜ້າ ຮັກທີ່ເບົາບາງທີ່ກະຕຸ້ນ.
- ພາບເຄື່ອນໄຫວເວັບ: ບໍ່ຕ້ອງມີລະຫັດ
ຜົນກະທົບທີ່ລຽບງ່າຍທີ່ຖືກ ນຳ ໃຊ້ແບບບໍ່ຄ່ອຍສາມາດເຮັດໃຫ້ເວັບໄຊທ໌້ຂອງທ່ານມີຄວາມສົນໃຈດ້ານການເບິ່ງເຫັນເລັກໆນ້ອຍໆ, ແລະມັນເປັນເລື່ອງແປກທີ່ງ່າຍທີ່ຈະຈັດຕັ້ງປະຕິບັດ. ນີ້ແມ່ນວິທີເຮັດມັນ.
ມີເວັບໄຊທ໌ທີ່ສັບສົນຢູ່ໃນໃຈບໍ? ໃຫ້ແນ່ໃຈວ່າເວບໄຊທ໌ຂອງທ່ານແມ່ນ ສຳ ເລັດ. ແລະຮັກສາເອກະສານອອກແບບຂອງທ່ານໃຫ້ປອດໄພໃນການເກັບຮັກສາຟັງ.
ດາວໂຫລດເອກະສານ ສຳ ລັບບົດແນະ ນຳ ນີ້.
01. ເພີ່ມລະຫັດໃສ່ແທັກຮ່າງກາຍຂອງ ໜ້າ ຂອງທ່ານ
ການສ້າງຜົນກະທົບທີ່ລຽບງ່າຍສາມາດເຮັດໄດ້ດ້ວຍຫຼາຍວິທີທີ່ແຕກຕ່າງກັນ. ໃນທີ່ນີ້ພວກເຮົາຈະເຮັດມັນໂດຍມີ GIF ທີ່ມີພາບເຄື່ອນໄຫວຢູ່ເທິງສຸດຂອງຕົວ ໜັງ ສື, ເຊິ່ງຈະຖືກເປີດແລະປິດໃນຈໍສະແດງຜົນ. ກ່ອນອື່ນ ໝົດ, ຕື່ມລະຫັດນີ້ໃສ່ແທັກຮ່າງກາຍຂອງ ໜ້າ ຂອງທ່ານ.
div id = "ຜູ້ຖື" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> ຜະລິດຕະພັນ - br> ION / div>
02. ຄໍເຕົ້າໄຂ່ທີ່ການສະແດງ
ເນື້ອຫາຈະ ນຳ ໃຊ້ຕົວແປແບບສະເພາະຈາກ Google Fonts ທີ່ມີຊື່ວ່າ Work Sans. ຄວ້າລິງຈາກນັ້ນໄປແລະວາງມັນໃສ່ຫົວຂອງທ່ານ; ຫຼັງຈາກນັ້ນຕື່ມ CSS ໃສ່ທັງ tags ຮູບແບບຫລືເອກະສານ CSS ແຍກຕ່າງຫາກ. ໜ້າ ເຈ້ຍຖືກສ້າງເປັນສີ ດຳ ດ້ວຍຕົວ ໜັງ ສືສີຂາວແລະຜູ້ຖືແມ່ນມີຄໍເຕົ້າໄຂ່.
ຮ່າງກາຍ {ພື້ນຫລັງ: # 000; font-family: 'Work Sans', sans-serif; ສີ: #fff; } # ຜູ້ຖືສິນຄ້າ {font-size: 6em; width: 500px; ຄວາມສູງ: 300px; ຂອບ: 0 ອັດຕະໂນມັດ; ຕຳ ແໜ່ງ: ພີ່ນ້ອງ; }
03. ການສະແດງຂອບເຂດ
ຜົນກະທົບ glitch ແມ່ນຮູບພາບພື້ນຫລັງທີ່ຖືກຈັດໃສ່ໂດຍກົງໃສ່ດ້ານເທິງຂອງຂໍ້ຄວາມ. ສ່ວນທີ່ ສຳ ຄັນຢູ່ນີ້ແມ່ນວ່າມັນຖືກເບິ່ງເຫັນໂດຍການຫຼຸດຄວາມຕ້ານທານໃຫ້ສູນເພື່ອບໍ່ໃຫ້ມັນສະແດງຈົນກວ່າຜູ້ໃຊ້ຈະຕິດຕໍ່ກັບຂໍ້ຄວາມ.
#glitch {ຕຳ ແໜ່ງ: ຢ່າງແທ້ຈິງ; ດ້ານເທິງ: 0; ຊ້າຍ: 0; z-index: 10; ຄວາມກວ້າງ: 100%; ລະດັບຄວາມສູງ: 100%; ພື້ນຫລັງ: url (glitch.gif); opacity: 0; }
04. ຖືທຸກຢ່າງ
ເພີ່ມແທັກອັກສອນໃສ່ໃນຕອນທ້າຍຂອງສ່ວນຂອງຮ່າງກາຍແລະສ້າງເອກະສານອ້າງອີງໃສ່ສ່ວນ 'glitch' div ໃນເອກະສານ. ຫຼັງຈາກນັ້ນຕົວແປທີ່ມີຊື່ວ່າ 'over' ຖືກຕັ້ງຄ່າໃຫ້ບໍ່ຖືກຕ້ອງ. ສິ່ງນີ້ຈະຖືກເປີດແລະປິດເມື່ອຜູ້ໃຊ້ຍ້າຍຂໍ້ຄວາມ.
var gl = document.getElementById ("ຄວາມລຶກລັບ"); var over = ບໍ່ຖືກຕ້ອງ;
05. ການແລ່ນຄວາມອວດອ້າງ
ຟັງຊັ່ນ glitch ໄດ້ຖືກເອີ້ນໃນເວລາທີ່ເມົາສ໌ຍ້າຍຜ່ານຂໍ້ຄວາມ. ຖ້າຫາກວ່າຄວາມຜິດພາດບໍ່ໄດ້ເຮັດວຽກແລ້ວການເບິ່ງເຫັນຂອງຄວາມມືດຈະຖືກເປີດແລະມັນຈະຖືກປິດຫຼັງຈາກໃຊ້ເວລາ ໜຶ່ງ ວິນາທີ.ທ່ານສາມາດທົດລອງກັບສິ່ງນີ້ແລະໃຊ້ຕົວເລກແບບສຸ່ມເພື່ອເຮັດໃຫ້ມັນບໍ່ສາມາດຄາດເດົາໄດ້.
function glitch () {ຖ້າ (over == false) {gl.style.opacity = "1"; setTimeout (function () {ປົກກະຕິ ();}, 1500); }}
06. ກັບສູ່ສະພາບປົກກະຕິ
ຜົນກະທົບຂອງ glitch ບໍ່ຄວນຈະສືບຕໍ່ຍ້ອນວ່າມັນຈະເປັນສິ່ງທີ່ຫນ້າຮໍາຄານເກີນໄປຕໍ່ຜູ້ໃຊ້, ແຕ່ເປັນອົງປະກອບແບບໂຕ້ຕອບມັນກໍ່ເຮັດວຽກໄດ້ດີ. ນີ້, ລະຫັດປັບຄວາມຕ້ານທານກັບຄືນໄປບ່ອນສູນເພື່ອບໍ່ໃຫ້ມັນເບິ່ງເຫັນຢູ່ດ້ານເທິງຂອງຕົວ ໜັງ ສື.
function normal () {gl.style.opacity = "0"; }
ຮັບປີ້ຂອງທ່ານ ສຳ ລັບ Generate New York ດຽວນີ້
ເຫດການອອກແບບເວບໄຊທ໌ເປັນເວລາສາມວັນ Generate New York ແມ່ນກັບມາແລ້ວ. ປະຕິບັດໃນລະຫວ່າງວັນທີ 25-27 ເມສາ 2018, ຜູ້ເວົ້າລວມມີ Dan SuperFriendly's Dan Mall, ທີ່ປຶກສາເວັບໄຊຕ໌ພາບເຄື່ອນໄຫວ Val Head, ນັກພັດທະນາ JavaScript ເຕັມຮູບແບບ Wes Bos ແລະອື່ນໆ. ມັນຍັງມີມື້ເຮັດວຽກເຕັມມື້ແລະໂອກາດການສ້າງເຄືອຂ່າຍທີ່ມີຄ່າ - ຢ່າລືມຢ່າພາດ. ໄດ້ຮັບປີ້ທົ່ວໄປຂອງທ່ານແລ້ວ.
ບົດຂຽນນີ້ຖືກຈັດພີມມາໃນສະບັບ 270 ຂອງວາລະສານອອກແບບ Web Designer ທີ່ສ້າງສັນ. ຊື້ເລກທີ 270 ຢູ່ນີ້ ຫຼື ຈອງກັບຜູ້ອອກແບບເວບໄຊທ໌ນີ້.
