24.12.2015, 18:15
|
|
Аспирант
|
|
Регистрация: 08.03.2015
Сообщений: 78
|
|
|
Анимация для движения блока вниз и вверх
Добрый день!
Впервые хочу задать сложный вопрос.
Есть страница с частыми вопросами и ответами на них, вот здесь я подготовил.
И есть плагин с очень хорошим эффектом анимации на нём — «swingFromTo». (!Работает только в -webkit- почему-то. Конкретно в Chrome)
Уважаемые знатоки, подскажите пожалуйста, как приспособить этот эффект (swingFromTo) для прокрутки к нужному вопросу и обратно вот сюда?
Буду невероятно признателен.
Последний раз редактировалось snovapavel, 24.12.2015 в 18:18.
|
|
24.12.2015, 19:39
|
|
Аспирант
|
|
Регистрация: 08.03.2015
Сообщений: 78
|
|
Уважаемый, Рони!
Я их естественно смотрел уже (эффекты) ).
Но там нет необходимого мне. Обратите внимание, в нужном мне эффекте, как-бы происходит разгон (в начале движения, чуть откатывается назад, за рамку), затем движение вперёд до конца и опять же небольшой вылет за границу рамки и только после этого останавливается на месте.
Поэтому я и прошу Вашей помощи, уважаемый, Рони, в реализации этого.
Я тут вот нашёл какой-то плагин, где присутствует название нужного эффекта, может его можно приспособить?
Последний раз редактировалось snovapavel, 24.12.2015 в 19:43.
|
|
24.12.2015, 20:21
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
snovapavel, функция swingFromTo из указанного вами плагина
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.4.js'></script>
<script>
$(function() {
var duration = 2000,
play = false;
function swingFromTo(a) {
var b = 1.70158;
return (a /= 0.5) <
1 ? 0.5 * a * a * (((b *= 1.525) + 1) * a - b) : 0.5 * ((a -= 2) * a * (((b *= 1.525) + 1) * a + b) + 2)
}
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
if (play) return;
play = true;
var d = performance.now();
var from = window.pageYOffset;
var to = target.offset().top
window.requestAnimationFrame(function foo(a) {
var a = (a - d) / duration;
1 < a && (a = 1);
var progress = swingFromTo(a);
window.scrollTo(0, from - (from-to) * progress);
if (a == 1) {
play = false;
} else window.requestAnimationFrame(foo)
});
return false
}
}
});
});
</script>
</head>
<body>
<section>
<article>
<h2 id="top">Часто задаваемые вопросы — ЧаВо</h2>
<ul>
<li><a href="#101" title="Вопрос номер пять">Вопрос номер пять</a></li>
<li><a href="#100" title="Вопрос номер четыре">Вопрос номер четыре</a></li>
<li><a href="#99" title="Вопрос номер три">Вопрос номер три</a></li>
<li><a href="#98" title="Вопрос номер два">Вопрос номер два</a></li>
<li><a href="#97" title="Вопрос номер один">Вопрос номер один</a></li>
</ul>
<article id="post-101" class="post-101 chastye-voprosy type-chastye-voprosy status-publish hentry">
<h3>Вопрос номер пять</h3>
<section class="entry-content">
<p class="hyphenate text" lang="ru">Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, «Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32</p>
<br>
<a href="#top">↑ Вверх</a>
</section><!-- .entry-content -->
</article>
<article id="100">
<h3>Вопрос номер четыре</h3>
<section>
<p>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, «Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32</p>
<br>
<a href="#top">↑ Вверх</a>
</section>
</article>
<article id="99">
<h3>Вопрос номер три</h3>
<section>
<p>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, «Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32</p>
<br>
<a href="#top">↑ Вверх</a>
</section>
</article>
<article id="98">
<h3>Вопрос номер два</h3>
<section>
<p>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, «Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32</p>
<br>
<a href="#top">↑ Вверх</a>
</section>
</article>
<article id="97">
<h3>Вопрос номер один</h3>
<section>
<p>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, «Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32</p>
<br>
<a href="#top">↑ Вверх</a>
</section>
</article>
</article>
</section>
</body>
</html>
|
|
24.12.2015, 22:29
|
|
Аспирант
|
|
Регистрация: 08.03.2015
Сообщений: 78
|
|
Уважаемый, Рони.
Огромное спасибо вам за вашу помощь. Не могли бы вы ещё немного помочь исправить несколько ошибок в самом скрипте, вот здесь сервис их показывает.
И вторая просьба (чтобы довести до ума), при выборе первого пункта меню, код упирается в верхнюю часть браузера (ему некуда откатываться для разгона) и полсекунды тупит прежде чем ехать вниз. И при выборе последнего пункта, тоже самое с точностью до наоборот (упирается в нижнюю часть браузера).
Можно ли как-нибудь решить этот вопрос для моего сниппета, может как нибудь разрешить прокрутку чтобы она не упиралась в начале и в конце?
Огромное спасибо Вам за помощь! |
|
24.12.2015, 22:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от snovapavel
|
|
Можно ли как-нибудь решить этот вопрос для моего сниппета, может как нибудь разрешить прокрутку чтобы она не упиралась в начале и в конце?
|
я не знаю способа сделать скролл больше или меньше скрола 
посмотрите easeInOutBounce тут http://api.jqueryui.com/easings/
|
Сообщение от snovapavel
|
|
несколько ошибок в самом скрипте, вот здесь сервис их показывает.
|
сервис не осилил, поэтому незнаю про ошибки. |
|
24.12.2015, 22:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
snovapavel,
тут все формулы плагина, выберите что вам больше нравится.
{
easeInQuad: function(a) {
return Math.pow(a, 2)
},
easeOutQuad: function(a) {
return -(Math.pow(a - 1, 2) - 1)
},
easeInOutQuad: function(a) {
if ((a /= 0.5) < 1) return 0.5 * Math.pow(a, 2);
return -0.5 * ((a -= 2) * a - 2)
},
easeInCubic: function(a) {
return Math.pow(a, 3)
},
easeOutCubic: function(a) {
return Math.pow(a - 1, 3) + 1
},
easeInOutCubic: function(a) {
if ((a /= 0.5) < 1) return 0.5 * Math.pow(a, 3);
return 0.5 * (Math.pow(a - 2, 3) + 2)
},
easeInQuart: function(a) {
return Math.pow(a, 4)
},
easeOutQuart: function(a) {
return -(Math.pow(a -
1, 4) - 1)
},
easeInOutQuart: function(a) {
if ((a /= 0.5) < 1) return 0.5 * Math.pow(a, 4);
return -0.5 * ((a -= 2) * Math.pow(a, 3) - 2)
},
easeInQuint: function(a) {
return Math.pow(a, 5)
},
easeOutQuint: function(a) {
return Math.pow(a - 1, 5) + 1
},
easeInOutQuint: function(a) {
if ((a /= 0.5) < 1) return 0.5 * Math.pow(a, 5);
return 0.5 * (Math.pow(a - 2, 5) + 2)
},
easeInSine: function(a) {
return -Math.cos(a * (Math.PI / 2)) + 1
},
easeOutSine: function(a) {
return Math.sin(a * (Math.PI / 2))
},
easeInOutSine: function(a) {
return -0.5 * (Math.cos(Math.PI * a) - 1)
},
easeInExpo: function(a) {
return a ==
0 ? 0 : Math.pow(2, 10 * (a - 1))
},
easeOutExpo: function(a) {
return a == 1 ? 1 : -Math.pow(2, -10 * a) + 1
},
easeInOutExpo: function(a) {
if (a == 0) return 0;
if (a == 1) return 1;
if ((a /= 0.5) < 1) return 0.5 * Math.pow(2, 10 * (a - 1));
return 0.5 * (-Math.pow(2, -10 * --a) + 2)
},
easeInCirc: function(a) {
return -(Math.sqrt(1 - a * a) - 1)
},
easeOutCirc: function(a) {
return Math.sqrt(1 - Math.pow(a - 1, 2))
},
easeInOutCirc: function(a) {
if ((a /= 0.5) < 1) return -0.5 * (Math.sqrt(1 - a * a) - 1);
return 0.5 * (Math.sqrt(1 - (a -= 2) * a) + 1)
},
easeOutBounce: function(a) {
return a < 1 / 2.75 ? 7.5625 *
a * a : a < 2 / 2.75 ? 7.5625 * (a -= 1.5 / 2.75) * a + 0.75 : a < 2.5 / 2.75 ? 7.5625 * (a -= 2.25 / 2.75) * a + 0.9375 : 7.5625 * (a -= 2.625 / 2.75) * a + 0.984375
},
easeInBack: function(a) {
return a * a * (2.70158 * a - 1.70158)
},
easeOutBack: function(a) {
return (a -= 1) * a * (2.70158 * a + 1.70158) + 1
},
easeInOutBack: function(a) {
var b = 1.70158;
if ((a /= 0.5) < 1) return 0.5 * a * a * (((b *= 1.525) + 1) * a - b);
return 0.5 * ((a -= 2) * a * (((b *= 1.525) + 1) * a + b) + 2)
},
elastic: function(a) {
return -1 * Math.pow(4, -8 * a) * Math.sin((a * 6 - 1) * 2 * Math.PI / 2) + 1
},
swingFromTo: function(a) {
var b = 1.70158;
return (a /= 0.5) <
1 ? 0.5 * a * a * (((b *= 1.525) + 1) * a - b) : 0.5 * ((a -= 2) * a * (((b *= 1.525) + 1) * a + b) + 2)
},
swingFrom: function(a) {
return a * a * (2.70158 * a - 1.70158)
},
swingTo: function(a) {
return (a -= 1) * a * (2.70158 * a + 1.70158) + 1
},
bounce: function(a) {
return a < 1 / 2.75 ? 7.5625 * a * a : a < 2 / 2.75 ? 7.5625 * (a -= 1.5 / 2.75) * a + 0.75 : a < 2.5 / 2.75 ? 7.5625 * (a -= 2.25 / 2.75) * a + 0.9375 : 7.5625 * (a -= 2.625 / 2.75) * a + 0.984375
},
bouncePast: function(a) {
return a < 1 / 2.75 ? 7.5625 * a * a : a < 2 / 2.75 ? 2 - (7.5625 * (a -= 1.5 / 2.75) * a + 0.75) : a < 2.5 / 2.75 ? 2 - (7.5625 * (a -= 2.25 / 2.75) * a + 0.9375) : 2 - (7.5625 * (a -= 2.625 / 2.75) *
a + 0.984375)
},
easeFromTo: function(a) {
if ((a /= 0.5) < 1) return 0.5 * Math.pow(a, 4);
return -0.5 * ((a -= 2) * Math.pow(a, 3) - 2)
},
easeFrom: function(a) {
return Math.pow(a, 4)
},
easeTo: function(a) {
return Math.pow(a, 0.25)
}
}
|
|
24.12.2015, 22:52
|
|
Аспирант
|
|
Регистрация: 08.03.2015
Сообщений: 78
|
|
Вот, все ошибки...
 |
|
24.12.2015, 23:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
snovapavel,
ошибки не существенные, могли бы сами точки с запятыми добавить или можно не обращать внимания.
$(function() {
var duration = 2000,
play = false;
function swingFromTo(a) {
var b = 1.70158;
return (a /= 0.5) < 1 ? 0.5 * a * a * (((b *= 1.525) + 1) * a - b) : 0.5 * ((a -= 2) * a * (((b *= 1.525) + 1) * a + b) + 2);
}
$("a[href*=#]:not([href=#])").click(function() {
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
if (target.length) {
if (play) return;
play = true;
var d = performance.now();
var from = window.pageYOffset;
var to =
target.offset().top;
window.requestAnimationFrame(function foo(a) {
a = (a - d) / duration;
if(1 < a) a = 1;
var progress = swingFromTo(a);
window.scrollTo(0, from - (from - to) * progress);
if (a == 1) play = false;
else window.requestAnimationFrame(foo);
});
return false;
}
}
});
});
Последний раз редактировалось рони, 24.12.2015 в 23:11.
|
|
24.12.2015, 23:12
|
|
Аспирант
|
|
Регистрация: 08.03.2015
Сообщений: 78
|
|
|
Огромное спасибо!
|
|
|
|
