반응형 IT102 tab content slide reset, 탭메뉴 슬라이드 리셋 저번에 했었던 탭메뉴 컨텐트 영역에 슬릭 슬라이드를 추가하고, 새로운 탭을 클릭시 첫번째 슬라이드가 보이도록 리셋되게 하는 방법. See the Pen WNoaOgx by wao816 (@hy16) on CodePen. tab maenu content에 슬라이드가 들어갔을 경우 class="tab-content"는 position:absolute; 로 위치를 잡고 display:none 이 아닌, 선택하지 않은 tab content 는 z-index:-1 선택한 영역의 tab content는 z-index:1 로 보여지게 한다. $('.tab_slide').slick('slickGoTo', 0); 슬라이드 리스트 중 첫번째 슬라이드가 보이도록 하는스크립트 추가! 2021. 3. 9. car animation 자동차가 오른쪽에서 -> 왼쪽으로 달려오면서 브레이크 밟으면서 멈추는 효과 left 로 이동하는 위치값을 잡고 transform rotate으로 위로 살짝 올라가는 각도 설정함 See the Pen car animation by wao816 (@hy16) on CodePen. 2021. 2. 12. 눈 내리는 효과 script javascript를 이용한 눈내리는 효과 html에 canvers태그가 사용되었음 See the Pen snow by wao816 (@hy16) on CodePen. 2021. 2. 10. tab content , tab menu, 탭 메뉴 만들기 상단 메뉴를 클릭하면 하단의 내용 content 부분이 보여지는 탭 메뉴입니다. 1. 간단하면서 기본적인 tab menu 만들기 See the Pen tab by wao816 (@hy16) on CodePen. 코드펜에서 탭메뉴 스크립트를 찾아보다가 data-link 를 이용해서 만든 스크립트도 있어서 참고용으로 추가해봤다. 참고한 사이트 주소 -> https://codepen.io/cssjockey/pen/jGzuK See the Pen tab menu by wao816 (@hy16) on CodePen. 3. 탭 스크립트 + 마우스 클릭,호버 이벤트를 응용하여 만들어본 예시입니다. See the Pen MWbyqNZ by wao816 (@hy16) on CodePen. 2021. 2. 7. css 깜빡이는 불빛, slide down effect 강조하기위한 css animation 효과로 깜빡거리는는 불빛 효과(전등이 켜지는 듯한 효과, 스포트라이트), 배너나 현수막 등 슬라이드 되며 내려오는 효과 slide down See the Pen abBzrzL by wao816 (@hy16) on CodePen. 2021. 2. 2. css black bord / 칠판 애니메이션 칠판에 글씨가 지워지고 새로운 글씨가 나타나는 효과 css animation 시간, 딜레이 차이 체크 ie 8이하 img opacity:0 이 작동하지 않을 때 {opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; filter: alpha(opacity=00);} See the Pen jOMKrQV by wao816 (@hy16) on CodePen. 2021. 1. 14. css button hover effect / 버튼 마우스호버 효과 버튼에 마우스 호버했을때 버튼이 scale 1.1 되면서 빛 반짝이는, 빛이 지나가는 효과 See the Pen KKgezxO by wao816 (@hy16) on CodePen. 2021. 1. 13. css circle rotate 글씨있는 도형 3d로 360로 돌리는 효과 나타내기 See the Pen circle rotate by wao816 (@hy16) on CodePen. 일정한 시간, 방향으로 회전하기 transform: rotateZ(360deg); See the Pen LYbEvjy by wao816 (@hy16) on CodePen. 2021. 1. 11. css 화살표 효과 / arrow effect 1. 화살표 위아래로 움직이면서 하얀색으로 깜박이는 효과 scroll down See the Pen arrow by wao816 (@hy16) on CodePen. 2021. 1. 10. 이전 1 2 3 4 ··· 12 다음 반응형