본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

분류 전체보기176

#검색결과

총 176개를 찾았어요 ^^b

/

스크롤할때 다음 이미지에 자동으로 딱 멈춰주는 효과를 구현해보자! : scroll-snap-type 사용 스크롤시 다음 요소에 딱! 멈춰주는 듯한 효과를 CSS로 줘보자! 저번에 올렸던 prefers-color-scheme 을 통해 간단하게 다크모드를 구현했던것처럼 이번에도 간단한 방법이 있길래 올려봤어요! 홈페이지를 둘러보면 스크롤을 할때 무언가 탁탁 걸린듯한 원하는 item에 스크롤이 멈추는 효과가 적용되어있는 홈페이지가 있지 않나요? 이번에는 그 효과를 CSS를 통해서 간단한 문구 추가로 구현이 가능하기에 적어보았습니다 ^----^ HTML 코드 : 간단한 예제용 저는 간단한 예제를 본문에 첨부하기위해 하단과 같이 사용했어요! 클래스는 좀 더 직관적이게 [ slider_view / slider_move / item ] 라고 편하게 적었습니다~ * 사실 이래야 제가 보기 편했어요.... CSS 코드 : ..

패럴렉스 이펙트_04 : 스크롤에 따라 자연스럽게 보여주기! 패럴렉스 이펙트_04 : 스크롤에 따라 자연스럽게 보여줘보기 이번 예제에서는 스크롤 값에 따라 각 요소들을 자연스럽게 페이드 인 해주는 효과를 스크립트와 트랜지션을 통해 구현하러 가~~~보자고~~~~~! 요. HTML 코드 : 예제 구현용 이번 예제는 "content__item" 클래스가 메인이 되는 핵심 요소이니 하단과 같이 잘 작성해줍시다~~ 01 section1 우리는 사랑하는 친구들에 의해서만 알려진다. 02 section2 사랑은 눈으로 보지 않고 마음으로 보는 거지. 03 section3 두 분은 상처 하나 입지 않고, 대용사가 된 셈이오. 04 section4 그의 믿음은 그가 쓰는 모자의 유행처럼 변한다. 05 section5 잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다. 06 s..

마우스 이펙트_02 : 내 마우스 좌표값을 추적하는 포인터를 GSAP를 통해 구현해보기! 마우스 이펙트_02 저번 "마우스 이펙트_01"예제에서는 단순히 마우스 포인터를 마우스가 위치한 좌표값에 따라 붙여주는 예제였다면, 이번 "마우스 이펙트_02"예제에서는 마우스 포인터를 마우스가 위치한 좌표값에 따라 자연스럽고 알잘딱하게 따라가주는 이펙트를 구현해보도록 하겠습니다 ^----^v 알잘딱한 마우스 포인터 추적 이펙트를 구현하기 위해서는 GSAP 라이브러리를 이용하는것이 효율적이에요! GSAP 라이브러리 가져오기 [GSAP 다운로드]에 들어가 라이브러리를 가져오고 자신의 폴더에 저장합니다. 를 자신이 구현하려는 파일의 스크립트로 삽입해줍니다. 경로는 자신의 경로로 해주시면 됩니다. HTML 코드 : 마우스 포인터용 div 생성 [mouse__cursor / mouse__cursor2] 이 두개..

사이트 유형 종합_02 : 버그 픽스와 함께 사이트 유형 종합의 완성도를 UP! 사이트 유형 종합_02 저번에는 기초적인 유형의 틀 자체만 만들었었는데 지금까지 만들었던 사이트 유형들을 모두 조합해 버그들을 fix한 사이트 유형을 만들어보도록 하겠습니다~! HTML 코드 햄버거 메뉴 / swiper을 이용한 이미지 슬라이드 이 두가지만 유의해 저번 유형때 만들었던 코드에 추가시켜줍니다. ##햄버거 메뉴 : html 코드에 적혀있는 span은 햄버거 메뉴의 막대기 역할을 담당합니다. ##swiper : 슬라이드 유형 구현을 위한 기본적인 틀이 잡혀있는 플러그인을 사용하기 위해 하단과 같은 코드를 삽입하였습니다. 어디로 가볼까? #새하얀_눈. 눈 덮힌 마을 속 고히 잠들어 있는 새싹들 자세히 보기 사이트 보기 어디로 가볼까? #새하얀_눈. 눈 덮힌 마을 속 고히 잠들어 있는 새싹들 자세..

이전 1 ··· 16 17 18 19 20 21 22 ··· 44 다음

728x90

#HASH_TAGS

-

1

슬라이드 결과 : 월요일 scroll-snap-type 테스트테스트 다크모드 scroll-snap-align 화사한가요? 공부 오징어 1Kg 당 3000원 오징어 두마리 포획 완료 ImageSlideEffect 필터선택자 HTML 오늘도 웹표준은.. 울적하니 꽃을 달아봤습니다 메서드 내일은 즐거운 월요일 선택해주세요 멈추지 않는 ' j ' 시리-즈 테스트 제이쿼리 숙제가 다양해서 너무 좋아요 JQuery 이건 또 뭐람 코딩 오늘은 내가바로 오징어! Method 오징어 한마리 수확 완료! 오늘 조업 마감했습니다. 코드

티스토리툴바