ARTICLE AD BOX
Using only CSS is somehow difficult; I actualy tried the best I ended up with this shot. This mainly uses animation-timeline: scroll() (still having Limited availability) and animation-range. (if using position:sticky slides don't move the same way as indicated website). I ended up adding remaining content in the last ' slide animation' to scroll with the previous and avoiding gap when separated. As far as I have seen what we can do with CSS these days I am sure somebody will be able to give a better full CSS solution.
.slider-container {
height: calc(var(--tot) * 100vh);
}
.slide {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100vh;
z-index: calc(var(--tot) - var(--i));
}
.slide img {
width: 100vw;
height: 100vh;
object-fit: cover;
}
.animation {
animation-name: slide;
animation-timeline: scroll();
animation-duration: 1s;
animation-fill-mode: both;
animation-range:
calc(var(--i) * 100% / var(--tot))
calc((var(--i) + 1) * 100% / var(--tot));
}
@keyframes slide {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
<body>
<div class="slider-container" style="--tot:3">
<div class="slide animation" style="--i:0;">
<div class="slide-inner">
<img src="https://picsum.photos/id/1015/1200/800">
</div>
</div>
<div class="slide animation" style="--i:1;">
<div class="slide-inner">
<img src="https://picsum.photos/id/1016/1200/800">
</div>
</div>
<div class="slide animation" style="--i:2;">
<div class="slide-inner">
<img src="https://picsum.photos/id/237/1200/800">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit vitae alias quaerat, placeat velit facilis autem voluptas repudiandae. Expedita ipsa obcaecati animi aut nemo autem voluptatibus libero ducimus. Nobis, quia.
Pariatur, repellendus. Enim expedita cupiditate inventore sint perspiciatis quos nam nulla itaque tempore iusto, magni, illo a natus doloribus accusantium, harum nihil omnis molestiae eveniet saepe ipsa aut ex esse.
Id temporibus, aliquid itaque nostrum, quod, sed distinctio modi ipsa dolores quidem nisi architecto a. Sequi, corporis. Voluptate ducimus consequatur rem veniam adipisci iure, quos error minus repellat rerum corrupti!
Ullam, temporibus debitis animi incidunt error atque cumque corporis, aliquid molestias dolor provident labore quam quis explicabo. Illo eveniet, laboriosam, nobis necessitatibus alias impedit magnam omnis quos quis recusandae quae.
Vitae minima ratione fugiat. Cum alias error harum quis aspernatur! Repellendus excepturi quae nulla possimus ipsa omnis iste eum illum ullam. Debitis iusto provident cum dolor atque minima fugiat sit.
Maiores nobis itaque modi perferendis. Fuga illo hic aperiam quae iste voluptatibus, odio consectetur ut quo, quisquam doloremque maiores ipsum reiciendis accusamus labore doloribus atque ratione aspernatur neque officiis commodi.
Eaque omnis reprehenderit aliquam nihil. Quod eum, incidunt consequuntur quaerat maiores quis aliquam itaque commodi, ex, fuga totam harum. Animi officia pariatur perspiciatis nesciunt nihil? Adipisci sit reprehenderit ratione libero?
Aspernatur dicta quisquam magnam! Deserunt distinctio natus minus, vitae eos, eveniet corporis hic iste et repudiandae voluptate impedit, aut similique? Esse suscipit veritatis in, voluptate non consequatur odit vitae aut?
Nihil, maiores in soluta assumenda facilis ullam, saepe laboriosam eos odit necessitatibus doloribus fugit possimus velit sequi earum eum numquam incidunt, architecto temporibus aut at perspiciatis. Ad mollitia commodi quibusdam.
Quis ipsa voluptates maxime iste ab numquam soluta fugiat eum excepturi officia exercitationem delectus facere animi culpa, recusandae id iusto perspiciatis nihil repellat! Deserunt officia eius ratione iure sit. Optio.
Ducimus mollitia eveniet vitae ullam molestiae animi totam officia quas sunt, soluta dignissimos facilis ad nihil cum, culpa iusto unde dolore nam eos. Maxime sint placeat, aspernatur ullam autem in.
Totam pariatur illo impedit accusamus laborum odit numquam ut ipsa cumque blanditiis, nisi quidem vitae excepturi maiores, doloribus eius! Aliquam molestiae quae expedita? Facilis quia a id obcaecati velit magni?
Similique error, a labore, ratione, at atque iste temporibus sapiente ullam voluptatum natus iusto quaerat animi. Eaque, dicta hic quis iste maxime tempore? Sed aperiam distinctio ipsa voluptate, officiis voluptates!
Corrupti aspernatur eveniet nam voluptas numquam tempora vero unde a amet. Rem sit eveniet autem ipsam eum error eligendi cum illo ex. Sapiente odio nisi beatae, quae esse voluptate necessitatibus.
Atque modi nihil aliquam explicabo iusto nemo iste cupiditate, quae vitae deleniti, nostrum amet debitis culpa consequuntur. Ea, fugiat nam est modi soluta voluptates cupiditate animi? Nihil id provident odit!
Distinctio sed fugit corrupti natus optio voluptatibus omnis aperiam culpa magni recusandae, corporis, necessitatibus ut deleniti iste eum non delectus velit quam accusamus. Eveniet tempore, accusamus quo nam animi illum.
Ipsam commodi accusantium aut officia sapiente, nostrum error vero, quia iusto molestiae asperiores rem qui soluta incidunt beatae minus ut velit suscipit corrupti illo repellat laboriosam voluptate itaque. Porro, velit.
Nesciunt animi laudantium placeat ipsam? Rem vitae inventore laudantium eius quidem officiis harum molestiae odio exercitationem commodi dignissimos, ut explicabo, minima, totam mollitia et voluptatibus excepturi iure aspernatur tempora voluptas?
Voluptatum quam atque quaerat iure harum eaque voluptates blanditiis facilis nobis. Molestiae tenetur soluta unde, dignissimos nihil quasi a. Dolorem quo magnam asperiores ab autem modi sed voluptates quisquam vitae.
Adipisci similique deleniti illum molestias, expedita enim dolore tenetur nemo doloremque natus, fuga qui sapiente ullam ex architecto vero ipsum voluptatem eveniet, exercitationem culpa? Possimus exercitationem nostrum facere qui culpa.
</p>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, tempore odit iste nisi optio animi itaque nobis consequuntur corporis. Tempora suscipit omnis enim recusandae mollitia non natus ullam aut ab.
Eligendi, dignissimos incidunt! Natus ipsum fugiat esse ea quod incidunt quo inventore ipsa cupiditate, nobis quis asperiores hic soluta exercitationem at modi autem. Accusamus eaque consequuntur, omnis facilis quibusdam autem!
Fugiat vel aliquam animi tempora odio aut fugit provident ab impedit reprehenderit, illum hic, facilis ipsam. Debitis ad nobis eaque nulla magni, corrupti magnam laudantium consequatur veritatis doloribus officiis voluptatibus.
Dolor neque esse maiores doloremque tenetur animi! Id dolorum et soluta excepturi laboriosam maiores, delectus facilis iure! Possimus sapiente necessitatibus magni tempore provident alias quae, corrupti doloremque esse veritatis quam.
Maxime ipsa rerum autem laborum, odio eveniet fugiat commodi explicabo nemo, reiciendis laboriosam deserunt? Assumenda quisquam perferendis sit accusantium quae, deleniti tempora harum, provident ex veritatis molestias eligendi cumque. Earum!
Molestias atque reiciendis illo eius at amet, ipsum fugit officiis, dignissimos, porro in consequuntur ut vitae illum? Magni numquam ea iusto, dolores tempora ullam facere vero sit? Veniam, tenetur similique.
Magni harum, recusandae consectetur, enim ut consequuntur nostrum facere dignissimos impedit magnam eligendi commodi optio repudiandae corporis. Facere hic quis illum placeat, repellendus ad consequuntur natus culpa. Numquam, enim laborum!
Earum tempore provident, incidunt odit corporis voluptate ipsa sunt esse vel optio. Illum dicta sequi iusto, dolore optio quia corrupti exercitationem saepe aut reiciendis similique sed incidunt, beatae culpa minima!
Ratione ut voluptates, dolorem beatae autem repellat omnis totam magnam, quibusdam labore assumenda provident excepturi doloremque molestiae atque ducimus perferendis recusandae quod, ex qui rerum cupiditate nam? A, magni cumque.
Eveniet commodi corporis atque dignissimos illum minus molestiae reprehenderit consequuntur culpa natus excepturi necessitatibus, eaque rem aperiam? Modi voluptates corrupti quibusdam officiis esse, fugiat, quas similique maxime quidem ut nihil!
Dolore ut omnis, tenetur ipsum aut minima architecto corrupti expedita dicta consequatur sed. Aliquam ad possimus quas quis amet. Natus debitis mollitia rem odit modi quidem autem quo rerum voluptas.
Cum, officia cupiditate doloribus nihil beatae modi quos labore eius molestiae minima, odio laboriosam voluptatibus repellat iste esse omnis veritatis. Architecto fuga adipisci voluptatibus similique blanditiis totam fugit labore exercitationem.
Amet, dicta! Eos aliquam ipsum cum harum assumenda nihil ut sint. Consectetur, fugiat vitae quod saepe aliquid quam. Assumenda quis quisquam unde tempore eum! Ipsa, velit earum. Repellendus, quam quibusdam!
Aut porro dolorum consequuntur non accusantium mollitia consequatur tenetur voluptates eaque rem consectetur quas itaque omnis modi, nisi distinctio repellendus magni placeat. Culpa inventore aliquam fugiat distinctio earum corporis tempora.
Possimus iste necessitatibus quae doloribus incidunt porro error. Corrupti id esse ratione natus fugit nostrum quam, ipsum in similique placeat! Neque, nostrum impedit dicta beatae saepe deleniti pariatur reprehenderit vitae.
Non neque reiciendis modi voluptatibus tempora exercitationem quas molestias suscipit rem voluptate quod fugit laborum id, debitis accusantium amet officiis velit pariatur, iure aut nam error hic soluta ad. Soluta?
Soluta impedit voluptates ut natus facilis blanditiis qui necessitatibus deleniti non quam, nisi maiores eligendi cum, autem, magni voluptatibus adipisci itaque molestiae vel. Iusto aliquid quisquam et vitae quasi voluptates.
Amet vitae, ipsum molestiae incidunt voluptatem sed in fugiat. Quis, dolores, totam consequuntur unde ea mollitia corrupti explicabo adipisci ab qui fugiat rerum, veniam id optio distinctio rem. Consequuntur, recusandae?
Placeat ratione voluptate possimus velit voluptatem minus, soluta, incidunt deleniti quibusdam ipsam dicta quasi officiis laudantium distinctio nulla reprehenderit similique qui provident animi! Exercitationem nam repellendus minus id asperiores vel!
Quos quia sapiente cum veniam assumenda. Rerum dignissimos assumenda quas illum dolor natus voluptate nesciunt? Amet itaque incidunt sequi veritatis ducimus ut placeat aut accusantium, temporibus facere culpa deleniti? Quod.
</div>
</div>
</div>
</div>
</body>
