feat: 增强页面滚动动效
This commit is contained in:
parent
51dae94dde
commit
864b197607
275
oneinai.html
275
oneinai.html
@ -20,6 +20,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
overflow: clip;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
background: var(--paper);
|
background: var(--paper);
|
||||||
font-family: 'Public Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
font-family: 'Public Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
@ -70,6 +71,27 @@
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scroll-progress {
|
||||||
|
position: fixed;
|
||||||
|
top: clamp(88px, 12vh, 132px);
|
||||||
|
right: max(14px, calc((100vw - 1360px) / 2));
|
||||||
|
z-index: 20;
|
||||||
|
width: 2px;
|
||||||
|
height: min(28vh, 220px);
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(62, 164, 236, 0.14);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-progress::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(to bottom, var(--cyan), var(--red), var(--violet));
|
||||||
|
transform: scaleY(1);
|
||||||
|
transform-origin: top;
|
||||||
|
}
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
|
grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
|
||||||
@ -464,12 +486,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.workflow-list {
|
.workflow-list {
|
||||||
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
border-top: 1px solid var(--ink);
|
border-top: 1px solid var(--ink);
|
||||||
border-bottom: 1px solid var(--line);
|
border-bottom: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.workflow-list::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, var(--cyan), var(--red), var(--violet));
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.workflow-step {
|
.workflow-step {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -715,12 +752,100 @@
|
|||||||
|
|
||||||
@keyframes scroll-reveal {
|
@keyframes scroll-reveal {
|
||||||
from {
|
from {
|
||||||
opacity: 1;
|
opacity: 0;
|
||||||
transform: translateY(24px);
|
transform: translate3d(0, 72px, 0) scale(0.965);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translate3d(0, 0, 0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes title-reveal {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
clip-path: inset(0 0 100% 0);
|
||||||
|
transform: translate3d(0, 58px, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
clip-path: inset(0 0 0 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes reveal-from-right {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(68px, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes reveal-from-left {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(-64px, 42px, 0) rotate(-1.5deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0) rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes reveal-from-right-card {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(64px, 42px, 0) rotate(1.5deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0) rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes line-draw {
|
||||||
|
from {
|
||||||
|
transform: scaleX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes page-progress {
|
||||||
|
from {
|
||||||
|
transform: scaleY(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scaleY(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes number-rise {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(0, 64px, 0) scale(0.88);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes panel-unfold {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
clip-path: inset(24% 0 34% 0 round 24px);
|
||||||
|
transform: translate3d(0, 84px, 0) scale(0.96);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
clip-path: inset(0 0 0 0 round 24px);
|
||||||
|
transform: translate3d(0, 0, 0) scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -729,13 +854,118 @@
|
|||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (animation-timeline: view()) and (animation-range: entry 8% cover 34%) {
|
@supports (animation-timeline: view()) {
|
||||||
.reveal-on-scroll {
|
.scroll-progress::after {
|
||||||
animation: scroll-reveal linear both;
|
animation: page-progress linear both;
|
||||||
animation-timeline: view();
|
animation-timeline: scroll(root);
|
||||||
animation-range: entry 8% cover 34%;
|
|
||||||
will-change: opacity, transform;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reveal-on-scroll {
|
||||||
|
animation: scroll-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry 0% cover 38%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading.reveal-on-scroll {
|
||||||
|
animation-range: entry 0% cover 32%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading .section-title {
|
||||||
|
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry 4% cover 34%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading .section-description {
|
||||||
|
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry 12% cover 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capability-row:nth-child(1) {
|
||||||
|
animation-name: reveal-from-left;
|
||||||
|
animation-range: entry 0% cover 34%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capability-row:nth-child(2) {
|
||||||
|
animation-range: entry 8% cover 42%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capability-row:nth-child(3) {
|
||||||
|
animation-name: reveal-from-right-card;
|
||||||
|
animation-range: entry 16% cover 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-list::before {
|
||||||
|
animation: line-draw linear both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry 8% cover 58%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step::before {
|
||||||
|
animation: line-draw linear both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry 12% cover 38%;
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step:nth-child(1) {
|
||||||
|
animation-range: entry 0% cover 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step:nth-child(2) {
|
||||||
|
animation-range: entry 10% cover 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step:nth-child(3) {
|
||||||
|
animation-range: entry 20% cover 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-layout {
|
||||||
|
animation-name: panel-unfold;
|
||||||
|
animation-range: entry 0% cover 44%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-main {
|
||||||
|
animation: number-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry 10% cover 38%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-fact {
|
||||||
|
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
animation-timeline: view();
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-fact:nth-child(1) {
|
||||||
|
animation-range: entry 8% cover 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-fact:nth-child(2) {
|
||||||
|
animation-range: entry 16% cover 38%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-fact:nth-child(3) {
|
||||||
|
animation-range: entry 24% cover 46%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-panel {
|
||||||
|
animation-name: panel-unfold;
|
||||||
|
animation-range: entry 0% cover 42%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-panel .section-title {
|
||||||
|
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry 8% cover 38%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-link {
|
||||||
|
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry 18% cover 46%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 920px) {
|
@media (max-width: 920px) {
|
||||||
@ -802,6 +1032,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 620px) {
|
@media (max-width: 620px) {
|
||||||
|
.scroll-progress {
|
||||||
|
top: 88px;
|
||||||
|
right: 5px;
|
||||||
|
height: 144px;
|
||||||
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
width: calc(100% - 28px);
|
width: calc(100% - 28px);
|
||||||
}
|
}
|
||||||
@ -951,10 +1187,31 @@
|
|||||||
scroll-behavior: auto !important;
|
scroll-behavior: auto !important;
|
||||||
transition-duration: 0.01ms !important;
|
transition-duration: 0.01ms !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scroll-progress {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal-on-scroll,
|
||||||
|
.section-heading .section-title,
|
||||||
|
.section-heading .section-description,
|
||||||
|
.workflow-list::before,
|
||||||
|
.workflow-step::before,
|
||||||
|
.price-main,
|
||||||
|
.price-fact,
|
||||||
|
.docs-panel .section-title,
|
||||||
|
.doc-link {
|
||||||
|
opacity: 1 !important;
|
||||||
|
clip-path: none !important;
|
||||||
|
transform: none !important;
|
||||||
|
animation: none !important;
|
||||||
|
will-change: auto !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class='oneinai-root'>
|
<div class='oneinai-root'>
|
||||||
|
<span class='scroll-progress' aria-hidden='true'></span>
|
||||||
<main class='page' id='top'>
|
<main class='page' id='top'>
|
||||||
<section class='hero'>
|
<section class='hero'>
|
||||||
<div class='hero-copy'>
|
<div class='hero-copy'>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user