본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

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

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

JS 응용하기32

#검색결과

총 32개를 찾았어요 ^^b

/

패럴렉스 이펙트_07 : 각 문장에 딜레이를 걸어 효과주기 🐢 패럴렉스 이펙트_07 각 span태그가 감싸여있지 않은 문장들을 span태그로 감싸 각 이미지와 span태그에 after/before 요소를 통해 효과를 주도록 해보겠습니다 👩🏻‍💻 HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 각 desc에 data-delay를 추가시켜 각 애니메이션에 딜레이를 줄겁니다!🏄‍♂️ 01 section1 우리는 사랑하는 친구들에 의해서만 알려진다. 02 section2 사랑은 눈으로 보지 않고 마음으로 보는 거지. 03 section3 두 분은 상처 하나 입지 않고, 대용사가 된 셈이오. 04 section4 그의 믿음은 그가 쓰는 모자의 유행처럼 변한다. 05 section5 잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다. 06 section6 죄를 짓고..
2022. 10. 7.
패럴렉스 이펙트_06 : 각 글자마다 효과주기 ✨ 패럴렉스 이펙트_06 각 문자들을 한글자씩 쪼개 태그로 감싸준뒤 그 텍스트에 각각 애니메이션을 주도록 하겠습니다 ₍ · з · ₎ HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 각 desc에 split 클래스가 달려있는것을 자바스크립트로 인식시켜 span으로 각각 한글자씩 쪼개줄거기 때문에 split 클래스명을 꼭 적도록 해야해요! 01 section1 우리는 사랑하는 친구들에 의해서만 알려진다. 02 section2 사랑은 눈으로 보지 않고 마음으로 보는 거지. 03 section3 두 분은 상처 하나 입지 않고, 대용사가 된 셈이오. 04 section4 그의 믿음은 그가 쓰는 모자의 유행처럼 변한다. 05 section5 잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다. 06 sect..
2022. 10. 7.
마우스 이펙트_06 : 좌표에 따라 텍스트를 움직이고 포인터에 변화주기! 마우스 이펙트 만들기! 마우스 위치에 따라 이미지들이 좌우로 움직이고 텍스트에 마우스가 올라가면 커서가 커지는 효과를 만들어볼게요! HTML 코드 : 뼈대 마우스 이펙트의 핵심은 cursor를 구성하는것이에요! 꼭 간단한 div를 통한 Cursor를 구성하도록 합시다! Pain Past Pain Past is pleasure. is pleasure. 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다 CSS 코드 : 살 1. 마우스가 이미지에 닿으면 반전이 되게끔 "mouse__cursor" 클래스에 "mix-blend-mode: difference;"를 설정해줍시다! 2. 화면을 절반으로 나눠 왼쪽에 오렌지 박스를 하나 만들어 놓습니다! .mouse__wrap { color: #fff; height: 10..
2022. 9. 29.
패럴렉스 이펙트_06 : 스크롤 값에 따라 텍스트를 순차적으로 나오게 하기 패럴렉스 이펙트_06 : 스크립트로 각 span에 CSS 애니메이션 적용하기 방법은 여러가지가 있겠지만 각 요소의 offsetTop값이 scrollTop(현재 스크롤 값) 이상이 되면 .split span의 요소를 찾아 애니메이션을 적용시키는 이펙트를 구현해보도록 하겠습니다! HTML 코드 : 뼈대 간단한 html 구조를 만들어 뼈대를 구성해보도록 합시다! 01 section1 우리는 사랑하는 친구들에 의해서만 알려진다. 02 section2 사랑은 눈으로 보지 않고 마음으로 보는 거지. 03 section3 두 분은 상처 하나 입지 않고, 대용사가 된 셈이오. 04 section4 그의 믿음은 그가 쓰는 모자의 유행처럼 변한다. 05 section5 잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다..
2022. 9. 29.
728x90
반응형

#HASH_TAGS

-

1

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

티스토리툴바