스크롤을 사용하여 HTML에서 슬라이더를 만드는 방법. 순수 CSS3를 사용한 흥미롭고 동시에 간단한 슬라이더
멋진 슬라이드 뒤집기 효과를 제공하는 JavaScript 프리 슬라이더입니다. 모든 장치에 완벽하게 적응합니다. 사용 가능한 소스.
기능: CSS 슬라이더순수 CSS 슬라이더는 JS 스크립트의 도움 없이 자동 슬라이드 전환 기능을 갖춘 기성 슬라이더입니다. 일반적으로 이러한 유형의 슬라이더는 초보 개발자나 라이브러리를 포함할 가능성/필요가 없는 경우에 높이 평가됩니다.
물론 슬라이더를 생성하기 위해 특수 플러그인을 사용하는 것이 더 쉽습니다(예를 들어 jQuery와 같은 플러그인이 많이 있습니다). 하지만 이 슬라이더는 슬라이드를 넘기는 특이한 효과로 유혹적입니다. 게다가 생산성도 높다.
웹사이트에서 이 예제를 사용하는 방법위 링크에서 Slider-css.html 파일이 위치할 아카이브를 다운로드할 수 있습니다. 이론적으로 사이트에서 CSS 슬라이더를 실행하는 데 필요한 모든 것이 이 파일에 있습니다. 행동 알고리즘은 다음과 같습니다.
1. 슬라이더 블록의 모든 스타일을 복사합니다. 태그에 있습니다.
...
|
Container.untitled에는 position:absolute 속성이 있으므로 이를 약간 조정해야 할 수도 있습니다.
2. 모든 슬라이드는 포장되어 있습니다.
...
< div class = "untitled" > < div class = "untitled__slides" > . . . < / div > < / div > |
3. 슬라이드 자체의 HTML 코드를 이해하는 것은 어렵지 않습니다.
런던 스카우트 Unsplash 프로필
< div class = "untitled__slide" > < div class = "untitled__slideBg" > < / div > < div class = "untitled__slideContent" > < span >런던< / span > < span >스카우트< / span > < a class = "button" href = "https://unsplash.com/@scoutthecity" target = "/black" >언스플래시 프로필< / a > |
- 웹사이트 개발,
- CSS
- HTML
나는 누구에게도 미국을 공개하지 않을 것이며, 새로운 기술로 대중을 놀라게 하지 않을 것이며, 스쿠버 다이버처럼 CSS3에서 수영하는 사람들의 마음을 날려버리지 않을 것입니다. 자바스크립트 없이도 간단한 CSS3 기능을 이용해 슬라이더를 만드는 간단한 방법을 알려드리겠습니다.
1. 베이스 배치 슬라이더를 구현하려면 슬라이더 요소를 담당하는 매우 간단한 태그 세트가 필요합니다.
여기에서 일반 "래퍼" 블록에는 5개의 슬라이드가 있는 "슬라이더" 블록이 포함되어 있으며, 그 안에 슬라이드에 위치할 HTML 코드를 배치할 수 있습니다. 일반 블록 앞에는 라디오 버튼이 있습니다. 이 버튼은 나중에 자신만의 슬라이드 탐색 패널을 만들기 위해 숨겨져 있으며, "컨트롤" 블록의 레이블이 도움이 될 것입니다.
* ( 여백: 0; 패딩: 0; -webkit-box-sizing: 테두리 상자; -moz-box-sizing: 테두리 상자; -o-box-sizing: 테두리 상자; box-sizing: 테두리 상자 ; ) 본문( 배경 이미지: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); )
배경 디자인과 일반적인 스타일로 모든 것이 명확합니다.
래퍼( 높이: 350px; 여백: 100px 자동 0; 위치: 상대; 너비: 700px; ) .slider( 배경색: #ddd; 높이: 상속; 오버플로: 숨김; 위치: 상대; 너비: 상속; -webkit- 상자 그림자: 0 0 20px rgba(0, 0, 0, .5); -moz-상자 그림자: 0 0 20px rgba(0, 0, 0, .5); 20px rgba(0, 0, 0, .5); 상자 그림자: 0 0 20px rgba(0, 0, 0, .5);
일반 블록과 슬라이더가 있는 블록은 크기가 동일하여 페이지에서 슬라이더의 위치를 완벽하게 제어할 수 있습니다. 슬라이드가 없는 동안 슬라이더를 일시적으로 밝은 회색으로 칠했습니다.
래퍼 > 입력( 표시: 없음; )
라디오 버튼을 숨깁니다. 나중에 필요합니다.
현재 결과는 다음과 같습니다.
3. 슬라이드 디자인 여기에서는 슬라이드와 각 슬라이드에 대한 일반적인 스타일을 별도로 작성합니다.슬라이드( 높이: 상속; 위치: 절대; 너비: 상속; ) .slide1( 배경 이미지: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); ) .slide2( 배경 -이미지: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg) .slide3 ( 배경 이미지: url(http://habrastorage.org/files/663/6b1/) d4f /6636b1d4f8e643d29eab8c192fc1cea3.jpg); 이미지: url(http: //habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg )
모든 슬라이드에 대해 모양 효과를 가지고 놀 수 있도록 절대 위치 지정을 지정했습니다. 슬라이드의 크기는 슬라이더 자체의 크기에 따라 결정되므로 여러 곳에 작성할 필요가 없습니다.
래퍼 .controls( 왼쪽: 50%; 왼쪽 여백: -98px; 위치: 절대; ) .wrapper 라벨( 커서: 포인터; 디스플레이: 인라인 블록; 높이: 8px; 여백: 25px 12px 0 16px; 위치: 상대; 너비: 8px; -webkit-border-radius: 50%; 테두리 반경: 2px; 디스플레이: 왼쪽: -4px; -반경: 50%; -o-경계 반경: 50%;
우리는 내비게이션을 클래식하게 만듭니다. 각 버튼은 원 형태의 영역을 나타내며, 슬라이드가 활성화되면 빈 영역이 부분적으로 색칠됩니다. 지금까지 우리는 다음과 같은 결과를 얻었습니다.
래퍼 라벨( 커서: 포인터; 디스플레이: 인라인 블록; 높이: 8px; 여백: 25px 12px 0 16px; 위치: 상대; 너비: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50 %; -o-border-radius: 50%; -webkit-transition: 배경 완화 .5s; 전환: 배경 완화 .5s; 래퍼 라벨:hover, #slide1:checked ~ .controls 라벨:nth-of-type(1), #slide2: selected ~ .controls 라벨:nth-of-type(2), #slide3:checked ~ .controls 라벨: n번째 유형(3), #slide4:checked ~ .controls label:nth-of-type(4) , #slide5:checked ~ .controls label:nth-of-type(5) ( 배경: #ddd; )
디자인된 탐색 버튼 내부에 부드러운 색상을 추가합니다. 또한 활성 버튼과 커서가 위치한 버튼의 색상이 부드럽게 변하는 조건도 추가합니다. 사용자 정의 라디오 버튼이 준비되었습니다.
슬라이드( 높이: 상속; 불투명도: 0; 위치: 절대; 너비: 상속; z-색인: 0; -webkit-transform: 배율(1.5); -moz-transform: 배율(1.5); -o-transform: 배율 (1.5); 변환: scale(1.5); -webkit-transition: 0.5s in-out 변환, 불투명도 0.5s-transition: 0.5s-in-out 변환, 불투명도 -in-out .5s; -o-transition: 변환 Ease-In-Out .5s, 불투명도 Ease-in-out .5s; 전환: 변환 Ease-in-out .5s, 불투명도 Ease-in-out .5s; ) #slide1:선택됨 ~ .slider > .slide1, #slide2:선택됨 ~ .slider > .slide2, #slide3:선택됨 ~ .slider > .slide3, #slide4:선택됨 ~ .slider > .slide4, #slide5:선택됨 ~ .slider > .slide5 ( 불투명도: 1; z-index: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); 변환: scale( 1); )
모든 슬라이드를 보이지 않게 하고 배경으로 사라지게 하는 일반 슬라이드 스타일에 속성을 추가합니다. 또한 슬라이드가 보이지 않는 동안 슬라이드를 약간 확대하여 슬라이더에 흥미로운 모양을 추가했습니다.
결과는 여기에서 볼 수 있습니다.
이 튜토리얼에서는 훌륭한 CSS3 슬라이더를 만들어 보겠습니다. 슬라이드 사이에 페이드 효과를 사용합니다. 또한 각 이미지에 대한 설명을 사용할 수 있습니다. 순서가 지정되지 않은 목록은 정보를 구성하는 데 사용됩니다. 슬라이드는 CSS3 애니메이션을 사용하여 자동으로 전환됩니다.
HTML 마크업HTML 마크업은 매우 간단합니다. 이 예에는 4개의 슬라이드가 있습니다. 각각은 div 요소의 이미지(배경)와 설명 텍스트로 구성됩니다. 추가 슬라이드를 삽입하는 것은 매우 쉽습니다.
설명 #1
설명 #2
설명 #3
설명 #4
슬라이더는 CSS3 애니메이션 anim_slides 및 anim_titles를 사용합니다. 첫 번째는 개별 슬라이드에 사용되고 두 번째는 설명 텍스트에 사용됩니다. 설명의 위치와 투명도도 변경됩니다.
/* 슬라이더 */ .slides ( height:300px; margin:50px auto; Overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* 애니메이션 프레임 # anim_slides */ @-webkit-keyframes anim_slides ( 0% ( 불투명도:0; ) 6% ( 불투명도:1; ) 24% ( 불투명도:1; ) 30% ( 불투명도:0; ) 100% ( 불투명도:0; ) ) @-moz-keyframes anim_slides ( 0% ( 불투명도:0; ) 6% ( 불투명도:1; ) 24% ( 불투명도:1; ) 30% ( 불투명도:0; ) 100% ( 불투명도:0; ) ) . 슬라이드 ul li( 불투명도:0; 위치:절대; 상단:0; /* css3 애니메이션 */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: 선형; -webkit-animation-direction: 정상; -webkit-animation-name: anim_slides; 24.0s; -moz-애니메이션-타이밍-함수: 선형; -moz-애니메이션-방향: 정상; -moz-애니메이션-지연: 0; -moz-animation-play-state: 실행 중; -moz-animation-fill-mode: 앞으로; ) /* css3 지연 */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s; ) .slides ul li:nth-child(3), .slides ul li:nth-child(3) div ( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ) . 슬라이드 ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; ) .slides ul li img ( 디스플레이:블록; ) /* 애니메이션 프레임 #anim_titles */ @-webkit-keyframes anim_titles ( 0% ( 왼쪽:100%; 불투명도:0; ) 5% ( 왼쪽:10%; 불투명도:1; ) 20% ( 왼쪽:10%; 불투명도:1; ) 25% ( 왼쪽:100%; 불투명도:0; ) 100% ( 왼쪽:100%; 불투명도:0; ) @-moz-keyframes anim_titles ( 0% ( 왼쪽:100) %; 불투명도:0; ) 5%( 왼쪽:10%; 불투명도:1; ) 20%( 왼쪽:10%; 불투명도:1; ) 25%( 왼쪽:100%; 불투명도:0; ) 100%( 왼쪽 :100%; 불투명도:0; ) .slides ul li div ( background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF 삽입; 색상:#FFFFFF; 글꼴 크기:26px; 왼쪽:10%; 여백:0 자동; 패딩:20px; 위치:절대; 상단:50%; 너비:200px; /* CSS3 애니메이션 */ -webkit-animation-name: anim_titles; -웹킷-애니메이션-기간: 24.0초; -웹킷-애니메이션-타이밍-함수: 선형; -webkit-animation-iteration-count: 무한; -웹킷-애니메이션-방향: 정상; -웹킷-애니메이션-지연: 0; -webkit-animation-play-state: 실행 중; -webkit-animation-fill-mode: 전달; -moz-animation-name: anim_titles; -moz-애니메이션-기간: 24. 0초; -moz-애니메이션-타이밍-함수: 선형; -moz-animation-iteration-count: 무한; -moz-애니메이션-방향: 정상; -moz-애니메이션-지연: 0; -moz-animation-play-state: 실행 중; -moz-animation-fill-mode: 앞으로; )
무료 HTML 및 CSS 슬라이더 코드 예제 모음: 카드, 비교, 전체 화면, 반응형, 단순, 등. 2018년 6월 컬렉션 업데이트. 7개의 새로운 아이템.
목차 관련 기사🔥 이 비디오의 모든 새로운 CSS 슬라이더(2019)
코드 정보HTML/CSS/JS의 온보딩 화면 세트입니다. PNG 아이콘, CSS3 전환 및 Flexbox 레이어링을 사용한 개인 실험입니다.
HTML, CSS 및 JavaScript 정보 카드 슬라이더.
앤디 트랜(Andy Tran)이 만든
2015년 11월 23일
데스크톱 및 모바일 브라우저에서 작동하는 사진 슬라이더.
태론이 만든
2014년 9월 29일
코드 정보 간단하고 깔끔한 이미지 비교 슬라이더로 CSS와 jQuery로 제작되었으며 반응성이 뛰어나고 터치가 가능합니다.
코드 정보 html과 css만 있는 전후 슬라이더.
코드 정보 이미지 슬라이더 전/후 두 레이어를 사용하여 새로운 아이디어를 실험해 보세요. 최소한으로 유지하세요. 바닐라를 유지하세요. 유용하다면 좋아요 :) 
바닐라 JS, 미니멀하고 보기 좋습니다.
Huw가 만든
2017년 7월 3일
코드 정보 JavaScript가 포함된 "분할 화면" 슬라이더 요소입니다.
SVG 내부의 전후 슬라이더에 대한 약간의 실험입니다. 마스킹을 하면 매우 간단해집니다. 모두 SVG이므로 이미지와 캡션의 크기가 잘 맞춰집니다. 슬라이더 컨트롤에는 GreenSock의 Draggable 및 ThrowProps 플러그인이 사용되었습니다.
크레이그 로블류스키(Craig Roblewsky)가 만든
2017년 4월 17일
슬라이더에 대해 사용자 정의된 범위 입력을 사용합니다.
Dudley Storey가 만든
2016년 10월 14일
HTML, CSS 및 JavaScript를 사용한 반응형 이미지 비교 슬라이더입니다.
제작: Ege Görgülü
2016년 8월 3일
HTML5, CSS3 및 JavaScript 비디오 전후 비교 슬라이더.
Dudley Storey가 만든
2016년 4월 24일
CSS3 및 jQuery를 기반으로 2개의 이미지를 빠르게 비교할 수 있는 편리한 드래그 가능한 슬라이더입니다.
코디하우스에서 만든
2014년 9월 15일
라디오 입력을 기반으로 한 간단한 슬라이더. 100% 순수 HTML + CSS. 화살표 키로도 작동합니다.
반응: 예
종속성: -
코드 정보 전체 화면 슬라이더에 대한 멋진 전환 효과입니다.
코드 정보 Swiper.js를 사용한 수평 시차 슬라이딩 슬라이더.
코드 정보 마우스 움직임에 반응하는 부드러운 3D 원근 슬라이더.
HTML, CSS 및 JavaScript가 포함된 전체 화면 히어로 이미지 슬라이더(스와이프 패널 테마).
토비아스 볼리올로(Tobias Bogliolo)가 만든
2017년 6월 25일
애니메이션을 향상시키기 위해 Velocity 및 Velocity 효과(UI 팩)를 사용하는 슬라이더 상호 작용입니다. 애니메이션은 화살표 키, 탐색 클릭 또는 스크롤 잭을 통해 트리거됩니다. 이 버전에는 상호 작용의 일부로 테두리가 포함되어 있습니다.
스티븐 스캐프(Stephen Scaff)가 제작함
2017년 5월 11일
이미지를 표시하기 위한 최소한의 스타일의 간단한 슬라이더입니다. 이미지의 일부가 각 슬라이드에서 튀어나옵니다.
네이선 테일러가 만든
2017년 1월 22일
문제는 사용자 정의가 매우 쉽습니다. 글꼴, 글꼴 크기, 글꼴 색상, 애니메이션 속도를 안전하게 변경할 수 있습니다. JS 배열의 새 문자열의 첫 글자가 새 슬라이드에 나타납니다. 새 슬라이드를 쉽게 생성(또는 삭제)합니다. 1. JS의 배열에 새 도시를 추가합니다. 2. 슬라이드 수 변수를 변경하고 CSS의 scss 목록에 새 이미지를 넣습니다.
루슬란 피보바로프(Ruslan Pivovarov)가 만든
2016년 10월 8일
2016년 10월 7일
순수 JS 및 CSS(라이브러리 없음)를 기반으로 한 스크롤 기능이 있는 기울어진 슬라이더입니다.
빅토르 벨로조로프(Victor Belozyorov)가 만든
2016년 9월 3일
포켓몬 디자인을 적용한 슬라이더 애니메이션입니다.
팜미쿤(Pham Mikun)이 만든
2016년 8월 18일
복잡한 애니메이션과 반쯤 색칠된 각진 텍스트가 포함된 HTML, CSS 및 JavaScritp 슬라이더입니다.
루슬란 피보바로프(Ruslan Pivovarov)가 만든
2016년 7월 13일
HTML, CSS 및 JavaScript를 사용한 슬라이더 시차 효과.
마누엘 마데이라가 만든
2016년 6월 28일
파급 효과가 있는 HTML, CSS 및 JavaScript 슬라이더.
페드로 카스트로가 만든
2016년 5월 21일
HTML, CSS 및 JavaScript가 포함된 클립 경로 표시 슬라이더.
니콜라이 탈라노프가 만든
2016년 5월 16일
이전/다음 슬라이드를 미리 볼 수 있는 GSAP + Slick 슬라이더.
카를로 비덱(Karlo Videk)이 만든
2016년 4월 27일
HTML, CSS 및 JavaScript 전체 페이지 슬라이더.
조셉 마투치(Joseph Martucci)가 만든
2016년 2월 28일
HTML, CSS 및 JavaScript가 포함된 전체 슬라이더 프로토타입.
Gluber Sampaio가 만든
2016년 1월 6일
Greensocks TweenLite/Tweenmax를 사용하여 애니메이션으로 제작된 일종의 반응형 전체 화면 슬라이드쇼입니다.
아덴에서 만든
2015년 12월 12일
2015년 12월 5일
HTML, CSS 및 JavaScript가 포함된 전체 화면 슬라이더(GSAP 타임라인) #1.
Diaco M.Lotfollahi 제작
2015년 11월 23일
사용자 정의 효과가 있는 HTML 및 CSS 슬라이더.
니콜라이 탈라노프가 만든
2015년 11월 12일
HTML, CSS 및 JavaScript를 사용한 시차가 있는 전체 화면 드래그 슬라이더입니다.
니콜라이 탈라노프가 만든
2015년 11월 12일
개념 증명 회전 슬라이더. 클립 경로와 많은 수학을 사용합니다.
타일러 존슨이 만든
2015년 4월 16일
TranslateX와 Translate3d 부드러움을 사용하는 간단한 전체 화면 CSS 및 jQuery 슬라이더!
조셉이 만든
2014년 8월 19일
HTML 및 CSS의 이미지 불투명도 슬라이더.
호환 브라우저: Chrome, Edge, Firefox, Opera, Safari
반응: 예
종속성: -
코드 스택형 유연한 슬라이드 레이아웃 정보이 예에서는 서로 겹쳐진 슬라이드 레이아웃을 만드는 방법을 보여줍니다(특히 페이드 인/아웃 전환에 유용함). 높이를 설정하지 않고 위치를 피하지 않고 달성됩니다. 절대이므로 완전히 유연하고 정상적인 페이지 흐름을 유지하기 쉽습니다.
호환 브라우저: Chrome, Edge, Firefox, Opera, Safari
반응: 예
종속성: -
코드 반응형 슬라이더 정보HTML, CSS 및 JavaScript의 애니메이션 반응형 슬라이더.
호환 브라우저: Chrome, Edge, Firefox, Opera, Safari
반응: 예
종속성: animate.css
마스크된 텍스트가 포함된 코드 슬라이더 정보마스크된 텍스트가 있는 CSS 전용 슬라이더입니다.
호환 브라우저: Chrome, Edge(일부), Firefox, Opera, Safari
반응: 예
종속성: -
코드 정보 시차 효과가 적용된 이미지 및 콘텐츠.
코드 정보CSS 전용 슬라이드 갤러리.
호환 브라우저: Chrome, Edge, Firefox, Opera, Safari
반응: 예
종속성: -
코드 순수 HTML/CSS 슬라이더 정보원형 SVG 진행률 표시줄이 있는 순수 HTML/CSS 슬라이더입니다.
호환 브라우저: Chrome, Edge(일부), Firefox(일부), Opera, Safari
반응: 예
종속성: 글꼴-awesome.css
코드 정보 CSS만을 사용하고 이미지의 종횡비를 유지하면서 썸네일로 완벽하게 반응하는 수직 슬라이더를 만드는 실험입니다.
코드 정보 바닐라 JavaScript로 만든 간단한 Flexbox 이미지 슬라이더/캐러셀입니다.
코드 정보 슬라이드가 전환될 때마다 모션 블러 효과를 시뮬레이션하는 실험입니다. SVG Gaussian Blur 필터와 일부 CSS 키프레임 애니메이션을 활용합니다. 효과가 제대로 작동하려면 Javascript가 필요하지 않지만 이 예에서는 Javascript가 슬라이더 기능에만 사용됩니다.
코드 정보 JS를 사용한 멋진 애니메이션 슬라이더.
코드 정보 이것은 CSS 전용 이미지 슬라이더에 마스크 같은 이미지를 생성하는 데 SVG 패턴이 어떻게 도움이 되는지에 대한 실험입니다.
일부 슬라이더 전환을 탐색합니다. 시차 옵션이 활성화된 스와이프 슬라이더. 주로 여기에서 CSS 필터를 사용합니다.
미르코 조리치(Mirko Zorić)가 만든
2017년 6월 12일
미묘한 트윈 애니메이션이 포함된 간단한 GSAP 슬라이더입니다.
고란 브르반(Goran Vrban)이 만든
2017년 6월 9일
HTML, CSS 및 JavaScript를 사용한 슬라이더 UI.
Mergim Ujkani가 제작함
2017년 6월 6일
슬라이더 GSAP 버전 2.
Em An이 제작함
2017년 5월 4일
간단한 클래스 추가 거래를 사용하는 약간의 슬라이스 전환 슬라이더입니다. 타이밍을 약간 매끄럽게 하고 모바일에 가장 적합한 접근 방식을 결정해야 합니다(스택, 터치 이벤트 추가, 이미지를 전체 뷰포트로 만들기 등). 스크롤 휠(스크롤 재킹), 탐색 버튼 및 화살표 키를 지원합니다. 콘텐츠 래퍼도 늘릴 수 있습니다. 애니메이션이 적용되지 않은 상태에서 이미지가 뷰포트를 채우도록 만드는 것도 꽤 멋진 일입니다.
스티븐 스캐프(Stephen Scaff)가 제작함
2017년 1월 3일
CSS 테두리 이미지 및 클립 경로를 활용하여 슬라이더 애니메이션 효과를 생성합니다.
에밀리 헤이먼 제작
2016년 12월 31일
Flexbox로 제작된 작은 슬라이더. 반응성이 다소 높으며 슬라이더 영역 옆에 고정 요소가 있을 수 있습니다.
로버트가 만든
2016년 11월 28일
HTML, CSS 캔버스 슬라이더.
Nvagelis가 만든
2016년 10월 29일
HTML, CSS 및 JavaScript 3D 부드러운 슬라이더.
에두아르도 알레그리니(Eduardo Allegrini)가 만든
2016년 10월 19일
스프링클이 포함된 HTML 및 CSS 컵케이크 슬라이더입니다!
제이미 쿨터가 만든
2016년 10월 14일
마리오 마셀리 제작
2016년 10월 12일
HTML, CSS 및 JavaScript를 사용한 UI 애니메이션 #2 탐색.
마리오 마셀리 제작
2016년 9월 22일
HTML, CSS 및 JavaScript를 사용한 UI 애니메이션 #3 탐색.
마리오 마셀리 제작
2016년 9월 22일
HTML, CSS 및 JavaScript가 포함된 전자상거래 슬라이더 v2.0.
페드로 카스트로가 만든
2016년 9월 17일
곡선 배경의 HTML, CSS 및 JavaScript 깔끔한 슬라이더.
루슬란 피보바로프(Ruslan Pivovarov)가 만든
2016년 9월 13일
HTML, CSS 및 JavaScript를 사용한 UI 애니메이션 #1 탐색.
마리오 마셀리 제작
2016년 9월 8일
CSS의 강력한 기능을 활용해 보세요. 라이트박스가 포함된 각 중간 이미지와 페이지가 매겨진 슬라이더를 위아래로 사용하세요.
Kseso가 만든
2016년 8월 15일
이중 노출은 서로 다른 두 개의 이미지를 하나의 이미지로 결합하는 사진 기술입니다.
나카노 미사키가 만든
2016년 8월 3일
CSS3 속성 클립을 사용하는 슬라이더.
페드로 카스트로가 만든
2016년 5월 1일
반응형 CSS 슬라이더.
괴짜가 만든
2016년 4월 19일
이것은 직접 번역할 수 없는 아름다운 의미를 지닌 단어를 표시하는 간단한 슬라이더 실험입니다. 초점: 우아한 타이포그래피와 단순하면서도 매혹적인 전환.
조 해리가 만든
2016년 4월 5일
애니메이션 아이디어는 CSS 클립 경로의 값을 변경하여 마스킹 효과를 만드는 것입니다.
박티 알 아크바르가 만든
2016년 3월 31일
HTML, CSS 및 JavaScript가 포함된 도트 슬라이더입니다.
제작: Derek Nguyen
2016년 3월 16일
HTML, CSS 및 JavaScript를 사용한 프리즘 효과 슬라이더.
빅터가 만든
2016년 3월 12일
HTML, CSS 및 JavaScript가 포함된 슬라이딩 배경 갤러리.
Ron Gierlach가 만든
2015년 11월 30일
HTML, CSS 및 JavaScript 슬라이더 솔루션.
위르겐 겐저(Jurgen Genser)가 만든
2015년 9월 30일
Sequence.js로 구동되는 제품 슬라이더. Sequence.js - 고유한 슬라이더, 프레젠테이션, 배너 및 기타 단계 기반 애플리케이션을 만들기 위한 반응형 CSS 애니메이션 프레임워크입니다.
이안 룬(Ian Lunn)이 만든
2015년 9월 15일
작은 원형 맞춤형 슬라이더.
브람 드 한(Bram de Haan)이 만든
2015년 8월 11일
HTML, CSS, JavaScript가 포함된 반응형 GTA V 슬라이더.
에두아르드 메이어가 만든
2014년 1월 24일
슬라이더와 비슷하지만 알 수 없는 이유로 큐브 모양으로 회전합니다.
에릭 브루어가 만든
2013년 12월 4일
휴고 다비브라운이 만든
2013년 8월 28일
HTML, CSS 및 바닐라 JavaScript를 사용한 이미지 오버레이 슬라이더.
유감님이 만드셨어요
2017년 6월 7일
HTML 및 CSS 기능을 갖춘 이미지 슬라이더.
조슈아 히버트(Joshua Hibbert)가 만든
2016년 6월 16일
HTML, CSS 및 JavaScript가 포함된 다축 이미지 슬라이더.
부락칸이 만든
2013년 7월 22일
큐브 슬라이더는 HTML5/CSS3 3D 변환을 사용한 작은 실험입니다.
제작: Ilya K
2013년 6월 26일
안녕하세요, 초보 웹마스터 여러분.
다음은 세계에서 가장 간단한 순수 CSS 슬라이더입니다.
이러한 슬라이더의 장점은 간편함과 안전성뿐 아니라 가장 초보 웹마스터라도 자신의 웹사이트에 슬라이더를 만들어 설치할 수 있다는 점입니다.
단점은 CSS만으로는 루프를 반복하는 것이 불가능하다는 것입니다.
하지만 8장의 사진이 30초 이상 스크롤되는 것을 고려하면 이 시간은 방문자가 페이지를 보기에 충분합니다.
슬라이더가 사이트 헤더에 설치되어 있으면 아무도 30분 동안 슬라이더를 보지 않을 것입니다.
그림의 모양 효과는 CSS3의 기능에 따라 원하는 대로 변경할 수 있습니다. 이것이 어디에서 어떻게 이루어질 수 있는지 살펴보겠습니다.
CSS 슬라이더
/* 슬라이더 블록 */
#미끄러지 다 (
/* 상대 위치 설정 */
위치: 상대;
/*블록 크기 및 프레임*/
너비: 400px;
높이: 200px;
테두리: 2px 실선 #333 ;
테두리 반경: 5px;
}
/* 7개의 사진에 대한 그룹 선택기 */
.이미지1,
.이미지2,
.이미지3,
.image4,
.이미지5,
.image6,
.image7(
/* 블록에 절대적으로 상대적인 위치 */
위치: 절대;
/* 완전히 투명하게 만듭니다 */
불투명도: 0;
너비: 400px;
높이: 200px;
}
/* 첫 번째 그림에 애니메이션 연결 */
.이미지1(
애니메이션: 단일 이미지 8s 1s 용이성 대체 ;
}
/* 다음 이미지의 애니메이션은 이전 이미지의 스크롤에 필요한 시작 지연으로 수행됩니다 */
.이미지2(
애니메이션: 2개 이미지 8초 5초 용이성 대체 ;
}
.이미지3(
애니메이션: 3개 이미지 8초 10초 용이성 대체 ;
}
.image4(
애니메이션: 4개 이미지 8초 14초 용이성 대체 ;
}
.이미지5(
애니메이션: 5개 이미지 8초 18초 용이성 대체 ;
}
.이미지6(
애니메이션: 6개 이미지 8초 22초 용이성 대체;
}
.image7(
애니메이션: 7개 이미지 8초 26초 용이성 대체;
}
/* 투명하지 않은 마지막 이미지는 스크롤 후에도 계속 표시됩니다 */
.image8(
위치: 절대;
너비: 400px;
높이: 200px;
애니메이션: 8개 이미지 34초 용이성 대체;
}
/* 첫 번째 사진의 애니메이션 */
@keyframes 단일 이미지(
/* 투명도 변경을 설정합니다. 여기에서 회전, 블록 경계 외부에서의 이동 또는 중심으로부터의 출현(크기 조정)을 추가할 수 있습니다. */
0%
{
불투명도: 1;
}
50%
{
불투명도: 1;
}
100%
{
불투명도: 0;
}
}
/* 다음 6개의 사진에 대한 애니메이션 */
@keyframes 2개 이미지(
0%
{
불투명도: 0;
}
50%
{
불투명도: 1;
}
100%
{
불투명도: 0;
}
}
@keyframes 3개 이미지(
0%
{
불투명도: 0;
}
50%
{
불투명도: 1;
}
100%
{
불투명도: 0;
}
}
@keyframes 4개 이미지(
0%
{
불투명도: 0;
}
50%
{
불투명도: 1;
}
100%
{
불투명도: 0;
}
}
@keyframes 5개 이미지(
0%
{
불투명도: 0;
}
50%
{
불투명도: 1;
}
100%
{
불투명도: 0;
}
}
@keyframes 6개 이미지(
0%
{
불투명도: 0;
}
50%
{
불투명도: 1;
}
100%
{
불투명도: 0;
}
}
@keyframes 7개 이미지(
0%
{
불투명도: 0;
}
50%
{
불투명도: 1;
}
100%
{
불투명도: 0;
}
}
/* 여덟 번째 그림의 애니메이션 */
@keyframes 8개 이미지(
/* 이전 항목이 스크롤될 때까지 투명하게 유지됩니다 */
0%
{
불투명도: 0;
}
87%
{
불투명도: 0;
}
/*슬라이더 끝에서 표시됩니다 */
100%
{
불투명도: 1;
}
}
만약에 대비해 슬라이더를 다시 스크롤하려면 다음 코드를 추가하면 됩니다.
varCLN; onload = function () (CLN = document.getElementById("slaid").cloneNode(3))
이 경우 슬라이더 아래에 원하는 이름을 지정하고 CSS로 디자인할 수 있는 버튼이 나타납니다.
추신 @keyframes에서 사진을 표시하는 간격을 조정하면 캐러셀을 연속적으로 만들 수 있습니다.
나는 관리했다. 여기를 보시면 됩니다. 배너의 텍스트는 스크립트 없이 애니메이션 속성에 따라 스크롤됩니다.
사실은 세 장의 사진만으로 겨우 성공할 수 있었습니다.
추신 이제 이 사이트의 사이트 헤더 아래에 유사한 배너가 있습니다.
창의적인 성공을 기원합니다.
다음 내용을 읽어보는 것이 도움이 될 수 있습니다.
- 플래시 드라이브에서 손상된 파일을 복구하는 방법 웜 발생 후 파일을 복구하는 방법;
- Windows XP 시스템을 롤백하는 방법은 무엇입니까?;
- 디스크, 파일 및 폴더를 백업하는 방법;
- Windows 음성 인식 가이드;
- 순위는 무슨 뜻인가요? 범위. 페이지의 텍스트 디자인;
- 맞춤형 백라이트를 갖춘 Corsair K68 RGB 게이밍 키보드;
- Realtek High Definition Audio의 전체 설정 및 설치;
- 삭제 또는 해킹 후 VK 페이지 복원;