IT/UI | UX

[AOS] Animate On Scroll Library

https://michalsnik.github.io/aos/ 차장님이 알려준 플러그인. CSS 기반이란다. 사용법도 매우 간단하고 효과도 부드럽고 예쁘다. 나는 보통 최상위 wrap 바로 밑에 감싸는 div를 따로 만들어서 id와 class를 추가한다.그리고 aos 사이트를 보며 그때 그때 필요한 값을 주고 delay조절하면 나름 괜찮은 UI가 완성된다. 아래 소스는 내 최애 AOS소스이다.스크립트는 function으로 묶은 이유는 tab이 있을 때 클릭 이벤트마다 넣기 편하라고 ㅎㅎ AOS 2019.11.14 추가 1년간 aos를 쓰면서 느낀 점은 aos는 최고라는 것이다. 어떤 브라우저(IE9빼고)에서도 잘되고 모바일에서도 잘된다. 쓰면서 몇가지의 팁들이 생겼다. 1. 최상위 태그에 ☜이거 안넣어도 ..

[YOUTUBE] 유튜브 iframe, api

광고회사에서 유튜브 영상을 사용하는 것은 필수 필수~~~~ 1. iframe 단순하게 재생되는 동영상을 넣을 때. => iframe 자체에 옵션을 준다. showinfo와 rel은 필수. => 나는 주로 감싸는 박스에 해당 이미지를 잘라서 그 이미지 위에 position:absolute를 준 뒤 그 안에서 width:100%;height:100%를 준다. 그러면 감싸는 박스 width, height 값만 조절하면 영상 크기는 알아서 잘~ https://developers.google.com/youtube/youtube_player_demo => 유튜브 iframe 만들어주는 사이트. 근데 난 이거 별로 ㅎ 2. api 동영상에 어떠한 이벤트를 걸고 싶을 때.ex) 동영상이 끝나고 난 뒤 버튼이 생기게, ..

[SNS] 공유 이미지 사이즈

페이스북 파일형식 : jpg, png프로필이미지 사이즈 : 160px*160px커버이미지 사이즈 : 851px*315px (커버이미지 작업시 프로필이미지가 가려지지 않는지 확인하세요.)페이지공유이미지 : 1200px*900px 구글플러스(google+) 파일형식 : jpg, png (해상도가 72dip 이상이어야 선명합니다)프로필이미지 사이즈 : 250px*250px (가장자리가 잘리지 않게하기위하여 이미지여백을 조금 주세요~)커버이미지 사이즈 : 1240px*700px페이지공유이미지 : 497px*@ 트위터(twitter) 파일형식 : jpg, png프로필이미지 사이즈 : 200px*200px( 실제로 올려주실때는 400px*400px으로 업로드 하여야 합니다. 보여지는 크기는 200px*200px으로..

[횡스크롤] 예제모음

https://webdesign.tutsplus.com/articles/vertical-and-horizontal-scrolling-with-fullpagejs--cms-24215 -> 풀페이지 횡스크롤 https://idiotwu.github.io/smooth-scrollbar/ -> 스크롤 부드럽게 https://www.jqueryscript.net/slider/Horizontal-Content-Scroller-Plugin-with-jQuery-Scroll-Slider.html -> 횡스크롤 제이쿼리 플러그인

[플러그인] 탭안에 슬라이드, 영역 밖의 화살표 => slick

https://github.com/OwlCarousel2/OwlCarousel2/issues/1139 2018.03.14 탭안에 슬라이드를 넣는중 사용한 OwlCarousel탭을 클릭할때마다 위드값을 이상하게 받아온다.반응형이라 창 크기를 줄이면 제 값을 가져오는데 첫 화면에서 탭을 클릭하면 이상하다.그래서 swiper로 바꿨다. swiper는 잘된다.안되는 플러그인은 에러사항을 메모해두고 다른걸로 갈아타자.다음에 업데이트 되겠지. 2018.03.15 하단 이미지와 같이 스와이퍼 영역을 벗어난 화살표가 필요했다. swiper는 화살표 마크업이 따로 필요하기 때문에, 해당 영역을 벗어나는 화살표는swiper 밖으로 화살표 마크업을 빼고, swiper와 화살표를 감싸는 박스에 position:relative..

handlebars.js[jsfiddle]

출처 : http://programmingsummaries.tistory.com/381 https://jsfiddle.net/Kimara/fmt4yftp/

[반응형] 반응형 웹 디자인

★ 반응형을 위한 기본 HTML 설정 => 문서의 인코딩은 utf-8로 설정하고, 부포트는 간단하게 가로값(width)을 디바이스의 기본 가로값(device-width)으로 유지하고 비율은 1.0으로 설정해 디바이스로 접속했을 때 디바이스의 웹 브라우저 해상도로 보이게 한다. ★ 파비콘 http://www.favicon.cc/=> 파비콘 사이트 ★ 해상도 1. 대형 모니터2. 와이드 모니터3. 일반 모니터4. 태블릿 PC5. 소형 태블릿 PC6. 스마트폰 모니터 해상도(스크롤 포함) 1024*7681280*9601920*12002560*1600 모바일 해상도(최저)아이폰 - 320갤럭시S3 - 360갤럭시 노트 - 400 https://en.wikipedia.org/wiki/Lists_of_display..

[트윈맥스] 구문정리

기본 구문//TweenMax.to(target:Object, duration:Number, variables:Object):TweenMaxtarget : Object - 오브젝트 duration : Number - tween 시간 /(초)variables : Object - 객체의 모든 속성 VARIABLES delay : Number - 지연시간ease : Function - 따로 ease 클래스는 없나 봅니다. 상단에 fl.motion.easing.*; 한줄 추가 해주시고 Tween Class처럼 쓰면 됩니다. Default-Regular.easeOuteaseParams : Array - 직접 ease을 만들어서 쓸수 있습니다. 방정식이 있겠죠? 전 패스;;;autoAlpha : Number - 그냥..