Галерея фотографій (15 креативних ефектів)

Галерея фотографій

Всі 15 прикладів дивіться за посиланням нижче (також їх можна завантажити):

Подивитися прімерСкачать

Відразу хочу сказати що це не зовсім звичайна галерея, тому що не дозволяє переглядати всі зображення, а лише одне головне і мініатюри інших зображень. Якщо ви хочете повноцінну галерею, тоді рекомендую подивитися на ось ці уроки:

Відео: Фотографії камери не помітні в Галереї

Галерея як у Google
3D сітка на сайті або приголомшлива галерея
Галерея зображень на jQuery з цікавим ефектом
Інтерактивна 3D галерея на CSS і jQuery
Оригінальна анімована галерея на CSS3

Відео: Галерея для WordPress | Плагін FancyBox for WordPress

Розмітка наступна:

class="Stack stack-sidegrid"gt;lt;img src="Img / 1.jpg" alt="Img01"/gt;lt;img src="Img / 3.jpg" alt="Img03"/gt;lt;img src="Img / 4.jpg" alt="Img04"/gt;lt;img src="Img / 2.jpg" alt="Img02"/gt;lt;/figuregt;

Всі зображення, крім останнього, мають абсолютне позиціонування:

+12345678910111213141516171819

.stack {margin: 20px auto-width: 400px-padding: 0-position: relative-max-width: 100%-}.stack img {max-width: 100%-position: absolute-top: 0-left: 0-transition: all 0.3s-}.stack img: Last-child {position: relative-}

Наприклад, розглянемо приклад, при якому зображення розміщуються у вигляді таблиці:

+12345678910111213141516171819

.stack-bouncygrid.active img {transform: scale(0.48)-}.stack-bouncygrid.active img: nth-child(4) {transform-origin: 0 0-}.stack-bouncygrid.active img: nth-child(3) {transform-origin: 100% 0-}.stack-bouncygrid.active img: nth-child(2) {transform-origin: 0 100%-}.stack-bouncygrid.active img: First-child {transform-origin: 100% 100%-}

Як бачите лише кілька рядків коду у файлі стилів.

висновок

Що першим приходить на розум, так це використовувати таким способом показ новин, точніше головних зображень з цих статей. Також можна використовувати той самий ефект для показу своїх відео-курсів, для більш компактного їх розташування.

Для перегляду цього ефекту звичайно використовується javascript, але я не став писати про це в статті. Там лише потрібно підключити дві бібліотеки (classie.js і main.js) і вставити код перемикача (все це можна взяти з демо). А не став я писати через те, що ви можете захотіти зробити такий ефект без перемикача (тобто щоб зображення відразу розташовувалися в тому вигляді відразу при завантаженні сторінки).