Интересует реализация скролл анимации, как на главном экране (первый блок) данного сайта - https://www.glia.com/ А если быть точнее: изменение контента при каждом пикселе прокрутки (Я не ищу готового решения, мне нужна хотя бы идея)
-
2ru.stackoverflow.com/a/550320/178988– Qwertiy ♦23 апр 2020 в 20:54
-
Вопрос-ссылка бесполезен для базы знаний, так как сайт в будущем может измениться или перестать работать; следует уточнить формулировку и заголовок или хотя бы добавить гифку желаемой анимации, чтобы стала понятна связь вопроса с ответами.– andreymal30 апр 2020 в 11:20
2 ответа
Маленький пример. Разогреть ваш идейный аппарат.
addEventListener('scroll', function(e) {
const item = Math.floor(pageYOffset / innerHeight)
document.body.dataset.item = item < 5 ? item : 'no-items'
})
body {
margin: 0;
height: 1000vh;
}
.container {
position: fixed;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.item {
--sy: 0;
flex-grow: 1;
height: 100%;
transition: 0.7s;
transform-origin: bottom;
transform: scaleY(var(--sy));
background-color: white;
}
[data-item="0"] .item_1 {
--sy: 1;
}
[data-item="1"] .item_2 {
--sy: 1;
}
[data-item="2"] .item_3 {
--sy: 1;
}
[data-item="3"] .item_4 {
--sy: 1;
}
[data-item="4"] .item_5,
[data-item="no-items"] .item_5 {
--sy: 1;
}
[data-item="no-items"] .container {
position: absolute;
top: 500vh;
}
<body data-item="0">
<div class="container">
<div class="item item_1">
</div>
<div class="item item_2">
</div>
<div class="item item_3">
</div>
<div class="item item_4">
</div>
<div class="item item_5">
</div>
</div>
</body>
Итоговый вариант(но не один в один)
addEventListener('scroll', function(e) {
const stage = Math.floor(pageYOffset / (innerHeight / 3.5))
switch (stage) {
case 0:
setStage('nothing-happened')
break;
case 1:
setStage('right-column-shown')
break;
case 3:
setStage('item-1-shown')
break;
case 4:
setStage('item-2-shown')
break;
case 5:
setStage('item-3-shown')
break;
case 6:
setStage('item-4-shown')
break;
case 7:
setStage('item-5-shown')
break;
case 8:
setStage('item-6-shown')
break;
}
})
function setStage(name) {
document.body.dataset.stage = name
}
* {
margin: 0;
padding: 0;
}
body {
height: 400vh;
}
ul {
list-style: none;
}
.wrapper {
position: fixed;
top: 0;
height: 100vh;
width: 100%;
}
.container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.container__column {
position: absolute;
right: 0;
top: 0;
height: 100%;
}
.container__column_left {
width: 100%;
background-color: #7c19dd;
}
.container__column_right {
width: 60%;
font-size: calc(3vw + 2vh);
font-weight: bold;
background-color: #ff7ac0;
color: #c228e8;
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
perspective: 1000px;
transition: 1s;
transform: translateX(90%);
}
.list {
--list-ty-initial: 30%;
--list-ty: var(--list-ty-initial);
transition: 1s;
transform: rotateZ(-55deg) rotateX(19deg) rotateY(37deg) translateY(var(--list-ty));
}
.list__item {
--item-name-tx: 0;
--item-icon-tx: 0;
--item-icon-s: 1;
--item-opacity: 0;
--item-s: 0;
--middle-s: 0.6;
--middle-opacity: 0.6;
--small-s: 0.3;
--small-opacity: 0.3;
--active-x: 2vw;
--passive-x: 6vw;
display: flex;
align-items: center;
margin-bottom: 6vh;
transition: 0.5s;
transform-origin: right;
opacity: var(--item-opacity);
transform: scale(var(--item-s));
}
.list__item__name {
margin-right: 1vw;
flex-grow: 1;
transition: 0.5s;
transform: translateX(var(--item-name-tx));
}
.list__item__icon {
width: calc(3vw + 3vh);
height: calc(3vw + 3vh);
background-color: white;
border-radius: 50%;
transition: 0.5s;
transform: translateX(var(--item-icon-tx)) scale(var(--item-icon-s));
}
[data-stage]:not([data-stage="nothing-happened"]) .container__column_right {
transform: translateX(0);
}
[data-stage="item-1-shown"] .list {
--list-ty: calc(var(--list-ty-initial) - 10%);
}
[data-stage="item-2-shown"] .list {
--list-ty: calc(var(--list-ty-initial) - 20%);
}
[data-stage="item-3-shown"] .list {
--list-ty: calc(var(--list-ty-initial) - 30%);
}
[data-stage="item-4-shown"] .list {
--list-ty: calc(var(--list-ty-initial) - 40%);
}
[data-stage="item-5-shown"] .list {
--list-ty: calc(var(--list-ty-initial) - 50%);
}
[data-stage="item-6-shown"] .list {
--list-ty: calc(var(--list-ty-initial) - 60%);
}
/* 1 итем */
[data-stage="item-1-shown"] .list__item_1,
[data-stage="right-column-shown"] .list__item_1 {
--item-name-tx: calc(-1 * var(--active-x));
--item-icon-tx: var(--active-x);
--item-icon-s: 1.4;
--item-opacity: 1;
--item-s: 1;
}
[data-stage="item-1-shown"] .list__item_2,
[data-stage="right-column-shown"] .list__item_2 {
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
[data-stage="item-1-shown"] .list__item_3,
[data-stage="right-column-shown"] .list__item_3 {
--item-opacity: var(--small-opacity);
--item-s: var(--small-s);
}
/* 2 итем */
[data-stage="item-2-shown"] .list__item_2 {
--item-name-tx: calc(-1 * var(--active-x));
--item-icon-tx: var(--active-x);
--item-icon-s: 1.4;
--item-opacity: 1;
--item-s: 1;
}
[data-stage="item-2-shown"] .list__item_1 {
--item-name-tx: calc(-1 * var(--passive-x));
--item-icon-tx: var(--passive-x);
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
[data-stage="item-2-shown"] .list__item_3 {
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
[data-stage="item-2-shown"] .list__item_4 {
--item-opacity: var(--small-opacity);
--item-s: var(--small-s);
}
/* 3 итем */
[data-stage="item-3-shown"] .list__item_3 {
--item-name-tx: calc(-1 * var(--active-x));
--item-icon-tx: var(--active-x);
--item-icon-s: 1.4;
--item-opacity: 1;
--item-s: 1;
}
[data-stage="item-3-shown"] .list__item_2 {
--item-name-tx: calc(-1 * var(--passive-x));
--item-icon-tx: var(--passive-x);
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
[data-stage="item-3-shown"] .list__item_4 {
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
[data-stage="item-3-shown"] .list__item_5 {
--item-opacity: var(--small-opacity);
--item-s: var(--small-s);
}
/* 4 итем */
[data-stage="item-4-shown"] .list__item_4 {
--item-name-tx: calc(-1 * var(--active-x));
--item-icon-tx: var(--active-x);
--item-icon-s: 1.4;
--item-opacity: 1;
--item-s: 1;
}
[data-stage="item-4-shown"] .list__item_3 {
--item-name-tx: calc(-1 * var(--passive-x));
--item-icon-tx: var(--passive-x);
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
[data-stage="item-4-shown"] .list__item_5 {
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
[data-stage="item-4-shown"] .list__item_6 {
--item-opacity: var(--small-opacity);
--item-s: var(--small-s);
}
/* 5 итем */
[data-stage="item-5-shown"] .list__item_5 {
--item-name-tx: calc(-1 * var(--active-x));
--item-icon-tx: var(--active-x);
--item-icon-s: 1.4;
--item-opacity: 1;
--item-s: 1;
}
[data-stage="item-5-shown"] .list__item_4 {
--item-name-tx: calc(-1 * var(--passive-x));
--item-icon-tx: var(--passive-x);
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
[data-stage="item-5-shown"] .list__item_6 {
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
/* 6 итем */
[data-stage="item-6-shown"] .list__item_6 {
--item-name-tx: calc(-1 * var(--active-x));
--item-icon-tx: var(--active-x);
--item-icon-s: 1.4;
--item-opacity: 1;
--item-s: 1;
}
[data-stage="item-6-shown"] .list__item_5 {
--item-name-tx: calc(-1 * var(--passive-x));
--item-icon-tx: var(--passive-x);
--item-opacity: var(--middle-opacity);
--item-s: var(--middle-s);
}
<body>
<div class="wrapper">
<div class="container">
<div class="container__column container__column_left"></div>
<div class="container__column container__column_right">
<ul class="list">
<li class="list__item list__item_1">
<span class="list__item__name">Chat</span>
<span class="list__item__icon"></span>
</li>
<li class="list__item list__item_2">
<span class="list__item__name">Audio</span>
<span class="list__item__icon"></span>
</li>
<li class="list__item list__item_3">
<span class="list__item__name">Video</span>
<span class="list__item__icon"></span>
</li>
<li class="list__item list__item_4">
<span class="list__item__name">SMS</span>
<span class="list__item__icon"></span>
</li>
<li class="list__item list__item_5">
<span class="list__item__name">Phone</span>
<span class="list__item__icon"></span>
</li>
<li class="list__item list__item_6">
<span class="list__item__name">Social</span>
<span class="list__item__icon"></span>
</li>
</ul>
</div>
</div>
</div>
</body>
Вряд ли во всей этой каше переменных можно что-либо понять, но тут та же самая идея с различными состояниями страницы как и в примере выше.
Основа
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
.wrapper {
position: fixed;
top: 0;
height: 100vh;
width: 100%;
}
.container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.container__column {
position: absolute;
right: 0;
top: 0;
height: 100%;
}
.container__column_left {
width: 100%;
background-color: #7c19dd;
}
.container__column_right {
width: 60%;
background-color: #ff7ac0;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}
.list {
width: 50%;
height: 50%;
transition: 1s;
transform: rotateZ(-55deg) rotateX(19deg) rotateY(37deg);
background-color: tomato;
}
<div class="wrapper">
<div class="container">
<div class="container__column container__column_left"></div>
<div class="container__column container__column_right">
<ul class="list"></ul>
</div>
</div>
</div>
Тут можно посидеть и накрутить более похожий угол наклона
-
2
-
@hu-fo Замечательно, очень понравилось. Код ещё не смотрел подробно, но результат впечатляет 24 апр 2020 в 4:07
Ещё один маленький пример. Рисуем контур фигуры. Для этого нам потребуется небольшой код JavaScript и фигура SVG. Атрибут d
нам предоставит возможность определения пути для рисования.
//Рисуем контур фигуры
var stack = document.getElementById('stack');
var meet = document.getElementById('meet');
var scrolling = document.getElementById("scrolling");
var length = scrolling.getTotalLength();
scrolling.style.strokeDasharray = length;
scrolling.style.strokeDashoffset = length;
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollactive = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollactive;
scrolling.style.strokeDashoffset = length - draw;
}
//Запускаем событие когда доскролили до конца страницы
window.onscroll = function() {
var clientHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
var documentHeight = document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight;
var scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
if ((documentHeight - clientHeight) <= scrollTop) {
meet.classList.add('meet__active');
stack.classList.add('stack__active');
} else {
meet.classList.remove('meet__active');
stack.classList.remove('stack__active');
}
}
body {
height: 4000px;
background: lightpink;
}
svg {
position: fixed;
width: 100%;
height: 100%;
fill: lightpink;
}
.meet__active {
animation: background 1.25s linear infinite;
}
@keyframes background {
0% {
fill: url(#gradient__one);
}
50% {
fill: url(#gradient__two);
}
100% {
fill: url(#gradient__three);
}
}
.stack {
position: fixed;
top: 45%;
left: 15px;
right: 0;
text-align: center;
color: palevioletred;
font-size: 1px;
opacity: 0;
font-family: sans-serif;
transition: font-size 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.stack__active {
opacity: 1;
font-size: 1em;
animation: color 1.25s linear infinite;
}
@keyframes color {
0% {
color: white;
}
100% {
color: palevioletred;
}
}
<svg id="meet" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path id="scrolling" preserveAspectRatio="xMinYMin meet" stroke="white" stroke-miterlimit="10" stroke-width="1"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
<style type="text/css">
rect{fill:url(#MyGradient)}
</style>
<defs>
<linearGradient id="gradient__one">
<stop offset="5%" stop-color="pink" />
<stop offset="50%" stop-color="lightpink" />
<stop offset="95%" stop-color="white" />
</linearGradient>
<linearGradient id="gradient__two">
<stop offset="5%" stop-color="lightpink" />
<stop offset="50%" stop-color="white" />
<stop offset="95%" stop-color="pink" />
</linearGradient>
<linearGradient id="gradient__three">
<stop offset="5%" stop-color="white" />
<stop offset="50%" stop-color="pink" />
<stop offset="95%" stop-color="lightpink" />
</linearGradient>
</defs>
</svg>
<div id="stack" class="stack">Stack Overflow</div>