X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Полет шмеля
heruvimus_mw
heruvimus_mw
Topic Starter сообщение 25.2.2013, 22:17; Ответить: heruvimus_mw
Сообщение #1


Доброго времени суток!
Горизонтальный сайт, отрисовка в векторе, размеры в %

body {
width:600%;
height:100%;
}


При прокрутке шмель периодически присаживается на цветы: div со шмелём left:15% должен перемещаться между top:20% и top:70%
Из поисков ясно, что по частям это можно разными способами. А нужен только один, целостный.
Подскажите, чем реализовать?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
heruvimus_mw
heruvimus_mw
Topic Starter сообщение 6.3.2013, 12:40; Ответить: 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
wolverine_hb
сообщение 6.3.2013, 17:16; Ответить: wolverine_hb
Сообщение #3


Скиньте полностью страничку с тем что есть и будет вам счастье.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Василич
Василич
сообщение 6.3.2013, 17:41; Ответить: Василич
Сообщение #4


шмеля в студию )
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
heruvimus_mw
heruvimus_mw
Topic Starter сообщение 6.3.2013, 20:21; Ответить: 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&amp;msid=202778727173080923053.0004d35a38b4f46869077&amp;hl=ru&amp;ie=UTF8&amp;t=h&amp;ll=58.077876,89.648438&amp;spn=58.35369,158.027344&amp;z=3&amp;output=embed"></iframe>
    
     </div>
     <div class="scroll3"></div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
heruvimus_mw
heruvimus_mw
Topic Starter сообщение 7.3.2013, 13:59; Ответить: heruvimus_mw
Сообщение #6


Здесь макет: http://aviator.stmaket.jpg
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
heruvimus_mw
heruvimus_mw
Topic Starter сообщение 19.3.2013, 20:08; Ответить: heruvimus_mw
Сообщение #7


Все ушли на фронт?

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыиграй полет в реальный Космос в конкурсе от Revenuelab
15 RevenueLab 2280 21.8.2018, 17:53
автор: RevenueLab
Открытая тема (нет новых ответов) Ювелирная партнерка - пол года полет отличный!
3 Sloan 4710 8.4.2012, 15:18
автор: Sloan


 



RSS Текстовая версия Сейчас: 28.3.2024, 23:21
Дизайн