Гость
Обновленные темы Популярные темы Активные пользователи
Моды от Dumbaby The Sims 4 modder | 18+ mods 32 27.02.2020 в 09:33 от 2024end AtmosFear MAX 0 23.02.2020 в 17:20 от Бармен Multiplayer Extension: «Defence» 4 22.02.2020 в 01:58 от Бармен Sunken into Oblivion 0 21.02.2020 в 00:58 от Бармен «Doomed to Eternal Torment» - Обречённый на вечные муки 0 21.02.2020 в 00:47 от Бармен Битая ссылка 12 19.02.2020 в 17:01 от 2024end Учебник Турбо по селектору тела WickedWhims 1 17.02.2020 в 08:49 от 2024end Организация папки MODS 0 17.02.2020 в 08:38 от 2024end Приоритет и WW 0 17.02.2020 в 08:34 от 2024end Работа с программой ModConflictDetector (MCD) 0 17.02.2020 в 08:18 от 2024end
2024end 3870

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Эффект слайд-шоу CSS3 (Слайд шоу из фотографий и картинок)
Эффект слайд-шоу CSS3
Администраторы
Кол-во постов: 3870
Репутация: 12
Регистрация: 22.07.2017
Статус: Не в сети
 Автор темы | Понедельник, 07.01.2019, 08:33 | Сообщение # 1

Слайды с эффектом наложения друг на друга можно установить на своём сайте или блоге. Эффект работает без скриптов на свойствах CSS3, в эффекте слайдов используется способ управления селекторами CSS.В слайд-шоу задействовано 9 изображений, при нажатии на фото или картинку она будет уходить на задний план открывая следующий слайд.Для установки Вам потребуется скопировать код из примера и установить его на странице сайта используя HTML режим при добавлении.Проверить работоспособность слайдов в HTML редаторе не предоставляется возможным, т.к он не отражает действия комбинированных селекторов.

Код для установки слайдов
Код
<style>
.slides-css3 {
position:relative;
width:520px;
height:460px;
margin:0 auto;
}
.slides-css3 b {position:fixed; display:none;}
.slides-css3 a {
display:block;
outline:0;
position: absolute;
left:20px;
bottom:20px;
width: 480px;
height: 280px;
background:transparent;
z-index:25;
-moz-transition:1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.slides-css3 img {
display:block;
position:absolute;
left:260px;
bottom:20px;
border:1px solid #fff;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.8);
-moz-transition:1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.slides-css3 .p1 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
.slides-css3 .p2 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
.slides-css3 .p3 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
.slides-css3 .p4 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
.slides-css3 .p5 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
.slides-css3 .p6 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
.slides-css3 .p7 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
.slides-css3 .p8 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
.slides-css3 .p9 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b9:target ~ .a8 {z-index:30;}
#b9:target ~ .p9 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b9:target ~ .p1 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b9:target ~ .p2 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b9:target ~ .p3 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b9:target ~ .p4 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b9:target ~ .p5 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b9:target ~ .p6 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b9:target ~ .p7 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b9:target ~ .p8 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b8:target ~ .a7 {z-index:30;}
#b8:target ~ .p8 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b8:target ~ .p9 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b8:target ~ .p1 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b8:target ~ .p2 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b8:target ~ .p3 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b8:target ~ .p4 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b8:target ~ .p5 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b8:target ~ .p6 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b8:target ~ .p7 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b7:target ~ .a6 {z-index:30;}
#b7:target ~ .p7 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b7:target ~ .p8 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b7:target ~ .p9 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b7:target ~ .p1 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b7:target ~ .p2 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b7:target ~ .p3 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b7:target ~ .p4 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b7:target ~ .p5 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b7:target ~ .p6 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b6:target ~ .a5 {z-index:30;}
#b6:target ~ .p6 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b6:target ~ .p7 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b6:target ~ .p8 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b6:target ~ .p9 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b6:target ~ .p1 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b6:target ~ .p2 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b6:target ~ .p3 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b6:target ~ .p4 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b6:target ~ .p5 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b5:target ~ .a4 {z-index:30;}
#b5:target ~ .p5 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b5:target ~ .p6 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b5:target ~ .p7 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b5:target ~ .p8 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b5:target ~ .p9 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b5:target ~ .p1 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b5:target ~ .p2 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b5:target ~ .p3 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b5:target ~ .p4 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b4:target ~ .a3 {z-index:30;}
#b4:target ~ .p4 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b4:target ~ .p5 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b4:target ~ .p6 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b4:target ~ .p7 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b4:target ~ .p8 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b4:target ~ .p9 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b4:target ~ .p1 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b4:target ~ .p2 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b4:target ~ .p3 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b3:target ~ .a2 {z-index:30;}
#b3:target ~ .p3 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b3:target ~ .p4 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b3:target ~ .p5 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b3:target ~ .p6 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b3:target ~ .p7 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b3:target ~ .p8 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b3:target ~ .p9 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b3:target ~ .p1 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b3:target ~ .p2 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b2:target ~ .a1 {z-index:30;}
#b2:target ~ .p2 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b2:target ~ .p3 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b2:target ~ .p4 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b2:target ~ .p5 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b2:target ~ .p6 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b2:target ~ .p7 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b2:target ~ .p8 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b2:target ~ .p9 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b2:target ~ .p1 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
#b1:target ~ .a9 {z-index:30;}
#b1:target ~ .p1 {width:600px; margin-left:-300px; margin-bottom:-100px; opacity:0; z-index:10;}
#b1:target ~ .p2 {width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.1; z-index:2;}
#b1:target ~ .p3 {width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.2; z-index:3;}
#b1:target ~ .p4 {width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.3; z-index:4;}
#b1:target ~ .p5 {width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.4; z-index:5;}
#b1:target ~ .p6 {width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.5; z-index:6;}
#b1:target ~ .p7 {width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.6; z-index:7;}
#b1:target ~ .p8 {width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.7; z-index:8;}
#b1:target ~ .p9 {width:480px; margin-left:-240px; margin-bottom:0px; opacity:1; z-index:9;}
</style>
<div class="slides-css3">
<b id="b1"></b>
<b id="b2"></b>
<b id="b3"></b>
<b id="b4"></b>
<b id="b5"></b>
<b id="b6"></b>
<b id="b7"></b>
<b id="b8"></b>
<b id="b9"></b>
<a class='a1' href='#b1'></a>
<a class='a2' href='#b2'></a>
<a class='a3' href='#b3'></a>
<a class='a4' href='#b4'></a>
<a class='a5' href='#b5'></a>
<a class='a6' href='#b6'></a>
<a class='a7' href='#b7'></a>
<a class='a8' href='#b8'></a>
<a class='a9' href='#b9'></a>
<img class="p1" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_1.jpg" alt="Demo" />
<img class="p2" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_2.jpg" alt="Demo" />
<img class="p3" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_3.jpg" alt="Demo" />
<img class="p4" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_4.jpg" alt="Demo" />
<img class="p5" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_5.jpg" alt="Demo" />
<img class="p6" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_6.jpg" alt="Demo" />
<img class="p7" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_7.jpg" alt="Demo" />
<img class="p8" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_8.jpg" alt="Demo" />
<img class="p9" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_9.jpg" alt="Demo" />
</div>


Демо (нажимайте на картинку):




[grayb]Источник: http://delaisait.ucoz.ru/[/grayb]
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Эффект слайд-шоу CSS3 (Слайд шоу из фотографий и картинок)
  • Страница 1 из 1
  • 1
Поиск: