Как сделать меняющийся с прокруткой фон

@trofey2 · Регистрация: 28.12.2015

Студворк — интернет-сервис помощи студентам

добрый день. решил попрактиковаться и поделать страницы с сайта https://www.frontendpractice.com
подскажите как в css сделать фон как на этой странице https://www.goabstract.com?
чтобы он менялся в зависимости от скролла как на этой странице

@trofey2 · 06.08.2025, 15:56 **[ТС]**

попробовал сделать с помощью position: fixed

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
    <style>
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        .background-black {
            background-color: black;
            width: 100%;
            height: 1200px;
            position: relative;
        }
        .background-purple {
            background-color: #dadbf1;
            width: 100%;
            height: 1000px;
            position: fixed;
            top: 600px;
            
        }
        .biggest-black {
            padding-top: 200px;
            font: 600 80px "Merriweather", serif;
            color: white;
        }
        .biggest-purple {
            padding-top: 200px;
            font: 400 60px "Merriweather", serif;
            color: black;
        }
    </style>
</head>
<body>
    <div class="background-black">
        <h1 class="biggest-black">True version<br> control for<br> Sketch files</h1>
    </div>
    <div class="background-purple">
<h1 class="biggest-purple">Design collaboration shouldn’t<br> be extra work</h1>
    </div>
</body>
</html>

но тогда этот черный фиолетовый блок закрепляется на странице. position: sticky тоже не получается
как это лучше делать? без java script не получится?

@rr33rr · 06.08.2025, 18:26

Сообщение от trofey2

Как сделать меняющийся с прокруткой фон

Смотрите в сторону "parallax scrolling" оно же "эффект параллакса".

Достигается за счёт разной скорости движения элементов.

Например:
* Задний слой движется медленнее, чем передний.
* Манипуляция с translateZ(), меняющая расстояние до элементов.
* Игра с масштабом

Пример несложного параллакса (для фиксированных фоновых изображений) на чистом CSS: parallax.zip

Более сложная анимация или взаимодействие с элементами на странице реализуется уже с JS.

@trofey2 · 13.08.2025, 15:11 **[ТС]**

rr33rr, спасибо, я понял как сделать чтобы надписи скороллились а фон оставался неподвижным как в том файле что вы приложили.
но как сделать, чтобы оставался неподвижным фон и еще какой-нибудь div с текстом?

@rr33rr · 13.08.2025, 23:22

Сообщение от trofey2

как сделать, чтобы оставался неподвижным фон и еще какой-нибудь div с текстом?

Не очень понятно, что вы хотите получить. Приводите пример скриншотами, что, где и когда должно быть подвижно/неподвижно.

Возможно вам подойдет что-то вроде такого:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS parallax</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    margin: 0;
    box-sizing: border-box;
}
 
.section {
    position: relative;
    min-height: 100vh;
}
.section_image {
    position: sticky;
    top: 0;
    min-height: 100vh;
    background: 50% 50% no-repeat;
    background-size: cover;
}
.section_content {
    position: relative;
    margin-top: -100vh;
    min-height: 100vh;
    font: 1.5em/1.5 Arial;
    padding: 1.5em 0;
}
.section_content > :last-child {
    margin-bottom: 0;
}
 
.bg-1 {
    background: url("img/1.jpg");
}
 
.bg-2 {
    background: url("img/2.jpg");
}
 
.bg-3 {
    background: url("img/3.jpg");
}
 
