Помощник
|
Полет шмеля |
heruvimus_mw
|
Сообщение
#1
|
||
|
|
||
|
|||
heruvimus_mw
|
Сообщение
#2
|
|
Люди, приём...
Взлетает на CSS при наведении курсора, как прикрутить onscroll? <head>
<meta charset="UTF-8"> <title>Shmel</title> <style> .object { position: absolute; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; } .shmel { top: 70%; left: 15%; } #sh:hover .move-up { transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: translate(0,-350px); } </style> <script type="text/javascript"> function polet(id) { document.getElementById(id).className = 'object shmel move-up'; } </script> </head> <body> <div id="sh"> <img class="object shmel move-up" src="images/shmel.png"> </div> </body> |
|
|
wolverine_hb |
6.3.2013, 17:16;
Ответить: wolverine_hb
Сообщение
#3
|
|
Скиньте полностью страничку с тем что есть и будет вам счастье.
|
|
|
Василич |
6.3.2013, 17:41;
Ответить: Василич
Сообщение
#4
|
|
шмеля в студию )
|
|
|
heruvimus_mw
|
Сообщение
#5
|
|
Идея внедрить насекомое (или самолёт), который при скролле двигается вверх-вниз, а с учётом горизонтальной прокрутки - взлетает и приземляется.
Пока только самое начало, смотрите: /*stile.css перенёс в head*/
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Aviator</title> <link rel="stylesheet" type="text/css" href="css/stile.css"> <!--Videoplayer --> <link href="css/video-js.css" rel="stylesheet" type="text/css"> <script src="js/video.js"></script> <script> _V_.options.flash.swf = "video/video-js.swf"; </script> <style> body { width:600%; height:100%; margin:0px; padding:0px; } .gmap { position: absolute; margin: auto; top: 10%; right:0; width: 100%; height: 85%; max-height:1200px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ border:none; } /*КОНТЕНТ*/ .scroll { width:200%; height:100%; position:absolute; background:#C39; } .scroll1 { width:100%; height:100%; left:200%; position:absolute; background: #CC0; } .scroll2 { width:100%; height:100%; left:300%; position:absolute; /* background:#1A1A56;*/ } .scroll3 { width:200%; height:100%; left:400%; position:absolute; background: #3F3; } /*ПАНЕЛЬ*/ #top-panel{ background:#e8f3c6; border-bottom:3px solid #a6c34e; padding:14px 20px; text-align:right; } #sub-panel{ text-align:center; } #sub-panel a{ width:200px; float:right; color:#FFFFFF; text-decoration:none; margin-right:30px; font-weight:bold; background:url(img/sub-left.png) bottom left no-repeat #a6c34e; } #sub-panel a span{ padding:6px; background:url(img/sub-right.png) right bottom no-repeat; display:block; } strong{color:#000000;} .face{border:solid 2px #a6c34e; margin-left:10px; float:right;} </style> <!--ПАНЕЛЬ --> <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){ var mySlide = new Fx.Slide('top-panel'); mySlide.hide(); $('toggle').addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); }); }); </script> <!--ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА --> <script type="text/javascript"> var wDelta = 120; function scrollDoc(e) { if (!e) e = event; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } var __delta = e.wheelDelta || -e.detail; __delta /= Math.abs(__delta); document.documentElement.scrollLeft -= __delta * wDelta; // FF, Opera, IE if (this.attachEvent) return false; document.body.scrollLeft -= __delta * wDelta; // Chrome } window.onload = function() { var html = document.documentElement; if (html.attachEvent) { html.attachEvent("onmousewheel", scrollDoc); // IE and Opera } else { html.addEventListener("DOMMouseScroll", scrollDoc, false); // FF html.addEventListener("mousewheel", scrollDoc, false); // Chrome } } </script> </head> <body> <div class="scroll"> <div id="top-panel"> <img src="img/logow.jpg" width="42" height="42" class="face"/> <strong>АВИАТОР</strong><br /><a href="mailto:ev@aviator.st" class="mail">ev@aviator.st</a><br /> <a href="Aviator/ustav.html" target="new">Устав</a> </div> <div id="sub-panel"> <a href="#" id="toggle"> <span>Нажать нежно</span> </a> </div> </div> <div class="scroll1"> <video class="video-js vjs-default-skin" controls preload="none" width="640" height="480" poster="video/BO105.jpg" data-setup="{}"> <source src="video/BO-105 Lowlevel Video.mp4" type='video/mp4' /> </video> </div> <div class="scroll2"> <span style="padding-top:3% width:100%;">ГЕОГРАФИЯ АЭРОДРОМОВ</span> <iframe class="gmap" src="https://maps.google.com/maps/ms?msa=0&msid=202778727173080923053.0004d35a38b4f46869077&hl=ru&ie=UTF8&t=h&ll=58.077876,89.648438&spn=58.35369,158.027344&z=3&output=embed"></iframe> </div> <div class="scroll3"></div> </body> </html> |
|
|
heruvimus_mw
|
Сообщение
#6
|
|
Здесь макет: http://aviator.stmaket.jpg
|
|
|
heruvimus_mw
|
Сообщение
#7
|
|
|
Все ушли на фронт?
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Выиграй полет в реальный Космос в конкурсе от Revenuelab | 15 | RevenueLab | 2311 | 21.8.2018, 17:53 автор: RevenueLab |
|
Ювелирная партнерка - пол года полет отличный! | 3 | Sloan | 4735 | 8.4.2012, 15:18 автор: Sloan |
Текстовая версия | Сейчас: 19.4.2024, 23:59 |