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


× Быстрый вопрос
Пользователь месяца
dos1k dos1k 1-й за Май
Очков активности: 1 194 28 тем, 115 сообщений, 4 балла репутации
Сайт: dos1k.ru
ТОП самых активных за этот месяц
  • Фотография Olya23
    #1

    Olya23
    Очков активности: 1278 3 темы, 133 сообщения, 6 баллов репутации

  • Фотография Rodiola
    #2

    Rodiola (rukodelkovo.ru)
    Очков активности: 693 0 тем, 77 сообщений, 6 баллов репутации

  • Фотография FIvYUr
    #3

    FIvYUr (catblogger.ru)
    Очков активности: 198 0 тем, 44 сообщения, 3 балла репутации

  • Фотография agrx
    #4

    agrx (key-assort.ru)
    Очков активности: 103.5 0 тем, 23 сообщения, 3 балла репутации

  • Фотография maxnik
    #5

    maxnik (konovalovpavel.ru)
    Очков активности: 99 0 тем, 22 сообщения, 3 балла репутации

  • Фотография fedornabilkin
    #6

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 60 0 тем, 20 сообщений, 2 балла репутации

  • Фотография BLIK
    #7

    BLIK
    Очков активности: 54 Вне конкурса за определение пользователя месяца

  • Фотография re-search
    #8

    re-search
    Очков активности: 51 7 тем, 13 сообщений, 1 балл репутации

  • Фотография Artos
    #9

    Artos
    Очков активности: 45 0 тем, 10 сообщений, 3 балла репутации

  • Фотография Андрей WPMasterKZ
    #10

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 39 0 тем, 26 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.06.2019
  • Яндекс выдача: 24.06.2019
Топ 5 участников по репутации


Полет шмеля

#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