Добрый день всем.Сегодня рассмотрим еще одну галерею в стандартно-белых тонах,которая прекрасно подойдет для светлый сайтов.
Галерея с красивым эффектом переключения(смены) изображения которую Вы сможете установить на свой сайт в совершенно в любом месте.
Вам лишь достаточно скопировать данный скрипт галереи и вставить в удобное для Вас место, затем изменить ссылочки на картинки и всё.
Вот код:(установка в любое место)
<style type = "text/css" > . gallery { : 50px auto ; : relative ; : 640px ; : 55px ; - top : 360px ; } . fly { position : absolute ; left :- 9999px ;} . gallery label { : block ; float : left ; : 100px ; : 55px ; - left : 8px ; } . gallery label img { cursor : pointer ; border - radius : 5px ;} . gallery label : first - child { padding : 0 ;} . gallery . large { : absolute ; : 0 ; : 0 ; - index : 10 ; - radius : 8px ; - shadow : 0 15px 10px - 15px rgba ( 0 , 0 , 0 , 0.6 ); - webkit - transform - origin : left bottom ; - o - transform - origin : left bottom ; - origin : left bottom ; - webkit - transform : translateX (- 9999px ) skewX ( 30deg ); - o - transform : translateX (- 9999px ) skewX ( 30deg ); : translateX (- 9999px ) skewX ( 30deg ); } #p1:checked ~ .gallery img.p1, #p2:checked ~ .gallery img.p2, #p3:checked ~ .gallery img.p3, #p4:checked ~ .gallery img.p4, #p5:checked ~ .gallery img.p5, #p6:checked ~ .gallery img.p6 { - webkit - animation : flyIn 1s ease - in - out 0.25s forwards ; - o - animation : flyIn 1s ease - in - out 0.25s forwards ; : flyIn 1s ease - in - out 0.25s forwards ; } . gallery img . large { - webkit - animation : flyOut 1s ease - in - out forwards ; - o - animation : flyOut 1s ease - in - out forwards ; : flyOut 1s ease - in - out forwards ; } #p1:checked ~ .gallery label:nth-of-type(1) img, #p2:checked ~ .gallery label:nth-of-type(2) img, #p3:checked ~ .gallery label:nth-of-type(3) img, #p4:checked ~ .gallery label:nth-of-type(4) img, #p5:checked ~ .gallery label:nth-of-type(5) img, #p6:checked ~ .gallery label:nth-of-type(6) img { - top :- 2px ; - shadow : 0 5px 10px - 5px rgba ( 0 , 0 , 0 , 0.6 ); } @- webkit - keyframes flyIn { 0 % {- webkit - transform : translateX (- 9999px ) skewX ( 30deg ); z - index : 100 ;} 60 % {- webkit - transform : translateX (- 50px ) skewX (- 30deg );} 80 % {- webkit - transform : translateX ( 0 ) skewX ( 15deg );} 100 % {- webkit - transform : translateX ( 0 ) skewX ( 0deg );} } @- webkit - keyframes flyOut { 0 % {- webkit - transform : translateX ( 0 ) skewX ( 0deg );} 20 % {- webkit - transform : translateX ( 0 ) skewX (- 15deg );} 40 % {- webkit - transform : translateX ( 50px ) skewX ( 30deg );} 100 % {- webkit - transform : translateX (- 9999px ) skewX (- 30deg ); opacity : 0 ;} } @- o - keyframes flyIn { 0 % {- o - transform : translateX (- 9999px ) skewX ( 30deg ); z - index : 100 ;} 60 % {- o - transform : translateX (- 50px ) skewX (- 30deg );} 80 % {- o - transform : translateX ( 0 ) skewX ( 15deg );} 100 % {- o - transform : translateX ( 0 ) skewX ( 0deg );} } @- o - keyframes flyOut { 0 % {- o - transform : translateX ( 0 ) skewX ( 0deg );} 20 % {- o - transform : translateX ( 0 ) skewX (- 15deg );} 40 % {- o - transform : translateX ( 50px ) skewX ( 30deg );} 100 % {- o - transform : translateX (- 9999px ) skewX (- 30deg ); opacity : 0 ;} } @keyframes flyIn { 0 % { transform : translateX (- 9999px ) skewX ( 30deg ); z - index : 100 ;} 60 % { transform : translateX (- 50px ) skewX (- 30deg );} 80 % { transform : translateX ( 0 ) skewX ( 15deg );} 100 % { transform : translateX ( 0 ) skewX ( 0deg );} } @keyframes flyOut { 0 % { transform : translateX ( 0 ) skewX ( 0deg );} 20 % { transform : translateX ( 0 ) skewX (- 15deg );} 40 % { transform : translateX ( 50px ) skewX ( 30deg );} 100 % { transform : translateX (- 9999px ) skewX (- 30deg ); opacity : 0 ;} } </style> <!--[if lt IE 10]> <!--[if lt IE 9]> <form action = "" > <input type = "radio" name = "fly" id = "p1" class = "fly" checked = "checked" /> <input type = "radio" name = "fly" id = "p2" class = "fly" /> <input type = "radio" name = "fly" id = "p3" class = "fly" /> <input type = "radio" name = "fly" id = "p4" class = "fly" /> <input type = "radio" name = "fly" id = "p5" class = "fly" /> <input type = "radio" name = "fly" id = "p6" class = "fly" /> <div class = "gallery" > <label for = "p1" tabindex = "1" > <img class = "thumb" src = "http://delaisait.ucoz.ru/script/galereya/img/5/t1.jpg" alt = "Стрекоза 1" /> </label> <img class = "large p1" src = "http://delaisait.ucoz.ru/script/galereya/img/5/p1.jpg" alt = "Стрекоза 1" /> <label for = "p2" tabindex = "1" > <img class = "thumb" src = "http://delaisait.ucoz.ru/script/galereya/img/5/t2.jpg" alt = "Стрекоза 2" /> </label> <img class = "large p2" src = "http://delaisait.ucoz.ru/script/galereya/img/5/p2.jpg" alt = "Стрекоза 2" /> <label for = "p3" tabindex = "1" ><img class = "thumb" src = "http://delaisait.ucoz.ru/script/galereya/img/5/t3.jpg" alt = "Стрекоза 3" /> </label> <img class = "large p3" src = "http://delaisait.ucoz.ru/script/galereya/img/5/p3.jpg" alt = "Стрекоза 3" /> <label for = "p4" tabindex = "1" ><img class = "thumb" src = "http://delaisait.ucoz.ru/script/galereya/img/5/t4.jpg" alt = "Стрекоза 4" /> </label> <img class = "large p4" src = "http://delaisait.ucoz.ru/script/galereya/img/5/p4.jpg" alt = "Стрекоза 4" /> <label for = "p5" tabindex = "1" ><img class = "thumb" src = "http://delaisait.ucoz.ru/script/galereya/img/5/t5.jpg" alt = "Стрекоза 5" /> </label> <img class = "large p5" src = "http://delaisait.ucoz.ru/script/galereya/img/5/p5.jpg" alt = "Стрекоза 5" /> <label for = "p6" tabindex = "1" ><img class = "thumb" src = "http://delaisait.ucoz.ru/script/galereya/img/5/t6.jpg" alt = "Стрекоза 6" /> </label> <img class = "large p6" src = "http://delaisait.ucoz.ru/script/galereya/img/5/p6.jpg" alt = "Стрекоза 6" /> </div> </form>
Рабочий вид галереи для сайта ucoz:
+14
Главная страница
Каталог файлов
Каталог статей
Читы для игр
Фильмы on-line
Гостевая книга
On-line Игры
Связь с администратором
Видео
Расширенный поиск
