Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.09.2019, 17:37
Интересующийся
Отправить личное сообщение для ttt480 Посмотреть профиль Найти все сообщения от ttt480
 
Регистрация: 29.01.2019
Сообщений: 15

Скрипт не отображает эффект на странице
Здравствуйте.

Пытаюсь воспроизвести пример с сайта https://atuin.ru/blog/effekt-dozhdya-na-stekle/

Это капли дождя, стекающие по стеклу.
Вроде все сделал как написано (там приведен пример).
Но что-то вот - не получается.

Подскажите - как правильно составить код, приведенный в том описании - чтобы эффект на странице появился ?

Вот сам код и имеющиеся файлы:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <style>



.canvas-wrap {
    position: relative;
}
#canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.plane {
    width: 100%;
    height: 500px;
}
.plane img {
    display: none;
}


    </style>
</head>
<body>
 


<div class="canvas-wrap">
    <div id="canvas"></div>
    <div class="plane">
        <img data-sampler="dispImage" src="rain.jpg" crossorigin="anonymous" />
    </div>
</div>


</body>
</html>
Вложения:
Тип файла: zip 1.zip (497.6 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2019, 06:41
Новичок на форуме
Отправить личное сообщение для AlexaderS Посмотреть профиль Найти все сообщения от AlexaderS
 
Регистрация: 05.09.2019
Сообщений: 2

1 - подключите скрипты
<script src="curtains.min.js"></script>
<script src="rain.js"></script>

2 - локально такие эффекты могут не работать, проверяйте на хостинге
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2019, 12:40
Интересующийся
Отправить личное сообщение для ttt480 Посмотреть профиль Найти все сообщения от ttt480
 
Регистрация: 29.01.2019
Сообщений: 15

А как этот скрипт запустить локально, без хостинга (просто открыв страницу) ?

Наверное надо curtains.min.js и rain.js - внутрь страницы переместить ?
Ответить с цитированием
  #4 (permalink)  
Старый 05.09.2019, 15:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

ttt480,
скрипты и картинку лучше будет залить к себе.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style type="text/css">
.canvas-wrap {
    position: relative;
}
#canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.plane {
    width: 100%;
    height: 500px;
}
.plane img {
    display: none;
}
 </style>
</head>

<body>
<div class="canvas-wrap">
    <div id="canvas"></div>
    <div class="plane">
        <img data-sampler="dispImage" src="https://atuin.ru/demo/1280/rain.jpg" crossorigin="anonymous" />
    </div>
</div>

<script src="https://atuin.ru/demo/curtainsjs/build/curtains.min.js"></script>
<script src="https://atuin.ru/demo/curtainsjs/rain-at.js"></script>

</body>
</html>

Последний раз редактировалось рони, 05.09.2019 в 15:24.
Ответить с цитированием
  #5 (permalink)  
Старый 05.09.2019, 15:59
Интересующийся
Отправить личное сообщение для ttt480 Посмотреть профиль Найти все сообщения от ttt480
 
Регистрация: 29.01.2019
Сообщений: 15

рони,
Ясно.
А как это запустить ?
Я открываю html файл - и ничего не происходит.
Страница показывает только большой черный прямоугольник.
Ответить с цитированием
  #6 (permalink)  
Старый 05.09.2019, 16:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от ttt480
А как это запустить ?
Сообщение от рони
скрипты и картинку лучше будет залить к себе.
скрипты, страница, и картинка должны лежать в одной папке!!!
Ответить с цитированием
  #7 (permalink)  
Старый 05.09.2019, 16:24
Интересующийся
Отправить личное сообщение для ttt480 Посмотреть профиль Найти все сообщения от ttt480
 
Регистрация: 29.01.2019
Сообщений: 15

Сообщение от рони Посмотреть сообщение
скрипты, страница, и картинка должны лежать в одной папке!!!
Именно так.
У меня при запуске - они лежали в одной папке.
Ответить с цитированием
  #8 (permalink)  
Старый 05.09.2019, 16:49
Новичок на форуме
Отправить личное сообщение для AlexaderS Посмотреть профиль Найти все сообщения от AlexaderS
 
Регистрация: 05.09.2019
Сообщений: 2

ttt480,
Залейте это дело все на хостинг и картинка не будет черной.
Или попробуйте картинку брать не локальную, а прописывать урл, например:
<img data-sampler="dispImage" src="https://images.unsplash.com/photo-1519567770579-c2fc5436bcf9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" crossorigin="anonymous" />


С чем это связано я не знаю
Ответить с цитированием
  #9 (permalink)  
Старый 05.09.2019, 16:52
Интересующийся
Отправить личное сообщение для ttt480 Посмотреть профиль Найти все сообщения от ttt480
 
Регистрация: 29.01.2019
Сообщений: 15

Мне страницу нужно именно с компьютера запустить, а не с хостинга.
Ответить с цитированием
  #10 (permalink)  
Старый 05.09.2019, 18:22
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от ttt480
Мне страницу нужно именно с компьютера запустить, а не с хостинга.
nodejs поставьте и запустите вашу страницу
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как применить один и тот же скрипт на странице два раза, с разными значениями noid Элементы интерфейса 5 31.10.2014 13:24
Каждой странице вызвать свой скрипт samgreenchik Общие вопросы Javascript 3 08.09.2014 14:38
Изменить скрипт Изучаю_JS Общие вопросы Javascript 0 12.02.2012 22:05
скрипт смены контента на странице bolton Элементы интерфейса 1 25.01.2012 02:58
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 01:05