Приветствую Вас Гость | RSS
Меню
Главная » Файлы » Все для Ucoz » Скрипты для ucoz

Скрипт вращающиеся картинки.Оригинальный эффект вращения изображений для сайта ucoz
День добрый дорогие строители сайтов,сегодня мы рассмотрим отличную вращательную галерею для сайта ucoz,в которую можно вставить изображения любого разрешения и оно благополучно установиться в определенных размерах у Вас на сайте.

Ну что же столько разговоров,дайте как поближе рассмотрим наш скрипт оригинального вращения изображения для сайта ucoz.
А начнем мы конечно же с установки,которая замет не меньше минуты.
Данный скрипт устанавливаем туда,где хотим видеть вращательную галерею:
Код
<style>
.dsblockeffect {
width:350px;  
height:230px;  
margin:250px 0;
-webkit-perspective:1200px;
perspective:1200px;
}
.dsblockeffect-rotate {
width:350px;  
height:230px;  
position:relative;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform: translate3d(0,0,-700px);
-webkit-perspective:1200px;
transform: translate3d(0,0,-700px);
perspective:1200px;
}
.dsblockeffect-rotate img {
width:350px;  
height:230px;  
position:absolute;  
left:0; top:0; perspective:1200px;
}
.frame1 {
-webkit-animation:ds-img-rotate1 10s infinite linear;
animation:ds-img-rotate1 10s infinite linear;
}
.frame2 {
-webkit-animation:ds-img-rotate2 10s infinite linear;
animation:ds-img-rotate2 10s infinite linear;
}
.frame3 {
-webkit-animation:ds-img-rotate3 10s infinite linear;
animation:ds-img-rotate3 10s infinite linear;
}
.frame4 {
-webkit-animation:ds-img-rotate4 10s infinite linear;
animation:ds-img-rotate4 10s infinite linear;
}
.frame5 {
-webkit-animation:ds-img-rotate5 10s infinite linear;
animation:ds-img-rotate5 10s infinite linear;
}
.frame6 {
-webkit-animation:ds-img-rotate6 10s infinite linear;
animation:ds-img-rotate6 10s infinite linear;
}
.frame7 {
-webkit-animation:ds-img-rotate7 10s infinite linear;
animation:ds-img-rotate7 10s infinite linear;
}
.frame8 {
-webkit-animation:ds-img-rotate8 10s infinite linear;
animation:ds-img-rotate8 10s infinite linear;
}
.frame9 {
-webkit-animation:ds-img-rotate9 10s infinite linear;
animation:ds-img-rotate9 10s infinite linear;
}
@-webkit-keyframes ds-img-rotate1 {
0% {-webkit-transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); opacity:1;}
55% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); opacity:1;}
}
@-webkit-keyframes ds-img-rotate2 {
0% {-webkit-transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); opacity:0.9;}
44% {opacity:0.5;}
88% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); opacity:0.9;}
}
@-webkit-keyframes ds-img-rotate3 {
0% {-webkit-transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); opacity:0.8;}
33% {opacity:0.5;}
77% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); opacity:0.8;}
}
@-webkit-keyframes ds-img-rotate4 {
0% {-webkit-transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); opacity:0.7;}
22% {opacity:0.5;}
66% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); opacity:0.7;}
}
@-webkit-keyframes ds-img-rotate5 {
0% {-webkit-transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); opacity:0.6;}
11% {opacity:0.5;}
55% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); opacity:0.6;}
}
@-webkit-keyframes ds-img-rotate6 {
0% {-webkit-transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); opacity:0.6;}
44% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); opacity:0.6;}
}
@-webkit-keyframes ds-img-rotate7 {
0% {-webkit-transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); opacity:0.7;}
33% {opacity:1;}
88% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); opacity:0.7;}
}
@-webkit-keyframes ds-img-rotate8 {
0% {-webkit-transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); opacity:0.8;}
22% {opacity:1;}
77% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); opacity:0.8;}
}
@-webkit-keyframes ds-img-rotate9 {
0% {-webkit-transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); opacity:0.9;}
11% {opacity:1;}
66% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); opacity:0.9;}
}
@keyframes ds-img-rotate1 {
0% {transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); z-index:10; opacity:1;}
11% {opacity:1; z-index:10;}
55% {opacity:0.6; z-index:6;}
100% {transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); z-index:10; opacity:1;}
}
@keyframes ds-img-rotate2 {
0% {transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); z-index:9; opacity:0.9;}
44% {opacity:0.5; z-index:6;}
88% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); z-index:9; opacity:0.9;}
}
@keyframes ds-img-rotate3 {
0% {transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); z-index:8; opacity:0.8;}
33% {opacity:0.5; z-index:6;}
77% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); z-index:8; opacity:0.8;}
}
@keyframes ds-img-rotate4 {
0% {transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); z-index:7; opacity:0.7;}
22% {opacity:0.5; z-index:6;}
66% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); z-index:7; opacity:0.7;}
}
@keyframes ds-img-rotate5 {
0% {transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); z-index:6; opacity:0.6;}
11% {opacity:0.5; z-index:6;}
55% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); z-index:6; opacity:0.6;}
}
@keyframes ds-img-rotate6 {
0% {transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); z-index:6; opacity:0.6;}
44% {opacity:1; z-index:10;}
88% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); z-index:6; opacity:0.6;}
}
@keyframes ds-img-rotate7 {
0% {transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); z-index:7; opacity:0.7;}
33% {opacity:1; z-index:10;}
77% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); z-index:7; opacity:0.7;}
}
@keyframes ds-img-rotate8 {
0% {transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); z-index:8; opacity:0.8;}
22% {opacity:1; z-index:10;}
66% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); z-index:8; opacity:0.8;}
}
@keyframes ds-img-rotate9 {
0% {transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); z-index:9; opacity:0.9;}
11% {opacity:1; z-index:10;}
55% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); z-index:9; opacity:0.9;}
}
</style>
<div class="dsblockeffect">
<div class="dsblockeffect-rotate">
<img class="frame1" src="http://ru.best-wallpaper.net/wallpaper/1024x768/1312/England-London-evening-dusk-lights-bridge-river-buildings_1024x768.jpg" alt="">
<img class="frame2" src="http://ru.best-wallpaper.net/wallpaper/1280x1024/1305/San-Francisco-California-USA-city-bay-evening-sky-skyscrapers-lights_1280x1024.jpg" alt="">
<img class="frame3" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_3.jpg" alt="">
<img class="frame4" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_4.jpg" alt="">
<img class="frame5" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_5.jpg" alt="">
<img class="frame6" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_6.jpg" alt="">
<img class="frame7" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_7.jpg" alt="">
<img class="frame8" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_8.jpg" alt="">
<img class="frame9" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_9.jpg" alt="">
</div>
</div>


Что по-поводу изменений,так можно редактировать практически всё,начиная с размера вращающейся галерею и до скорости вращения.
Скрипт *Оригинальный эффект вращения изображений для сайта ucoz*
Размер общей картинки редактируется в поле: 
-webkit-perspective:720px; 
perspective:720px;
/ --------------- \
/ Как нужно качать? \

Категория: Скрипты для ucoz | Просмотров: 1901 | Добавил: drak-zp | Рейтинг: 5.0/10 | Загрузок: 0


avatar
-->