.row-main {
    max-width: 30vw;
    padding: 1.5em;
    margin: 0 auto;
    background: #000c;
    color: #fff;
}
.row-main p {
    margin-bottom: 1.5em;
}
</style>
</head>
<body>
<div class="section">
    <div class="section_image bg-1"></div>
    <div class="section_content">
        <div class="row-main">
            <h2>First Section</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Semper vel class aptent taciti sociosqu ad litora. Blandit quis suspendisse aliquet nisi sodales consequat magna. Cras eleifend turpis fames primis vulputate ornare sagittis. Sem placerat in id cursus mi pretium tellus. Orci varius natoque penatibus et magnis dis parturient. Finibus facilisis dapibus etiam interdum tortor ligula congue. Proin libero feugiat tristique accumsan maecenas potenti ultricies. Sed diam urna tempor pulvinar vivamus fringilla lacus. Eros lobortis nulla molestie mattis scelerisque maximus eget. Porta elementum a enim euismod quam justo lectus. Curabitur facilisi cubilia curae hac habitasse platea dictumst. Nisl malesuada lacinia integer nunc posuere ut hendrerit. Efficitur laoreet mauris pharetra vestibulum fusce dictum risus. Imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida. Adipiscing elit quisque faucibus ex sapien vitae pellentesque.
            </p>
            <p>
                Ad litora torquent per conubia nostra inceptos himenaeos. Consequat magna ante condimentum neque at luctus nibh. Ornare sagittis vehicula praesent dui felis venenatis ultrices. Pretium tellus duis convallis tempus leo eu aenean. Dis parturient montes nascetur ridiculus mus donec rhoncus. Ligula congue sollicitudin erat viverra ac tincidunt nam. Potenti ultricies habitant morbi senectus netus suscipit auctor. Fringilla lacus nec metus bibendum egestas iaculis massa. Maximus eget fermentum odio phasellus non purus est. Justo lectus commodo augue arcu dignissim velit aliquam. Platea dictumst lorem ipsum dolor sit amet consectetur. Ut hendrerit semper vel class aptent taciti sociosqu. Dictum risus blandit quis suspendisse aliquet nisi sodales. Rutrum gravida cras eleifend turpis fames primis vulputate.
            </p>
            <p>
                Vitae pellentesque sem placerat in id cursus mi. Inceptos himenaeos orci varius natoque penatibus et magnis. Luctus nibh finibus facilisis dapibus etiam interdum tortor. Venenatis ultrices proin libero feugiat tristique accumsan maecenas. Eu aenean sed diam urna tempor pulvinar vivamus. Donec rhoncus eros lobortis nulla molestie mattis scelerisque. Tincidunt nam porta elementum a enim euismod quam. Suscipit auctor curabitur facilisi cubilia curae hac habitasse. Iaculis massa nisl malesuada lacinia integer nunc posuere. Purus est efficitur laoreet mauris pharetra vestibulum fusce. Velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper. Amet consectetur adipiscing elit quisque faucibus ex sapien. Taciti sociosqu ad litora torquent per conubia nostra. Nisi sodales consequat magna ante condimentum neque at. Primis vulputate ornare sagittis vehicula praesent dui felis. Cursus mi pretium tellus duis convallis tempus leo. Et magnis dis parturient montes nascetur ridiculus mus. Interdum tortor ligula congue sollicitudin erat viverra ac. Accumsan maecenas potenti ultricies habitant morbi senectus netus. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.
            </p>
        </div>
    </div>
</div>
<div class="section">
    <div class="section_image bg-2"></div>
    <div class="section_content">
        <div class="row-main">
            <h2>Second Section</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Semper vel class aptent taciti sociosqu ad litora. Blandit quis suspendisse aliquet nisi sodales consequat magna. Cras eleifend turpis fames primis vulputate ornare sagittis. Sem placerat in id cursus mi pretium tellus. Orci varius natoque penatibus et magnis dis parturient. Finibus facilisis dapibus etiam interdum tortor ligula congue. Proin libero feugiat tristique accumsan maecenas potenti ultricies. Sed diam urna tempor pulvinar vivamus fringilla lacus. Eros lobortis nulla molestie mattis scelerisque maximus eget. Porta elementum a enim euismod quam justo lectus. Curabitur facilisi cubilia curae hac habitasse platea dictumst. Nisl malesuada lacinia integer nunc posuere ut hendrerit. Efficitur laoreet mauris pharetra vestibulum fusce dictum risus. Imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida. Adipiscing elit quisque faucibus ex sapien vitae pellentesque.
            </p>
            <p>
                Ad litora torquent per conubia nostra inceptos himenaeos. Consequat magna ante condimentum neque at luctus nibh. Ornare sagittis vehicula praesent dui felis venenatis ultrices. Pretium tellus duis convallis tempus leo eu aenean. Dis parturient montes nascetur ridiculus mus donec rhoncus. Ligula congue sollicitudin erat viverra ac tincidunt nam. Potenti ultricies habitant morbi senectus netus suscipit auctor. Fringilla lacus nec metus bibendum egestas iaculis massa. Maximus eget fermentum odio phasellus non purus est. Justo lectus commodo augue arcu dignissim velit aliquam. Platea dictumst lorem ipsum dolor sit amet consectetur. Ut hendrerit semper vel class aptent taciti sociosqu. Dictum risus blandit quis suspendisse aliquet nisi sodales. Rutrum gravida cras eleifend turpis fames primis vulputate.
            </p>
            <p>
                Vitae pellentesque sem placerat in id cursus mi. Inceptos himenaeos orci varius natoque penatibus et magnis. Luctus nibh finibus facilisis dapibus etiam interdum tortor. Venenatis ultrices proin libero feugiat tristique accumsan maecenas. Eu aenean sed diam urna tempor pulvinar vivamus. Donec rhoncus eros lobortis nulla molestie mattis scelerisque. Tincidunt nam porta elementum a enim euismod quam. Suscipit auctor curabitur facilisi cubilia curae hac habitasse. Iaculis massa nisl malesuada lacinia integer nunc posuere. Purus est efficitur laoreet mauris pharetra vestibulum fusce. Velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper. Amet consectetur adipiscing elit quisque faucibus ex sapien. Taciti sociosqu ad litora torquent per conubia nostra. Nisi sodales consequat magna ante condimentum neque at. Primis vulputate ornare sagittis vehicula praesent dui felis. Cursus mi pretium tellus duis convallis tempus leo. Et magnis dis parturient montes nascetur ridiculus mus. Interdum tortor ligula congue sollicitudin erat viverra ac. Accumsan maecenas potenti ultricies habitant morbi senectus netus. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.
            </p>
        </div>
    </div>
</div>
<div class="section">
    <div class="section_image bg-3"></div>
    <div class="section_content">
        <div class="row-main">
            <h2>Third Section</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Semper vel class aptent taciti sociosqu ad litora. Blandit quis suspendisse aliquet nisi sodales consequat magna. Cras eleifend turpis fames primis vulputate ornare sagittis. Sem placerat in id cursus mi pretium tellus. Orci varius natoque penatibus et magnis dis parturient. Finibus facilisis dapibus etiam interdum tortor ligula congue. Proin libero feugiat tristique accumsan maecenas potenti ultricies. Sed diam urna tempor pulvinar vivamus fringilla lacus. Eros lobortis nulla molestie mattis scelerisque maximus eget. Porta elementum a enim euismod quam justo lectus. Curabitur facilisi cubilia curae hac habitasse platea dictumst. Nisl malesuada lacinia integer nunc posuere ut hendrerit. Efficitur laoreet mauris pharetra vestibulum fusce dictum risus. Imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida. Adipiscing elit quisque faucibus ex sapien vitae pellentesque.
            </p>
            <p>
                Ad litora torquent per conubia nostra inceptos himenaeos. Consequat magna ante condimentum neque at luctus nibh. Ornare sagittis vehicula praesent dui felis venenatis ultrices. Pretium tellus duis convallis tempus leo eu aenean. Dis parturient montes nascetur ridiculus mus donec rhoncus. Ligula congue sollicitudin erat viverra ac tincidunt nam. Potenti ultricies habitant morbi senectus netus suscipit auctor. Fringilla lacus nec metus bibendum egestas iaculis massa. Maximus eget fermentum odio phasellus non purus est. Justo lectus commodo augue arcu dignissim velit aliquam. Platea dictumst lorem ipsum dolor sit amet consectetur. Ut hendrerit semper vel class aptent taciti sociosqu. Dictum risus blandit quis suspendisse aliquet nisi sodales. Rutrum gravida cras eleifend turpis fames primis vulputate.
            </p>
            <p>
                Vitae pellentesque sem placerat in id cursus mi. Inceptos himenaeos orci varius natoque penatibus et magnis. Luctus nibh finibus facilisis dapibus etiam interdum tortor. Venenatis ultrices proin libero feugiat tristique accumsan maecenas. Eu aenean sed diam urna tempor pulvinar vivamus. Donec rhoncus eros lobortis nulla molestie mattis scelerisque. Tincidunt nam porta elementum a enim euismod quam. Suscipit auctor curabitur facilisi cubilia curae hac habitasse. Iaculis massa nisl malesuada lacinia integer nunc posuere. Purus est efficitur laoreet mauris pharetra vestibulum fusce. Velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper. Amet consectetur adipiscing elit quisque faucibus ex sapien. Taciti sociosqu ad litora torquent per conubia nostra. Nisi sodales consequat magna ante condimentum neque at. Primis vulputate ornare sagittis vehicula praesent dui felis. Cursus mi pretium tellus duis convallis tempus leo. Et magnis dis parturient montes nascetur ridiculus mus. Interdum tortor ligula congue sollicitudin erat viverra ac. Accumsan maecenas potenti ultricies habitant morbi senectus netus. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.
            </p>
        </div>
    </div>
