Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.12.2015, 18:15
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Анимация для движения блока вниз и вверх
Добрый день!

Впервые хочу задать сложный вопрос.

Есть страница с частыми вопросами и ответами на них, вот здесь я подготовил.

И есть плагин с очень хорошим эффектом анимации на нём — «swingFromTo». (!Работает только в -webkit- почему-то. Конкретно в Chrome)

Уважаемые знатоки, подскажите пожалуйста, как приспособить этот эффект (swingFromTo) для прокрутки к нужному вопросу и обратно вот сюда?

Буду невероятно признателен.

Последний раз редактировалось snovapavel, 24.12.2015 в 18:18.
Ответить с цитированием
  #2 (permalink)  
Старый 24.12.2015, 19:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

snovapavel,
чем swing в jQuery.animate не устраивает
https://jsfiddle.net/uxjp0cg7/1/
или выберите сами
http://api.jqueryui.com/easings/
jQuery UI только подключите если нужно что-то кроме 'linear' и 'swing'
https://jsfiddle.net/uxjp0cg7/2/
Ответить с цитированием
  #3 (permalink)  
Старый 24.12.2015, 19:39
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Уважаемый, Рони!

Я их естественно смотрел уже (эффекты) ).

Но там нет необходимого мне. Обратите внимание, в нужном мне эффекте, как-бы происходит разгон (в начале движения, чуть откатывается назад, за рамку), затем движение вперёд до конца и опять же небольшой вылет за границу рамки и только после этого останавливается на месте.

Поэтому я и прошу Вашей помощи, уважаемый, Рони, в реализации этого.

Я тут вот нашёл какой-то плагин, где присутствует название нужного эффекта, может его можно приспособить?

Последний раз редактировалось snovapavel, 24.12.2015 в 19:43.
Ответить с цитированием
  #4 (permalink)  
Старый 24.12.2015, 20:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

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">↑&nbsp;Вверх</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">↑&nbsp;Вверх</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">↑&nbsp;Вверх</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">↑&nbsp;Вверх</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">↑&nbsp;Вверх</a>
			</section>
		</article>

	</article>

</section>

</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 24.12.2015, 22:29
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Уважаемый, Рони.

Огромное спасибо вам за вашу помощь. Не могли бы вы ещё немного помочь исправить несколько ошибок в самом скрипте, вот здесь сервис их показывает.

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

Можно ли как-нибудь решить этот вопрос для моего сниппета, может как нибудь разрешить прокрутку чтобы она не упиралась в начале и в конце?

Огромное спасибо Вам за помощь!
Ответить с цитированием
  #6 (permalink)  
Старый 24.12.2015, 22:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

Сообщение от snovapavel
Можно ли как-нибудь решить этот вопрос для моего сниппета, может как нибудь разрешить прокрутку чтобы она не упиралась в начале и в конце?
я не знаю способа сделать скролл больше или меньше скрола
посмотрите easeInOutBounce тут http://api.jqueryui.com/easings/

Сообщение от snovapavel
несколько ошибок в самом скрипте, вот здесь сервис их показывает.
сервис не осилил, поэтому незнаю про ошибки.
Ответить с цитированием
  #7 (permalink)  
Старый 24.12.2015, 22:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

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)
        }
    }
Ответить с цитированием
  #8 (permalink)  
Старый 24.12.2015, 22:52
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Вот, все ошибки...

Ответить с цитированием
  #9 (permalink)  
Старый 24.12.2015, 23:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

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.
Ответить с цитированием
  #10 (permalink)  
Старый 24.12.2015, 23:12
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Огромное спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация slide для таблицы на javascript Jmunb Элементы интерфейса 1 13.11.2012 11:57
Обертка для блока zamanuha jQuery 9 02.10.2012 09:12
JQuery, анимация для нескольких элементов сразу, возможно ли? Logo jQuery 21 29.05.2012 21:50
прокрутка div на определенное количество пикселей вниз, вверх skalka jQuery 4 14.02.2011 01:47
Userscript для скрытия блока MustDie Firefox/Mozilla 12 02.08.2010 14:54