การเข้ารหัส - หน้า 13

โดยปกติเราต้องการ JavaScript เพื่อ ดำเนินการผลการเลื่อน เกี่ยวข้องกับการกระทำของผู้ใช้ที่แตกต่างกันในหน้าเว็บ สคริปต์ทำงานของ การติดตามว่าการเลื่อนขึ้นหรือลงจะใช้เวลานานแค่ไหนในหน้า, และ ทริกเกอร์การกระทำ เมื่อถึงเกณฑ์ความสูง. ไม่ใช่เรื่องเลวร้ายที่จะใช้ JavaScript ในการเลื่อนเอฟเฟกต์ ในความเป็นจริงมีกรณีที่ซับซ้อนมากขึ้น แก้ไม่ได้หากไม่มี JavaScript. อย่างไรก็ตามมี CSS แฮ็ก ที่สามารถแทนที่สคริปต์เหล่านี้ได้ตลอดเวลา. โพสต์นี้จะแสดงให้คุณเห็นw เพื่อสร้างส่วนท้ายเปิดเผยผลบนหน้าเลื่อนโดยใช้ CSS. เราจะใช้สองกรณีใช้ในการสาธิตสิ่งนี้: หนึ่งกรณีสำหรับทั้งหน้า (ดูตัวอย่าง) และอีกหนึ่งองค์ประกอบสำหรับแต่ละหน้าเช่นบทความ. เต็มหน้า เราต้องสร้างส่วนท้ายที่ ปรากฏขึ้นจากใต้หน้า...

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน. ในแบบฝึกหัดวันนี้เราจะเรียนรู้วิธีสร้าง a หีบเพลงเนื้อหาแนวนอนและแนวตั้งเพียงแค่ใช้ CSS3. มีปลั๊กอิน jQuery จำนวนมากที่สามารถทำงานนี้ให้คุณได้ แต่สิ่งที่คุณต้องทำหากผู้เข้าชมปิด Javascript จากนั้นหีบเพลงจะไม่ทำงานอย่างถูกต้อง ถ้าหีบเพลงของคุณหมดจดใน CSS แล้วมันจะทำงานสำหรับผู้เข้าชมทั้งหมดของคุณ. เรากำลังจะสร้าง ตามแนวนอน และ แนวตั้ง หีบเพลงเนื้อหา เมื่อคลิกที่ข้อความพาดหัวสไลด์จะเปิดขึ้นเพื่อแสดงเนื้อหาเต็มและนี่คือตัวอย่างด่วน...

หากคุณต้องการ เพิ่มหรือแก้ไขฟังก์ชั่นบางอย่าง ใน Google Chrome คุณต้องใช้ส่วนขยาย แม้ว่าคุณสามารถดาวน์โหลดส่วนขยายจาก Chrome Web Store แต่บางครั้งคุณต้องการฟังก์ชั่นเฉพาะที่คุณไม่สามารถหาได้ในส่วนขยายใด ๆ ที่มีอยู่. ข่าวดีก็คือคุณสามารถสร้างส่วนขยายของคุณเองเพื่อเพิ่มหรือแก้ไขฟังก์ชั่นที่ต้องการหรือสร้างโปรแกรมเสริมหรือแอปใหม่สำหรับ Google Chrome ซึ่งคุณสามารถทำได้ในภายหลัง แจกจ่ายให้กับผู้ใช้รายอื่น ใช้ Chrome เว็บสโตร์. ในต่อไปนี้ฉันจะแสดงให้คุณเห็น วิธีที่ง่ายที่สุดในการสร้างส่วนขยาย. หากคุณมีความรู้ด้านการพัฒนาเว็บไซต์ (HTML, CSS และ JS) คุณจะรู้สึกเหมือนอยู่บ้าน ถ้าไม่ก่อนดูช่องเหล่านี้เพื่อ...

ภาพเคลื่อนไหวและช่วงการเปลี่ยนภาพช่วยให้นักออกแบบสามารถเห็นภาพการเปลี่ยนแปลงและแยกความแตกต่างของเนื้อหา ภาพเคลื่อนไหวและช่วงการเปลี่ยนภาพเป็นลักษณะพิเศษของการเคลื่อนไหว ช่วยให้ผู้ใช้รับรู้เมื่อมีอะไรเปลี่ยนแปลง บนเว็บไซต์เช่นพวกเขาคลิกที่ปุ่มและข้อมูลใหม่จะปรากฏขึ้นบนหน้าจอ การเพิ่มความเคลื่อนไหวให้กับแอพและเว็บไซต์ช่วยปรับปรุงประสบการณ์ของผู้ใช้ตามที่อนุญาตให้ผู้ใช้ ทำความเข้าใจกับเนื้อหาด้วยวิธีที่เข้าใจง่ายยิ่งขึ้น. เราสามารถสร้างภาพเคลื่อนไหวและช่วงการเปลี่ยนภาพตั้งแต่เริ่มต้นหรือโดยใช้ไลบรารีหรือกรอบงาน ข่าวดีสำหรับเราคือ Frontend folks คือ Zurb ผู้สร้าง Foundation เมื่อเดือนตุลาคมที่ผ่านมา Motion UI แบบ open-sourced ซึ่งเป็นแอนิเมชันและไลบรารีการเปลี่ยนแปลงตาม Sass. ตอนแรกมันมาพร้อมกับ Foundation สำหรับแอพและตอนนี้สำหรับรุ่นสแตนด์อโลนนั้นได้รับการปรับปรุงรวมถึง ระบบการจัดทำแอนิเมชัน และ รูปแบบ CSS ที่ยืดหยุ่น. Motion...

ไม่ต้องสงสัยเลยว่าแถบเลื่อนรูปภาพเป็นองค์ประกอบที่ใช้บ่อยที่สุดในการออกแบบเว็บไซต์ธุรกิจเนื่องจากมีขนาดค่อนข้างใหญ่ที่สามารถดึงดูดความสนใจของผู้เข้าชมเมื่อมาถึงเว็บไซต์ แม้ว่าเว็บได้เริ่มคิดใหม่เกี่ยวกับการใช้งานตัวเลื่อนรูปภาพ แต่ก็ยังถือว่าเป็นสิ่งที่ต้องเรียนรู้สำหรับผู้มาใหม่ของอุตสาหกรรมการออกแบบเว็บ. ในบทช่วยสอนการออกแบบเว็บนี้เราจะเรียนรู้การสร้างแถบเลื่อนรูปภาพที่กำหนดเองด้านบนโดยใช้ Photoshop ซึ่งคุณสามารถดูตัวอย่างผลลัพธ์สุดท้ายได้จากที่นี่ ไม่เพียง แต่เราจะแสดงให้เห็นใน Photoshop เรายังจะเปลี่ยนเป็นการออกแบบให้ใช้งานได้โดยแปลงเป็น HTML / CSS และเพิ่ม jQuery เพื่อเอฟเฟกต์การเลื่อนที่ยอดเยี่ยม. ฟังดูเหมือนบิตที่ซับซ้อนมากมายที่เกี่ยวข้อง แต่อันที่จริงแล้วมันค่อนข้างตรงไปตรงมาและเข้าใจง่ายมากมาเริ่มกันเลยดีกว่า! สนใจมากขึ้นเกี่ยวกับการใช้แถบเลื่อนรูปภาพและปรับแต่งตามวิธีหรือไม่ นี่คือโพสต์เฉพาะสำหรับคุณ. Image Slider: 23 jQuery Sliders Image Slider: 18 ปลั๊กอินของเวิร์ดเพรส เริ่มต้นใช้งาน...