</div>
</body>
</html>

Архив примера с использованными изображениями: parallax2.zip

Или вроде такого:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html>
<head>
<style>
* {
  margin: 0;
  box-sizing: border-box;
}
.stacking-slide {
  height: 100vh;
  position: sticky;
  top: 0;
 
  padding: 50px;
  margin: 0 20px;
  width: calc(100% - 40px);
  border-radius: 50px;
}
.stacking-slide h2 {
  margin-bottom: 1rem;
}
.stacking-slide p {
  margin-bottom: 1rem;
}
.stacking-slide:nth-child(1) {
  background: #cc9;
}
.stacking-slide:nth-child(2) {
  background: #c9c;
}
.stacking-slide:nth-child(3) {
  background: #c99;
}
.stacking-slide:nth-child(4) {
  background: #9cc;
}
.stacking-slide:nth-child(5) {
  background: #9c9;
}
</style>
</head>
<body>
<section class="stacking-slide">
  <h2>Section 1</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipiscing elit. Facilisis dapibus etiam interdum tortor ligula congue sollicitudin. Lacinia integer nunc posuere ut hendrerit semper vel. Praesent dui felis venenatis ultrices proin libero feugiat. Phasellus non purus est efficitur laoreet mauris pharetra. Id cursus mi pretium tellus duis convallis tempus.
  </p>
  <p>
    Euismod quam justo lectus commodo augue arcu dignissim. Nostra inceptos himenaeos orci varius natoque penatibus et. Suscipit auctor curabitur facilisi cubilia curae hac habitasse. Sodales consequat magna ante condimentum neque at luctus. Fringilla lacus nec metus bibendum egestas iaculis massa. Gravida cras eleifend turpis fames primis vulputate ornare. Eros lobortis nulla molestie mattis scelerisque maximus eget.
  </p>
</section>
<section class="stacking-slide">
  <h2>Section 2</h2>
  <p>
    Elit quisque faucibus ex sapien vitae pellentesque sem. Sollicitudin erat viverra ac tincidunt nam porta elementum. Vel class aptent taciti sociosqu ad litora torquent.
  </p>
  <p>
    Feugiat tristique accumsan maecenas potenti ultricies habitant morbi. Pharetra vestibulum fusce dictum risus blandit quis suspendisse. Tempus leo eu aenean sed diam urna tempor. Dignissim velit aliquam imperdiet mollis nullam volutpat porttitor.
  </p>
</section>
<section class="stacking-slide">
  <h2>Section 3</h2>
  <p>
    Et magnis dis parturient montes nascetur ridiculus mus. Habitasse platea dictumst lorem ipsum dolor sit amet. Luctus nibh finibus facilisis dapibus etiam interdum tortor. Massa nisl malesuada lacinia integer nunc posuere ut.
  </p>
  <p>
    Ornare sagittis vehicula praesent dui felis venenatis ultrices. Eget fermentum odio phasellus non purus est efficitur. Sem placerat in id cursus mi pretium tellus.
  </p>
</section>
<section class="stacking-slide">
  <h2>Section 4</h2>
  <p>
    Elementum a enim euismod quam justo lectus commodo. Torquent per conubia nostra inceptos himenaeos orci varius. Morbi senectus netus suscipit auctor curabitur facilisi cubilia.
  </p>
  <p>
    Suspendisse aliquet nisi sodales consequat magna ante condimentum. Tempor pulvinar vivamus fringilla lacus nec metus bibendum. Porttitor ullamcorper rutrum gravida cras eleifend turpis fames. Mus donec rhoncus eros lobortis nulla molestie mattis.
  </p>
  <p>
    Amet consectetur adipiscing elit quisque faucibus ex sapien. Tortor ligula congue sollicitudin erat viverra ac tincidunt.
  </p>
</section>
<section class="stacking-slide">
  <h2>Section 5</h2>
  <p>
    Ut hendrerit semper vel class aptent taciti sociosqu. Ultrices proin libero feugiat tristique accumsan maecenas potenti. Efficitur laoreet mauris pharetra vestibulum fusce dictum risus. Tellus duis convallis tempus leo eu aenean sed.
  </p>
  <p>
    Commodo augue arcu dignissim velit aliquam imperdiet mollis. Varius natoque penatibus et magnis dis parturient montes. Cubilia curae hac habitasse platea dictumst lorem ipsum. Condimentum neque at luctus nibh finibus facilisis dapibus.
  </p>
