Скрипт не отображает эффект на странице
Вложений: 1
Здравствуйте.
Пытаюсь воспроизвести пример с сайта 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>
|
1 - подключите скрипты
<script src="curtains.min.js"></script> <script src="rain.js"></script> 2 - локально такие эффекты могут не работать, проверяйте на хостинге |
А как этот скрипт запустить локально, без хостинга (просто открыв страницу) ?
Наверное надо curtains.min.js и rain.js - внутрь страницы переместить ? |
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>
|
рони,
Ясно. А как это запустить ? Я открываю html файл - и ничего не происходит. Страница показывает только большой черный прямоугольник. |
Цитата:
Цитата:
|
Цитата:
У меня при запуске - они лежали в одной папке. |
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" /> С чем это связано я не знаю :( |
Мне страницу нужно именно с компьютера запустить, а не с хостинга.
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:21. |