เนื้อหา
- 01. ตั้งค่า
- 02. จบ HTML
- 03. สำรวจตัวแปร Sass
- 04. ปรับสไตล์ร่างกาย
- 05. จัดรูปแบบชื่อส่วน
- 06. ทำให้ CTA โดดเด่น
- 07. ตั้งค่าพื้นหลังของคอนเทนเนอร์และหน้าจอ
- 08. เพิ่มภาพพื้นหลัง
- 09. เพิ่มการเปลี่ยนและเอฟเฟกต์โฮเวอร์
- 10. ย้ายไปที่ JavaScript
- 11. เพิ่มและลบชั้นเรียน
- 12. ทำให้ตอบสนอง
หน้า Landing Page ของคุณเป็นองค์ประกอบสำคัญในรูปแบบเว็บไซต์ของคุณ นี่เป็นโอกาสที่แท้จริงครั้งแรกที่คุณต้องแนะนำธุรกิจของคุณหรือผลิตภัณฑ์ที่คุณขายดังนั้นการออกแบบจึงเป็นกุญแจสำคัญ หน้า Landing Page ได้รับการออกแบบโดยเน้นวัตถุประสงค์เดียวที่เรียกว่าคำกระตุ้นการตัดสินใจ (CTA) การใช้สีและรูปภาพเพื่อเสริมคำกระตุ้นการตัดสินใจและประสบการณ์ของผู้ใช้เป็นสิ่งที่ต้องทำ
- ดู CodePen ที่ใช้งานได้สำหรับบทช่วยสอนนี้
ในบทแนะนำนี้เราจะอธิบายวิธีสร้างหน้า Landing Page ที่น่าสนใจสำหรับแบรนด์แฟชั่นที่สวมใส่ จะเน้นไปที่การออกแบบหน้าจอแยกที่มีภาพขนาดใหญ่และการเปลี่ยนภาพเคลื่อนไหวที่เกิดขึ้นเมื่อวางเมาส์เหนือหน้านี้จะมีปุ่มคำกระตุ้นการตัดสินใจที่ชัดเจนสองปุ่มและเราจะใช้ HTML, Sass สำหรับการจัดรูปแบบและสัมผัสของวานิลลา JavaScript ที่ใช้ไวยากรณ์ ES6 (อย่าลืมตรวจสอบให้แน่ใจว่าเว็บโฮสติ้งของคุณเหมาะสมกับความต้องการของเว็บไซต์ของคุณ) ซับซ้อนเกินไป? สร้างเว็บไซต์โดยไม่ต้องใช้รหัสลองใช้เครื่องมือสร้างเว็บไซต์ง่ายๆ
01. ตั้งค่า
หากคุณใช้ CodePen ตรวจสอบให้แน่ใจว่าตั้งค่า CSS เป็น "SCSS" ในการตั้งค่าปากกา คุณสามารถทำการเปลี่ยนแปลงนี้ได้โดยคลิกที่แท็บการตั้งค่าเลือก "CSS" และเปลี่ยนตัวประมวลผลล่วงหน้า CSS เป็น SCSS ในตัวเลือกแบบเลื่อนลง
จากนั้นเราสามารถเริ่มเพิ่มใน HTML ของเรา เราจะรวมส่วนที่เรียกว่า "ซ้าย" และส่วนที่เรียกว่า "ขวา" ไว้ภายในคลาสคอนเทนเนอร์โดยทั้งสองส่วนจะมีคลาสของ "หน้าจอ"
div> ส่วน> / ส่วน> ส่วน> / ส่วน> / div>
02. จบ HTML
ในการสรุป HTML ของเราเราจะเพิ่มชื่อสำหรับแต่ละส่วนโดยใช้ไฟล์ h1 แท็ก ด้านล่างเราจะต้องเพิ่มปุ่มซึ่งจะเชื่อมโยงไปยังหน้าอื่นหากนี่เป็นโครงการในโลกแห่งความเป็นจริง เราจะให้คลาสนี้เป็น ปุ่ม เพื่อให้สิ่งต่างๆดีและเรียบง่าย
div> section> h1> Mens Fashion / h1> button> a href = "#"> Learn More / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> เรียนรู้ เพิ่มเติม / a> / button> / section>
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); $ ขวาปุ่มเลื่อน: rgba (255, 140, 219, 0.7); $ hover-width: 75%; $ เล็กกว้าง: 25%; $ animateSpeed: 1000ms;
04. ปรับสไตล์ร่างกาย
ประการแรกเราจะล้างช่องว่างและระยะขอบเริ่มต้นทั้งหมดให้กับร่างกายจากนั้นตั้งค่าตระกูลฟอนต์เป็น Open Sans สิ่งนี้จะส่งผลต่อปุ่มเท่านั้นดังนั้นจึงไม่สำคัญว่าเราจะใช้แบบอักษรใดมากเกินไป จากนั้นเราจะกำหนดความกว้างและความสูงเป็น 100% และตรวจสอบให้แน่ใจว่าสิ่งที่ล้นบนแกน X ถูกซ่อนไว้
html ตัว {padding: 0; ระยะขอบ: 0; font-family: 'Open Sans', sans-serif; ความกว้าง: 100%; ความสูง: 100%; ล้น -x: ซ่อน; }
05. จัดรูปแบบชื่อส่วน
ถึงเวลาเลือกแบบอักษร Google สำหรับชื่อส่วนแล้วเราได้เลือก Playfair Display จากนั้นใช้ แปล X เราสามารถตรวจสอบให้แน่ใจว่าชื่อส่วนอยู่ตรงกลางแกน X เสมอ
h1 {font-size: 5rem; สี: #fff; ตำแหน่ง: แน่นอน; ซ้าย: 50%; ด้านบน: 20%; แปลง: translateX (-50%); พื้นที่สีขาว: nowrap; font-family: 'Playfair Display', serif; }
06. ทำให้ CTA โดดเด่น
ปุ่มของเราจะทำหน้าที่เป็นคำกระตุ้นการตัดสินใจดังนั้นปุ่มเหล่านี้ต้องมีขนาดใหญ่เป็นตัวหนาและอยู่ในตำแหน่งที่ง่ายต่อการคลิก ปุ่มทั้งสองจะมีขอบสีขาวและเอฟเฟกต์การเปลี่ยนแปลงที่น่าสนใจ รูปแบบเริ่มต้นสำหรับทั้งสองปุ่มจะเหมือนกัน แต่เราจะเปลี่ยนสีเมื่อวางเมาส์เหนือปุ่ม
.button {display: block; ตำแหน่ง: แน่นอน; ซ้าย: 50%; ด้านบน: 50%; ความสูง: 2.6rem; padding-top: 1.2rem; ความกว้าง: 15rem; จัดข้อความ: ศูนย์; สี: ขาว; เส้นขอบ: 3px solid #fff; เส้นขอบรัศมี: 4px; น้ำหนักตัวอักษร: 600; แปลงข้อความ: ตัวพิมพ์ใหญ่; ตกแต่งข้อความ: ไม่มี; แปลง: translateX (-50%); การเปลี่ยนแปลง: .2s ทั้งหมด;
ปุ่มหลักจะมีเอฟเฟกต์โฮเวอร์ที่เรียบง่ายและเราจะใช้ตัวแปร Sass ที่เราระบุไว้สำหรับสีซึ่งจะเป็นสีที่ใกล้เคียงกับพื้นหลังของหน้า
.screen.left .button: เลื่อน {background-color: $ left-button-hover; ขอบสี: $ ซ้ายปุ่มเลื่อน; } .screen.right .button: hover {background-color: $ right-button-hover; ขอบสี: $ ขวาปุ่มเลื่อน;
07. ตั้งค่าพื้นหลังของคอนเทนเนอร์และหน้าจอ
คลาสคอนเทนเนอร์จะทำหน้าที่เป็นเครื่องห่อหน้าของเราและเราจะกำหนดตำแหน่งของสิ่งนี้ให้สัมพันธ์กันเพียงเพราะเราต้องการวางตำแหน่งหน้าจอให้อยู่ในตำแหน่งที่แน่นอน เราจะให้สีพื้นหลังเริ่มต้นแก่คอนเทนเนอร์ แต่แน่นอนว่าจะไม่มีให้เห็นเพราะเราจะกำหนดสีที่แตกต่างกันให้กับพื้นหลังหน้าจอทั้งสอง
.container {ตำแหน่ง: ญาติ; ความกว้าง: 100%; ความสูง: 100%; พื้นหลัง: $ container-BgColor; . หน้าจอ {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 50%; ความสูง: 100%; ล้น: ซ่อน; }}
08. เพิ่มภาพพื้นหลัง
ทั้งส่วนด้านซ้ายและด้านขวาจะแสดงรูปภาพและคุณสามารถค้นหาภาพสต็อกที่ปลอดค่าลิขสิทธิ์ได้จากเว็บไซต์เช่น Unsplash, Pixabay หรือ Pexels (ซึ่งฉันใช้ในบทแนะนำนี้) เพื่อให้ง่ายขึ้นฉันได้ใช้บริการโฮสต์และแบ่งปันรูปภาพฟรีชื่อ imgbb ซึ่งเราสามารถเชื่อมโยงไปยังใน CSS ของเรา
.screen.left {ซ้าย: 0; background: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) ตรงกลางตรงกลางไม่ซ้ำ; พื้นหลังขนาด: ปก; &: ก่อน {ตำแหน่ง: สัมบูรณ์; เนื้อหา: ""; ความกว้าง: 100%; ความสูง: 100%; พื้นหลัง: $ left-bgColor; }}
ด้านขวามือของหน้าจะแสดงภาพพื้นหลังโดยใช้ imgbb และเราจะตั้งค่าสีพื้นหลังเป็นสีชมพู อีกครั้งเราตั้งค่าขนาดพื้นหลังเป็น ปก. สิ่งนี้จะช่วยให้เราครอบคลุมองค์ประกอบที่มีทั้งหมดซึ่งในกรณีของเราคือ . หน้าจอ ชั้นเรียน.
.screen.right {ขวา: 0; พื้นหลัง: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) ศูนย์กลางไม่ทำซ้ำ; พื้นหลังขนาด: ปก; &: ก่อน {ตำแหน่ง: สัมบูรณ์; เนื้อหา: ""; ความกว้าง: 100%; ความสูง: 100%; พื้นหลัง: $ right-bgColor; }}
09. เพิ่มการเปลี่ยนและเอฟเฟกต์โฮเวอร์
ความเร็วในการเคลื่อนไหวสำหรับเอฟเฟกต์โฮเวอร์ของเราบนหน้าจอทั้งสองจะถูกควบคุมโดยการเปลี่ยนแปลงที่เก็บค่าของตัวแปรของเรา $ animateSpeedซึ่งก็คือ 1000ms (หนึ่งวินาที) จากนั้นเราจะปิดท้ายด้วยการค่อยๆค่อยๆเปลี่ยนภาพเคลื่อนไหวซึ่งเป็นวิธีที่ง่ายในการเข้าและออกซึ่งจะช่วยให้เราได้ภาพเคลื่อนไหวที่ราบรื่นยิ่งขึ้น
.screen.left, .screen.right, .screen.right: before, .screen.left: before {transition: $ animateSpeed all Easy-in-out; }
สิ่งที่เราต้องการให้เกิดขึ้นในตอนนี้คือเมื่อคุณวางเมาส์เหนือหน้าจอด้านซ้ายจะมีคลาสเพิ่มเข้ามาในส่วนนั้นโดยใช้ JavaScript (ซึ่งเราจะเขียนในขั้นตอนต่อไป) เมื่อเพิ่มคลาสนี้หน้าจอนั้นจะขยายไปตามความกว้างของตัวแปรที่เราระบุซึ่งจะเท่ากับ 75% จากนั้นทางด้านขวาจะถูกตั้งค่าเป็นตัวแปรความกว้างที่เล็กกว่า (25%)
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left. right: ก่อน {z-index: 2; }
การทำงานนี้จะเหมือนกับด้านซ้ายทุกประการโดยจะมีการเพิ่มคลาสใหม่เมื่อวางเมาส์โดยใช้ JavaScript และหน้าจอด้านขวาจะขยายออกไปตามนั้น นอกจากนี้เรายังต้องตรวจสอบให้แน่ใจว่าไฟล์ z- ดัชนี ถูกตั้งค่าเป็น 2 ดังนั้นปุ่ม CTA จึงโดดเด่นมากขึ้น
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: ก่อน {z-index: 2; }
10. ย้ายไปที่ JavaScript
เราจะใช้การแตะวานิลลา JavaScript เพื่อช่วยในการเพิ่มและลบคลาส CSS และเราจะใช้คุณสมบัติใหม่ของ ES6 ด้วย สิ่งแรกที่เราต้องทำคือการประกาศตัวแปรคงที่
เพราะเราจะใช้ เอกสาร มากกว่าหนึ่งครั้งเราจะตั้งค่าตัวแปรคงที่เรียกว่า เอกสาร และจัดเก็บเอกสารไว้ในนั้นเพื่อให้เราสามารถใช้คำว่า "เอกสาร" ได้ดีและสั้น
const doc = เอกสาร;
ตอนนี้เราต้องตั้งค่าคงที่อีกสามค่าที่จะเก็บไฟล์ .ขวา, .ซ้าย และ .container ตัวเลือก เหตุผลที่เราใช้ค่าคงที่เนื่องจากเรารู้ว่าเราไม่ต้องการเปลี่ยนค่าของค่าเหล่านี้ดังนั้นการใช้ค่าคงที่จึงเหมาะสม เมื่อตั้งค่าเหล่านี้แล้วเราสามารถดำเนินการต่อและเพิ่มเหตุการณ์เมาส์ให้กับพวกเขาได้
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); คอนเทนเนอร์ const = doc.querySelector (". container");
ใช้ ซ้าย ตัวแปรคงที่ที่เราประกาศในขั้นตอนสุดท้ายตอนนี้เราสามารถเพิ่มตัวฟังเหตุการณ์เข้าไปได้แล้ว งานนี้จะเป็น mouseenter เหตุการณ์และแทนที่จะใช้ฟังก์ชันเรียกกลับเราจะใช้คุณสมบัติ ES6 อื่นที่เรียกว่า ฟังก์ชันลูกศร ’(() =>).
// เพิ่มคลาสให้กับองค์ประกอบคอนเทนเนอร์บน hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. เพิ่มและลบชั้นเรียน
ในขั้นตอนสุดท้ายผู้ฟังเหตุการณ์ของเราได้เพิ่มไฟล์ mouseenter เหตุการณ์ที่กำหนดเป้าหมายคลาสคอนเทนเนอร์หลักและเพิ่มคลาสใหม่ที่เรียกว่า เลื่อนไปทางซ้าย ไปทางซ้ายขององค์ประกอบ ด้วยการเรียกสิ่งนี้ที่เพิ่มเข้ามาตอนนี้เราจำเป็นต้องลบมันออกเมื่อเราวางเมาส์เหนือมัน เราจะดำเนินการนี้โดยใช้ไฟล์ เมาส์ เหตุการณ์และ . ลบ () วิธี.
// ลบคลาสที่เพิ่มใน 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 (max-width: 800px) {h1 {font-size: 2rem; } .button {กว้าง: 12rem; }
เราได้ตรวจสอบให้แน่ใจว่าเมื่อความกว้างของหน้าเว็บของเราลดลงถึง 800px แบบอักษรและปุ่มต่างๆจะลดขนาดลง ดังนั้นเพื่อให้เสร็จสิ้นเราต้องการกำหนดเป้าหมายความสูงด้วยและตรวจสอบให้แน่ใจว่าปุ่มของเราเลื่อนลงไปในหน้าเมื่อความสูงของหน้าต่ำกว่า 700px
@ สื่อ (ความสูงสูงสุด: 700px) {.button {ด้านบน: 70%; }}
ต้องการบันทึกเพจของคุณหรือไม่? ส่งออกเป็น PDF และบันทึกไว้ในที่เก็บข้อมูลบนคลาวด์ที่ปลอดภัย
งานออกแบบเว็บ สร้างลอนดอน กลับมาอีกครั้งในวันที่ 19-21 กันยายน 2018 โดยนำเสนอตารางงานที่อัดแน่นของวิทยากรชั้นนำของอุตสาหกรรมเวิร์กช็อปเต็มวันและโอกาสในการสร้างเครือข่ายที่มีค่าอย่าพลาด รับตั๋วสร้างของคุณตอนนี้.
บทความนี้ตีพิมพ์ครั้งแรกในนิตยสาร net ฉบับที่ 305. สมัครสมาชิกตอนนี้.