</section>
</body>
</html>

@trofey2 · 14.08.2025, 14:47 **[ТС]**

rr33rr, да вот надо почти как в вашем последнем примере, только так чтобы в какой-то момент фоны переставали наезжать друг на друга и начинали скроллится вместе. короче говоря как тут - https://www.goabstract.com/

@AlexZaw · 14.08.2025, 15:23

Сообщение от trofey2

подскажите как в css сделать фон как на этой странице

А что мешает посмотреть как это сделано на самой странице?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section class="hero z-10">
  Hero block
</section>
<div class="section-header sticky z-9 bg">
  <h2>Section 1 header</h2>
  Header 1 content
</div>
<section class="s1 z-9">
  Section 1 content
</section>
<div class="section-header sticky z-8">
  <h2>Section 2 header</h2>
  Header 2 content
</div>
<section class="s2  z-8">
  Section 2 content
</section>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body {
  margin: 0;
}
section {
  position: relative;
  min-height: 100vh;
}
.hero {
  background: wheat;
}
.s1 {
  background: tomato;
}
.s2 {
  background: olive;
}
.sticky {
  position: sticky;
  bottom: 0;
}
.section-header {
  padding: 200px 0;
}
.z-10 {
  z-index: 10;
}
.z-9 {
  z-index: 9;
}
.z-8 {
  z-index: 8;
}
.bg {
  background: plum;
}

@trofey2 · 20.08.2025, 14:00 **[ТС]**

Сообщение от AlexZaw

А что мешает посмотреть как это сделано на самой странице?

да я что-то с этими девтулз никак толком не научусь работать, там все так сложно на этих сайтах сделано, что я не могу разобраться в коде

AlexZaw, спасибо большое, очень красиво получилось по вашему коду, только один вопрос остался - а можно сделать так чтобы верхний фон уезжал на верх не до самого конца и после этого страница скроллилась, а немного еще верхнего фона оставалось на виду, и тогда этот эффект параллакса прекращался и два фона неподвижно скроллились дальше, как будто это была бы обычная страница? короче говоря как тут - www.goabstract.com/

@AlexZaw · 20.08.2025, 14:19

Сообщение от trofey2

короче говоря как тут

Так оно в точности как там и работает.

@trofey2 · 21.08.2025, 11:33 **[ТС]**

AlexZaw, странно у меня оно немного не так работает, хотя все вроде как у вас сделано.

не посмотрите у меня на странице может что не так если вас не затруднит? прикладываю архив

@AlexZaw · 21.08.2025, 13:34

Сообщение от trofey2

хотя все вроде как у вас сделано.

Сравните разметку. У меня, как и в оригинале, перед каждой секцией начиная со второй есть отдельный, див "заголовок" с высотой меньше чем высота вьюпорта, который является соседним элементом следующей за ним секции с контентом. При скролле страницы предыдущая секция как бы начинает тянуть за верхнюю границу этого заголовка в тот момент когда низ секции достигает верха заголовка.
У вас же всего три элемента на странице каждый из которых (при Full HD разрешении или меньше) занимает всю высоту вьюпорта и координаты верха каждой секции находится на самом верху.
А если точнее, то верх секций у вас даже выше верхнего края, так как из-за того, что высота секций больше высоты вьюпорта то при скролле страницы все секции c position:sticky; начинают двигаться стремясь выровняться по указанным координатам bottom:0;, и верхняя граница секций уезжает за верхние границы вьюпорта.
Ну а так как секция начинает двигаться только тогда, когда предыдущая секция "потянет" ее за собой, а верх за который тянут находится за верхней границей вьюпорта, то у вас ничего и не работает. Если вы уменьшите масштаб так чтобы ваши секции стали по высоте меньше чем высота вьюпорта или откроете страничку на мониторе с большим разрешением, то тоже все будет работать нормально.

Надеюсь понятно объяснил.

@trofey2 · 25.08.2025, 11:56 **[ТС]**

AlexZaw,

Сообщение от AlexZaw

Ну а так как секция начинает двигаться только тогда, когда предыдущая секция "потянет" ее за собой, а верх за который тянут находится за верхней границей вьюпорта, то у вас ничего и не работает. Если вы уменьшите масштаб так чтобы ваши секции стали по высоте меньше чем высота вьюпорта или откроете страничку на мониторе с большим разрешением, то тоже все будет работать нормально.

