0

Поставлена следующая задача:

При прокрутке страницы вниз по мере прочтения контента на заднем фоне должен прокладываться определенный маршрут по карте с помощью canvas и svg.

Кажется, всё сделано, но по какой-то причине карта не отображается. Где может быть ошибка?

Посмотрите и поправьте меня, пожалуйста. Благодарю!

Файлы JS добавил как внешнюю библиотеку. Путь к файлу svg прописан в script_app.js

.container {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
}

.container canvas {
  background: #b1efff;
}

.text {
  position: relative;
  z-index: 1000;
  min-width: 990px;
}

.text section {
  min-height: 800px;
}

.title-up {
  display: block;
}

.title-down {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://праздниккрым.рф/jquery.waitforimages.js"></script>
<script src="http://праздниккрым.рф/script_water.js"></script>
<script src="http://праздниккрым.рф/script_app.js"></script>
<div class="wrapper">
  <div class="main">
    <div class="container"></div>
    <div class="text">
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h2><span class="title-up">К</span><span class="title-down">Начало путешествия</span></h2>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>К</h3>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h2><span class="title-up">Ф</span><span class="title-down">Ф</span></h2>
        <h3>Д</h3>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>К</h3>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h2><span class="title-up">С</span><span class="title-down">Г</span></h2>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>С</h3>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h2><span class="title-up">Б</span><span class="title-down">Б</span></h2>
        <h3>П</h3>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>М</h3>
      </section>
      <section class="js-section" data-zoom-start="2.5" data-stay="true">
        <h2><span class="title-up">А</span><span class="title-down">К</span></h2>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>Г</h3>
      </section>
      <section class="js-section" data-zoom-start="2.5" data-stay="true">
        <h2><span class="title-up">Я</span><span class="title-down">Л</span></h2>
        <h3>Я</h3>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>З</h3>
      </section>
      <section class="js-section" data-zoom-start="2.5" data-stay="true">
        <h2><span class="title-up">А</span><span class="title-down">В</span></h2>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>Ф</h3>
      </section>
      <section class="js-section" data-zoom-start="2.5" data-stay="true">
        <h2><span class="title-up">С</span><span class="title-down">Х</span></h2>
        <h3>М</h3>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>С</h3>
      </section>
      <section class="js-section" data-zoom-start="2.5" data-stay="true">
        <h2><span class="title-up">Б</span><span class="title-down">Х</span></h2>
        <h3>С</h3>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>А</h3>
      </section>
      <section class="js-section" data-zoom-start="2.5" data-stay="true">
        <h2><span class="title-up">С</span><span class="title-down">К</span></h2>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>Р</h3>
      </section>
      <section class="js-section" data-zoom-start="2.5" data-stay="true">
        <h2><span class="title-up">Е</span><span class="title-down">М</span></h2>
      </section>
      <section class="js-section" data-zoom-start="2" data-stay="true">
        <h3>О</h3>
      </section>
      <section class="js-section" data-zoom-start="2">
        <h2><span class="title-up">О</span><span class="title-down">Т</span></h2>
      </section>
    </div>
  </div>
</div>

8
  • Что вам дебаг браузера говорит? И кстати на каком тестили?
    – Hellseher
    11 дек 2019 в 18:10
  • 1
    @Sevastopol' там в логе ошибки в т.ч. загрузки ресурса 12 дек 2019 в 9:24
  • 1
    стоит воспользоваться советами из ответа на мете и отредактировать вопрос
    – Grundy
    13 дек 2019 в 10:01
  • 2
    В сниппетах нельзя использовать http протокол, а https, судя по всему на сайте не настроен, поэтому сниппет не поможет, конкретно в данном случае. Делай пример, который воспроизводит ошибку, желательно выкинув все лишнее. Лучшее всего выкинуть старый код, раз нет исходников и написать все заново. Это будет проще чем отлаживать собранный и минифицированный код
    – Grundy
    13 дек 2019 в 10:29
  • 1
    @Sevastopol' плюсанул, чтобы немного компенсировать издержки на конкурс, удивляюсь, что и отвечающий не сделал подобного, хотя и заработал +125 и щелчок мышкой ему бы ничего не стоил :) 21 дек 2019 в 13:31

1 ответ 1

1
+100

Скрипты подключить в конце страницы в таком порядке

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://праздниккрым.рф/jquery.waitforimages.js"></script>
<script src="http://праздниккрым.рф/script_app.js"></script>    
<script src="http://праздниккрым.рф/script_water.js"></script>

svg выкачать себе и заменить адрес в script_app.js , иначе CORS .

Вроде работает, с остальными ошибками лень возиться.

2
  • @Sevastopol' codesandbox.io/s/smoosh-mountain-mdnr7
    – rodigy
    21 дек 2019 в 9:50
  • @Sevastopol' локально не будет работать, нужно файлы выкачивать, ибо тот же CORS. Какие изменения в ответ?
    – rodigy
    21 дек 2019 в 10:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.