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

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

Вот народ пользуйтесь! Вижу никто помочь не хотел :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** » 26 июл 2016, 20:12

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

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

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

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

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

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

А я оформил как полагается, [code][/code] всё же не просто так придумали :men:

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

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

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

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

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

Отправлено спустя 4 минуты 48 секунд:

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

Т.е. кому-то нужно разобраться, состряпать вам код, а вы будите идейки подкидывать? Это билдера ну ни как не касается.

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

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

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

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

Отправлено спустя 22 минуты 27 секунд:
visainfinite, посмотрел видос, не поленился, всё понятно и разжевано, теперь к Вам вопрос "Что вы хотите?"

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

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

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

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

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

Вставляйте между тегами head в исходнике странице.

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

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

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

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"> (а это название выбранного эффекта)
Все пользуемся!

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

Добро пожаловать на форум!