но как я уменьшу высоту страниц, если они такие по высоте как и сайт - оригинал, там же с такой высотой как-то работает? и еще хотел сказать - я сделал в sticky вместо bottom: 0 bottom: -900 чтобы в последнем диве совсем высоком его верх не скрывался, это ничего страшого?

@AlexZaw · 25.08.2025, 14:33

Сообщение от trofey2

но как я уменьшу высоту страниц

Так не нужно уменьшать высоту страниц. Сделайте отдельный блок заголовок который будет меньшего размера и уже ему, а не секции целиком, задайте position: sticky;.

Сообщение от trofey2

оригинал, там же с такой высотой как-то работает?

Оригинал НЕ работает с такой высотой. Оригинал работает именно потому, что там сделаны отдельные невысокие заголовки секций.

Сообщение от trofey2

я сделал в sticky вместо bottom: 0 bottom: -900

А если завтра контента в этой секции станет больше, то опять будете менять? Ну и плюс в оригинале видно, как при скролле заголовок третьей секции стоит на месте внизу экрана и возникает эффект параллакса, а у вас же виден просто белый фон и секция скроллится как обычно. Хотя на самом деле это не так и эффект есть, но визуально он не заметен из-за того, что на экране у нас просто однотонный фон.

Добавлено через 9 минут
P.S. Т.е. заголовок секции должен быть не ее дочерним элементом, а ее соседом сверху. И тогда все у вас заработает.

@trofey2 · 26.08.2025, 11:25 **[ТС]**

AlexZaw, когда я сделал див заголовок (background-purple-title) и ему назначил sticky у меня вообще какая-то каша получилась, потыркался и никак не получается сделать. не посмотрите в моем файле что тут сделать можно?

@AlexZaw · 26.08.2025, 14:22

Сообщение от trofey2

у меня вообще какая-то каша получилась

Один заголовок ("Design collaboration shouldn’t be extra work") вы вынесли из секции, второй же ("Why design teams love️ Abstract") оставили внутри секции и липкое позиционирование применяете опять же для нее, из-за чего верх секции при скролле страницы успевает уехать за границы экрана до того, как скролл вообще дойдет до этой секции. Избавьтесь от фиксированной высоты секций и от отступов в несколько сотен пикселей у заголовков и секций. В большинстве случаев можно обойтись без таких огромных отступов и если вы их используете то, очень вероятно что вы что-то делаете не так.
У секции .z-9 не работает z-index (почитайте про контекст наложения чтобы понимать в каких случаях работает z-index) и ее перекрывает секция с z-index: 8;
Сделайте сначала просто статичную страничку без параллакса по описанной выше структуре - заголовок отдельно от секции. Так чтобы все элементы были на своем месте Потом уже можно будет добавить украшательства.
Или сделайте минималистичную тестовую страничку как в моем примере чтобы просто понять как это все работает, и потом уже примените полученные знания на практике.

@trofey2 · 27.08.2025, 13:47 **[ТС]**

Сообщение от AlexZaw

Избавьтесь от фиксированной высоты секций и от отступов в несколько сотен пикселей у заголовков и секций

фикс высоту сделал в авто, отступы уменьшил

Сообщение от AlexZaw

У секции .z-9 не работает z-index

вот про это не совсем понял, вроде у меня самая верхняя секция z-10, потом идет z-9 и так далее, что не так?

но в результате пурпурная секция какая-то странная получилась с белой полосой и заголовок на нее залез
короче опять каша какая-то, извините что так туго соображаю, но опять вам файл прикладываю, чтобы вы разобрались

@trofey2 · 01.09.2025, 13:23 **[ТС]**

Сообщение от AlexZaw

Или сделайте минималистичную тестовую страничку как в моем примере чтобы просто понять как это все работает

