Js เลื่อนอย่างราบรื่นเพื่อยึด Scrollissimo – ปลั๊กอินสำหรับการเลื่อนภาพเคลื่อนไหวที่ราบรื่น
เมื่อเร็ว ๆ นี้ภาพเคลื่อนไหวที่เล่นเมื่อคุณเลื่อนหน้าได้รับความนิยมมากขึ้น อย่างไรก็ตาม ฉันสังเกตเห็นว่าเบราว์เซอร์ส่วนใหญ่ไม่ได้ออกแบบมาสำหรับแอนิเมชั่นประเภทนี้ การเลื่อนหน้าด้วยเมาส์ไม่ได้เกิดขึ้นอย่างราบรื่น (เช่นใน Firefox) แต่เป็นขั้นตอน ส่งผลให้การเลื่อนภาพเคลื่อนไหวบนหน้าต่างๆ กระตุกเช่นกัน ในความคิดของฉัน ปัญหาไม่ได้อยู่ที่เบราว์เซอร์เลย แต่อยู่ที่ปลั๊กอินที่ใช้สร้างภาพเคลื่อนไหวเหล่านี้ เพราะพวกเขาคือคนที่ยอมให้กระโดดกะทันหัน ฉันเชื่อว่าสำหรับแอนิเมชั่นใดๆ ควรมีความเร็วในการเล่นสูงสุดซึ่งจะทำให้แอนิเมชั่นมีความราบรื่น และผู้ใช้จะสามารถเข้าใจสิ่งที่เกิดขึ้นบนเพจได้ หากคุณเห็นด้วยกับฉันให้เคลื่อนไหวอย่างราบรื่นและไม่กระตุกใต้แมว
ในบทความนี้ เราจะพูดถึงปลั๊กอินสำหรับสร้างภาพเคลื่อนไหวที่ควบคุมด้วยการเลื่อน ซึ่งฉันเรียกว่า Scrollissimo อะนาล็อกที่ใกล้เคียงที่สุดคือปลั๊กอิน ScrollMagic สิ่งที่พวกเขามีเหมือนกันคือจุดประสงค์และความจริงที่ว่า Greensock ได้รับเลือกให้เป็นเอ็นจิ้นแอนิเมชั่น หากคุณยังไม่คุ้นเคยกับมันด้วยเหตุผลบางประการ บางทีเพื่อทำความเข้าใจทุกสิ่งที่เกิดขึ้นอย่างถ่องแท้ คุณควรอ่านบทความเกี่ยวกับ Greensock ที่ได้รับการตีพิมพ์ในHabréแล้ว ตัวอย่างเช่น .
นอกจากความคล้ายคลึงกันแล้ว ปลั๊กอินเหล่านี้ยังมีความแตกต่างอีกด้วย แต่ฉันอยากจะเน้นสิ่งสำคัญเป็นพิเศษ – แอนิเมชั่นที่ราบรื่น เพื่อไม่ให้ฟังดูไม่มีมูล นี่คือข้อพิสูจน์สำหรับคุณ หน้าแรกของ ScrollMagic ยังยืนยันคำพูดของฉันด้วย
วิธีการใช้งาน เชื่อมต่อ ในการเริ่มใช้งาน Scrollissimo คุณต้องทำสองสิ่ง ขั้นแรก เชื่อมต่อ Greensock คุณสามารถเชื่อมต่อได้เฉพาะไลบรารีที่จำเป็นขั้นต่ำเท่านั้น (TweenLite, TimelineLite และ CSS):
หรือเชื่อมต่อหนึ่งไลบรารีที่มีทั้งหมดข้างต้น:
และประการที่สอง เราเชื่อมต่อกับ Scrollissimo เอง ห้องสมุดมีให้จากพื้นที่เก็บข้อมูล และสำหรับผู้ใช้ Bower ก็สามารถติดตั้งได้ด้วยคำสั่ง
Bower ติดตั้ง scrollissimo
ดาวน์โหลดแล้ว เชื่อมต่อทันที:
คุณสามารถเลือก (แต่ไม่จำเป็น) รวม jQuery เพื่อความสะดวกของคุณเอง ต่อไปในบทความผมจะเขียนโค้ดโดยใช้มันเพื่อให้อ่านง่ายยิ่งขึ้น
ฉันได้จัดเตรียมความเป็นไปได้ในการทริกเกอร์ Scrollissimo ไม่เพียงแต่ในการเลื่อนทั้งหน้าเท่านั้น แต่ยังรวมถึงเหตุการณ์อื่น ๆ ด้วย แต่ในสถานการณ์ส่วนใหญ่ที่คุณต้องสมัครรับเหตุการณ์การเลื่อนหน้า:
$(หน้าต่าง).scroll(function())( Scrollissimo.knock(); ));
ตอนนี้ ทุกครั้งที่มีเหตุการณ์การเลื่อนเกิดขึ้น Scrollissimo จะคำนวณความคืบหน้าปัจจุบันของแอนิเมชั่นและเล่น
หมายเหตุ: หากคุณไม่ต้องการให้ปลั๊กอินนับการเลื่อนหน้า คุณสามารถส่งค่าคุณสมบัติ scrollTop ของคุณไปที่เมธอด knock() ได้ ตัวอย่างเช่น Scrollissimo.knock(1000) จะบอกปลั๊กอินว่าคุณได้เลื่อนไปแล้ว หน้า 1000 พิกเซล .
หมายเหตุ: เพื่อรองรับอุปกรณ์สัมผัส มีอะแดปเตอร์สัมผัส scrollissimo.touch.js ซึ่งต่อสู้กับการค้างหน้าขณะเลื่อน
เพียงเท่านี้ คุณก็สามารถเคลื่อนไหวได้โดยตรงแล้ว! Scrollissimo สามารถสร้างภาพเคลื่อนไหวฝาแฝด (ภาพเคลื่อนไหวเดี่ยว) และไทม์ไลน์ (คิวของภาพเคลื่อนไหวเดี่ยว) เริ่มจากฝาแฝดกันก่อน
แอนิเมชั่นที่ง่ายที่สุด สมมติว่าเรามี div สีแดงที่สวยงามที่เรียกว่า Divy เขาต้องการที่จะเติบโตจริงๆ แต่จนถึงตอนนี้เขามีขนาดกว้างและสูงเพียง 50 พิกเซลเท่านั้น
#Divy( ตำแหน่ง: คงที่; บน: 0; ซ้าย: 0; ความสูง: 50px; ความกว้าง: 50px; พื้นหลัง: สีแดง; )
มาทำให้หลังจาก 1,000 พิกเซลจากจุดเริ่มต้นของหน้ากลายเป็นความกว้าง 300 พิกเซล ในการทำสิ่งนี้ ขั้นแรกเราจะสร้าง Tween ที่เกี่ยวข้อง เหมือนกับว่าเรากำลังสร้างแอนิเมชั่นปกติโดยใช้ Greensock:
Var divyTween = new TweenLite($("#Divy"), 1,000, ( ความกว้าง: 300 ));
หมายเหตุ: ตามที่คุณสังเกตเห็น ความแตกต่างเพียงอย่างเดียวจากภาพเคลื่อนไหวมาตรฐานบน Greensock คือเราระบุระยะเวลาของภาพเคลื่อนไหวไม่ใช่เป็นวินาที แต่เป็นพิกเซล (ในกรณีของเราคือ 1,000)
ยอดเยี่ยม! สิ่งที่เหลืออยู่ก็คือให้แฝดนี้ถูกกลืนกินโดย Scrollissimo:
Scrollissimo.add(divyTween, 0, 6);
ทีนี้ลองช้าลงแล้วดูที่บรรทัดนี้ อาร์กิวเมนต์แรกคือ Tween แบบเดียวกับที่เราสร้างขึ้น อาร์กิวเมนต์ที่สองมาจากตำแหน่งที่จะเริ่มภาพเคลื่อนไหว ในกรณีของเรา นี่คือจุดเริ่มต้นของหน้า (0 พิกเซล) อาร์กิวเมนต์ที่สามยังคงอยู่ ที่นี่เรามาถึงคุณสมบัติหลักที่ทำให้ Scrollissimo แตกต่างจากปลั๊กอินทั่วไป อาร์กิวเมนต์ที่สามคือความเร็วในการเล่นภาพเคลื่อนไหวสูงสุด ความเร็วนี้วัดในหน่วยไร้มิติเชิงนามธรรมและเลือก "ด้วยตา" ฉันจะตอบคำถามทันที “จะเกิดอะไรขึ้นถ้าคุณไม่ระบุพารามิเตอร์ที่สาม” หากคุณไม่ระบุความเร็วสูงสุดก็จะไม่มีอยู่ แอนิเมชันนี้จะเล่นในลักษณะเดียวกับที่เล่นโดยปลั๊กอินทั่วไป
Var divyTimeline = TimelineLite ใหม่ (); divyTimeline.to($("#Divy"),1000 ( กว้าง: 300 )); divyTimeline.to($("#Divy"), 1,000, ( ส่วนสูง: 300 )); Scrollissimo.add(divyTimeline, 0, 6);
นั่นคือทั้งหมดที่คุณต้องการเพื่อสร้างภาพเคลื่อนไหวแบบเลื่อนได้สำเร็จโดยใช้ Scrollissimo นี่คือที่ฉันอาจจะจบบทความ โดยสรุป ฉันจะบอกว่าปลั๊กอินอยู่ระหว่างการพัฒนา มีพื้นที่ให้เติบโตและปรับปรุง ดังนั้นฉันยินดีที่จะรับคำถาม คำแนะนำ และคำขอคุณสมบัติต่างๆเค้าโครงเคลื่อนไหว!
สวัสดีเพื่อนรัก!
วันนี้เราอยากจะบอกคุณเกี่ยวกับการเลื่อนหน้า Landing Page ไปยังองค์ประกอบที่ต้องการอย่างราบรื่น
การเลื่อนอย่างราบรื่น (หรือการเลื่อนอย่างราบรื่น) ช่วยให้ผู้เยี่ยมชมหน้า Landing Page สามารถเลื่อนไปมาระหว่างส่วนต่างๆ ได้โดยไม่สูญเสียการมองเห็นเนื้อหาของข้อเสนอ
คุณสามารถดูตัวอย่างได้จาก ในหน้านี้ การเลื่อนอย่างราบรื่นจะเกิดขึ้นเมื่อคุณคลิกที่ปุ่ม "จัดส่งคำสั่งซื้อ"
ฉันอยากจะดึงความสนใจของคุณไปที่ความจริงที่ว่าการใช้การเลื่อนแบบราบรื่นนั้นมีความเกี่ยวข้องเมื่อใช้ร่วมกับเมนูแบบคงที่ด้วย ก่อนหน้านี้ เราได้เผยแพร่คำแนะนำในการสร้างคู่มือนี้ ซึ่งช่วยลดความยุ่งยากในการนำทางบนหน้า Landing Page ด้วยข้อมูลจำนวนมาก และช่วยให้คุณเพิ่ม Conversion ได้อีกด้วย
ดังนั้น เราขอแนะนำให้ใช้คำแนะนำที่มีภาพประกอบโดยละเอียดเพื่อสร้างการเลื่อนที่ราบรื่นสำหรับองค์ประกอบเดียว:
1) เปิดหน้า Landing Page ในตัวแก้ไขภาพ LPgenerator
2) คัดลอกโค้ด:
jq_144("#block-newID a").click(function(e)( // แทนที่ #block-newID ด้วย ID ขององค์ประกอบที่เราคลิก e.preventDefault(); jq_144("body, html") เคลื่อนไหว(( scrollTop: jq_144("#block-newID").offset().top ), 1000); // แทนที่ #block-newID ด้วย ID ขององค์ประกอบที่กำลังเลื่อน ));
3) การใช้เครื่องมือ “สคริปต์” วางโค้ดที่คัดลอกลงบนหน้า
กำหนดตำแหน่งโค้ด: “ก่อนแท็ก”:
4) เขียนรหัสตัวระบุของปุ่มเมื่อคลิกมันจะเลื่อน ตัวระบุถูกเขียนไว้ในเครื่องหมายคำพูดเดี่ยว
5) คุณสามารถดูตัวระบุองค์ประกอบได้ในคุณสมบัติเพิ่มเติมทางด้านขวา:
6) ความสนใจ:หากองค์ประกอบที่ทำให้เกิดการเลื่อนเมื่อคลิกไม่ใช่ปุ่ม ให้ลบตัวอักษร 'a' ในโค้ด:
โปรดทราบ: หลังจากการเลื่อน องค์ประกอบจะไม่มีช่องว่างภายในจากขอบด้านบนของหน้าต่าง กล่าวคือ องค์ประกอบจะอยู่ด้านบนสุดของหน้า
ดังนั้น หากคุณต้องการย้ายผู้เข้าชมไปยังแบบฟอร์มโอกาสในการขาย เราขอแนะนำให้ระบุในโค้ดถึงตัวระบุของส่วนหัวหรือองค์ประกอบที่อยู่เหนือช่องแรกของแบบฟอร์ม เช่น ลูกศร:
ข้อควรสนใจ: การเลื่อนอย่างราบรื่นใช้ไม่ได้กับส่วนต่างๆ ดังนั้นอย่าระบุตัวระบุส่วนในโค้ด
8) ตามค่าเริ่มต้น เวลาในการเลื่อนไปยังองค์ประกอบที่ระบุคือ 1,000 ms = 1 วินาที คุณสามารถทำให้การเลื่อนช้าลงได้ (เช่น 5,000 ms = 5 วินาที)
ป้อนเวลาที่ต้องการในรหัส:
9) ตรวจสอบตำแหน่งของสคริปต์ อย่าลืมตั้งชื่อสคริปต์ด้วย หลังจากนั้น ให้บันทึกการเปลี่ยนแปลงของคุณและบันทึกหน้า Landing Page ในตัวแก้ไขภาพ
สวัสดีเพื่อน. ฉันต้องการพูดถึงหัวข้อต่างๆ เช่น การเปลี่ยนไปใช้ Anchor Link บนหน้าเว็บไซต์อย่างราบรื่น หากคุณเขียนข้อความจำนวนมากบนเว็บไซต์ของคุณ จัดรูปแบบอย่างถูกต้อง ใช้ภาพหน้าจอและองค์ประกอบอื่นๆ จากนั้นการเลื่อนไปที่จุดยึดอย่างราบรื่นจะทำให้การออกแบบดูน่าดึงดูดยิ่งขึ้น แต่ก่อนอื่นเรามาดูกันก่อนว่ามันคืออะไรและจะทำงานอย่างไร คุณสามารถดูตัวอย่างการทำงานได้ในหน้านี้โดยคลิกที่รายการในรายการนี้
Anchor Link คืออะไรวิธีสร้าง Anchor Link แบบ HTMLลิงก์จุดยึดถูกสร้างขึ้นในภาษามาร์กอัปไฮเปอร์เท็กซ์ การสร้างจุดยึดใน HTML ไม่ใช่เรื่องยุ่งยากเลย สิ่งที่คุณต้องมีคือความรู้เพียงเล็กน้อยเกี่ยวกับภาษานี้และความเข้าใจเกี่ยวกับวิธีการทำงาน หากคุณไม่มีปัญหาใด ๆ กับสิ่งนี้ คุณสามารถทำได้โดยไม่ยาก ดังนั้น ในการสร้างจุดยึดบนหน้า HTML คุณต้องเขียนโค้ดดังนี้
และเพื่อที่จะไปที่สถานที่นี้บนหน้าที่ระบุป้ายกำกับนี้ คุณต้องเขียนสิ่งนี้ลงในลิงก์:
| ข้ามไปที่ป้ายกำกับบนหน้า |
ข้ามไปที่ป้ายกำกับบนหน้า
ด้วยแนวทางนี้ การเปลี่ยนแปลงจะดำเนินการโดยการกระโดดจากที่หนึ่งไปอีกที่หนึ่งทันที
เลื่อนอย่างราบรื่นเพื่อยึดด้วยการพัฒนาเทคโนโลยีเว็บ ทำให้สามารถสร้างเว็บไซต์ไดนามิกที่สวยงามยิ่งขึ้นพร้อมเอฟเฟกต์ต่างๆ เป็นต้น และจะดีมากเมื่อคุณสามารถดึงดูดผู้เยี่ยมชมในสิ่งอื่นนอกเหนือจากเนื้อหาและสร้างความประทับใจในการเยี่ยมชมไซต์ได้ ในระดับหนึ่งสิ่งนี้จะอยู่ในมือของเจ้าของเว็บไซต์ เพื่อให้การเปลี่ยนไปใช้ Anchor เป็นไปอย่างราบรื่น เราจะใช้ไลบรารีและเชื่อมต่อสคริปต์ที่มีขนาดเล็กมาก
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < script type= "text/javascript" >$(document) .ready (function () ( $("a" ) .click (function () ( elementClick = $(this ) .attr ( "href" ) ; Destination = $(elementClick) .offset () .top ; if ($.browser .safari ) ( $("body" ) .animate ( ( scrollTop: Destination ) , 1100 ) ; ) else ( $( "html" ) .animate ( ( scrollTop: Destination ) , 1100 ) ; ) กลับเท็จ ; |
$(document).ready(function() ( $("a").click(function () ( elementClick = $(this).attr("href"); Destination = $(elementClick).offset().top ; if($.browser.safari)( $("body").animate(( scrollTop: Destination ), 1100); )else( $("html").animate(( scrollTop: ปลายทาง ), 1100); ) กลับเท็จ; ));
มีสามวิธีในการเชื่อมต่อสคริปต์นี้ ประการแรกคือการแทรกลงในหน้าระหว่างแท็กส่วนหัว อย่างที่สองคือใส่ไว้ในไฟล์แยกต่างหากและเชื่อมต่อแยกกันดังนี้:
ป้ายกำกับบนหน้าเพื่อไปที่มัน
ประการที่สอง หากคุณต้องการให้การเลื่อนเป็นไปอย่างราบรื่นไม่ใช่สำหรับ Anchor ทั้งหมด แต่สำหรับบาง Anchor เท่านั้น คุณต้องเปลี่ยนบรรทัดที่สามของสคริปต์ดังนี้:
ข้ามไปที่ป้ายกำกับบนหน้า
ความแตกต่างอีกอย่างหนึ่งที่ฉันอยากจะพูดถึงก็คือ แตกต่างจากจุดยึด HTML ทั่วไป จุดยึด jQuery ไม่ได้เขียนลิงก์ไปยังจุดยึดในแถบที่อยู่ของเบราว์เซอร์เมื่อนำทางไปยังจุดนั้น เพื่อให้คุณเข้าใจสิ่งที่ฉันกำลังพูดถึง ฉันจะยกตัวอย่างว่าลิงก์ไปยังจุดยึดอาจมีลักษณะอย่างไรในแถบที่อยู่ของเบราว์เซอร์
| #สมอ |
สวัสดีตอนบ่าย. วันนี้ฉันอยากจะบอกคุณเกี่ยวกับเอฟเฟกต์ที่น่าสนใจเช่นการเลื่อนไปที่จุดยึดอย่างราบรื่น ตัวอย่างเช่น อาจเป็นเมนูที่ด้านบนของหน้าซึ่งเมื่อคลิกแล้วจะเลื่อนไปยังองค์ประกอบที่เกี่ยวข้องได้อย่างราบรื่น
คุณอาจเคยเห็นผลลัพธ์ที่คล้ายกันกับหน้า Landing Page อื่นๆ วันนี้คุณจะได้เรียนรู้วิธีการใช้งาน
การเลื่อนอย่างราบรื่นเพื่อยึดโดยใช้จาวาสคริปต์ในโปรเจ็กต์หนึ่ง งานคือการใช้เอฟเฟกต์ที่คล้ายกันโดยเลื่อนไปยังองค์ประกอบบางอย่างได้อย่างราบรื่นเมื่อคลิกที่รายการเมนูรายการใดรายการหนึ่ง
เริ่มต้นด้วยการเชื่อมต่อไลบรารี jquery กับโปรเจ็กต์ของเราและระบุเส้นทางไปยังสคริปต์ที่รับผิดชอบในการเลื่อนอย่างราบรื่น:
เราจัดการกับเรื่องนี้ ตอนนี้คุณต้องใส่ป้ายกำกับและจุดยึดที่จะเกิดการเลื่อน
ฉันจะเล่าตัวอย่างเมนูที่อยู่ในโครงการเช่าอุปกรณ์มืออาชีพในงานก่อสร้างและทำความสะอาด นี่คือซอร์สโค้ด:
- อุปกรณ์ทำความสะอาด
- อุปกรณ์ก่อสร้าง
- คลังสินค้า
อย่างที่คุณเห็นทุกอย่างเป็นมาตรฐานและไม่มีลูกเล่น บล็อกที่สอดคล้องกับเมนูจะถูกสร้างขึ้นบนหน้า Landing Page ในภายหลัง พวกเขาเปิดเผยบริการเฉพาะ จำเป็นต้องเปลี่ยนบล็อกเหล่านี้อย่างราบรื่น
เพื่อที่จะนำทางไปยังสถานที่ที่ต้องการบนเว็บไซต์ก็เพียงพอที่จะเพิ่มลิงค์ไปยังตัวระบุของบล็อกที่ต้องการ มาทำอย่างนั้นกันเถอะ
- อุปกรณ์ทำความสะอาด
- อุปกรณ์ก่อสร้าง
- คลังสินค้า
ตอนนี้คุณต้องตั้งค่าตัวระบุ "การทำความสะอาด", "การสร้าง", "การกระทำ" ให้กับบล็อกที่เกี่ยวข้อง สำหรับฉันมันดูเหมือนว่านี้:
ให้ความสนใจกับแอตทริบิวต์ name="cleaning" มันจะต้องตรงกับรหัส นี่คือสคริปต์ของตัวเอง:
$(function () ( $("a.scrollto").click(function () ( ให้ elementClick = $(this).attr("href") ให้ปลายทาง = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: ปลายทาง ), 1100 ));
หากคุณเช่นฉัน จำเป็นต้องใช้การเลื่อนไปยังองค์ประกอบต่างๆ เพียงแค่ใส่ตัวระบุในลักษณะเดียวกัน เท่านี้ก็เรียบร้อย! วิธีการที่สะดวกและใช้งานง่าย ฉันไม่ได้บอกว่ามันดีที่สุด แต่มันได้ผล หากใครสามารถทำให้มันง่ายขึ้น ย่อให้สั้นลง หรือปรับปรุงมันได้ ฉันจะขอบคุณคุณมาก สำหรับฉันเอฟเฟกต์นี้สามารถเป็นประโยชน์กับหลาย ๆ คนได้
โปรดทราบว่าในตอนต้นของบทความเราได้ระบุชื่อและเส้นทางของสคริปต์ดังนี้:
นั่นคือ คุณต้องสร้างโฟลเดอร์ในรูทของไซต์ของคุณชื่อ js และวางไฟล์ชื่อ perehod.js ลงไป จากนั้นใส่โค้ดสคริปต์ลงไป นี่คือฉัน เผื่อไว้ ถ้าใครไม่เข้าใจล่ะ?
และนั่นคือทั้งหมดสำหรับวันนี้ ตอนนี้คุณรู้วิธีใช้เอฟเฟกต์สุดเจ๋งเช่นการเลื่อนหน้าไปที่จุดยึดอย่างราบรื่น ลาก่อนทุกคน!
ป.ล. : ขอขอบคุณผู้ที่ตอบรับการโทรบนโซเชียลเน็ตเวิร์กเพื่อช่วยมีแนวคิดสำหรับบทความใหม่ ฉันไม่รู้ว่าทำไมคุณถึงตัดสินใจเขียนเป็นข้อความส่วนตัว ทิ้งไว้ในความคิดเห็นดีกว่า ดังนั้นคนอื่นจะเขียนรีวิวได้ง่ายกว่าถ้าพวกเขาเห็นว่ามีคนที่กล้าหาญกว่าได้ทำไปแล้ว
วิธีนี้มีข้อเสียเปรียบ เนื่องจากใช้งานไม่ได้กับ wow.js ซึ่งเราใช้ในการสร้างแอนิเมชั่นในบทความ ภาพเคลื่อนไหวบางรายการไม่เล่นและมีพื้นที่ว่างแทน หากใครรู้วิธีแก้ไขปัญหานี้โปรดเขียนในความคิดเห็นหรือใน
สวัสดีเพื่อนรัก ดังที่คุณอาจสังเกตเห็นว่าในเบราว์เซอร์เกือบทั้งหมด การเลื่อนดูเว็บไซต์มีความคมชัดมากและไม่สวยงาม และแน่นอนว่า ฉันต้องการทำให้การเลื่อนไซต์ของฉันราบรื่นขึ้น แน่นอนว่าสามารถทำได้ และยิ่งไปกว่านั้น โดยไม่ทำให้เครียดมากเกินไป ทำได้โดยใช้ปลั๊กอิน jQuery ธรรมดาและกฎ CSS บางประการ และเพื่อดูว่ามันทำงานอย่างไร ฉันขอแนะนำให้คุณดูตัวอย่างด้านล่าง
Ιทีนี้มาดูการแนบการเลื่อนที่ราบรื่นบนเว็บไซต์ของเรากันดีกว่า
HTMLก่อนอื่นเราจะต้องแนบไลบรารี่ JQuery หากคุณได้แนบไว้แล้ว ให้ข้ามขั้นตอนนี้:
จากนั้นเราจำเป็นต้องแนบปลั๊กอิน JQuery ซึ่งรับผิดชอบในการเลื่อนที่ราบรื่นของเรา และยังมีกฎ CSS แยกต่างหากที่เปลี่ยนแถบเลื่อนบนไซต์ เราจะพูดเพิ่มเติมเกี่ยวกับแถบเลื่อนในบทเรียนถัดไป แต่สำหรับตอนนี้มีเพียงการเลื่อนที่ราบรื่นเท่านั้น และนี่คือกฎและปลั๊กอิน:
ทั้งหมด. ตอนนี้เราได้เข้าสู่ขั้นตอนแรกและสำคัญแล้ว ตอนนี้เราจำเป็นต้องเพิ่มกฎง่ายๆ หนึ่งข้อให้กับสไตล์ CSS ของไซต์ของเรา
CSS html, เนื้อหา( ความสูง: 100%; )นี่เป็นสิ่งจำเป็นเพื่อให้ปลั๊กอินของเราทราบว่าความกว้างของหน้าถูกยืดออกและเป็นความสูง 100% อย่าลืมเพิ่มกฎนี้ใน CSS ของคุณ ไม่เช่นนั้นการเลื่อนจะไม่ทำงาน
สคริปต์
และตอนนี้ฉันขอเสนอให้ดูตัวอย่างสาธิตให้ละเอียดยิ่งขึ้น และเราจะเริ่มต้นด้วย HTML
HTML ในการสาธิต การเลื่อนอย่างราบรื่นสำหรับเนื้อหาไซต์ สวัสดี นี่คือข้อความที่สาธิตการเลื่อนหน้าในไซต์ของคุณอย่างราบรื่น มันก็ไม่ได้ดูแย่จริงๆ นะ :) ข้อความนี้จะถูกย้ำ (function($)( $(window).load(function())( $("body").mCustomScrollbar(( theme:"dark-thin" )); )); ))(jQuery);อย่างที่คุณเห็น ที่นี่ฉันใช้มาร์กอัป HTML5 มาตรฐานโดยสมบูรณ์ โดยมีสคริปต์และไฟล์ CSS ที่แทรกไว้ทั้งหมดที่เราพูดถึงข้างต้น ฉันคิดว่าไม่มีอะไรจะอธิบายที่นี่ หากคุณไม่เข้าใจสิ่งใด โปรดถามในความคิดเห็น
ทีนี้เรามาดูกฎ CSS กันดีกว่า
CSS จากการสาธิต @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @ นำเข้า URL (http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); body( สีพื้นหลัง: #fff; สี: #555; ขนาดตัวอักษร: 14px; ครอบครัวแบบอักษร: "สคริปต์ไม่ดี", ตัวเขียน; ระยะขอบ: 0; ช่องว่างภายใน: 0; ความกว้างขั้นต่ำ: 480px; ) html, body( ความสูง: 100%; ) h2( ขนาดตัวอักษร: 80px; text-align: center; font-family: "Lobster", cursive; font-weight: 700; font-style: italic; color: #444; ) hr( ความสูง: 0; border-bottom: 1px solid #eee; margin-bottom: 50px; .cont( ขนาดตัวอักษร: 30px; ระยะขอบ: 0 auto; padding-top: 20px; width: 50%; .text( padding-top) : 15px; ช่องว่างภายในด้านล่าง: 20px)กฎ CSS นั้นเรียบง่ายมากและมีไม่มากนัก และคุณจะเห็นได้ว่ามีการแนบแบบอักษรของ Google ที่นี่เพื่อทำให้การสาธิตดูสวยงาม