แก้ไขภาพพื้นหลังที่เลื่อน css ที่ตอบสนองอย่างฉับไว
ที่ uroch นี้ mi rozpovimo วิธีสร้างตัวตน ภาพพื้นหลัง, yakіจะเปลี่ยนหนึ่งชั่วโมงในการเลื่อนด้านข้าง
วันนี้ บนอินเทอร์เน็ต คุณสามารถหาไซต์ที่ไม่ระบุตัวตนที่มีเอฟเฟกต์พารัลแลกซ์ได้ เอฟเฟ็กต์นี้สามารถใช้ได้ผ่าน CSS ตามทฤษฎีแล้ว จำเป็นต้องตรึงเอฟเฟกต์พารัลแลกซ์ไว้ที่ภาพพื้นหลังเท่านั้น เพื่อใครคุณรู้ cssอยู่ในอำนาจ ไฟล์แนบพื้นหลัง.
โครงสร้างโครงสร้าง
HTMLง่ายกว่า: cherguёmo elementi
Lorem ipsum dolor sit amet, consectetur adipisicing elit. เหตุการณ์ที่เกิดขึ้น suscipit similique, dolor เสียหาย cumque qui consectetur autom แรงงาน fuga quas ipsam doloribus sequi...
สไตล์
ค่าโปรโมชันของไฟล์แนบพื้นหลังคือ more scroll ซึ่งหมายถึงการเลื่อนไปที่พื้นหลังขององค์ประกอบ หากคุณใส่ค่าคงที่ ตำแหน่งจะคงที่
เนื้อหา, html, หลัก ( /* สำคัญ */ ความสูง: 100%; ) .cd-fixed-bg ( ความสูงต่ำสุด: 100%; ขนาดพื้นหลัง: หน้าปก; ไฟล์แนบพื้นหลัง: คงที่; พื้นหลังซ้ำ: ไม่ทำซ้ำ ; ตำแหน่งพื้นหลัง: กึ่งกลาง; ) .cd-fixed-bg.cd-bg-1 ( ภาพพื้นหลัง: url("../img/cd-background-1.jpg"); ) .cd-fixed- bg.cd-bg-2 ( ภาพพื้นหลัง: url("../img/cd-background-2.jpg"); ) .cd-fixed-bg.cd-bg-3 ( ภาพพื้นหลัง: url( "../img/cd-background-3.jpg"); ) .cd-fixed-bg.cd-bg-4 ( ภาพพื้นหลัง: url ("../img/cd-background-4.jpg" ); ) .cd-scrolling-bg ( ความสูงขั้นต่ำ: 100%; )
บทเรียนเล็ก ๆ นี้จะเกี่ยวกับสิ่งเหล่านั้น วิธีการสร้างบนไซต์ของคุณ (หรือบนหน้าด้านเดียว) เนื้อหาที่คงที่อย่างสวยงาม เช่น การเปลี่ยนจากภาพหนึ่งไปอีกภาพหนึ่งอย่างราบรื่นเมื่อเลื่อนด้านข้างของโคริสตูวาช CSS มีอำนาจในการแนบพื้นหลัง: แก้ไขเพื่อให้ภาพพื้นหลังได้รับการแก้ไข นั่นคือเมื่อเลื่อนด้านข้างจะไม่ถูกเลื่อนด้วยด้านข้าง แต่ไม่มีพลังใน CSS ราวกับว่ามันจะอนุญาตให้เปลี่ยนรูปภาพเมื่อเลื่อน Javascript เร็วขึ้น
แก้ไขพื้นหลังสำหรับไซต์
บางที หากคุณไม่เข้าใจสิ่งที่ฉันกำลังเขียน คุณสามารถประหลาดใจกับการสาธิต และคุณเองจะเห็นผลที่น่ากลัวนี้:
เอาเปรียบ
จะสร้างพื้นหลังขั้นต่ำสำหรับไซต์ได้อย่างไร
HTML
มาดูกันว่าโครงสร้าง HTML ของด้านข้างมีความหมายอย่างไรเพื่อให้ได้เอฟเฟกต์นี้:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="cbp-fbscroller" class="cbp-fbscroller"> |
ที่นามธรรม เรากำหนดการนำทางผ่านบล็อกของภาพต่างๆ เราเสร็จสิ้นเค้าโครงที่ HTML จาก HTML ไปที่สไตล์กันเถอะ
css
หากมีรูปแบบใดก็มีจำนวนไม่มากนัก
ความสูงของ Robimo ถึงบล็อกสูงสุดเท่าที่จะเป็นไปได้ Tobto บนความสูงของเบราว์เซอร์ของ koristuvach
| 1 2 3 4 5 6 | html , body , .container, .cbp-fbscroller, .cbp-fbscroller ส่วน ( ความสูง : 100% ; ) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .cbp-fbscroller > nav (ตำแหน่ง: คงที่; /* เมนูเริ่มบนช่องว่างเดียว */ดัชนี z: 9999; /* ไม่ใช่ความผิดของคุณที่จะเปลี่ยนเมนู */ขวา: 100px; /* ไม่ควรชิดขวา 100 พิกเซล */ด้านบน: 50%; /* ผมอยู่ตรงกลางด้านข้าง */ความกว้าง: 26px /* ความกว้างของเมนู */ -webkit-transform : translateY(-50% ); -moz-transform : translateY(-50% ); -ms-transform : translateY(-50% ); แปลงร่าง: translateY(-50%); ) /* ไปที่ด้านล่างสไตล์สำหรับองค์ประกอบสกิน (การตั้งค่า) ที่เมนู */.cbp-fbscroller > nav a ( แสดง : บล็อก ; ตำแหน่ง : สัมพันธ์ ; ดัชนี z : 9999 ; สี : โปร่งใส ; ความกว้าง : 26px ; ความสูง : 26px ; เค้าร่าง : ไม่มี ; ระยะขอบ : 25px 0 ; borde ; เส้นขอบ : 4px ของแข็ง # fff ;) .no-touch .cbp-fbscroller > nav a :hover #fff;) |
ฉันแสดงความคิดเห็นเกี่ยวกับการกระทำของผู้มีอำนาจ ฉันคิดว่าฉันตระหนักดีว่าอำนาจมีไว้เพื่ออะไร ฉันไม่รู้ว่าทำไม - เขียนความคิดเห็น! 🙂
ดังนั้นเราจะเห็นเมนูต่อไปนี้:
| 1 2 3 4 5 6 7 8 9 10 | ส่วน .cbp-fbscroller ( ตำแหน่ง : สัมพันธ์ ; ตำแหน่งพื้นหลัง : ตรงกลางด้านบน ; พื้นหลังซ้ำ : ไม่ซ้ำ ; ขนาดพื้นหลัง : หน้าปก; ) .no-touch .cbp-fbscroller ส่วน ( ไฟล์แนบพื้นหลัง : แก้ไข ; ) |
เหลือเพียงการตั้งค่าภาพที่จำเป็นสำหรับบล็อกภาพ:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #fbsection1 (ภาพพื้นหลัง : url (../images/1 .jpg) ; ) #fbsection2 ( ภาพพื้นหลัง : url (../images/2 .jpg) ; ) #fbsection3 ( ภาพพื้นหลัง : url ( . ./images/3 .jpg) ; ) #fbsection4 ( ภาพพื้นหลัง : url (../images/4 .jpg) ; ) #fbsection5 ( ภาพพื้นหลัง : url (../images/5 .jpg) ; ) |
ออกจาก Javascript!/ script ><สคริปต์>$(ฟังก์ชัน() ( cbpFixedScrollLayout.init(); ));</สคริปต์>
วิสโนวอค
ทุกอย่างอยู่ที่ใคร เอฟเฟกต์ Garniy แต่ฉันคิดว่าใส่บนเว็บไซต์ได้ไม่ยาก! ฉันขอให้คุณประสบความสำเร็จหากมีปัญหากับการติดตั้ง - เขียนความคิดเห็น 🙂 .
PS: ฉันเปลี่ยนการออกแบบของเว็บไซต์ ในความคิดของฉัน ไวน์นั้นทันสมัยและสะดวกกว่า
สำหรับการส่งเสริมการขาย หากคุณเลื่อนหน้าเว็บด้วยพื้นหลัง พื้นหลังจะเลื่อนพร้อมกับองค์ประกอบอื่นๆ บางครั้งก็เป็นคำ แต่บางครั้งคุณต้องการให้ภาพที่ตั้งค่าผ่านภาพพื้นหลังยังคงอยู่บนหน้าจอเสมอ สำหรับการจัดการนี้ ฉันจะกลายเป็นพลังที่แนบเบื้องหลัง
ค่าสิ่งที่แนบมากับพื้นหลัง
พลังสามารถใช้สามค่าในการปรับพฤติกรรมของร่างกาย:
- เลื่อน (มูลค่าต่อโปรโมชัน) - ภาพพื้นหลังจะย้ายพร้อมกับองค์ประกอบอื่นๆ เมื่อเลื่อนหน้าเว็บ
- คงที่ - ค่าของภาพพื้นหลังได้รับการแก้ไข มันไม่ไวก่อนที่จะเลื่อน เมื่อเลื่อนด้านข้าง พื้นหลังในพื้นหลังจะไม่แตก
- ท้องถิ่น- ค่าที่กำหนดมันถูกเพิ่มผ่านรายการที่มีรายการเลื่อนลงพร้อมการเลื่อนในเครื่องที่ด้านล่างของค่า เลื่อนประพฤติตัว แก้ไขแล้ว. ด้วยค่า ท้องถิ่นพื้นหลังเลื่อนทันทีจากภายในองค์ประกอบ และไม่เลื่อน ดังนั้นจึงไม่เลื่อนแทน (แม้ว่าจะเลื่อนจากองค์ประกอบเองในครั้งเดียว)
เพื่อความเข้าใจสั้น ๆ เกี่ยวกับงานและคุณภาพดูที่ก้นด้านล่าง เพื่อให้คุณสามารถจับคู่ค่าสิ่งที่แนบมากับพื้นหลังทั้งสามค่าของคุณ (สมมติว่าเมื่อใด vvchenni CSSคุณเป็นเบราว์เซอร์เดสก์ท็อปสมัยใหม่!)
ไฟล์แนบพื้นหลัง: เลื่อน
สิ่งที่แนบมากับพื้นหลัง: คงที่
ไฟล์แนบพื้นหลัง: ท้องถิ่น
รองรับโดยเบราว์เซอร์
อัปเดตค่าความสว่างของไฟล์แนบพื้นหลังทั้งหมดสำหรับเบราว์เซอร์เดสก์ท็อปใน IE9+, Edge 12+, Firefox 25+, Chrome (ทุกเวอร์ชัน), Safari 5+, Opera 11.5+ ว เบราว์เซอร์มือถือค่าทั้งหมดเข้าใจโดย Opera Mobile, Firefox สำหรับ Android, IE Mobile และ QQ Browser ในเบราว์เซอร์อื่นๆ การสนับสนุนจะเป็นแบบประจำหรือรายวัน
มอบให้กับผู้ช่วย:พลังงานพื้นหลังแหล่งกำเนิดและคลิปพื้นหลังสำหรับการวางตำแหน่งภาพพื้นหลังและการควบคุมการตัด
เมื่อมีการติดตั้งรูปภาพที่ไม่ทำลายในพื้นหลังใต้ตารางซึ่งเราจะขยายข้อความของรูปภาพนั้น ข้อมูลพื้นฐานเอฟเฟกต์ที่ไม่เหมาะสมถูกสร้างขึ้น: เป็นเวลาหนึ่งชั่วโมงในการเลื่อนตารางพร้อมข้อความ พื้นหลังที่อยู่ข้างใต้จะไม่แตกและไม่ทำงานทันทีจากตาราง แยกที่นี่:
เอฟเฟกต์ที่คล้ายกันสามารถสร้างภาพลวงตาแบบลูกบอลคู่ได้ เช่น ช่องว่างด้านข้างของคุณ
เสียงเอฟเฟกต์ของภาพที่ไม่ทำลายในพื้นหลังหลังจากตั้งค่าสไตล์ชีต CSS ของแอตทริบิวต์ถัดไป: background-attachment: fixed; ลองนึกถึงสไตล์ชีต CSS ดังที่คุณเห็นในเอกสารจริงที่มีนามสกุล.css
และอีกสองสามวิธีในการติดตั้งที่เราต้องการ
วิธีที่ 1
เราเลือกภาพราวกับว่าเราจะเป็นขี้เถ้า ที่ ประเภทนี้โดยเฉพาะฉันใช้แกนของรูปภาพดังกล่าว (คลิกที่ภาพขนาดย่อคลิกที่ การขยายตัวใหม่):
เอกสาร สไตล์ cssที่จะตั้งค่าพารามิเตอร์สำหรับ BODY เราจะใส่โครงสร้างต่อไปนี้:
BODY(ภาพพื้นหลัง: url(ที่อยู่ภาพพื้นหลัง); ไฟล์แนบพื้นหลัง: คงที่; พื้นหลังซ้ำ: ไม่ซ้ำ ตำแหน่งพื้นหลัง: ด้านบน;)
ในกรณีนี้ เราจะใช้รูปภาพขนาดใหญ่ทั่วทั้งหน้าจอเป็นภาพพื้นหลัง (เช่น 1280 x 1024 พิกเซล)
บันทึก: หากคุณไม่มีเอกสารสไตล์ css คุณต้องสร้างมันตามที่ได้รับมอบหมาย และเขียนคำขอสไตล์ css สำหรับเอกสารในโค้ดของฝั่ง html ตามที่ถูกกำหนดให้กับบทเรียนนี้
นอกจากนี้ แกนของพารามิเตอร์เดียวกันยังถูกตั้งค่าสำหรับสไตล์เพิ่มเติม:
ภาพพื้นหลัง: url (ที่อยู่ภาพพื้นหลัง); - เขียนที่อยู่ของภาพพื้นหลังของเรา 1280 x 1024 px
ไฟล์แนบพื้นหลัง: คงที่; - เราตั้งค่าพื้นหลังของvkazіvkaให้คงที่เพื่อไม่ให้แตกหัก
พื้นหลังซ้ำ: ไม่ซ้ำ; - กำหนดพื้นหลังของหน้าต่างไม่ให้ถูกคูณ
ตำแหน่งพื้นหลัง: ด้านบน; - กำหนดตำแหน่งของภาพพื้นหลัง: กำหนดให้ขอบบนของหน้า
ต่อมา เราแทรกสไตล์ css ลงในเอกสาร ที่ BODY ซึ่งเป็นแกนของการออกแบบ:
BODY(ภาพพื้นหลัง: url(ที่อยู่ภาพพื้นหลัง); ไฟล์แนบพื้นหลัง: คงที่; พื้นหลังซ้ำ: ไม่ซ้ำ ตำแหน่งพื้นหลัง: ด้านบน;)
ฉันสร้างตารางอย่างง่ายสำหรับ 70% ของหน้าจอ และวางข้อความและรูปภาพสองรูปในนั้นเพื่อความถูกต้อง แกนของสิ่งที่เราเห็นด้านข้าง: (เพื่อสร้างเอฟเฟกต์ของพื้นหลังที่ทำลายไม่ได้ ให้หันด้านขึ้นและลง)
วิธีที่ 2
เราสามารถลองใส่รูปภาพเล็ก ๆ เพื่อให้มันทำซ้ำโดยอัตโนมัติและเติมเต็มช่องว่างด้านข้างทั้งหมดเพื่อให้พื้นหลังพอใจ ภาพแกน:
ในเวลาเดียวกัน ทุกอย่างได้รับการแก้ไข โดยกำหนดสิ่งก่อสร้างต่อไปนี้ในสไตล์ชีต css:
BODY (ภาพพื้นหลัง: url(URL ภาพพื้นหลัง); ไฟล์แนบพื้นหลัง: คงที่ )
ที่นี่เราตั้งค่าพารามิเตอร์เพิ่มเติม: background-attachment: fixed; - tobto เราลงทะเบียน vkaz_vka สำหรับเบราว์เซอร์เพื่อสร้างภาพพื้นหลังที่ไม่เสียหาย เศษไม่ได้บอกว่ารูปภาพ "ไม่คูณ" - ที่นั่นเราสามารถคูณได้ทั้งหน้าจอ
วิธีที่ 3
ลองติดตั้งภาพพื้นหลังจากด้านหนึ่งและขยายตารางด้วยข้อความและรูปภาพจากด้านตรงข้ามเพื่อไม่ให้บล็อกภาพพื้นหลัง ที่เราเขียนในขั้นตอน css ของเอกสาร:
BODY ( พื้นหลัง: # e0ddd8 url ( url ภาพพื้นหลัง) ไม่ทำซ้ำบนซ้ายคงที่ )
พื้นหลัง:#e0ddd8 url(ที่อยู่ของภาพพื้นหลัง) - สีพื้นหลังของภาพพื้นหลัง - สีเบจ, สีพื้นหลังของภาพ คุณควรพยายามป้องกันการเปลี่ยนรูปภาพของเราจากพื้นหลัง (รูปภาพใช้พื้นที่เพียงบางส่วนของหน้าจอ)
ไม่ทำซ้ำ - ไม่มีการสร้างภาพซ้ำ (มีภาพขนาดใหญ่หนึ่งภาพที่มีนักแสดงชาวอเมริกันคนโปรดคนหนึ่ง - Robert Duvall)
แก้ไข - พื้นหลังของการแก้ไขดังนั้นจึงไม่หยาบคาย
ซ้ายบน - ดูที่ขอบซ้ายบนของหน้าจอ (คุณสามารถวางรูปภาพทางขวามือและตารางสำหรับไซต์นั้นชั่วร้ายอย่างที่คุณคิด สำหรับสิ่งนี้ในเอกสาร html สำหรับตารางที่คุณเขียน:
