feat: 丰富并放慢滚动动画
This commit is contained in:
parent
594bdbac27
commit
74033f2945
237
oneinai.html
237
oneinai.html
@ -388,10 +388,24 @@
|
||||
}
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
padding: clamp(56px, 7vw, 88px) 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.section::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--cyan), var(--red), var(--violet));
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
|
||||
@ -750,6 +764,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hero-copy-scroll {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0.18;
|
||||
transform: translate3d(-76px, -84px, 0) scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hero-proof-scroll {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0.2;
|
||||
transform: translate3d(72px, -44px, 0) scale(0.93);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scroll-reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -796,6 +832,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes detail-rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 32px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tag-reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-28px, 0, 0) scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reveal-from-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -867,14 +925,36 @@
|
||||
|
||||
@supports (animation-timeline: view()) {
|
||||
.scroll-progress::after {
|
||||
animation: page-progress linear both;
|
||||
animation: page-progress 1s linear both;
|
||||
animation-timeline: scroll(root);
|
||||
}
|
||||
|
||||
.reveal-on-scroll {
|
||||
animation: scroll-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
.hero-copy {
|
||||
animation:
|
||||
rise-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
|
||||
hero-copy-scroll 1s linear both;
|
||||
animation-timeline: auto, view();
|
||||
animation-range: normal, exit 0% exit 100%;
|
||||
}
|
||||
|
||||
.hero-proof {
|
||||
animation:
|
||||
rise-in 720ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
|
||||
hero-proof-scroll 1s linear both;
|
||||
animation-timeline: auto, view();
|
||||
animation-range: normal, exit 0% exit 100%;
|
||||
}
|
||||
|
||||
.section::after {
|
||||
animation: line-draw 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 25% entry 100%;
|
||||
animation-range: cover 55% cover 80%;
|
||||
}
|
||||
|
||||
.reveal-on-scroll {
|
||||
animation: scroll-reveal 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 25% cover 50%;
|
||||
}
|
||||
|
||||
.section-heading.reveal-on-scroll {
|
||||
@ -882,105 +962,183 @@
|
||||
}
|
||||
|
||||
.section-heading .section-kicker {
|
||||
animation: kicker-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation: kicker-reveal 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 25% entry 90%;
|
||||
animation-range: entry 25% cover 32%;
|
||||
}
|
||||
|
||||
.section-heading .section-title {
|
||||
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation: title-reveal 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 32% contain 6%;
|
||||
animation-range: entry 35% cover 48%;
|
||||
}
|
||||
|
||||
.section-heading .section-description {
|
||||
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation: reveal-from-right 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 48% contain 14%;
|
||||
animation-range: entry 50% cover 58%;
|
||||
}
|
||||
|
||||
.capability-row:nth-child(1) {
|
||||
animation-name: reveal-from-left;
|
||||
animation-range: entry 12% entry 100%;
|
||||
animation-range: entry 20% cover 45%;
|
||||
}
|
||||
|
||||
.capability-row:nth-child(2) {
|
||||
animation-range: entry 35% contain 10%;
|
||||
animation-range: entry 40% cover 54%;
|
||||
}
|
||||
|
||||
.capability-row:nth-child(3) {
|
||||
animation-name: reveal-from-right-card;
|
||||
animation-range: entry 58% contain 20%;
|
||||
animation-range: entry 60% cover 63%;
|
||||
}
|
||||
|
||||
.capability-row .row-index,
|
||||
.capability-row .row-title,
|
||||
.capability-row .row-detail,
|
||||
.capability-row .row-tag {
|
||||
animation: detail-rise 1s linear both;
|
||||
animation-timeline: view();
|
||||
}
|
||||
|
||||
.capability-row .row-index {
|
||||
animation-range: entry 20% cover 30%;
|
||||
}
|
||||
|
||||
.capability-row .row-title {
|
||||
animation-range: entry 35% cover 38%;
|
||||
}
|
||||
|
||||
.capability-row .row-detail {
|
||||
animation-range: entry 45% cover 48%;
|
||||
}
|
||||
|
||||
.capability-row .row-tag {
|
||||
animation-name: tag-reveal;
|
||||
animation-range: entry 55% cover 58%;
|
||||
}
|
||||
|
||||
.workflow-list::before {
|
||||
animation: line-draw linear both;
|
||||
animation: line-draw 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 20% contain 40%;
|
||||
animation-range: entry 25% cover 75%;
|
||||
}
|
||||
|
||||
.workflow-step::before {
|
||||
animation: line-draw linear both;
|
||||
animation: line-draw 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 35% contain 20%;
|
||||
animation-range: entry 35% cover 55%;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.workflow-step:nth-child(1) {
|
||||
animation-range: entry 12% entry 100%;
|
||||
animation-range: entry 20% cover 45%;
|
||||
}
|
||||
|
||||
.workflow-step:nth-child(2) {
|
||||
animation-range: entry 35% contain 10%;
|
||||
animation-range: entry 40% cover 54%;
|
||||
}
|
||||
|
||||
.workflow-step:nth-child(3) {
|
||||
animation-range: entry 58% contain 20%;
|
||||
animation-range: entry 60% cover 63%;
|
||||
}
|
||||
|
||||
.workflow-step .workflow-index,
|
||||
.workflow-step .workflow-title,
|
||||
.workflow-step .workflow-detail,
|
||||
.workflow-step .workflow-meta {
|
||||
animation: detail-rise 1s linear both;
|
||||
animation-timeline: view();
|
||||
}
|
||||
|
||||
.workflow-step .workflow-index {
|
||||
animation-range: entry 25% cover 32%;
|
||||
}
|
||||
|
||||
.workflow-step .workflow-title {
|
||||
animation-range: entry 35% cover 42%;
|
||||
}
|
||||
|
||||
.workflow-step .workflow-detail {
|
||||
animation-range: entry 45% cover 52%;
|
||||
}
|
||||
|
||||
.workflow-step .workflow-meta {
|
||||
animation-name: tag-reveal;
|
||||
animation-range: entry 60% cover 62%;
|
||||
}
|
||||
|
||||
.pricing-layout {
|
||||
animation-name: panel-unfold;
|
||||
animation-range: entry 28% contain 12%;
|
||||
animation-range: entry 25% cover 60%;
|
||||
}
|
||||
|
||||
.price-label,
|
||||
.price-note {
|
||||
animation: detail-rise 1s linear both;
|
||||
animation-timeline: view();
|
||||
}
|
||||
|
||||
.price-label {
|
||||
animation-range: entry 25% cover 35%;
|
||||
}
|
||||
|
||||
.price-main {
|
||||
animation: number-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation: number-rise 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 52% contain 18%;
|
||||
animation-range: entry 40% cover 50%;
|
||||
}
|
||||
|
||||
.price-note {
|
||||
animation-range: entry 50% cover 58%;
|
||||
}
|
||||
|
||||
.price-fact {
|
||||
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation: reveal-from-right 1s linear both;
|
||||
animation-timeline: view();
|
||||
}
|
||||
|
||||
.price-fact:nth-child(1) {
|
||||
animation-range: entry 38% entry 100%;
|
||||
animation-range: entry 35% cover 46%;
|
||||
}
|
||||
|
||||
.price-fact:nth-child(2) {
|
||||
animation-range: entry 52% contain 10%;
|
||||
animation-range: entry 50% cover 57%;
|
||||
}
|
||||
|
||||
.price-fact:nth-child(3) {
|
||||
animation-range: entry 66% contain 18%;
|
||||
animation-range: entry 65% cover 68%;
|
||||
}
|
||||
|
||||
.docs-panel {
|
||||
animation-name: panel-unfold;
|
||||
animation-range: entry 30% contain 12%;
|
||||
animation-range: entry 25% cover 62%;
|
||||
}
|
||||
|
||||
.docs-panel .section-kicker,
|
||||
.docs-panel .section-description {
|
||||
animation: detail-rise 1s linear both;
|
||||
animation-timeline: view();
|
||||
}
|
||||
|
||||
.docs-panel .section-kicker {
|
||||
animation-range: entry 30% cover 38%;
|
||||
}
|
||||
|
||||
.docs-panel .section-title {
|
||||
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation: title-reveal 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 48% contain 16%;
|
||||
animation-range: entry 40% cover 52%;
|
||||
}
|
||||
|
||||
.docs-panel .section-description {
|
||||
animation-range: entry 52% cover 60%;
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation: reveal-from-right 1s linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 62% contain 22%;
|
||||
animation-range: entry 65% cover 72%;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1210,14 +1368,29 @@
|
||||
}
|
||||
|
||||
.reveal-on-scroll,
|
||||
.hero-copy,
|
||||
.hero-proof,
|
||||
.section::after,
|
||||
.section-heading .section-kicker,
|
||||
.section-heading .section-title,
|
||||
.section-heading .section-description,
|
||||
.capability-row .row-index,
|
||||
.capability-row .row-title,
|
||||
.capability-row .row-detail,
|
||||
.capability-row .row-tag,
|
||||
.workflow-list::before,
|
||||
.workflow-step::before,
|
||||
.workflow-step .workflow-index,
|
||||
.workflow-step .workflow-title,
|
||||
.workflow-step .workflow-detail,
|
||||
.workflow-step .workflow-meta,
|
||||
.price-label,
|
||||
.price-main,
|
||||
.price-note,
|
||||
.price-fact,
|
||||
.docs-panel .section-kicker,
|
||||
.docs-panel .section-title,
|
||||
.docs-panel .section-description,
|
||||
.doc-link {
|
||||
opacity: 1 !important;
|
||||
clip-path: none !important;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user