favicons เป็นส่วนสำคัญของการสร้างแบรนด์ออนไลน์พวกเขา ให้คิวภาพ ให้กับผู้ใช้และช่วยพวกเขา แยกแยะเว็บไซต์ของคุณ จากคนอื่น ๆ แม้ว่า favicons ส่วนใหญ่จะเป็นแบบคงที่ แต่ก็เป็นไปได้ที่จะ สร้างภาพเคลื่อนไหว favicons เช่นกัน. favicon ที่เคลื่อนไหวอยู่ตลอดเวลานั้นสร้างความรำคาญให้กับผู้ใช้ส่วนใหญ่และยังเป็นอันตรายต่อการเข้าถึงด้วยอย่างไรก็ตามเมื่อมันเป็นภาพเคลื่อนไหวในช่วงเวลาสั้น ๆ เท่านั้น เพื่อตอบสนองต่อการกระทำของผู้ใช้หรือเหตุการณ์พื้นหลัง, เช่นการโหลดหน้ามันสามารถ ให้ข้อมูลภาพพิเศษ-ดังนั้นการปรับปรุงประสบการณ์ของผู้ใช้. ในโพสต์นี้ฉันจะแสดงวิธีสร้าง โหลดเดอร์แบบวงกลมเคลื่อนไหวในผืนผ้าใบ HTML, และวิธีที่คุณสามารถใช้เป็น favicon โหลดเดอร์ favicon เคลื่อนไหว เป็นเครื่องมือที่ยอดเยี่ยมในการ...

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน. แบบฟอร์มการติดต่อมีความสำคัญอย่างยิ่งสำหรับเว็บไซต์ใด ๆ เนื่องจากมันทำหน้าที่เป็นผู้ส่งสารซึ่งส่งความคิดเห็นหรือสอบถามข้อมูลของผู้เยี่ยมชมไปยังเว็บมาสเตอร์ มีรูปแบบการติดต่อมากมายบนเว็บ แต่น่าเสียดายที่ส่วนใหญ่ไม่ได้อธิบายถึงคุณในส่วนการทำงานดังนั้นที่นี่มีการสอนโดยละเอียดเพื่อสอนคุณในการสร้างแบบฟอร์มการติดต่อขั้นสูงจากศูนย์เทคโนโลยี HTML5 และ CSS3. เมื่อพิจารณาถึงลักษณะของแบบฟอร์มการติดต่อทางอีเมลเราจำเป็นต้องดำดิ่งลงในสองแอปพลิเคชันแยกต่างหากซึ่งเป็นโค้ดแบ็กเอนด์ PHP สำหรับส่งอีเมลและฟังก์ชั่น jQuery สำหรับส่วนต่อประสานผู้ใช้ที่หลากหลาย ในตอนท้ายเราจะถูกทิ้งให้อยู่กับแบบฟอร์มการติดต่อที่มีการเปลี่ยนแปลงและเต็มไปด้วยพลังซึ่งเขียนขึ้นโดยคำนึงถึงการปรับแต่งในภายหลัง. เริ่มต้นทันทีเพื่อสร้างแบบฟอร์มการติดต่อขั้นสูงของคุณเอง! ทางลัดไปที่: การสาธิต - ดูตัวอย่างสิ่งที่คุณกำลังสร้าง...

bookmarklets เป็น แอปพลิเคชัน JavaScript ที่สามารถเข้าถึงได้เป็น บุ๊คมาร์คของเบราว์เซอร์. พวกเขาจะใช้เพื่อให้ผู้ใช้ ดำเนินการต่าง ๆ บนหน้าเว็บ ตัวอย่างเช่น bookmarklet นี้โดย FontShop ใช้สำหรับดูตัวอย่างแบบอักษรเว็บ FontShop บนหน้าเว็บใด ๆ. ในบทความนี้เราจะดูว่ามันง่ายและรวดเร็วเพียงใด ปรุง bookmarklet โดยการสร้างสิ่งนั้น ดำเนินการ Wikiwand (Wikipedia ที่ดูดีกว่า) ค้นหา สำหรับข้อความที่เลือกบนหน้าเว็บใด ๆ. bookmarklet...