SeaPlus

[1. transition VS animate] jQuery의 animate()함수로 애니메이션을 주게 되면 매우 느리고 천천히 동작합니다. 컴퓨터가 좋아서 빠르게 동작하는 것 같아 보이는 것이지 애니메이션이 조금만 복잡하거나 많으면 금방 버벅입니다. 특히 여러분이 자바스크립트로 많은 일을 해야하는 SPA 같은 사이트를 만든다면 애니메이션 자바스크립트로 넣으면 안됩니다. 그러니 자바스크립트가 할 일이 많아도 빠르게 동작하는 css transition을 씁시다. (혹은 애니메이션 전용 라이브러리 velocity.js 등을 따로 설치해서 쓰시면 실행 속도 걱정은 해결됩니다.) [오늘날 애니메이션 웹페이지 동작 만드는 순서] 1. 애니메이션 효과가 적용될 html 속성 만들기 2. 자바스크립트로 트리거 하기 ..

JQuery란? javascript를 사용함에 있어 좀더 편리하도록 하는 오픈소스 라이브러리 입니다. 하지만 인터넷 브라우저가 IE가 대부분 이던 과거와는 달리 오늘날은 chrom과 같은 브라우저 에서 더 우수한 렌더링 엔진을 탑재하였고 빠른 버전 업그레이드를 위해 웹 표준을 신속하게 반영하였습니다. 그 결과 제이쿼리와 같은 무거운 라이브러리를 쓰지 않고도 양질의 웹 어플리케이션을 구현할수 있게 되었습니다. 하지만 개발자들 사이에서 위상이 예전과 같지 않다고 해도 여전히 사용률은 높고 기존에 jQuery로 작성된 웹 어플리케이션 또한 많은 상황 입니다. 따라서 제이쿼리의 기초적인 문법과 축약함수들을 알아둘 필요는 있다고 생각합니다. [제이쿼리 기초문법] 1. 셀렉터 //바닐라 js document.get..

[구성요소] - h2 두개로 구현된 애니메이션 - content h2:nth-child(1) 는 water 문자를 표현하는 역할 - content h2:nth-child(2) 는 water 내부의 물결치는 애니메이션으로 만든다. [Clippy - CSS clip-path maker] Clippy 사이트 ( https://bennettfeely.com/clippy/ ) - clipy-path 함수는 shape을 생성하는 함수이고 지정 값을 통해 원하는 모양을 만들 수 있다. - 사이트를 통해 물결모양을 생성한다. [HTML] Water Water [CSS] @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;5..

크게 2가지 애니메이션으로 분류 가능하다. 1. 계속 전환되는 배경색 애니메이션 2. 늘었다 줄었다 하는 text 애니메이션 [배경 효과] - 총 3개의 레이어로 구성되어 있다.( 배경이미지 레이어 1개, 조명 2개) - 배경이미지는 "그라데이션 효과 + 벽돌 이미지" 로 구성되어 있는데 "background-blend-mode: multiply;" 로 혼합해서 구성 했다. - 2개의 조명은 배경의 after, before 가상선택자로 구현했다. [1. 배경색 애니메이션] - hue-rotate 속성을 통해 색조 회전을 한다. - "색조 회전"을 적용하기 전에 배경색상은 정해져 있어야 한다. @keyframes animateBgColor { 0% { /* hue-rotate -> 색조회전 */ /* 배경..

크게 2가지 애니메이션 효과로 분류 가능하다. 1. 요소들을 360도 회전시키는 애니메이션 2. 요소들을 가운데 한 점으로 모아주는 애니메이션 [가상선택자와 그림자효과] - div class loader의 before, after 가상선택자를 활용해 애니메이션 효과를 적용할 원들을 만든다. - 각 요소들의 그림자를 x축으로 이동시키고 배치함으로써 또 다른 요소가 활용되는것 과 같은 효과를 만들어 낸다. .loader:before { background-color: #cb2025; box-shadow: 30px 0 0 #f8b334; margin-bottom: 10px; } .loader:after { background-color: #00a096; box-shadow: 30px 0 0 #97bf0d; }..

하단부 에서 bubble 효과가 나타났다가 사라지는 애니메이션 - 버블 요소를 하단부에 정렬 배치 - 각 버블에게 "하단 -> 상단" 으로 움직이는 animation 적용 - 각 버블이 하단->상단으로 움직일때 하단부분과 상단부분 keyframes 에서 opacity 값 조정 - 각 버블에게 적용되는 animation delay값을 조정하여 다른속도로 실행된다. [HTML] Sign UP Welcome to our World's Creative Studio Take a tour [CSS] * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: sans-serif; color: #fbfcfd; } button { display: b..

오로라 UI를 만드는 방법은 총 2가지 이다. 1. 요소3개를 만든뒤 각자 다른 색상을 주고 겹쳐 오로라 효과를 연출한다. 2. background-image 속성의 radial-gradient를 통해 간편하게 오로라 효과 연출이 가능하다. 원래라면 2번째의 방법이 훨씬 간편하고 태그사용도 적지만 동적인 애니메이션 효과를 부여하기 위해서는 1번 방법을 사용해야 한다. - HTML요소 3개 생성 후 각각의 위치를 top, left, right , bottom등을 이용해 겹쳐놓는다. - 요소 3개는 absolute position이고 3개의 요소를 감싸고 있는 태그 .wrap 이 relative 이기때문에 위치조정이 자연스럽 게 가능하다. - transform을 사용해 애니메이션 효과를 부여한다. - rot..

- 원 요소의 위치를 top:0 ->top:300으로 변화 - animation-direction을 alternate로 진행->역진행 - keframes 완료지점에서 width는 더 넓게 height는 더 적게 해서 튕기는 듯한 효과 * { box-sizing: border-box; margin: 0; } body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } .circle { position: relative; width: 100px; height: 100px; border-radius: 50%; background-image: linear-gradient( to right, #eea..

- 애니메이션 효과는 title과 gauge 두개의 요소에 적용시켰다. - gauge는 bar요소내부에 width:0으로 적용, keyframes에서 width:100% 늘어나는 구조가 기본 뼈대 - keyframes 중간값을 설정해 background-color가 계속 바뀌게 설정 * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Mulish", sans-serif; } .loading { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 216px; width: 500px; } .loading-title ..

- after 가상 요소를 이용해 동적인 효과 구현! - after 가상 요소의 넓이를 0 으로 지정한 뒤 커서가 올라갔을때(hover) 넓이를 100%로 늘린다. - transition 으로 변화 속도 조절 * { box-sizing: border-box; margin: 0px; padding: 0px; } body { display: flex; justify-content: center; align-items: center; font-family: "Lato", sans-serif; height: 100vh; width: 100%; } button, input, textarea { font-family: "Lato", sans-serif; } button { border: none; backgroun..