วิธีสร้างตัวเลื่อนเนื้อหา CSS3 เท่านั้นที่ทำงานได้อย่างสมบูรณ์

ตัวเลื่อนเนื้อหาเป็นวิธีที่ยอดเยี่ยมในการทำให้เว็บไซต์มีไดนามิกมากขึ้น พวกเขาเพิ่มความมีไหวพริบและหากใช้อย่างถูกต้องอาจเป็นความแตกต่างระหว่างปุ่มซื้อและปุ่มย้อนกลับ โดยปกติพวกเขาจะสร้างด้วย jQuery หรือไลบรารี Javascript อื่น ๆ อย่างไรก็ตาม ด้วยการถือกำเนิดของ CSS3 ฉันจะแสดงวิธีสร้างโดยใช้ CSS เท่านั้น

ผลลัพธ์จะไม่ใช่สิ่งที่มีความหมายมากที่สุดเท่าที่เคยมีมา แต่มันจะใช้งานได้อย่างสมบูรณ์

HTML ง่ายๆ ที่จะเริ่มต้นด้วย

		

			
			

			

			

			

			

			

			
			

				

					
					

						
หน้า 1

						
Lorem ipsum dolor นั่งสบาย ๆ conectur อะไร blah

					

				

				

					
					

						
หน้า 2

						
Lorem ipsum dolor นั่งสบาย ๆ conectur อะไร blah

					

				

				

					
					

						
หน้า 3

						
Lorem ipsum dolor นั่งสบาย ๆ conectur อะไร blah

					

				

				

					
					

						
หน้า 4

						
Lorem ipsum dolor นั่งสบาย ๆ conectur อะไร blah

					

				

				

					
					

						
หน้า 5

						
Lorem ipsum dolor นั่งสบาย ๆ conectur อะไร blah

					

				

				

					
					

						
หน้า 6

						
Lorem ipsum dolor นั่งสบาย ๆ conectur อะไร blah

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

จริงอยู่ที่มันดูน่ากลัว น่ากลัวมาก. จำไว้ว่านี่ไม่ใช่สิ่งที่มีความหมายมากที่สุดในโลก ตอนนี้ให้ฉันอธิบาย

เรามี div " content-slider " ซึ่งเก็บเนื้อหาทั้งหมด เราก็แค่ “ margin: 0 auto ” แล้วลืมมันไปซะ

จากนั้น เรามีสองส่วน: div " content " และ " nav " ul div เนื้อหาคือสิ่งที่ถือทุกหน้าของเราและ "nav" ul คือสิ่งที่ช่วยให้เราเข้าถึงหน้าต่างๆ

ตอนนี้ ภายใน div "เนื้อหา" คุณจะสังเกตเห็น div ที่ซ้อนกัน 6 ตัว: " content-inner-1 " ถึง " content-inner-6 " 6 div เหล่านี้จะทำให้เวทย์มนตร์ทำงานทั้งหมด และฉันจะอธิบายอย่างแน่ชัดในภายหลังว่าเป็นอย่างไร

CSS ที่มีมนต์ขลัง

 #เนื้อหา-ตัวเลื่อน{
ตระกูลแบบอักษร: arial;
ความกว้าง: 640px;
ระยะขอบ: 0 อัตโนมัติ;
ขอบบน: 100px;
}

#เนื้อหา {
ล้น: ซ่อน;
ความกว้าง: 640px;
ความสูง: 480px;
-webkit-กล่องเงา: 0px 0px 50px 10px #c9c9c9;
-moz-กล่องเงา: 0px 0px 50px 10px #c9c9c9;
กล่องเงา: 0px 0px 50px 10px #c9c9c9;
}

#เนื้อหาภายใน {
ความกว้าง:10000px;
ความสูง: 480px;
}

.หน้าหนังสือ {
ความกว้าง: 640px;
ความสูง: 480px;
ลอย: ซ้าย;
}

อย่างที่ฉันพูด ทั้งหมดที่เราทำกับ div " content-slider " คือการจัดกึ่งกลางและย้าย 100px จากด้านบนของหน้า

รูปแบบ div " content " มีความสำคัญมาก เราตั้งค่า "ล้น" เป็น "ซ่อน" - เพื่อให้แน่ใจว่าสไลด์จะมองไม่เห็นจนกว่าจะถูกเลือก

ตอนนี้ div “ content-inner ” คือสิ่งที่เก็บทุกหน้า นั่นเป็นเหตุผลที่มีความกว้าง 10,000px โดยปกติ javascript จะให้ความกว้างที่เหมาะสม แต่ในกรณีนี้ เราไม่ได้ใช้ Javascript

หน้าต่างๆ มีความกว้างและความสูง โดยจะลอยไปทางซ้ายเพื่อให้อยู่เคียงข้างกัน

ตอนนี้ เรามีสไตล์ทั่วไปแล้ว เราจะจัดรูปแบบ “ page-info “ และ “ nav “

 .page-info {
ความสูง: 90px;
พื้นหลังสี: rgba(99, 99, 99, 0.6);
ตำแหน่ง: ญาติ;
ขอบบน: 0px;
ด้านล่าง: 103px;
สี: #dedede;
ช่องว่างภายใน-ซ้าย: 20px;
ช่องว่างภายในด้านบน: 10px;
}

.page-info h2 {
ขนาดตัวอักษร: 21px;
ระยะขอบล่าง: 10px;
ขอบบน: 0px;
สี: #fafafa;
}

.page-text {
ขนาดตัวอักษร: 15px;
}

อย่างที่คุณเห็น มันเป็นเพียงการจัดรูปแบบง่ายๆ ที่ทำให้ข้อมูลของหน้าเป็นแบบกึ่งโปร่งใสและทำให้ข้อความอ่านง่าย

ต่อไป เราจะเพิ่มสไตล์ CSS3 ที่ดีให้กับปุ่ม

 .ปุ่ม {
ลอย: ซ้าย;
พื้นหลัง: #bababa;
ความกว้าง: 16px;
ความสูง: 16px;
-webkit-border-รัศมี: 8px;
-moz-border-รัศมี: 8px;
รัศมีเส้นขอบ: 8px;
ระยะขอบซ้าย: 5px;
ระยะขอบขวา: 5px;
}

.button: โฮเวอร์ {
-webkit-box-shadow: สิ่งที่ใส่เข้าไป 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: สิ่งที่ใส่เข้าไป 0px 0px 2px 2px #d4d4d4;
กล่องเงา: สิ่งที่ใส่เข้าไป 0px 0px 2px 2px #d4d4d4;
}

.button: ใช้งานอยู่ {
-webkit-box-shadow: สิ่งที่ใส่เข้าไป 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: สิ่งที่ใส่เข้าไป 0px 0px 2px 2px #7a7a7a;
กล่องเงา: สิ่งที่ใส่เข้าไป 0px 0px 2px 2px #7a7a7a;
}

.button {
แสดง: บล็อก;
ความกว้าง: 16px;
ความสูง: 16px;
}

เราทำปุ่มเป็นวงกลมและใส่เงาลงไปเพื่อเพิ่มลูกตา

สุดท้าย เราจะเพิ่มส่วนผสมวิเศษลงในส่วนผสม อย่างไรก็ตาม ก่อนหน้านั้น ฉันจะอธิบายว่าทั้งหมดนี้ทำงานอย่างไร

การใช้ CSS3 :target pseudo-selector ทำให้เราจัดรูปแบบองค์ประกอบที่อยู่ใน URL ได้ ตัวอย่างเช่น:

 #ตัวอย่าง {
การมองเห็น: ซ่อน;
}

#example:เป้าหมาย {
ทัศนวิสัย: มองเห็นได้;
}

ตอนนี้ หากเราอยู่ที่ URL เช่น “http://www.example.com/index.html #example สไตล์ “:target” ด้านบนจะถูกนำไปใช้ ในกรณีนี้ จะมองเห็น div "ตัวอย่าง"

เมื่อใช้แนวคิดนี้ เราสามารถเลียนแบบฟังก์ชันการคลิกของจาวาสคริปต์ได้ หากผู้ใช้ คลิก ลิงก์ที่ชี้ไปที่ “http://www.example.com/index.html#example” สไตล์จะถูกนำไปใช้กับ “ตัวอย่าง”

ในกรณีนี้ เราจะใช้ “:target” เพื่อทำให้ตัวเลื่อนเนื้อหาทำงาน เมื่อผู้ใช้คลิกที่ปุ่มใดปุ่มหนึ่งจากหกปุ่มในการนำทาง "เนื้อหาภายใน" จะเลื่อนไปยังตำแหน่งที่เหมาะสม เช่นเดียวกับเวอร์ชันจาวาสคริปต์

นี่คือรหัส:

 #content-inner-1:target #content-inner {
-webkit-transition: ความง่ายทั้งหมด 400ms;
-moz-transition: ทั้งหมด 400ms ง่าย;
-o-transition: ความง่ายทั้งหมด 400ms;
การเปลี่ยนแปลง: ความง่ายทั้งหมด 400ms;
ระยะขอบซ้าย: 0px;
}

#content-inner-2:target #content-inner {
-webkit-transition: ความง่ายทั้งหมด 400ms;
-moz-transition: ความง่ายทั้งหมด 400ms;
-o-transition: ความง่ายทั้งหมด 400ms;
การเปลี่ยนแปลง: ความง่ายทั้งหมด 400ms;
ระยะขอบซ้าย: -640px;
}

#content-inner-3:target #content-inner {
-webkit-transition: ความง่ายทั้งหมด 400ms;
-moz-transition: ทั้งหมด 400ms ง่าย;
-o-transition: ความง่ายทั้งหมด 400ms;
การเปลี่ยนแปลง: ความง่ายทั้งหมด 400ms;
ระยะขอบซ้าย: -1280px;
}

#content-inner-4:target #content-inner {
-webkit-transition: ความง่ายทั้งหมด 400ms;
-moz-transition: ทั้งหมด 400ms ง่าย;
-o-transition: ความง่ายทั้งหมด 400ms;
การเปลี่ยนแปลง: ความง่ายทั้งหมด 400ms;
ระยะขอบซ้าย: -1920px;
}

#content-inner-5:target #content-inner {
-webkit-transition: ความง่ายทั้งหมด 400ms;
-moz-transition: ทั้งหมด 400ms ง่าย;
-o-transition: ความง่ายทั้งหมด 400ms;
การเปลี่ยนแปลง: ความง่ายทั้งหมด 400ms;
ระยะขอบซ้าย: -2560px;
}

#content-inner-6:target #content-inner {
-webkit-transition: ความง่ายทั้งหมด 400ms;
-moz-transition: ความง่ายทั้งหมด 400ms;
-o-transition: ความง่ายทั้งหมด 400ms;
การเปลี่ยนแปลง: ความง่ายทั้งหมด 400ms;
ระยะขอบซ้าย: -3200px;
}

บทสรุป

เรามี 6 “ content-inner-[number] ” div และแต่ละ div สอดคล้องกับหน้า 6 หน้าคือ 6 divs

div "content-inner" เป็นลูกของ div " content-inner-[number] " แต่ละรายการ ดังนั้นเมื่อ div " content-inner-[number] " ทั้ง 6 รายการเป็น :targeted เราสามารถจัดรูปแบบ " content-inner ” div ตามลำดับ

เนื่องจากแต่ละหน้ากว้าง 640px เราเพียงแค่ตั้งค่าระยะขอบซ้ายของ div “ content-inner ” เป็นทวีคูณของ 640

ในการทำให้รูปแบบ “ :target ” ใช้งานได้ เราต้องมีลิงก์ที่ชี้ไปยังรูปแบบเหล่านี้ ดังนั้น “ nav ” ul ใต้หน้า

เพื่อให้ " content-inner " เคลื่อนไหว ได้จริง เราจึงให้คุณสมบัติแอนิเมชั่น CSS3 ตามปกติพร้อมคำนำหน้าของผู้ขาย

คุณมีแล้ว: ตัวเลื่อนเนื้อหาที่ทำงานได้อย่างสมบูรณ์แม้ว่าจะไม่ใช่ความหมาย