Полет шмеля при прокрутке сайта

Heruvimus · 26.02.2013

Доброго времени суток!

Горизонтальный сайт, отрисовка в векторе, размеры в %
body {
width:600%;
height:100%;
}

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

Подскажите, чем реализовать?

RurCur · 27.02.2013

Полёт шмеля...))
а так что-то непонятно, если шмель между top 20% и top 70%, то где цветы?

lekzd · 27.02.2013

я полагаю, что синус от высоты положения экрана при скролле выдаст ровный график перемещения шмеля по вертикали, по горизонтали можно просто устроить ему "шум" в виде случайных смещений на 2 пикселя

Heruvimus · 01.03.2013

RurCur сказал(а):
Полёт шмеля...))
а так что-то непонятно, если шмель между top 20% и top 70%, то где цветы?

Цветы в <body>, при горизонтальной прокрутке цветы проезжают справа налево.

lekzd сказал(а):
я полагаю, что синус от высоты положения экрана при скролле выдаст ровный график перемещения шмеля по вертикали, по горизонтали можно просто устроить ему "шум" в виде случайных смещений на 2 пикселя

Достаточно синуса. Как реализовать?

lekzd · 01.03.2013

Через Java Script же, сразу предостерегу от вопроса "А кто меня научит?", лучше сразу идите читать про него и пытаться что-то написать

Heruvimus · 01.03.2013

lekzd сказал(а):
Через Java Script же, сразу предостерегу от вопроса "А кто меня научит?", лучше сразу идите читать про него и пытаться что-то написать

Наращиваете рейтинг? Подошел бы и ответ: CSS. Меньше букв.

mrlasking · 01.03.2013

[member=Heruvimus], Вам четко говорят - Javascript, а вы выскочкой заделаться пытаетесь, дак мало того еще и тупость морозите:

Heruvimus сказал(а):
Подошел бы и ответ: CSS. Меньше букв.

Сначала думаем, потом еще раз думаем, а, только потом, пишем. Иначе тут вы ответов больше получать не будете.

Heruvimus · 01.03.2013

mrlasking сказал(а):
[member=Heruvimus], Вам четко говорят - Javascript, а вы выскочкой заделаться пытаетесь, дак мало того еще и тупость морозите:

Heruvimus сказал(а):

Подошел бы и ответ: CSS. Меньше букв.

Нажмите, чтобы раскрыть...

Сначала думаем, потом еще раз думаем, а, только потом, пишем. Иначе тут вы ответов больше получать не будете.

Уважаемый mrlasking, полагаю вы знаете о существовании css анимации?
Можете сказать что-нибудь полезное, вместо обзывательств и угроз?

mrlasking · 01.03.2013

Я то знаю, а вот вы, судя по тому, что ляпаете - не знаете. Ибо тогда, даже не вспоминали бы о CSS анимации при привязке к каким либо событиям со скроллингом. Про поддержку браузерами, я уж промолчу, а вот вы прочитайте.

Если вам, достаточно компетентный в этом вопросе, человек мало того, что ответил, так еще и удосужился разжевать. А вы фамильярничаете в ответ, а потом, на замечание реагируете проявлением еще большей глупости - то, судя по всему, это уже диагноз.

Засим, удаляюсь из вашей темы, ибо противно. Удачи.

Heruvimus · 01.03.2013

mrlasking сказал(а):
Я то знаю, а вот вы, судя по тому, что ляпаете - не знаете. Ибо тогда, даже не вспоминали бы о CSS анимации при привязке к каким либо событиям со скроллингом. Про поддержку браузерами, я уж промолчу, а вот вы прочитайте.

Если вам, достаточно компетентный в этом вопросе, человек мало того, что ответил, так еще и удосужился разжевать. А вы фамильярничаете в ответ, а потом, на замечание реагируете проявлением еще большей глупости - то, судя по всему, это уже диагноз.

Засим, удаляюсь из вашей темы, ибо противно. Удачи.

С чувством юмора напряжёность...
Если бы я разбирался в Java, очевидно, незачем было бы спрашивать.
Раз компетенция на высоте, помогите с кодом, а так, ядом побрызгать, да минус накликать, много ума не надо.
За удачу - спасибо.

lekzd · 01.03.2013

[member=Heruvimus], так вы начните писать, пробуйте через js получить доступ к элементу, передвинуть его, мы там уже поможем, тут и так все после рабочего дня полного всякого кода

Heruvimus · 03.03.2013

Взлетает на CSS при наведении курсора:

<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>

Как прикрутить onscroll?

Heruvimus · 20.03.2013

mrlasking сказал(а):
Я то знаю, а вот вы, судя по тому, что ляпаете - не знаете. Ибо тогда, даже не вспоминали бы о CSS анимации при привязке к каким либо событиям со скроллингом. Про поддержку браузерами, я уж промолчу, а вот вы прочитайте.

Если вам, достаточно компетентный в этом вопросе, человек мало того, что ответил, так еще и удосужился разжевать. А вы фамильярничаете в ответ, а потом, на замечание реагируете проявлением еще большей глупости - то, судя по всему, это уже диагноз.

