완전히 작동하는 CSS3 전용 콘텐츠 슬라이더를 빌드하는 방법

콘텐츠 슬라이더는 웹사이트를 보다 동적으로 만드는 좋은 방법입니다. 그들은 감각을 더하고 올바르게 사용하면 구매와 뒤로 버튼의 차이가 될 수 있습니다. 일반적으로 jQuery 또는 다른 Javascript 라이브러리로 빌드됩니다. 하지만 CSS3의 등장과 함께 CSS만 사용하여 빌드하는 방법을 보여 드리겠습니다.

결과는 지금까지 만들어진 것 중 가장 의미론적인 것은 아니지만 그럼에도 불구하고 완전히 기능적일 것입니다.

시작하는 몇 가지 간단한 HTML

		

			
			

			

			

			

			

			

			
			

				

					
					

						
페이지 1

						
Lorem ipsum dolor sit, consectur, blah.

					

				

				

					
					

						
2 쪽

						
Lorem ipsum dolor sit, consectur, blah.

					

				

				

					
					

						
3페이지

						
Lorem ipsum dolor sit, consectur, blah.

					

				

				

					
					

						
4페이지

						
Lorem ipsum dolor sit, consectur, blah.

					

				

				

					
					

						
5페이지

						
Lorem ipsum dolor sit, consectur, blah.

					

				

				

					
					

						
6페이지

						
Lorem ipsum dolor sit, consectur, blah.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

물론 무섭게 생겼습니다. 매우 무섭다. 이것은 지구상에서 가장 의미론적인 것이 아니라는 것을 기억하십시오. 이제 설명하겠습니다.

모든 내용을 담고 있는 " content-slider " div가 있습니다. 그냥 " margin: 0 auto " 하고 잊어버리겠습니다.

그런 다음 " content "div와 " nav "ul의 두 섹션이 있습니다. content div는 모든 페이지를 보유하고 "nav" ul은 다른 페이지에 액세스할 수 있게 해줍니다.

이제 "content" div 바로 안에 " content-inner-1 "부터 " content-inner-6 "까지 6개의 중첩된 div가 있음을 알 수 있습니다. 이 6개의 div가 모든 마법을 작동하게 하며, 나중에 정확히 설명하겠습니다.

마법 같은 CSS

 #content-slider {
글꼴 패밀리: arial;
너비: 640px;
여백: 0 자동;
여백 상단: 100px;
}

#콘텐츠 {
오버플로: 숨김;
너비: 640px;
높이: 480px;
-웹킷 상자 그림자: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
상자 그림자: 0px 0px 50px 10px #c9c9c9;
}

#콘텐츠 내부 {
너비: 10000픽셀;
높이: 480px;
}

.페이지 {
너비: 640px;
높이: 480px;
왼쪽으로 뜨다;
}

내가 말했듯이 " content-slider " div에 대해 한 일은 중앙에 배치하고 페이지 상단에서 100px 이동하는 것뿐입니다.

" content " div 스타일 지정은 매우 중요합니다. "오버플로"를 "숨김"으로 설정했습니다. 이렇게 하면 슬라이드가 선택될 때까지 슬라이드가 보이지 않습니다.

이제 " content-inner " div는 모든 페이지를 보유합니다. 이것이 너비가 10,000px인 이유입니다. 일반적으로 javascript는 올바른 너비를 제공하지만 이 경우에는 Javascript를 사용하지 않습니다.

페이지에는 너비와 높이가 있으며 나란히 왼쪽으로 떠 있습니다.

이제 일반적인 스타일이 있습니다. 우리는 " page-info "와 " nav "의 스타일을 지정할 것입니다.

 .페이지 정보 {
높이: 90px;
배경색: rgba(99, 99, 99, 0.6);
위치: 상대;
여백 상단: 0px;
하단: 103px;
색상: #dedede;
패딩 왼쪽: 20px;
패딩 상단: 10px;
}

.페이지 정보 h2 {
글꼴 크기: 21px;
여백-하단: 10px;
여백 상단: 0px;
색상: #파파파;
}

.페이지 텍스트 {
글꼴 크기: 15px;
}

보시다시피 페이지 정보를 반투명하게 만들고 텍스트를 읽기 쉽게 만드는 간단한 스타일입니다.

다음으로 우리는 버튼에 멋진 CSS3 스타일을 추가할 것입니다.

 .버튼 {
왼쪽으로 뜨다;
배경: #바바바;
너비: 16px;
높이: 16px;
-웹킷 테두리 반경: 8px;
-moz-border-radius: 8px;
테두리 반경: 8px;
여백-왼쪽: 5px;
여백 오른쪽: 5px;
}

.버튼:호버 {
-webkit-box-shadow: 삽입 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: 삽입 0px 0px 2px 2px #d4d4d4;
상자 그림자: 삽입 0px 0px 2px 2px #d4d4d4;
}

.버튼:활성 {
-webkit-box-shadow: 삽입 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: 삽입 0px 0px 2px 2px #7a7a7a;
box-shadow: 삽입 0px 0px 2px 2px #7a7a7a;
}

.버튼 a {
디스플레이: 블록;
너비: 16px;
높이: 16px;
}

우리는 버튼을 원으로 만들고 눈에 사탕을 추가하기 위해 그림자를 삽입했습니다.

마지막으로 마법의 재료를 믹스에 추가합니다. 그러나 그 전에 이 모든 것이 어떻게 작동하는지 설명하겠습니다.

CSS3 :target pseudo-selector 를 사용하여 url에 있는 요소의 스타일을 지정할 수 있습니다. 예를 들어:

 #예시 {
가시성: 숨김;
}

#예:대상 {
가시성: 가시성;
}

이제 "http://www.example.com/index.html #example 과 같은 URL에 있다면 위의 ":target" 스타일이 적용됩니다. 이 경우 "예제" div가 표시됩니다.

이 개념을 사용하여 자바스크립트 클릭 기능을 모방할 수 있습니다. 사용자가 "http://www.example.com/index.html#example"을 가리키는 링크를 클릭 하면 스타일이 "example"에 적용됩니다.

이 경우 ":target"을 사용하여 콘텐츠 슬라이더가 작동하도록 합니다. 사용자가 탐색에 있는 6개의 버튼 중 하나를 클릭하면 "내용 내부"가 자바스크립트 버전과 마찬가지로 적절한 위치로 슬라이드됩니다.

코드는 다음과 같습니다.

 #content-inner-1:target #content-inner {
-webkit-transition: 모든 400ms 용이성;
-moz-전환: 모든 400ms 용이성;
-o-전환: 모든 400ms 용이성;
전환: 모든 400ms 용이성;
여백-왼쪽: 0px;
}

#content-inner-2:target #content-inner {
-webkit-transition: 모든 400ms 용이성;
-moz-전환: 모든 400ms 용이성;
-o-전환: 모든 400ms 용이성;
전환: 모든 400ms 용이성;
여백-왼쪽: -640px;
}

#content-inner-3:target #content-inner {
-webkit-transition: 모든 400ms 용이성;
-moz-전환: 모든 400ms 용이성;
-o-전환: 모든 400ms 용이성;
전환: 모든 400ms 용이성;
여백-왼쪽: -1280px;
}

#content-inner-4:target #content-inner {
-webkit-transition: 모든 400ms 용이성;
-moz-전환: 모든 400ms 용이성;
-o-전환: 모든 400ms 용이성;
전환: 모든 400ms 용이성;
여백-왼쪽: -1920px;
}

#content-inner-5:target #content-inner {
-webkit-transition: 모든 400ms 용이성;
-moz-전환: 모든 400ms 용이성;
-o-전환: 모든 400ms 용이성;
전환: 모든 400ms 용이성;
여백-왼쪽: -2560px;
}

#content-inner-6:target #content-inner {
-webkit-transition: 모든 400ms 용이성;
-moz-전환: 모든 400ms 용이성;
-o-전환: 모든 400ms 용이성;
전환: 모든 400ms 용이성;
여백-왼쪽: -3200px;
}

결론

6개의 " content-inner-[number] " div가 있으며 각 div는 페이지에 해당합니다. 6페이지는 6div입니다.

"content-inner" div는 각 " content-inner-[number] " div의 자식이므로 이러한 " content-inner-[number] " div 중 6개가 :targeted 일 때 "content- content-inner [number]" div의 스타일을 지정할 수 있습니다. 이에 따라 content-inner "div.

각 페이지의 너비가 640px이므로 " content-inner " div의 왼쪽 여백을 640의 배수로 설정하기만 하면 됩니다.

이러한 " :target " 스타일이 작동하도록 하려면 해당 스타일을 가리키는 링크가 있어야 합니다. 따라서 페이지 아래에 " nav " ul이 표시됩니다.

" content-inner "를 실제로 애니메이션화 하기 위해, 물론 공급업체 접두어와 함께 일반적인 CSS3 애니메이션 속성을 제공합니다.

글쎄, 당신은 그것을 가지고 있습니다 : 비록 의미는 없지만 완전히 기능하는 콘텐츠 슬라이더.