Сценарии не загружаются после загрузки и перехода на новую страницу с использованием (Barba. js) - PullRequest
Новая
       68

Сценарии не загружаются после загрузки и перехода на новую страницу с использованием (Barba. js)

0 голосов
/ 27 мая 2020

ВОТ ПРОБЛЕМА:

https://i.stack.imgur.com/AMOlF.gif

С моим индексом все работает нормально. html. На первой странице .onload все изображения перетаскиваются и перемещаются по всей странице. Однако, когда Я перешел на СТРАНИЦУ О. html И GO НАЗАД К ИНДЕКСУ. html мой скрипт, похоже, больше не работает, и я вижу только одно изображение, которое не теперь можно даже перетаскивать.

мой проект здесь: https://codepen.io/cat999/project/editor/AEeEdg

КАК ИСПРАВИТЬ ПРОБЛЕМУ? МОЖЕТ ЛИ КТО-ТО ПОМОЧЬ МНЕ ИСПРАВИТЬ МОЙ КОД? 

var winWidth = window.innerWidth,
    winHeight = window.innerHeight,
    threeWinHeight = winHeight*3;

$(window).on('resize', function(){
  winHeight = window.innerHeight,
  twiceWinHeight = winHeight*2;
});


$('.shape').each(function(){
  var topPos = Math.floor(Math.random()*1300),

      //BE CAREFUL 7000px is less then total body height or  CAUSING OVERFLOW
      leftPos = Math.floor(Math.random() * winWidth);
  $(this).css('top', topPos + 'px');
  $(this).css('left', leftPos + 'px');
});




Draggable.create('.shape', {
  //type:"rotation",
  bounds: '.section-2',
  edgeResistance:0.65,
  throwProps:true,
});



var number = Math.floor((Math.random() *15) + 2);
var number2 = Math.floor((Math.random() * 0) + -15);
var number3 = Math.floor((Math.random() * 0) + 15);
var number4 = Math.floor((Math.random() * 0) + 6);
$(".shape--circle").css("transform", "rotate(" + number2 + "deg)");
$(".shape--square").css("transform", "rotate(" + number3 + "deg)");
$(".shape--circle-2").css("transform", "rotate(" + number4 + "deg)");

Я пытаюсь добавить следующий код JS в свой файл main. js внутри функции barba.init, но не работает: 

  views: [{
        namespace: 'home-section',
        beforeEnter({ next }) {

        // load  script

        let script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js'; 
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js';
script.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js'; // location of your draggable js file that is responsible for that image loading and dragging functionality

        next.container.appendChild(script);
        }, 
    }],

`````


  [1]: https://i.stack.imgur.com/AMOlF.gif
...