ສ້າງຜົນກະທົບຕົວ ໜັງ ສື 3D ແບບເຄື່ອນໄຫວ

ເນື້ອຫາ

• 01. ລິເລີ່ມເອກະສານ HTML
• 02. ເນື້ອຫາ HTML ທີ່ເບິ່ງເຫັນ
• 03. ການລິເລີ່ມ CSS
• 04. ພາຊະນະສັດ
• 05. ການລິເລີ່ມຂອງພາບເຄື່ອນໄຫວ
• 06. ມີຊີວິດຊີວາເບິ່ງ
• 07. ສະຫຼຸບພາບເຄື່ອນໄຫວ

ຄວາມຮັກຫຼົງລືມໂດຍ Jam3 ຂອງການາດາແມ່ນກາບກອນທີ່ມີຄວາມມືດມົນ, ພ້ອມທີ່ຈະຕອບສະ ໜອງ ກັບຫົວໃຈຈິງກ່ຽວກັບຄວາມຮູ້ສຶກທີ່ທົນທານໃນຄວາມຮັກທີ່ຫຼົງໄຫຼ. ຮູບແບບເວບໄຊທ໌ໄດ້ຖືກສ້າງຂຶ້ນໂດຍໃຊ້ HTML5 ກັບຫ້ອງສະມຸດ GSAP ເຮັດໃຫ້ມີພາບເຄື່ອນໄຫວ, ໜຶ່ງ ໃນລັກສະນະທີ່ ໜ້າ ປະທັບໃຈທີ່ສຸດແມ່ນຂໍ້ຄວາມ 3D ທີ່ມີພາບເຄື່ອນໄຫວທີ່ ນຳ ເອົາບົດກະວີຂອງ Love Lost ໄປສູ່ຊີວິດ.

• ສ້າງຜົນງານການພິມແບບ 3D ແບບໂຕ້ຕອບ

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

ຕ້ອງການສ້າງເວັບໄຊທີ່ມີສ່ວນຮ່ວມຂອງທ່ານເອງບໍ? ລອງໃຊ້ເຄື່ອງມືສ້າງເວບໄຊທ໌, ແລະຮັກສາສິ່ງທີ່ເຮັດວຽກໄດ້ດີໂດຍການເລືອກບໍລິການໂຮດຕິ້ງທີ່ ເໝາະ ສົມ.

01. ລິເລີ່ມເອກະສານ HTML

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

! DOCTYPE html> html> ຫົວ> ຫົວຂໍ້> ການເຄື່ອນໄຫວຕົວ ໜັງ ສື 3D / ຫົວຂໍ້> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / ຫົວ> ຮ່າງກາຍ> * * * STEP 2 ນີ້ / ຮ່າງກາຍ> / html>

02. ເນື້ອຫາ HTML ທີ່ເບິ່ງເຫັນ

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

article data-animate = "ຍ້າຍໃນ"> h1> ສະບາຍດີ! / h1> / ບົດຄວາມ

03. ການລິເລີ່ມ CSS

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

html, ຮ່າງກາຍ {ພື້ນຫລັງ: # 000; ແຜ່ນຮອງ: 0; ຂອບ: 0; ສີ: #fff; }

04. ພາຊະນະສັດ

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

[data-animate = "ຍ້າຍໃນ"] {ຕຳ ແໜ່ງ: ພີ່ນ້ອງ; width: 100vw; ລະດັບຄວາມສູງ: 100vh; ຄວາມຕ້ານທານ: 1; ສັດ: moveIn 20s ອັນເປັນນິດ; text-align: ສູນກາງ; ການຫັນປ່ຽນ: ພືດຫມູນວຽນ (20deg); }

05. ການລິເລີ່ມຂອງພາບເຄື່ອນໄຫວ

ພາບເຄື່ອນໄຫວຂອງ 'moveIn' ທີ່ອ້າງອີງໃນຂັ້ນຕອນກ່ອນ ໜ້າ ນີ້ຮຽກຮ້ອງໃຫ້ມີ ຄຳ ນິຍາມໂດຍໃຊ້ @keyframes. ກອບ ທຳ ອິດເລີ່ມຕັ້ງແຕ່ 0% ຂອງພາບເຄື່ອນໄຫວ ກຳ ນົດຂະ ໜາດ ຕົວອັກສອນທີ່ຕັ້ງ, ຕຳ ແໜ່ງ ຕຳ ແໜ່ງ ຕົວ ໜັງ ສືແລະເງົາທີ່ເບິ່ງເຫັນ. ນອກຈາກນັ້ນ, ລາຍການໄດ້ຖືກ ກຳ ນົດດ້ວຍຄວາມຕ້ານທານສູນເພື່ອໃຫ້ມັນເບິ່ງບໍ່ເຫັນໃນເບື້ອງຕົ້ນ - ຕົວຢ່າງ. ສະແດງອອກຈາກມຸມມອງ.

@keyframes moveIn {0% {font-size: 1em; ຊ້າຍ: 0; opacity: 0; text-shadow: ບໍ່ມີ; } * * * ຂັ້ນຕອນທີ 6 ນີ້}

06. ມີຊີວິດຊີວາເບິ່ງ

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

10% {ຄວາມຕ້ານທານ: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * ຂັ້ນຕອນທີ 7 ນີ້

07. ສະຫຼຸບພາບເຄື່ອນໄຫວ

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

80% {ຂະ ໜາດ ໂຕອັກສອນ: 8em; ຊ້າຍ: -8em; ຄວາມຕ້ານທານ: 1; } 100% {font-size: 10em; ຊ້າຍ: -10em; opacity: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *

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

ບົດຂຽນນີ້ຖືກຈັດພີມມາໃນສະບັບ 273 ຂອງວາລະສານອອກແບບ Web Designer ທີ່ສ້າງສັນ. ຊື້ເລກທີ 273 ຢູ່ນີ້ ຫຼື ຈອງກັບຜູ້ອອກແບບເວບໄຊທ໌ນີ້.