Оригинальный эффект вращения изображений - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 04.12.2016
Скрипты для uCoz » Эффекты для сайта uCoz » Оригинальный эффект вращения изображений

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Оригинальный эффект вращения изображений

Эффект вращения картинок или фото для сайта




Оригинальный эффект вращения изображений в виде картинок или фотографий для Вашего сайта или блога.Изображения выстраиваются кругом и крутятся против часовой стрелки создавая трёхмерный эффект.В качестве эффекта задействованы только свойства CSS3, поэтому она может быть установлена в любое место поддерживающее отображение значений HTML.Будет работать даже в материале модуля как здесь, добавьте скрипт через "Панель HTML кодов" и измените изображения на свои.Сами картинки или фотографии могут быть любых размеров, они сожмутся или расширятся соответственно установленным значениям в стиле.Мной установлен размер изображений 350Х230, его можно увеличить или уменьшить.При увеличении ширины картинок или фото изменится их совокупная ширина, поэтому ориентируйтесь на месте исходя из размеров Вашей страницы.В общем всё настроено как нужно, но если у Вас появился повод к изменениям опишите их подробнее в форме комментариев:





Скрипт для установки эффекта


<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://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_1.jpg" alt="" />
<img class="frame2" src="http://delaisait.ucoz.ru/script/effect/img/rotate/ds-img-rotate_2.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>



Эффект в подключенном состоянии



Проверьте скрипт для установки эффекта в редакторе

Вставьте скрипт для установки в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 2303 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: эффект, for, effect, фото, картинок, блога, rotate, site, для, сайта

    Всего комментариев: 3
    0   Спам
    3 anton350a   (05.08.2016 01:14)
    Аватар anton350a Доброго Вам времени суток..Хорошее дело делаете..Нужное..Много дельной информации..И красивой к тому же..Вот вопрос один к Вам..Как сделать так,что бы крутилось не девять,а двадцать картинок???

    0   Спам
    1 Luiza   (10.07.2014 10:05)
    Аватар Luiza Я новичек еще и не совсем поняла куда надо установить скрипт,можно подробнее пошагово объяснить?

    0  
    2 IZOTOP   (12.07.2014 15:25)
    Аватар IZOTOP Можно устанавливать в любом месте страницы, главное чтобы редактор на странице редактирования был переключен в режим HTML.
    В обновлённой форме добавления нового материала режим HTML включается при нажатии на кнопку "Источник".
    Код можно установить целиком, изменив адреса к своим изображениям.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]