https://myfirstparallax.netlify.com/
Я искал во всем Интернете решение для устранения задержки, с которой я сталкиваюсь при прокрутке изображений, и ни одно из них, кажется, не помогает объяснить, почему прокрутка параллаксом вызывает задержку,Это потому, что размер изображения слишком велик?Примечание: я знаю, мой сайт достойен крайности, не судите.
body, html{
height:100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height:1.8em;
color:#666;
}
/* ---------------------------------------------------------*/
p{
font-sizes: 5em;
}
.name{
font-family: 'Montserrat', sans-serif;
font-size: 60px;
font-weight:normal;
margin-right: 135px;
margin-top: 14px;
padding-left: 20px;
color: white;
}
.main-nav{
font-family: 'Roboto Condensed', sans-serif;
font-size:23px;
list-style-type: none;
opacity: 0.9;
margin: 0;
padding: 0;
padding-top:10px;
overflow: hidden;
background-color: #333;
height: 64px;
display:flex;
flex-direction: row;
border: 2px solid aqua
background-image:url('../image/image1.jpg');
}
.main-nav:nth-child(4) {
order: 1;
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width:180px;
transition-duration: 0.4s, 0.8s, 0.4s;
transition-property: background, border-radius, color;
}
li a:hover {
background-color: #111;
border-radius: 5px;
width:180px;
overflow: hidden;
color: #fff;
background: #4a89ca;
border-radius: 1em;
}
/* ---------------------------------------------------------*/
.pimg1,
.pimg2,
.pimg3,
.pimg4{
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
/* Now is where the parallax Effect Begin */
}
.pimg1{
background-image:url('../image/image1.jpg');
min-height: 590px;
}
.pimg2{
background-image:url('../image/image2.jpg');
min-height: 600px;
}
.pimg3{
background-image:url('../image/image3.jpg');
min-height: 400px;
}
.pimg4{
background-image:url('../image/image4.jpg');
min-height: 600px;
}
.section{
text-align: center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color: #666;
}
.section-dark {
background-color: #282e34;
color: #ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#000;
font-size:27px;
letter-spacing: 8px;
text-transform: uppercase;
justify-content: center;
display: flex;
align-items: center;
line-height: 41px;
}
.ptext-2{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#000;
font-size:27px;
letter-spacing: 8px;
text-transform: uppercase;
justify-content: center;
display: flex;
align-items: center;
line-height: 41px;
}
.ptext-2 .border-2{
background-color:#111;
color: #fff;
margin-top: -35px;
padding: 20px;
border-radius: 5px;
}
.ptext .border{
background-color:#111;
padding: 20px;
border-radius: 5px;
}
.text-1{
margin-top: -56px;
}
.ptext .border.trans{
background-color: transparent;
}
.grid-1{
background-image:url('../image/grid1.jpg');
height: 350px;
width: 450px;
background-position: center;
background-size: cover;
}
.grid-2{
background-image:url('../image/grid2.jpg');
height: 350px;
width: 450px;
background-position: center;
background-size: cover;
}
.grid-3{
background-image:url('../image/grid3.jpg');
height: 350px;
width: 450px;
background-position: center;
background-size: cover;
}
.grid-4{
background-image:url('../image/grid4.jpg');
height: 350px;
width: 450px;
background-position: center;
background-size: cover;
}
.grid-5{
background-image:url('../image/grid5.jpg');
height: 350px;
width: 450px;
background-position: center;
background-size: cover;
}
.grid-6{
background-image:url('../image/grid6.jpg');
height: 350px;
width: 450px;
background-position: center;
background-size: cover;
}
.cool-image{
text-align: center;
padding: 1px 20px;
}
.pict-1{
margin-bottom: -8px;
margin-top: 12px;
}
.pict-2{
text-align:center;
}
.contacts{
list-style-type:none;
display: inline;
float:right;
}
.contacts-2{
list-style-type:none;
display: inline;
float:left;
}
.contacts-3{
list-style-type:none;
display: inline;
text-align:center;
margin-top:10px;
}
.quick-fix{
padding-bottom:60px;
}
.font-2{
color: #fff;
}
.font-4{
font-family: 'Gloria Hallelujah', cursive;
color: black;
}
.font-5{
font-family: 'Montserrat', sans-serif;
}
@media(max-width:568px){
.pimg1,
.pimg2,
.pimg3{
background-attachment: scroll;
}
.text-1{
margin-top: -140px;
}
.grid-1{
margin-left: -70px;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parallax Website Demo</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<ul class="main-nav">
<h1 class="name">The Purity of Css</h1>
<li><a class="active" href="#home">Home</a></li>
<li><a href="second-page.html">Inspiration</a></li>
<li><a href="second-page.html">Movie</a></li>
<li><a href="second-page.html">Other</a></li>
</ul>
</header>
<!--------------------------------------------------->
<div class="pimg1">
<div class="ptext font-2">
<span class="border">
Where do you see yourself in 5 years?
</span>
</div>
</div>
<section class="section section-light">
<h2>Section One</h2>
<p>
As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet
the demands of web developers. This evolution gave the designer more control over
site appearance, at the cost of more complex HTML. Variations in web browser
implementations, such as ViolaWWW and WorldWideWeb, made consistent site
appearance difficult, and users had less control over how web content was displayed.
The browser/editor developed by Tim Berners-Lee had style sheets that were hard-coded into
the program. The style sheets could therefore not be linked to documents on the web.
Robert Cailliau, also of CERN, wanted to separate the structure from the presentation so that
different style
sheets could describe different presentation for printing, screen-based presentations,
and editors. - Wikipedea
</p>
</section>
<!--------------------------------------------------->
<div class="pimg2">
<div class="ptext">
<span class="border trans font-2">
Will you be partying with friends?
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section Two</h2>
<p>
Tomorrowland is an electronic dance music festival held in Boom, Belgium. Tomorrowland was first held in 2005 and has since become one of the world's largest and most notable music festivals.
It now stretches over 2 weekends and usually sells out in minutes. - Wikipedia
</p>
</section>
<!--------------------------------------------------->
<div class="pimg3">
<div class="text-1 ptext font-4">
<span class="border trans">
Traveling the world and living life?
</span>
</div>
</div>
<section class="section section-light">
<h2>Section Three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<!--------------------------------------------------->
<div class="pimg4">
<div class="ptext-2 font-5">
<span class="border-2">
Or maybe following the footsteps of
scholars before you
</span>
</div>
</div>
<!--------------------------------------------------->
<section class="section-light cool-image quick-fix">
<h2 class="pict-1">A collection of beautiful places</h2>
<p class="pict-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
</p>
<img class="grid-1">
<img class="grid-2">
<img class="grid-3">
<img class="grid-4">
<img class="grid-5">
<img class="grid-6">
</section>
<!--------------------------------------------------------->
<p class="pict-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
</p>
<ol class="contacts">
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>
<ol class="contacts-2">
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>
<ol class="contacts-3">
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>
</body>
</html>