» »

Скрипт движения картинки для сайта uCoz

Скрипт движения картинки для сайта uCoz

Красиво сделана анимационная на скрипт, где формате компьютера выводиться изображение и при установки на сайт можете выставить. Здесь вы ставите скрипт и в него картинку виде ссылки и появляется виде афиши, которая будет двигаться сверху в низ или наоборот. Как все смотрится, вы можете посмотреть демонстрацию на него и понять по дизайн как выглядит.

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

Ставим там где считаете нужным:

Код
<div class="laptop">  
<div class="ekran">  
<img src="http://prodiz.do.am/img/script/img/52906-wp-b.jpg">  
</div>  
</div>  

<style>  
.ic-sayfa-header{height:113px;background:#2c3e50;}  
.laptop{float:left;width:500px;height:400px;background:url(/img/laptop.png) 50% 50% no-repeat;background-size:contain;text-align:center;overflow:hidden;position:relative;}  
.laptop .ekran{width:314px;max-height:198px;position:absolute;top:4.62em;right:6.1em;overflow:hidden;}  
.laptop img{width:315px;height:auto;margin:0 auto;z-index:-1;position:relative;-moz-animation-name:asagiKaydir;-moz-animation-duration:20s;-webkit-animation-name:asagiKaydir;-webkit-animation-duration:20s;-o-animation-name:asagiKaydir;-o-animation-duration:20s;-ms-animation-name:asagiKaydir;-ms-animation-duration:20s;animation-name:asagiKaydir;animation-duration:20s;}  
@-moz-keyframes asagiKaydir{0%{top:0;}  
50%{-moz-transform:translateY(-100%);}  
100%{top:267px;}  
}  

@-webkit-keyframes asagiKaydir{0%{top:0}  
50%{-webkit-transform:translateY(-100%);}  
100%{top:267px;}  
}  
@-o-keyframes asagiKaydir{0%{top:0}  
50%{-o-transform:translateY(-100%);}  
100%{top:267px;}  
}  
@-ms-keyframes asagiKaydir{0%{top:0}  
50%{-ms-transform:translateY(-100%);}  
100%{top:267px;}  
}  
@keyframes asagiKaydir{0%{top:0}  
50%{transform:translateY(-100%);}  
100%{top:267px;}  
}  
</style>  

<script language=JavaScript>  
<!--  
var message="Правая кнопка мыши отключена!";  
function click(e) {  
if (document.all) { // IE  
if (event.button == 2) { // Чтобы отключить левую кнопку поставьте цифру 1  
alert(message); // чтобы отключить среднюю кнопку поставьте цифру 1  
return false;}  
}  
if (document.layers) { // NC  
if (e.which == 3) {  
alert(message);  
return false;}  
}  
}  
if (document.layers)  
{document.captureEvents(Event.MOUSEDOWN);}  
document.onmousedown=click;  
document.oncontextmenu=function(e){return false};  
//-->  
</script>  

<SCRIPT LANGUAGE="JavaScript">  
document.ondragstart = test;  
//запрет на перетаскивание  
document.onselectstart = test;  
//запрет на выделение элементов страницы  
document.oncontextmenu = test;  
//запрет на выведение контекстного меню  
function test() {  
return false  
}  
</SCRIPT>


PS - в коде сразу прописан скрипт, который будет отвечать за все функций и стили, это чтоб вы могли сами настроить.
08.02.2017 Просмотров: 1201 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
trem200
trem200 08.02.2017 23:131
+1
А, что за шаблон? Очень красиво выглядит 41b
new-1movies
new-1movies 08.02.2017 23:216
0
я тот шаблон адаптирую шяс на юкоз
Kosten
Kosten 09.02.2017 00:5610
0
Здесь должно быть изображение, в материале ссылки на его идут.
Сопрано
Сопрано 08.02.2017 23:152
0
Вот не понимаю, для чего он, чтоб одно изображение крутил на ноутбуке.
new-1movies
new-1movies 08.02.2017 23:194
0
ана для таго шоб не ставити демо урл а проста ставиш картинка и фсио
Сопрано
Сопрано 08.02.2017 23:163
+2
Хотя с другой стороны смотрится уникально.
new-1movies
new-1movies 08.02.2017 23:217
0
картинка двигаица с помошю ксс
FeStemBer
FeStemBer 08.02.2017 23:205
+2
Мне просто новшество всегда нравится, за это плюс.
Kosten
Kosten 08.02.2017 23:258
+1
Норм такой скрипт, думаю многим может пригодиться и демонстрация на его есть, все как нужно.
Сафрон
Сафрон 08.02.2017 23:369
0
Сам скрипт с одной стороны не понятен, но если углубится, то видно, что он отлично на софт сайт подойдет или на официальный, что где предлагают услуги, возможности много а фантазией измельчили.
Start
Start 09.02.2017 10:0511
0
new-1movies, js лишний! он для запрещение просмотра кода...
avatar