Засим, удаляюсь из вашей темы, ибо противно. Удачи.

Анимация CSS + JS: http://jsfiddle.net/EnSkJ/2/
доктор, балл надо вернуть...

mrlasking · 20.03.2013

[member=Heruvimus], особенно элегантно это решение выглядит в опере и ИЕ. Я бы сказал, есть, даже, нечто философское в том, какой болт кладут браузеры на подобные попытки. Попытка не удалась, "Доктор" балл не вернет

Если ваша задача - доказать что-то в этой теме и как дурак орать "нет, я был прав" - так и скажите. Продолжайте писать костыли под кривой код, лишь бы оказаться правым.

Вам сразу был дан путь, по которому можно пойти и получить решение, поддерживаемое всеми браузерами, но из не известной вам области. А вы, вместо обучения, пытаетесь доказать свою правоту. Надеюсь, хоть сейчас дойдет, что что-то нужно менять в вашем подходе.

Я сказал вам сразу, что есть проблемы в поддержке браузерами CSS анимации, а работа со скроллингом - вообще никогда не была не то что на высоте, а даже на уровне, разве что только у Хрома, и то не очень. И сразу подсказал, что если вы этого не знаете или не помните - освежите память прочтением материала по теме.

Товарищ [member=lekzd] вообще решил потратить время и разжевать вам материал, вы же, как я уже говорил, фамильярничаете в ответ и не слушаете ни его ни меня.

Пусть вы и злитесь в данный момент на меня, но если, хоть так, дойдет - что ж, буду рад.

Heruvimus · 22.03.2013

Пришёл на форум, назвался мастером - помогай, или сиди молча!

На 3wforums.ru, такой ответ считается не просто хорошим:
"синус от высоты положения экрана при скролле" + "сразу предостерегу от вопроса "А кто меня научит?"
но:
"достаточно компетентный в этом вопросе, человек мало того, что ответил, так еще и удосужился разжевать".

Бонусом - флуд полный доброжелательности:
"выскочкой заделаться пытаетесь, дак мало того еще и тупость морозите"
"Сначала думаем, потом еще раз думаем, а, только потом, пишем. Иначе тут вы ответов больше получать не будете."
"фамильярничаете в ответ, а потом, на замечание реагируете проявлением еще большей глупости - то, судя по всему, это уже диагноз.
Засим, удаляюсь из вашей темы, ибо противно."

Судя по всему я должен злиться и до меня должно в итоге что-то дойти.
Разрывает от благодарности...

lekzd · 22.03.2013

Heruvimus сказал(а):
Пришёл на форум, назвался мастером - помогай, или сиди молча!

Вы кажется путаете платные и бесплатные услуги, тут никто никому ничего не должен.

Heruvimus сказал(а):
Судя по всему я должен злиться и до меня должно в итоге что-то дойти.

Но дойти что-то должно, это было бы хорошо, делать за вас тут точно не будут, я уже предлагал вам начать хотя бы

gor · 23.03.2013

[member=Heruvimus],

Да не надо сердится, без конкретнгого кода - никто ничего конкретного не скажет....

Кстати, за подобные скрипты фрилансеры деньги берут...

Вот вам в помощь -
http://learn.javascr.../event-onscroll
http://learn.javascr...ru/js-animation
без js тут никак ...
CSS3 анимация тут ни в пизду, ни в красну армию...

scrobot · 23.03.2013

Доброго времени суток!

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

Вполне подойдет технология parallax. информационные ресурсы здесь и здесь, ну а это и это в качестве доп. инфы

Heruvimus · 25.03.2013

Вполне подойдет технология parallax. информационные ресурсы здесь и здесь, ну а это и это в качестве доп. инфы

Спасибо, что-то подобное и ищу. В основном CSS анимация интересует из-за векторного макета: все параметры в %%. Приведённые примеры не работают на планшетах, проверял. Однако, есть https://victoriabeckham.landrover.com/INT - полностью работоспособный parallax.

Господа коммерсанты, почему не сказать открыто: - сделаю за $....

Разговоры про путаницу платного с бесплатным возникают от неумения себя продать, или отсутствия "товара",
как у mrlasking. Он даже если предложит денег, будет сам себе кодировать.

brevis · 03.04.2013

"Полёт шмеля" -- это классическая задача веб-разработки. Миллионы веб-разработчиков бьются над решением этой задачи с момента становления индустрии до сегодня. И лишь немногим удается приблизится к результату.

На сегодня самая лучшая реализация задачи "Полёт шмеля" известная мне -- это http://js1k.com/2013-spring/demo/1451

Не благодарите.

Полет шмеля при прокрутке сайта

Member

Active Member

parse error: parse error, unexpected T_STRING...

Member

parse error: parse error, unexpected T_STRING...

Member

$_GET['rich'] or die('trying');

Member

$_GET['rich'] or die('trying');

Member

parse error: parse error, unexpected T_STRING...

Member

Member

$_GET['rich'] or die('trying');

Member

parse error: parse error, unexpected T_STRING...

Well-Known Member

я не унылое говно ^_^

Member

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей