Эффектный переход между страницами

Разные полезности для сайта, от сторонних разработчиков.
Ответить
Аватара пользователя

Автор Темы
visainfinite
Подающий надежды
Подающий надежды
Сообщения: 135
Зарегистрирован: 18 май 2016, 17:56
Версия Web Builder: 12.5
Имя: Игорь

Эффектный переход между страницами

Сообщение visainfinite » 14 июл 2016, 19:22

Нашел интересный переход между страницами http://www.webmasters.by/articles/html- ... -css3.html
Может кто подскажет кто понимает в кодах куда в билдере чего вставлять из этой статьи чтобы заработало?

Реклама
Аватара пользователя

Автор Темы
visainfinite
Подающий надежды
Подающий надежды
Сообщения: 135
Зарегистрирован: 18 май 2016, 17:56
Версия Web Builder: 12.5
Имя: Игорь

Эффектный переход между страницами

Сообщение visainfinite » 26 июл 2016, 17:27

Вот народ пользуйтесь! Вижу никто помочь не хотел :za_da_va_la:
Нашел и делюсь кому надо :men:

Нашел для понятного мне применения вот здесь http://git.blivesta.com/animsition/

1 - Сначала выберете понравившийся Вам эффект.
2 - Кликаем на ДЕМО - мне понравился вот этот FADE RIGHT
3 - Скролим в низ и видим все коды которые нам будут нужны, в верху страницы жмем на GitHub и скачиваем исходники. В которых находим два файла animsition.min.js и animsition.min.css(в папке dist). Копируем их на свой сервер. У меня они находятся один в папке css/animsition.min.css , второй в js/animsition.min.js
4 - Между тегами <head></head> самой страницы вставляем код подключения этих файлов и сам эффект.

Код: Выделить всё

<!-- animsition.css -->
<link rel="stylesheet" href="css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="js/animsition.min.js"></script>[/color]
[color=#0080FF]<div
  class="animsition"
  data-animsition-in-class="fade-in-right"
  data-animsition-in-duration="1000"
  data-animsition-out-class="fade-out-right"
  data-animsition-out-duration="800"
</div>

5 - До </body> вставляем код вызова нашего эффекта

Код: Выделить всё

<script>
$(document).ready(function() {
  $(".animsition").animsition({
    inClass: 'fade-in-right',
    outClass: 'fade-out-right',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.animsition-link',
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
    loading: true,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});
</script>

6 - Публикуем все и наслаждаемся результатом.

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 4869
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Эффектный переход между страницами

Сообщение anonimus » 26 июл 2016, 20:12

переместил тему в более подходящий раздел
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Можете в личку отправить свой вайбер, телеграмм, вотсап или просто мобильный и я вас наберу

Аватара пользователя

Gudwinn
Эксперт
Эксперт
Сообщения: 1277
Зарегистрирован: 07 авг 2015, 18:39
Версия Web Builder: 11.0.2
Имя: Кирилл

Эффектный переход между страницами

Сообщение Gudwinn » 26 июл 2016, 20:22

visainfinite писал(а):Источник цитаты Вижу никто помочь не хотел

Одно дело помочь, другое дело искать материалы (которых куча на форуме) вместо требующего совета, разница есть, согласитесь? Я Вам писал, что эти все фишки можно сделать стандартными функциями билдера, нужно изучать события и свойства анимаций (3D перспектива, и т.д), на что Вы мне сказали, что хотите, что бы я нашёл Вам эти материалы, как будто это мне надо, а не вам :-):
http://wysiwygwebbuilder.offershop.ru/
создание и разработка сайтов
Платные консультации
Готовые решения
Скайп: kirill47853

Аватара пользователя

Alex
Admin
Admin
Сообщения: 3467
Зарегистрирован: 06 фев 2012, 00:03
Версия Web Builder: 12.5
Имя: Алексей
Контактная информация:

Эффектный переход между страницами

Сообщение Alex » 26 июл 2016, 21:14

anonimus писал(а):переместил тему в более подходящий раздел

А я оформил как полагается, [code][/code] всё же не просто так придумали :men:
Онлайн-магазин готовых решений
В личке принимаю, только по техническим вопросам! На вопросы по программе в личке не отвечаю!

Аватара пользователя

Автор Темы
visainfinite
Подающий надежды
Подающий надежды
Сообщения: 135
Зарегистрирован: 18 май 2016, 17:56
Версия Web Builder: 12.5
Имя: Игорь

Эффектный переход между страницами

Сообщение visainfinite » 27 июл 2016, 00:20

Ну вот все друг друга поняли и помогли народу! Спасибо всем за участие!

Аватара пользователя

Автор Темы
visainfinite
Подающий надежды
Подающий надежды
Сообщения: 135
Зарегистрирован: 18 май 2016, 17:56
Версия Web Builder: 12.5
Имя: Игорь

Эффектный переход между страницами

Сообщение visainfinite » 22 окт 2017, 20:51

Привет народ! Поднимаю снова тему: нужно сделать кубический переход между страницами. Помогите плиз!
Нашел пару тем: 1 - видео https://www.youtube.com/watch?v=cXlOBOp15tY
ссылка на сайт с реализацией https://www.rdcm.com
нашел, что то похожее еще здесь https://ruseller.com/lessons.php?id=1761
Но никак немогу найти инфу куда какой код вставлять и какие из исходников подключать css и js/
Помогите с подробной инструкцией если можно! Спасибо!

Аватара пользователя

spoon
Опытный
Опытный
Сообщения: 729
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 12.5
Имя: Дмитрий
Контактная информация:

Эффектный переход между страницами

Сообщение spoon » 23 окт 2017, 12:37

visainfinite писал(а):34312 Но никак немогу найти инфу куда какой код вставлять и какие из исходников подключать css и js

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

Отправлено спустя 4 минуты 48 секунд:
visainfinite писал(а):34312 Помогите с подробной инструкцией

Т.е. кому-то нужно разобраться, состряпать вам код, а вы будите идейки подкидывать? Это билдера ну ни как не касается.
Съешь ещё этих мягких французских булок, да выпей чаю!

Аватара пользователя

Автор Темы
visainfinite
Подающий надежды
Подающий надежды
Сообщения: 135
Зарегистрирован: 18 май 2016, 17:56
Версия Web Builder: 12.5
Имя: Игорь

Эффектный переход между страницами

Сообщение visainfinite » 23 окт 2017, 14:10

spoon, Немного с Вами не согласен:), если посмотрите на первый пост, то Вы заметите, что тему также открыл и сам нашел инфу и непарился на счет того, что мне надо было разобраться и состряпать код.
Выложил реализацию для web builder и поделился со всеми и даже жаба не душит:) и как видите билдера это коснулось!
На счет код состряпать, так он есть, а на последней ссылке похожее, только не знаю чего куда вставлять.

Отправлено спустя 1 минуту 49 секунд:
Кстати если найду реализацию для web builder быстрее также поделюсь!

Аватара пользователя

spoon
Опытный
Опытный
Сообщения: 729
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 12.5
Имя: Дмитрий
Контактная информация:

Эффектный переход между страницами

Сообщение spoon » 23 окт 2017, 14:22

Все ваши темы построены на одном "Дайте мне код", вы же понимаете, что глобально ни кто ковыряться не будет, во всяком случае так просто), а то что вы нашли какой-то там код и написали куда его прикрепить, ну тут ума много не надо)). Вы тогда ставьте конкретный вопрос типо "куда в билдере вставить css код?", а то вы молодец такой)) "сделайте мне вот эту приколюху"))

Отправлено спустя 22 минуты 27 секунд:
visainfinite, посмотрел видос, не поленился, всё понятно и разжевано, теперь к Вам вопрос "Что вы хотите?"
Съешь ещё этих мягких французских булок, да выпей чаю!

Аватара пользователя

Автор Темы
visainfinite
Подающий надежды
Подающий надежды
Сообщения: 135
Зарегистрирован: 18 май 2016, 17:56
Версия Web Builder: 12.5
Имя: Игорь

Эффектный переход между страницами

Сообщение visainfinite » 24 окт 2017, 01:15

spoon, "куда в билдере вставить css код?" Спасибо за понимание!

Аватара пользователя

Alex33
Втянувшийся
Втянувшийся
Сообщения: 63
Зарегистрирован: 04 дек 2016, 14:28
Версия Web Builder: 12.2

Эффектный переход между страницами

Сообщение Alex33 » 24 окт 2017, 06:13

Эффекты то классные, как их прикрутить visainfinite ?
Попробовал по вашей схеме не чего не получилось, выложите пожалуйста свои готовый вариант для образца пожалуйста

Аватара пользователя

spoon
Опытный
Опытный
Сообщения: 729
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 12.5
Имя: Дмитрий
Контактная информация:

Эффектный переход между страницами

Сообщение spoon » 24 окт 2017, 07:31

visainfinite писал(а):34324 "куда в билдере вставить css код?" Спасибо за понимание!

Вставляйте между тегами head в исходнике странице.
Съешь ещё этих мягких французских булок, да выпей чаю!

Аватара пользователя

Автор Темы
visainfinite
Подающий надежды
Подающий надежды
Сообщения: 135
Зарегистрирован: 18 май 2016, 17:56
Версия Web Builder: 12.5
Имя: Игорь

Эффектный переход между страницами

Сообщение visainfinite » 24 окт 2017, 09:32

Alex33, Чуть позже выложу более простой вариант :co_ol:

Аватара пользователя

Alex33
Втянувшийся
Втянувшийся
Сообщения: 63
Зарегистрирован: 04 дек 2016, 14:28
Версия Web Builder: 12.2

Эффектный переход между страницами

Сообщение Alex33 » 25 окт 2017, 03:29

Visainfinite, спасибо большое, а то у меня ошибки какие то вылезают

Аватара пользователя

Автор Темы
visainfinite
Подающий надежды
Подающий надежды
Сообщения: 135
Зарегистрирован: 18 май 2016, 17:56
Версия Web Builder: 12.5
Имя: Игорь

Эффектный переход между страницами

Сообщение visainfinite » 25 окт 2017, 14:10

Alex33, Как и обещал более простой вариант эффектного перехода между страницами, вернее есть парочка:
Вариант №1 - у кого не стоит, где либо функция position: fixed; так как он при animate.css отключаеться. При этом здесь побольше эффектов чем во втором варианте.
1 - выбираем эффект (его название пригодиться для вставки в скрипт) на https://daneden.github.io/animate.css/
2 - скачиваем файлы жмякая правой мышкой на Download Animate.css, далее сохранить объект как.
3 - Копируем его на свой сервер. У меня он находятся в папке css/animation.css
4 - Между тегами <head></head> самой страницы вставляем код подключения файла и сам эффект.
Вот так:
<link rel="stylesheet" href="css/animation.css">
<div class="slideInRight"> (а это название выбранного эффекта)
Все пользуемся!

Вариант №2 - для тех у кого стоит position: fixed; (у меня например зафиксирована шапка сайта)
1 - выбираем эффект (его название пригодиться для вставки в скрипт) на http://www.justinaguilar.com/animations/#
2 - скачиваем файлы жмякая правой мышкой на Download в низу страницы, далее сохранить объект как.
3 - Копируем его на свой сервер. У меня он находятся в папке css/animations.css
4 - Между тегами <head></head> самой страницы вставляем код подключения файла и сам эффект.
Вот так:
<link rel="stylesheet" href="css/animations.css">
<div class="slideUp"> (а это название выбранного эффекта)
Все пользуемся!


Ответить

Вернуться в «Полезное для сайта.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость