ເນື້ອຫາ
- 1. ສ້າງຂໍ້ແນະ ນຳ
- 2. ແຍກຂໍ້ຄວາມ
- 3. ເພີ່ມຄວາມໄວ
- 4. ຮຽກຮ້ອງການກະ ທຳ
- 5. ກ້າວຕໍ່ໄປ
- 6. ຕື່ມຕົວອັກສອນສຸດທ້າຍ
- ຮຽນຮູ້ເພີ່ມເຕີມໄດ້ທີ່ Generate London
ການແນະ ນຳ ຜົນກະທົບຕໍ່ຂໍ້ຄວາມແລະການພິມດີດສາມາດເພີ່ມທັດສະນະ ໃໝ່ ທັງ ໝົດ ໃຫ້ກັບປະສົບການຂອງຜູ້ໃຊ້ໃນເວບໄຊທ໌. ແຕ່ວ່າຂໍ້ຄວາມແມ່ນຈະຕ້ອງອ່ານ, ແລະມີຄວາມສະຫຼາດເກີນໄປຫລືສະຫລາດດ້ວຍຜົນກະທົບກໍ່ສາມາດເອົາຊະນະຈຸດປະສົງຂອງມັນ.
ສະນັ້ນຈົ່ງສະຫຼາດ, ສະຫຼາດ, ແຕ່ໃຫ້ແນ່ໃຈວ່າຜົນກະທົບຂອງການພິມໄວຍະກອນຂອງທ່ານເຮັດວຽກຕົວຈິງ, ຄືກັບທີ່ມັນເຮັດຢູ່ໃນເວັບໄຊທ໌ຂອງ Patrick Heng - ມີຢູ່ໃນຮູບຂ້າງເທິງ. ອ່ານຕໍ່ເພື່ອຊອກຫາວິທີການ ...
1. ສ້າງຂໍ້ແນະ ນຳ
ເປີດແຟ້ມເອກະສານຂອງໂຄງການແລະທ່ານຈະເຫັນວ່າມີຫ້ອງສະຫມຸດທີ່ມີ velocity.js ແລະ blast.js. Blast ແຍກຂໍ້ຄວາມຂຶ້ນ, ໃນຂະນະທີ່ຄວາມໄວແມ່ນເຄື່ອງຈັກສິບສອງ. ມັນມີສາມຕົວແປທີ່ຊົດເຊີຍເພື່ອເຮັດໃຫ້ແຕ່ລະຊິ້ນສ່ວນຂອງຂໍ້ຄວາມເຄື່ອນຍ້າຍໃນແຕ່ລະໄລຍະ.
script> var ຊົດເຊີຍ 1 = 0; var ຊົດເຊີຍ 2 = 0; var ຊົດເຊີຍ 3 = 0; / script>
2. ແຍກຂໍ້ຄວາມ
ການໃຊ້ຣະເບີດ, ແຕ່ລະຕົວ ໜັງ ສືຖືກແບ່ງອອກເປັນສ່ວນປະກອບຂອງຕົວມັນເອງ. ຫຼັງຈາກນັ້ນ, ຊັ້ນເທິງຂອງຕົວ ໜັງ ສືຈະຖືກໂຄ້ງລົງແລະການຊົດເຊີຍແມ່ນເພີ່ມຂື້ນ ສຳ ລັບແຕ່ລະຈົດ ໝາຍ ສະນັ້ນພວກເຂົາຈະເຄື່ອນໄຫວເປັນອິດສະຫຼະ.
$ (“ h1”) ລະເບີດ ({delimiter:“ character”}); function anim () {var $ spans = $ ("# ອັນດັບ"). ຊອກ ('ເປີດ'); $ spans.each (function () {ຊົດເຊີຍ 1 + = 40;
3. ເພີ່ມຄວາມໄວ
ດຽວນີ້ຫໍສະ ໝຸດ ຄວາມໄວເພີ່ມຄວາມເຄື່ອນໄຫວແລະຄວາມຕ້ານທານເພື່ອໃຫ້ຕົວອັກສອນເຄື່ອນ ເໜັງ ແລະຈ່ອຍລົງ. ຕົວອັກສອນແຕ່ລະອັນຖືກຊົດເຊີຍ, ແລະໄລຍະເວລາແລະການຜ່ອນຄາຍແມ່ນຖືກ ກຳ ນົດໃຫ້ແຕ່ລະຕົວອັກສອນ.
$ (ນີ້). ຄວາມໄວ ({translateY: -100, ຄວາມຕ້ານທານ: 1}, {ຄວາມຊັກຊ້າ: ຊົດເຊີຍ 1, ໄລຍະເວລາ: 800, ການຜ່ອນຄາຍ:“ EasyOutBack”}); }); }
4. ຮຽກຮ້ອງການກະ ທຳ
ດຽວນີ້ຟັງຊັນ ‘anim’ ຖືກເອີ້ນແລະນີ້ກໍ່ໃຫ້ມີພາບເຄື່ອນໄຫວເລີ່ມຕົ້ນ. ຟັງຊັນ 'setTimeout' ດຽວນີ້ເຮັດໃຫ້ຂໍ້ຄວາມທີສອງທີ່ເປັນສີເຫຼືອງ. ອີກເທື່ອ ໜຶ່ງ, ມັນຖືກກະຕຸ້ນໂດຍໃຊ້ຄວາມໄວຄືກັບໃນຕົວຢ່າງ ທຳ ອິດ.
anim (); setTimeout (function () {var $ spans = $ ("# ກາງ"). ຊອກ ('span'); $ spans.each (function () {offset2 + = 40; $ (ນີ້) ຄວາມໄວ ({translateY: -) 100, ຄວາມຕ້ານທານ: 0.8}, {
5. ກ້າວຕໍ່ໄປ
ການຊັກຊ້າ, ໄລຍະເວລາແລະການຜ່ອນຄາຍແມ່ນຖືກ ກຳ ນົດເພື່ອໃຫ້ຂໍ້ຄວາມສີເຫລືອງທີສອງຍ້າຍໄປມາຢ່າງຖືກຕ້ອງ. ຈາກນັ້ນສິ້ນສຸດທ້າຍຂອງຂໍ້ຄວາມທີ່ເປັນສີສົ້ມຖືກຄວບຄຸມໃນ ໜ້າ ທີ່ 'ຕັ້ງເວລາ' ເພື່ອຖ່ວງການຍ້າຍນີ້ເລັກ ໜ້ອຍ ກ່ອນທີ່ຈະເລີ່ມຕົ້ນ.
ຄວາມຊັກຊ້າ: ຊົດເຊີຍ 2, ໄລຍະເວລາ: 800, ການຜ່ອນຄາຍ:“ EasyOutBack”}); }); }, 100); setTimeout (function () {var $ spans = $ ("# ລຸ່ມ"). ຊອກ ('span');
6. ຕື່ມຕົວອັກສອນສຸດທ້າຍ
ບັດນີ້ຈົດ ໝາຍ ສຸດທ້າຍຖືກຍ້າຍໄປຢູ່ບ່ອນເກົ່າແລ້ວ. ນີ້ເຮັດໃຫ້ມີຜົນກະທົບຄືກັນກັບເວັບໄຊທ໌ຂອງ Patrick Heng, ເຊິ່ງມີການເຄື່ອນຍ້າຍຂໍ້ຄວາມຫຼາຍຊັ້ນ. ຕົວຈິງແລ້ວ Patrick ໃຊ້ WebGL ເພື່ອຍ້າຍຂໍ້ຄວາມແຕ່ນີ້ແມ່ນວິທີທີ່ງ່າຍດາຍກວ່າກັບອົງປະກອບ DOM.
$ spans.each (function () {offset3 + = 40; $ (ນີ້). ຄວາມໄວ ({translateY: -100, ຄວາມຕ້ານທານ: 0.8}, {ຄວາມຊັກຊ້າ: ຊົດເຊີຍ 3, ໄລຍະເວລາ: 800, ການຜ່ອນຄາຍ: "EasyOutBack"});} ); }, 150);
ຮຽນຮູ້ເພີ່ມເຕີມໄດ້ທີ່ Generate London
Richard Rutter ມີຄວາມຮັກແລະຄວາມນິຍົມຊົມຊອບ ສຳ ລັບການພິມດີດແລະໄດ້ຮ່ວມມືສ້າງຕັ້ງບໍລິສັດ Fontdeck, ເຊິ່ງເປັນບໍລິການຕົວອັກສອນເວັບແບບບຸກເບີກ. ໃນຖານະເປັນຜູ້ປະກາດຂ່າວປະເພດພິມທີ່ໄດ້ຮັບການແຕ່ງຕັ້ງດ້ວຍຕົນເອງ, Richard ແມ່ນຫົວ ໜ້າ ອົງການຈັດຕັ້ງຂອງກອງປະຊຸມພິມດີດເວັບ Ampersand.
ທີ່ Generate London 2018, ກອງປະຊຸມຂອງລາວຈະຊ່ວຍທ່ານສ້າງເວບໄຊທ໌ດ້ວຍຮູບແບບເວັບທີ່ມີຄວາມ ໝາຍ, ເໝາະ ສົມ, ໂດດເດັ່ນ, ສະແດງອອກແລະສາມາດອ່ານໄດ້, ເຊິ່ງສາມາດປັບຕົວ ສຳ ລັບ ໜ້າ ຈໍຂອງທຸກຮູບຮ່າງແລະຂະ ໜາດ. ທ່ານຈະໄດ້ຮຽນຮູ້ວິທີການຜະລິດເຄື່ອງຫັດຖະ ກຳ ທີ່ມີອາຍຸຫລາຍສັດຕະວັດທີ່ມີເຕັກໂນໂລຢີທີ່ທັນສະ ໃໝ - ລວມທັງຕົວອັກສອນທີ່ມີຕົວແປ - ເພື່ອອອກແບບແລະພັດທະນາປະສົບການທີ່ດີທີ່ສຸດ ສຳ ລັບຜູ້ອ່ານຂອງທ່ານ.
ໃນໄລຍະ ໜຶ່ງ ມື້, ທ່ານຈະເຂົ້າຮ່ວມໃນກິດຈະ ກຳ ທີ່ເຮັດດ້ວຍມື, ນຳ ໃຊ້ເຕັກນິກ ໃໝ່ໆ ໄປທີ່ເວັບໄຊທ໌ຕົວຢ່າງທີ່ມີລາຍລະອຽດເຊິ່ງທ່ານສາມາດ ນຳ ກັບທ່ານ. ນີ້ຈະເປັນແຫລ່ງທີ່ດີເລີດ ສຳ ລັບທ່ານທີ່ຈະກ່າວເຖິງໃນອານາຄົດ. ແລະຖ້າວ່າມັນບໍ່ພຽງພໍ, ຜູ້ເຂົ້າຮ່ວມທຸກຄົນຈະຍ່າງ ໜີ ໄປພ້ອມດ້ວຍ ສຳ ເນົາເອເລັກໂຕຣນິກຟຣີຂອງປື້ມ Web Web Typography ທີ່ໄດ້ຮັບການຍ້ອງຍໍ.
ຢ່າພາດ, ຮັບປີ້ຂອງທ່ານດຽວນີ້
