Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Полет шмеля

#1 heruvimus

heruvimus
  • Пользователь
  • 5 сообщений
  • Репутация: 1
0

Отправлено 25 Февраль 2013 - 21:17

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

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

При прокрутке шмель периодически присаживается на цветы: div со шмелём left:15% должен перемещаться между top:20% и top:70%
Из поисков ясно, что по частям это можно разными способами. А нужен только один, целостный.
Подскажите, чем реализовать?

 

 

  • 1

#2 heruvimus

heruvimus
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 1

Отправлено 06 Март 2013 - 11:40

Люди, приём...

Взлетает на 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>

  • 0

#3 denis79513

denis79513
  • Пользователь
  • 56 сообщений
  • Репутация: 7

Отправлено 06 Март 2013 - 16:16

Скиньте полностью страничку с тем что есть и будет вам счастье.
  • 0

#4 Василич

Василич
  • Пользователь
  • 140 сообщений
  • Репутация: 26

Отправлено 06 Март 2013 - 16:41

шмеля в студию )
  • 0

#5 heruvimus

heruvimus
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 1

Отправлено 06 Март 2013 - 19:21

Идея внедрить насекомое (или самолёт), который при скролле двигается вверх-вниз, а с учётом горизонтальной прокрутки - взлетает и приземляется.

Пока только самое начало, смотрите:
/*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>

  • 0

#6 heruvimus

heruvimus
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 1

Отправлено 07 Март 2013 - 12:59

Здесь макет: http://aviator.stmaket.jpg
  • 0

#7 heruvimus

heruvimus
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 1

Отправлено 19 Март 2013 - 19:08

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


Оформление форума – IPBSkins.ru