content
Introduction
This homepage is made for my portfolio. I didn’t use jQuery and Javascript plug-ins and I wrote all codes directly to focus on loading speed and light weight for the homepage. 이 홈페이지는 포트폴리오 용으로 제작된 사이트 입니다. 제이쿼리와 자바스크립트 플러그인을 사용하지 않고, 직접 모든 코드를 작성하여 홈페이지의 속도와 간결함에 촛점을 두었습니다.
-
Work period
작업기간
Feb.2017
-
Contribution
참여도
HTML+CSS 100%, jQuery 100%, Javascript(Front) 100%
-
Program for use
사용프로그램
Bracket, Browser(ie7~11, Chrome, Firefox, Safari) Kwah4.0, CCA, Juicy Studio Accessibilty, Jquery, Javascript, Photoshop, Illustrator
-
Tag
키워드
CSS, HTML, jQuery, Javascript
Point
- No Plug-In플러그인을 사용하지 않은 사이트
- 자바스크립트 플러그인 대신에 직접 코드를 작성하여 두가지 타입의 슬라이드, 애니메이션 효과, 호버 기능 등과 같은 기능을 만들었습니다. 플러그인을 사용하지 않은 사이트는 그렇지 않은 사이트에 비해 새로운 기능추가와 유지보수를 하는 것이 훨씬 빠르고 쉽습니다. 또한 불필요한 코드를 가지고 있지 않기 때문에 빠르고 가볍습니다. Instead of Javascript Plug-in, I made functions to move slides, animation, mouse hover, etc. Sites that do not use the plug-in are much faster and easier to add and maintain than other sites. Also, this site is fast and light because it does not have unnecessary code.
- Slide슬라이드
- 자바스크립트는 슬라이드 안에 있는 제품 이미지 갯수를 카운팅합니다. 몇 개의 제품이 나열되어있는지, 현재 몇 번째 상품을 보고 있는지 숫자로 알려줍니다. 또한 양 옆의 제품은 점점 흐려지게 하여 가운데 있는 제품이 제일 잘 보일 수 있도록 하였습니다. JavaScript counts the number of product images in the slide. It tells you how many products are listed, which products you are viewing by numbers. Also, the products on both sides are blurred so that the product in the middle can be seen best.
- Animation Effect애니메이션
- 홈페이지는 실시간으로 유저가 어느 위치 화면을 보고 있는지 체크 합니다. 다음에 이어지는 내용으로 넘어갈때 시간초를 두어 순차적으로 콘텐츠가 나올 수 있도록 했습니다. The home page keeps checking what the user is looking at now whenever the user moves. As you move on to the next content, the content will appear sequentially in time.
Links-
Site Map
*
is recommended
표시는 추천페이지
-
Site map사이트맵
