패럴랙스 스크롤링 애니메이션 레퍼런스 사이트 모음
문빈 https://moonbean.coalesce.nyc/ 삼화제지 - 쇼핑백은 고정되고 텍스트가 앞뒤로 https://samwhapaper.com/ 삼화제지 공식 기업 사이트 Bespoke Paper Truly Yours, 평범한 일상에 빛을 더하는 삼화제지 samwhapaper.com 하스엠 - 못, 나사 등이 텍스트를 가운데에 두고 둥둥 떠다니는 느낌 http://www.hasmkorea.com/web/kor/index.html 홈 | 하스엠 하스엠은 우주/항공, 반도체, 해양플랜트, 석유화학 등 첨단 산업분야에 필요한 고품질의 체결 부품을 생산, 고객사의 비즈니스 혁신을 가능하게 합니다. www.hasmkorea.com camping geversduin - 눈 사이로 캠핑카가 질주하는 효과 ht..
홈페이지 리뉴얼 및 랜딩페이지 작업 시 인터랙트 레퍼런스 모음
흘러가는 시계 http://cylndr.co.kr/ CYLNDR CYLNDR Website cylndr.co.kr 스크롤 내리면서 섹션을 관통하는 선 https://www.unisfootwear.com/pages/sustainability Sustainability | Eco Friendly Sneakers | Zero Waste We turn trash into prized possessions that you can wear and then recycle. Our sneakers help the Earth heal and put you in control of what you stand on, stand in, and stand for. Made from recycled ocean plastic. A..
마우스를 따라 움직이는 조명 효과 (자바스크립트) https://choiiis.github.io/web/how-to-make-spotlight-focus/ 마우스를 따라 움직이는 조명 효과 구현하기 CSS, JS를 활용하여 스포트라이트 효과 만들기 choiiis.github.io https://codepen.io/choiiis/pen/rNpyqYG Theater Spotlight Follows the Mouse Pointer ... codepen.io 마우스 움직임 따라 이미지 3D로 움직이는 효과 (제이쿼리) https://codepen.io/bharatpatel/pen/qeqPyR Shadow Box Effect Demonstration of shadow box Frames done using per..
자바스크립트로 막대그래프, 꺾은선 그래프 구현 레퍼런스 1. 막대그래프 https://codepen.io/chlolisher/pen/vYWdbxr Javascript create barGraph ... codepen.io https://lts0606.tistory.com/291 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 17 : 바 차트 5 이번시간에는 툴팁 효과를 나타내는 기능을 만들어 보겠다. 툴팁은 사실 그리 어려운 기능이 아니다. 여태껏 만들어온 방법과 거의 비슷하게 만들면 된다. 툴팁을 만들 개념을 정리하여보자. 1. lts0606.tistory.com 2. 꺾은선그래프 https://tempdev.tistory.com/15 javascript canvas로 허접한 꺾..
iframe으로 다른 홈페이지를 불러올 때 해당 홈페이지의 컨텐츠 영역만큼 높이값이 조정되지 않고 스크롤이 생겨버리는 현상이 있다. iframe에 불러온 컨텐츠의 높이값을 구해 대입해주면 유동적으로 높이가 조절된다. // iframe으로 불러올 페이지에 추가 // iframe을 삽입한 상위 페이지에 추가 *출처 https://velog.io/@seoyaon/Javascript-%EC%95%84%EC%9D%B4%ED%94%84%EB%A0%88%EC%9E%84iframe-%EB%86%92%EC%9D%B4-%EC%9E%90%EB%8F%99-%EC%A1%B0%EC%A0%88-%ED%95%98%EA%B8%B0feat.-%ED%81%AC%EB%A1%9C%EC%8A%A4-%EB%8F%84%EB%A9%94%EC%9D%B8
[print] A4용지 프린트용 페이지 픽셀 변환 사이즈 / 윈도우 PPI
A4용지로 프린트되는 페이지를 html 마크업 작업 시 단순 A4용지 사이즈로 작업하면 시안과 프린트물에 차이가 생긴다. A4용지 사이즈를 단순히 픽셀로 변환하면 1240*1754이지만 윈도우의 해상도는 96PPI (PPI는 Pixels Per Inch의 줄임말로 해상도를 뜻함) 그래서 A4용지로 인쇄되는 페이지의 경우 px로 변환하면 794*1123 사이즈로 작업해야 한다 디자인 시안 사이즈도 너비 794px로 나와야 함 ! 794px에서 양옆 여백을 62px로 잡으면 컨텐츠 영역이 670px이 되는데 컨텐츠 영역이 670px일 때가 안정적이라고 함 (A4에 인쇄했다고 생각하면 대략 양옆 여백 16mm 정도) @page{size: A4; margin: 8mm 0;} 페이지 세팅에서 위아래 마진을 10m..
% .progress_wrap{ width: 1000px; .percent{ display: inline-block; margin-right: 20px; font-size: 20px; vertical-align: middle; } .progress_bar{ display: inline-block; position: relative; width: 80%; height: 10px; background-color: #ddd; border-radius: 5px; vertical-align: middle; .progress_fill{ position: absolute; height: inherit; border-radius: inherit; background-color: aqua; } } } function p..