타임 라인 또는 타임 라인은 우리가 할 수있는 또 다른 추가 요소입니다. 웹 사이트에 통합하여 진행 상황 또는 진화를 보여줍니다. 회사 또는 회사의 년. 타이포그래피와 시각적 요소로 우아하게 구성하는 방법을 알고있는 시각적 그래픽 표현은 시간이 지남에 따라 서비스 또는 제품이 취한 단계를 보여줄 수 있습니다.
아래에서 확인할 수있는 29 개의 타임 라인은 수직 타임 라인에서 수평이 될 것입니다. 클라이언트 또는 자신을 위해 개발중인 웹 사이트의 페이지에서 필요에 맞는 최상의 것을 찾을 수 있습니다. 우리는 시각적으로 매우 만족스러운 매우 흥미로운 타임 라인 모음을 가지고 갈 것입니다.
스크롤하여 타임 라인
HTML, CSS 및 JavaScript 코드로 된 타임 라인으로 자신을 좋은 미니멀리스트 왼쪽의 연도 목록은 빨간색으로, 글꼴 및 H2는 검정색으로 강조 표시합니다. 이 타임 라인의 가장 좋은 점은 페이지를 스크롤 할 때 연도가 자동으로 변경된다는 것입니다. 훌륭한 마감, 디자인 및 결과.
CSS의 타임 라인
이 타임 라인은 CSS 코드를 사용하여 일부 속성에서 올바르게 구성 할 수도 있습니다. 스크롤이 없습니다 이전의 것과 비슷하지만, 일련의 상자와 파란색이 특징이며 또 다른 매우 우아한 느낌을주고이 출판물의 타임 라인 목록에 추가합니다.
반응 형 타임 라인 슬라이더
이 타임 라인은 HTML, CSS 및 JavaScript 코드를 포함하도록 Swiper JS 라이브러리로 작성됩니다. 웹 페이지를 진행할 때 스크롤링이 없지만 연도를 오른쪽에 배치 특정 연도로 이동하기 위해 마우스 포인터를 사용할 수 있다는 점을 제외하고 다음 단계로 이동할 수있는 버튼이 있습니다. 각 전환에서 훌륭한 애니메이션.
고급 타임 라인
이 타임 라인은 HTML, CSS 및 JavaScript를 사용하는 데있어 단색으로 가다, 정확하게 붉은 색조로. 또한이 훌륭한 결과 코드로 표시된 타임 라인에서 매우 간결하게 진행하거나 되돌아 갈 수있는 버튼을 사용하는 것이 특징입니다.
고정 헤더 및 플렉스 박스가있는 타임 라인
고정 헤더에 대한 HTML 및 CSS 코드 스크롤하는 순간 고정 된 상태로 유지됩니다. 페이지에서. 현재 웹 디자인 표준에서 눈에 띄고 싶은 현재 개발자에게 큰 관심을 끄는 타임 라인이되는 것은 매우 미묘합니다.
프로젝트 타임 라인
이 타임 라인은 CSS와 HTML을 사용하여 중요한 타임 라인을 제공합니다. 그 특정 기간 프로젝트를 위해. 우리가 스크롤 할 때 요일을 거치므로 회사 자체에서 만든 협업 도구에 대해 구현하는 것이 완벽합니다.
연혁
타임 라인 나머지에서 눈에 띄는 HTML, CSS 및 JavaScript 비주얼 테마. 그리고 세로 타임 라인을 스크롤 할 때 타임 라인에서 새 사진을 찾을 때마다이 코드를 배치 한 웹 페이지의 배경 이미지가됩니다.
하이퍼 루프
Hyperloopu는 오히려 사용 된 디자인이 눈에.니다. HTML과 CSS로만 프로그래밍됩니다. 타임 라인의 각 중요한 순간을 표시하는 세로선과 일련의 상자가있는 텍스트 글꼴의 다양한 크기를 사용하는 것이 특징입니다.
수직 타임 라인
간격 타임 라인 그의 시각적 터치로 나머지와 거리를 두다. 디자인에 매우 최신의 그라데이션 배경과 각 간격을 표시하는 일련의 상자가 있습니다. CSS 및 HTML로 프로그래밍됩니다.
Flexbox의 타임 라인
최고의 완성 타임 라인 중 하나이며 카드 기반 해당 시간 간격에 필요한 모든 정보를 포함합니다. 또한 HTML과 CSS로 개발 되었기 때문에 더 큰 화면을위한 공간을 계산하려면 모든 카드의 높이와 너비가 동일해야합니다.
DIV의 타임 라인
디자인에있어 미니멀 한 타임 라인은 HTML 및 CSS로만 개발이므로 구현이 매우 빠를 수 있습니다. 모노크롬 마감으로 정보 매체에서 타임 라인을 표현하는 데 매우 적합합니다.
CSS 및 HTML의 타임 라인
당신은 배치 할 수 있습니다 400 × 300 크기 이미지 이 타임 라인에서 선의 녹색과 날짜 및 요일의 텍스트로 구분됩니다. 애니메이션이 없으며 모든 수준에서 단순한 디자인이 특징입니다.
의견 및 피드백 타임 라인
허용하는 다른 타임 라인과 매우 다른 타임 라인 사용자의 사진이 담긴 카드를 넣다, 또는 적어도 처음에는 그 의도입니다. 멋진 비주얼 스타일로 카드는 애니메이션없이 다소 평평한 타임 라인에 음영을 사용합니다.
HTML 및 CSS의 타임 라인 아침
응답을위한 완벽한 타임 라인 HTML, CSS가 특징입니다. 매우 간단하지만 매우 모바일 타임 라인을 제공합니다.
타임 라인 UI
HTML 및 CSS의이 코드는 근무일을 제시하다 운동의. 헤더 이미지와 시각적 측면에서 매우 명확하고 깔끔한 방식으로 보여주는 일련의 버튼으로 반응합니다.
CSS의 타임 라인 만
이 타임 라인은 CSS에 있고 잘 선택된 일련의 색상 : 빨강 및 녹색. 녹색은 전체 페이지를 완전히 덮고, 흰색은 텍스트와 구분선을, 빨간색은 시간 간격을 구분합니다. 각 간격을 클릭하여 주위를 둘러싸고 강조 표시하는 상자를 배치 할 수 있습니다.
반응 형 타임 라인 V3
HTML, CSS 및 JavaScript 목록에서 첫 번째 수평 타임 라인입니다. 시각적으로 눈에 띄는 검정색과 회색 색상 사용 일련의 점이있는 수평선을 배치합니다. 각 간격은 소스와 텍스트 내용에서 더 큰 가중치로 강조 표시됩니다.
컬러로 중첩 된 타임 라인
수평 타임 라인 중 하나 목록에서 최고의 시각적 품질. 시간 간격 중 하나를 누를 때마다 훌륭한 사용자 경험을 제공하기 위해 매우 미묘하고 잘 표현 된 애니메이션이 포함 된 매우 상호 작용적인 타임 라인입니다. 그것은 HTML CSS / Sass 및 JavaScript / TypeScript (jquery.js).
반응 형 기록 타임 라인
완벽한 타임 라인 이미지에 다양한 이벤트 표시 역사상 시간 슬롯의. HTML, CSS 및 JavaScript로 개발 된 것에 대해 수평적이고 반응이 좋습니다.
그룹 타임 라인
이 타임 라인은 좋은 전환을 나타냅니다. 수평 애니메이션으로 수행. 각 시간 간격을 강조하는 훌륭한 색상과 절묘한 디자인. HTML, CSS 및 JavaScript로 대표 배경 이미지에 겹쳐진 일련의 카드를 표시합니다.
수평 CSS 및 HTML 타임 라인
그에 의해 만들어진 알려진 Envato Tuts +, 디자인에 깔끔하고 기본적인 카드 시리즈가 포함 된 수평 타임 라인이 표시됩니다. 각 간격을 맞 물리는 일련의 빨간색 점이있는 평면 색상과 수평선.
타임 라인 CSS, HTML 및 slick.js
타임 라인을위한 디자인의 파스텔 톤 각 이미지의 프리젠 테이션에서 두드러집니다. 각 시간 간격을 표시합니다. 이 타임 라인을 돋보이게하는 것은 각 이미지와 간격 간의 전환입니다.
타임 라인 시퀀스 V1
눈에 띄는 타임 라인 각 수직선의 버튼 각 간격마다 하나를 누를 때마다 전체 화면 배경 이미지를 연결합니다.
수평 타임 라인 HTML CSS
이 타임 라인에서 아이콘으로 강조 표시된 곳은 클릭 할 수 없습니다. 현명한 색상 팔레트 선택으로 절묘한 디자인 각 타임 라인에 대한 일련의 샌드위치. 애니메이션은 없지만 시각적으로 눈에 매우 즐겁습니다.
Codyhouse 타임 라인
이 타임 라인 코디 하우스가 제시하는 단색은 디자인에서 HTML, CSS 및 JavaScript로 개발되었습니다. 클릭 할 간격으로 일련의 점이있는 미니멀 한 선을 표시하고 XNUMX 초 미만의 수평 애니메이션을 유발합니다. 간단하지만 강력합니다.
수평 타임 라인
HTML, CSS 및 JavaScript로 만든 또 다른 타임 라인입니다. 단색이 특징, 시간 간격을 나타내는 각 지점에 레이스를두기 위해 녹색으로 우아한 디자인을 담았습니다. 하나를 누를 때마다 매우 부드러운 측면 애니메이션이 시작됩니다.
이름이없는 타임 라인
하단 목록에서 유일한 검은 색 타임 라인입니다. 그런 다음 그는 매년 다른 색상과 텍스트를 구분합니다. 그것의 한계와 동시에. 각 텍스트 사이를 통과하는 뛰어난 애니메이션이 있습니다.
타임 라인
이 타임 라인은 초록색의 악센트 완전히 정적입니다.
또 다른 수평 타임 라인
이 수 전체 화면 근처에 이미지 배치 파란색과 회색의 사용과 매년을 나타내는 일련의 원을 사용하여 눈에 띄는 타임 라인
놓치지 마세요 CSS 및 HTML의 또 다른 일련의 메뉴.