원형 애니메이션 타임라인 스크롤 갤러리 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기본 소스 > 원형 애니메이션 타임라인 스크롤 갤러리 상세정보

클라우드태그

javascript

HTML

PHP

Api

CSS

ASP

2022

메일링

mysql

모듈

jquery

쇼핑몰

카운터

현재접속자 명

원형 애니메이션 타임라인 스크롤 갤러리

해피팀

네티즌

소스분류

기본 소스

다운로드 횟수

11 회

간단설명

카드를 스크롤하면서 원형 애니메이션 효과로 강조되는 갤러리 UI 구현 예제입니다.

평가하기

스크롤 동작에 따라 카드가 원형으로 회전하며 강조되는 인터랙티브 갤러리 예제입니다.

중앙에 위치한 카드가 자연스럽게 확대되거나 강조되어 시각적인 집중 효과를 제공합니다.
HTML, CSS, JavaScript를 조합하여 부드러운 애니메이션과 스크롤 연동 기능을 구현하였습니다.

타임라인 형태의 레이아웃으로 콘텐츠를 순차적으로 보여주기에 적합합니다.
포트폴리오, 프로젝트 소개, 이미지 갤러리 등 다양한 웹페이지에 활용할 수 있는 UI 소스입니다.

HTML 구조

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</path>

</svg>

</div>

CSS 소스

@import url(https://fonts.bunny.net/css?family=just-me-again-down-here:400);

@layer base, mouse, demo;

@layer demo {

@property --rotate {

syntax: "<number>";

inherits: true;

initial-value: 0;

}

body {

height: 1200svh;

margin: 0;

animation: --page-rotate 1s linear;

animation-timeline: scroll(nearest block);

/** this allows us to rotate to exactly each card.

BUT, it either needs to be set via JS or hardcoded as we can't accesss the .wrapper sibling-count() value from the body */

--cards: 20;

animation-timing-function: steps(var(--cards));

}

@keyframes --page-rotate {

to { --rotate: 1; }

}

.wrapper {

--card-border-radius: 14px;

--cards: sibling-count();

--card-width: max(150px, 20vw);

--card-height: calc(var(--card-width) * 6 / 4);

/* radius large enough so cards don't overlap */

--radius: calc(var(--card-width) * var(--cards) / (2 * 3.1416));

font-family: 'Just Me Again Down Here', handwriting;

position: fixed;

width: calc(var(--radius) * 2);

height: calc(var(--radius) * 2);

/* center circle so top card is visible */

top: calc(50% + var(--radius) + var(--card-height) * 2);

left: 50%;

transform-origin: center center;

transform: translateX(-50%) rotate(calc(var(--rotate) * 360deg));

transition: transform 300ms linear;

/*zoom: .3;*/

& > div {

--card-i: sibling-index();

/* card position around circle*/

--card-offset-radius: circle(var(--radius) at 50% 50%);

--card-offset-distance: calc((var(--card-i) - 1) / var(--cards) * 100%);

/* current card positioning relative to --rotate to detect "top" card */

--card-phase: calc((var(--card-i) - 1) / var(--cards) - 0.75);

--card-pos: mod(calc(var(--card-phase) + var(--rotate) + 1), 1);

--card-dist: min(var(--card-pos),calc(1 - var(--card-pos)));

--card-grayscale: clamp(0, calc(var(--card-dist) * var(--cards)), 1);

--card-opacity: calc(1 - (var(--card-dist) / 0.15 ));

/* blur */

--card-focus-range: .1;

--card-max-blur: 7px;

--card-norm-dist: min(var(--card-dist), var(--card-focus-range));

--card-blur-progress: calc(var(--card-norm-dist) / var(--card-focus-range));

--card-blur: calc(var(--card-blur-progress) * var(--card-max-blur));

/* caption */

--caption-active: clamp(0, 1 - (var(--card-dist) / 0.001), 1);

--caption-opacity: var(--caption-active);

--caption-y: calc(-150px * (1 - var(--caption-active)));

filter: blur(var(--card-blur)) grayscale(var(--card-grayscale));

opacity: var(--card-opacity);

container: size;

offset-path: var(--card-offset-radius);

offset-distance: var(--card-offset-distance);

offset-rotate: auto;

offset-anchor: 50% 100%;

position: absolute;

width: var(--card-width);

aspect-ratio: 4/6;

object-fit: cover;

border-radius: var(--card-border-radius);

transition: all 300ms ease-in-out;

transform-origin: center calc(var(--card-height) * 2 * -1);

&::before{

content: counter(i);

counter-reset: i var(--caption-opacity);

}

&::after {

content: attr(data-title);

position: absolute;

top: 100%;

left: 1rem;

opacity: var(--caption-opacity);

translate: 0 var(--caption-y);

font-size: clamp(1rem, 2vw + 0.045rem,1.6rem);

z-index: -1;

transition: opacity 300ms ease-in-out,translate 300ms ease-in-out;

}

& > img{

width: 100%;

height: 100%;

object-fit:cover;

border-radius: inherit;

}

@layer mouse{

.mouse {

position: fixed;

bottom:1rem;

left: 50%;

translate: -50% 0;

display: block;

width: 50px;

height: 50px;

opacity: 1;

color:var(--mouse-color);

display: none;

animation-name: mouse;

animation-duration: 1s;

animation-timing-function: linear;

animation-fill-mode: forwards;

animation-timeline: scroll(nearest block);

@supports (animation-timeline: scroll()) {

display: block;

}

@keyframes mouse {

75% {

opacity: 1;

}

100% {

opacity: 0;

}

/* general styling not relevant for this demo */

@layer base {

* {

box-sizing: border-box;

}

:root {

color-scheme: light dark;

--bg-dark: rgb(16, 24, 40);

--bg-light: rgb(248, 244, 238);

--txt-light: rgb(10, 10, 10);

--txt-dark: rgb(245, 245, 245););

--line-light: rgba(0 0 0 / .25);

--line-dark: rgba(255 255 255 / .25);

--clr-bg: light-dark(var(--bg-light), var(--bg-dark));

--clr-txt: light-dark(var(--txt-light), var(--txt-dark));

--clr-lines: light-dark(var(--line-light), var(--line-dark));

}

body {

background-color: var(--clr-bg);

color: var(--clr-txt);

min-height: 100svh;

margin: 0;

padding: 2rem;

font-family: system, sans-serif;

font-size: 1rem;

line-height: 1.5;

display: grid;

place-items: center;

gap: 2rem;

& > * {

/*outline: 1px dashed red;*/

}

h1 {

margin: 0;

font-size: 1.2rem;

}

@supports not (animation-timeline: scroll()) {

body::before {

content:"Sorry, your browser doesn't support animation-timeline";

position: fixed;

top: 2rem;

left: 50%;

translate: -50% 0;

font-size: 0.8rem;

}

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

등록된 의견이 없습니다.