Галерея для сайту з ефектом розмиття

Галерея для сайту з ефектом розмиття

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

Ще галереї зображень для сайту:

  • Галерея фотографій (15 креативних ефектів) - галереї зображень
  • Галерея як у Google
  • Галерея зображень на jQuery з цікавим ефектом
  • Інтерактивна 3D галерея на CSS і jQuery
  • Оригінальна анімована галерея на CSS3

Реальний приклад галереї:

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

А ось як виглядає розмиття:

Ефект розмиття у слайдера

Як встановити галерею для сайту?

HTML частина

Підключаємо між тегами стилі (gallery.css) І скрипти (jquery.min.js і TweenMax.min.js):

HTML КОД
123
lt;link rel="Stylesheet" type="Text / css" href="Css / gallery.css" /gt;lt;script src="Js / TweenMax.min.js"gt; lt;/scriptgt;lt;script src="Js / jquery.min.js"gt; lt;/scriptgt;


А потім перед закриває тегом вставити скрипт gallery.js:

HTML КОД

Відео: jQuery lightGallery - ефектна галерея для сайту

1
lt;script src="Js / gallery.js"gt; lt;/scriptgt;

З усіма стилями і бібліотеками ми закінчили і переходимо безпосередньо до структури. І відразу після відкривається тега необхідно розташувати наступний код:

HTML КОД
1234567
"Http://w3.org/2000/svg" version="1.1" class="Filters hidden"gt;id="Blur"gt;="SourceGraphic" stdDeviation="0,0" /gt;lt;/filtergt;lt;/defsgt;lt;/svggt;

Йдемо далі і дивимося з чого складається структура HTML, де розташовуються всі зображення галереї:

HTML КОД
123456789101112131415161718192021222324252627282930313233343536373839404142
lt;div class="Gallery"gt;lt;ul class="Gallery-pictures"gt;lt;li class="Gallery-picture"gt;lt;img src="Img / 1.jpg" alt="Img01"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 2.jpg" alt="Img02"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 3.jpg" alt="Img03"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 4.jpg" alt="Img04"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 5.jpg" alt="Img05"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 6.jpg" alt="Img06"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 7.jpg" alt="Img07"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 8.jpg" alt="Img08"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 9.jpg" alt="Img09"gt;lt;/ligt;lt;/ulgt;lt;div class="Gallery-pagination"gt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;/divgt;lt;/divgt;

Пару слів про структуру галереї для сайту:

  • Рядок: з 2 по 30 - знаходиться список зображень, які відображаються в галереї.
  • Рядки: з 31 по 41 - кнопки навігації по зображеннях в галереї, де число маркерів відповідає числу зображень в галереї.

висновок

Ще одна дуже симпатична і оригінальна галерея для сайту. Встановити її досить просто, але і виглядає вона красиво. До речі, забув згадати - зображення можна перегортати утримуючи курсор миші, як би перетягуючи зображення.

Успіхів!

джерело: оригінал

Відео: Супер стильна фото галерея з ефектом живого акордеона на сайт wordpress

З повагою, Юрій Німець

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!