сделал. все вроде норм на ней, кроме того что заголовок на белом фоне (Why design teams love️ Abstract) вылезает вверх когда не должен. как его на место поставить?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
    <style>
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        section {
            position: relative;
            min-height: 100vh;
        }
        .section-header {
            padding: 10px 0;
        }
        .sticky {
            position: sticky;
            bottom: 0;
        }
        .background-black {
            background-color: black;
            width: 100%;
        }
        .background-purple {
            background-color: #dadbf1;
            width: 100%;
        }
        .background-purple-title {
            width: 100%;
            background-color: #dadbf1;
        }
        .white-background-title {
            width: 100%;
            background-color: #ffffff;
        }
        .z-10 {
            z-index: 10;
        }
        .z-9 {
            z-index: 9;
        }
        .z-8 {
            z-index: 8;
        }
        .z-7 {
            z-index: 7;
        }
        .biggest-black {
            padding-top: 50px;
            padding-left: 70px;
            font: 600 110px "Merriweather", serif;
            color: white;
        }
        .biggest-purple {
            padding-top: 50px;
            padding-left: 70px;
            font: 400 60px "Merriweather", serif;
            color: black;
        }
        .background-white-h2 {
            margin: 0 auto;
            margin-top: 50px;
            padding-left: 70px;
            padding-bottom: 70px;
            font: 500 70px "Merriweather", serif;
        }
        .background-white-h2-2 {
            text-align: center;
            margin-top: 50px;
            padding-left: 70px;
            font: 500 70px "Merriweather", serif;
        }
        .background-white-h3 {
            text-align: center;
            padding-top: 50px;
            padding-left: 70px;
            padding-bottom: 50px;
            font: 300 40px "Merriweather", serif;
        }
        .purple-flex {
            display: flex;
            padding-top: 50px;
            gap: 50px;
            padding-left: 70px;
            max-width: auto;
            padding-bottom: 100px;
        }
        .purple-flex-item h2 {
            font: 800 25px "Merriweather", serif;
            padding-bottom: 20px;
        }
        .purple-flex-item p {
            font: 400 17px "Merriweather", serif;
        }
        </style>
</head>
<body>
  <section class="background-black z-10">
    <h1 class="biggest-black">True version<br> control for<br> Sketch files</h1>
  </section>
  <div class="section-header sticky z-9 background-purple-title">
    <h1 class="biggest-purple">Design collaboration shouldn’t<br> be extra work</h1>
  </div>
  <div class="z-9 background-purple">
    <div class="purple-flex">
            <div class="purple-flex-item">
                <img src="img/ico-clock.svg" class="logo-purple">
                <h2>Less files. More flow.</h2>
                <p>No more digging through Dropbox and Google Drive. Always know where to find “the latest,” so you can stay in your design flow.</p>
            </div>
            <div class="purple-flex-item">
                <img src="img/ico-plant.svg" class="logo-purple">
                <h2>Design together, in real time.</h2>
                <p>Explore and iterate in the same file at the same time, without losing the original. Simply create a branch, do your thing, then merge your changes when ready.</p>
            </div>
            <div class="purple-flex-item">
                <img src="img/ico-sync.svg" class="logo-purple">
                <h2>Iterate with context.</h2>
                <p>Know who made changes, when, and why. Compare changes side by side, resolve design conflicts, and merge work with precision.</p>
            </div>
        </div>
  </div>
  <div class="section-header sticky z-8 white-background-title">
    <h2 class="background-white-h2">Why design teams love️ Abstract</h2><p>®</p>
  </div>
  <div class="z-8">
    <h2 class="background-white-h2-2">Dedicated to product designers</h2>
    <h3 class="background-white-h3">Get inspired by stories and resources from<br>the best product design leaders and teams.</h3>
  </div>
</body>
</html>

Добавлено через 11 минут
a понял, там надо было backgound-purple дать position: relative

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 225

	Как сделать меняющийся с прокруткой фон 04.08.2025, 14:24. Показов 1690. Ответов 16 Метки нет (Все метки) добрый день. решил попрактиковаться и поделать страницы с сайта https://www.frontendpractice.com подскажите как в css сделать фон как на этой странице https://www.goabstract.com? чтобы он менялся в зависимости от скролла как на этой странице 0

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 225
	13.08.2025, 15:11 [ТС]
	rr33rr, спасибо, я понял как сделать чтобы надписи скороллились а фон оставался неподвижным как в том файле что вы приложили. но как сделать, чтобы оставался неподвижным фон и еще какой-нибудь div с текстом? 0

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 225
	14.08.2025, 14:47 [ТС]
	rr33rr, да вот надо почти как в вашем последнем примере, только так чтобы в какой-то момент фоны переставали наезжать друг на друга и начинали скроллится вместе. короче говоря как тут - https://www.goabstract.com/ 0

Как сделать меняющийся с прокруткой фон

Решение