Интересный эффект перелистывания фотографий

17.05.2021

Данный пример основан на css свойстве position: sticky; и так листать можно любые элементы.

Повороты (наклоны) изображений сделаны для визуального оформления и получающаяся куча результат нехитрых манипуляций, код ниже.

pic1

Основной CSS

 
html, body {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

.img {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.img img {
    width: 100vmin;
    height: 100vmin;
    border-radius: 3px;
}


.img:nth-child(1) img {
    transform: scale(0.6) rotate(0deg);
}

Основной HTML

 
<div class="img">
    <img alt="pic 1" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50" />
</div>

Посмотреть живое демо.



Полный CSS

 
html, body {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

.img {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.img img {
    width: 100vmin;
    height: 100vmin;
    border-radius: 3px;
}


.img:nth-child(1) img {
    transform: scale(0.6) rotate(0deg);
}

.img:nth-child(2) img {
    transform: scale(0.6) rotate(10deg);
}

.img:nth-child(3) img {
    transform: scale(0.6) rotate(20deg);
}

.img:nth-child(4) img {
    transform: scale(0.6) rotate(30deg);
}

.img:nth-child(5) img {
    transform: scale(0.6) rotate(40deg);
}

.img:nth-child(6) img {
    transform: scale(0.6) rotate(50deg);
}

.img:nth-child(7) img {
    transform: scale(0.6) rotate(60deg);
}

.img:nth-child(8) img {
    transform: scale(0.6) rotate(70deg);
}

ПолныйHTML

 
<div class="img">
    <img alt="pic 1" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50" />
</div>
<div class="img">
    <img alt="pic 2" src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=600&h=600&q=50" />
</div>
<div class="img">
    <img alt="pic 3" src="https://images.unsplash.com/photo-1497671954146-59a89ff626ff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50" />
</div>
<div class="img">
    <img alt="pic 4" src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50" />
</div>
<div class="img">
    <img alt="pic 5" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600$h=600&q=50" />
</div>
<div class="img">
    <img alt="pic 6" src="https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=600$h=600&q=50" />
</div>
<div class="img">
    <img alt="pic 7" src="https://images.unsplash.com/photo-1544568104-5b7eb8189dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=50" />
</div>
<div class="img">
    <img alt="pic 8" src="https://images.unsplash.com/photo-1555424221-250de2a343ad?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=600&h=600&q=5050" />
</div>

Категории: Web, HTML, CSS
Яндекс.Метрика