코드랩 레퍼런스

Example Description 본문

BASIC

Example Description

webstoryboy 2018. 1. 31. 19:54

Parallax Style

속성 설명
Parallax Basic Parallax 사이트를 만들기 위한 기본 틀입니다.
Parallax Basic - Menu Parallax 사이트의 기본 틀과 메뉴를 연동한 샘플한 입니다.
Parallax - Dot Menu Parallax 사이트와 닷메뉴를 연동한 샘플입니다.
Parallax - Dot Menu Style - Scale Parallax 사이트 닷메뉴 스타일 스케일을 이용한 샘플입니다.
Parallax - Dot Menu Style - opacity Parallax 사이트 닷메뉴 스타일 opacity를 이용한 샘플입니다.
Parallax - Dot Menu Style - box-shoadow Parallax 사이트 닷메뉴 스타일 box-shoadow를 이용한 샘플입니다.
Parallax - Dot Menu Style 모음 Parallax 사이트와 닷메뉴 스타일 모음 샘플입니다.
Parallax - Responsive Nav Parallax 사이트와 닷메뉴 스타일 모음 샘플입니다.
Parallax - Side Nav Parallax 사이트와 사이드 메뉴 샘플입니다.
Parallax - Sticky Nav 스크롤을 내리면 메뉴가 상단에 붙는 샘플입니다.
Parallax - Hidden Nav 스크롤을 내리면 숨겨져 있던 메뉴가 내려오는 샘플입니다.
Parallax - Scroll Hide/Show Nav 스크롤을 내리면 메뉴를 숨기고 스크롤을 올리면 메뉴를 보여주는 샘플입니다.
Parallax - Text Animation - transform 스크롤을 내리면 텍스트가 나오는 기본적인 애니메이션입니다.
Parallax - Text Animation - animate 스크롤을 내리면 애니메이션 텍스트가 나오는 샘플입니다.
Parallax - Text Animation - letter 스크롤을 내리면 한 글자씩 애니메이션이 되는 샘플입니다.
Parallax - Text Animation - letter2 스크립트를 이용하여 한 글자씩 애니메이션이 되는 샘플입니다.

Animation

속성 설명
Animation - Tentacle 문어가 바다를 돌아다니는 CSS Animation 샘플입니다.
Animation - Roket 로켓이 우주를 여행하는 듯한 느낌의 CSS Animation 샘플입니다.
Animation - dog 귀여운 강아지와 달 배경으로 하는 CSS Animaiton 샘플입니다.

CSS

속성 설명
Rotate Bar 회전하는 바 애니메이션입니다.
Circle Loading 회전하는 로딩 애니메이션입니다.
Loading Ball 위 아래로 애니메이션 하는 로딩 볼 애니메이션입니다.

Layer Popup

속성 설명
Layer Popup - basic 레이어 팝업 기본 스타일입니다.
Layer Popup - Quick Scale Up 밑에서 위로 점점 커지면서 순식간에 나오는 레이어 팝업입니다.
Layer Popup - Fold 접혔다 펼쳐지는 애니메이션 레이어 팝업입니다.
Layer Popup - Runner 급하게 달리는 스타일 애니메이션 레이어 팝업입니다.
Layer Popup - James Bond 제임스 본드 스타일 레이어 팝업입니다.
Layer Popup Style 모음 레이어 팝업 애니메이션 스타일 모음입니다.

Menu

속성 설명
Menu - hamburger Style 클릭하면 애니메이션 되는 햄버그 메뉴 스타일입니다.

Hover Effect

속성 설명
Hover Effect - Opacity 마우스 오버하면 글씨가 보이는 기본 효과입니다.
Hover Effect - Left 마우스 오버하면 글씨가 왼쪽에서 나오는 애니메이션 되는 효과입니다.
Hover Effect - bottom 마우스 오버하면 글씨가 아래쪽에서 나오는 애니메이션 되는 효과입니다.
Hover Effect - Scale 마우스 오버하면 이미지는 작아지고 글씨가 나타나는 효과입니다.
Hover Effect - Translatey 마우스 오버하면 이미지는 살짝 올라가고 글씨가 나타나는 효과입니다.
Hover Effect - Rotate 마우스 오버하면 로테이트된 가상의 박스가 닫히는 애니메이션 효과입니다.
Hover Effect - Text Rotate 마우스 오버하면 텍스트가 로테이트되는 애니메이션 효과입니다.
Hover Effect - Image Change 마우스 오버하면 이미지가 변경되는 애니메이션 효과입니다.

Background

속성 설명
Background - Mouse 마우스가 움직이면 백그라운드 색이 변경됩니다..
Background - Random 백그라운드 색이 3초에 한번식 변경됩니다.
Background - Random Gradient 그라데이션 백그라운드 색이 변경됩니다.

jQuery API

속성 설명
Mouse Event API 마우스와 이벤트와 관련된 메서드 모음 예제입니다.

SVG

속성 설명
Text Animation1 SVG를 이용한 타이포 그래픽 SVG 애니메이션 입니다.
Text Animation2 SVG를 이용한 타이포 그래픽 SVG 애니메이션 입니다.
Text Animation3 SVG를 이용한 타이포 그래픽 SVG 애니메이션 입니다.
Text Animation4 SVG를 이용한 타이포 그래픽 SVG 애니메이션 입니다.


Share

Ad

Comments