Гость
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Скрипты для uCoz » Эффект слайд-шоу CSS3 (Слайд шоу из фотографий и картинок)
Эффект слайд-шоу CSS3
Xemordio Offline Дата: Понедельник, 07.01.2019, 08:33 | Сообщение # 1
Администратор
Звание: Маршал [?]
Сообщений: 3498

Слайды с эффектом наложения друг на друга можно установить на своём сайте или блоге. Эффект работает без скриптов на свойствах 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]
Дата регистрации: 22.07.2017
Форум » Web-Раздел » Скрипты для uCoz » Эффект слайд-шоу CSS3 (Слайд шоу из фотографий и картинок)
  • Страница 1 из 1
  • 1
Поиск:

Обновленные темы

Мини-чат

Лучшие пользователи

Xemordio REP: 11[3498]
Infe[R]nos REP: 5[38]
Бармен REP: 7[31]
StraNNik REP: 1[25]
Waldemar REP: 0[12]
NL-Vincenz REP: 0[12]
Razilator REP: 14[7]
Ghosteron REP: 3[6]
Duzeppa26 REP: 4[5]
LENA_D REP: 0[5]

Статистика форума

Темы: 2439
Всего постов: 3643
Новый юзер:Rilack
Нас сегодня посетили:
Xemordio, Бармен, awsmtrainer, eda, Rilack