Оформление фотографий на сss
Фотографии, при прокрутке страницы складываются в стопку. Выглядит это очень интересно. Код сделан только на css, без каких либо скриптов.
Стопка фотографий
Вот так выглядит фотоэффект:Посмотреть в живую можно здесь.
Или проверить работу в редакторе.
А здесь его код:
Добавлять можно 5 разных картинок. <div class="wrapper">
<div class="photos one">
<img style="max-width: 600px;" src="картинка 1" alt="" />
</div>
<div class="photos two">
<img style="max-width: 600px;" src="картинка 2" alt="" />
</div>
<div class="photos three">
<img style="max-width: 600px;" src="картинка 3" alt="" />
</div>
<div class="photos four">
<img style="max-width: 600px;" src="картинка 4" alt="" />
</div>
<div class="photos five">
<img style="max-width: 600px;" src="картинка 5" alt="" />
</div>
</div>
<style>
.photos {
margin-top: 20vh;
}
.photos {
position: sticky;
width: 600px;
}
.photos img {max-width: 100%; border-radius: 15px; box-shadow: 0 0 40px 5px rgba(95, 104, 35, 1);}
.one {top: 8em; transform: rotate(-2deg);}
.two {top: 9em; margin-left: 1em; transform: rotate(3deg);}
.three {top: 10em; margin-left: 2em; transform: rotate(-5deg);}
.four {top: 11em; margin-left: 1em; transform: rotate(5deg);}
.five {margin-left: 1em; transform: rotate(-8deg);}
*, *:before, *:after {box-sizing: border-box;}
{
margin: 0;
}
.wrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 40em;
margin: 0 auto;
padding-bottom: 120vh;
}
</style>
В коде я отметила красным, куда вставлять адреса фотографий.
Синим — цвет тени вокруг изображения.
Комментарии со спамом удаляются.