Главная » Файлы » Прочие скрипты » HTML5
Эффект реалистичных дождевых капель на стекле через HTML5 canvas и плагин RainDay
[ Скачать с сервера (6.9 Kb) ] 09.11.14, 12:41:35



Вообще шикарный эффект, в котором капельки скатываются или скапливаются (В прямой зависимости от демо) по запотевшему стеклу. Выглядит просто великолепно!

Для начала посмотрите ДЕМО1, ДЕМО2, ДЕМО3, ДЕМО4

Моё тестирование в фидле: КЛИК1, КЛИК2

Проект на GitHub

Установка:

В самый низ вашего css вставляйте:
Код
#background {    
   width: 100%;    
   height: 100%;    
    }


После < /head > вставляйте:
Код
<img id="background" alt="background" src="" />    
    <script src="/js/rainday.js"></script>    
    <script>    
    window.onload = function () {    
   run();    
    }    

    function run() {    
   var image = document.getElementById('background');    
   image.onload = function () {    
   var engine = new RainyDay({    
   image: this    
   });    
   engine.rain([    
   [2, 2, 5], // Поиграйтесь с этими значениями    
   [1, 2, 2] // И с этими тоже
   ], 500);    
   };    
   image.crossOrigin = 'anonymous';    
   image.src = 'http://i.imgur.com/OVQkDRE.jpg';    
    }</script>


Скрипт из прикреплённого архива залейте в папку js

Всё, дальше скрипт настраивайте под себя так, как вам угодно

Материал подготовлен Apocalypse
Категория: HTML5 | Добавил: Apocalypse | Теги: эффект, стекле, Через, Canvas, плагин, на, дождевых, HTML5, капель, реалистичных
Просмотров: 1014 | Загрузок: 276 | Комментарии: 14 | Рейтинг: 1.0/2
Всего комментариев: 13
0
11 [ЦИТИРОВАТЬ]   [Материал]
Попробуй вот такое решение:
Код
$('.header-img').attr('id', 'apoheader');
function run() {
var image = document.getElementById('apoheader');
image.onload = function () {
var engine = new RainyDay({
image: this
});
engine.rain([
[2, 2, 5], // Поиграйтесь с этими значениями
[1, 2, 2] // И с этими тоже  
], 500);
};
image.crossOrigin = 'anonymous';
image.src = 'http://8.8855.xn--p1ai/wp-content/uploads/2014/06/cropped-cropped-92b49e4d41e8b0381d55a3f24c9ff65f.jpg';
}

0
12 [ЦИТИРОВАТЬ]   [Материал]
При вставке такого кода ничего не происходит
Код
$('.header-img').attr('id', 'apoheader');  //читается как текст
    $('.header-img').attr('id', 'apoheader');  //Если это php код , то:
<?php
   $('.header-img').attr('id', 'apoheader'); ?> //в таком варианте выдает ошибку:
[b]Parse error:  syntax error, unexpected '(', expecting T_VARIABLE or '$'
 
Код
$('.header-img').attr('id', 'apoheader');    
<script>
    function run() {    
    var image = document.getElementById('apoheader');    
    image.onload = function () {    
    var engine = new RainyDay({    
    image: this    
    };);    
    engine.rain([    
    [2, 2, 5], // Поиграйтесь с этими значениями    
    [1, 2, 2] // И с этими тоже
    ], 500);    
    };    
    image.crossOrigin = 'anonymous';    
    image.src = 'http://8.8855.xn--p1ai/wp-content/uploads/2014/06/cropped-cropped-92b49e4d41e8b0381d55a3f24c9ff65f.jpg';    
    }
</script>

При таком коде тоже ничего не происходит(ниже постраюсь оставить в строчках кода, комментарии. Больше всего интересует строчка поиска элемента, по какому id он его ищет, div id, img id, img class, alt и чем они отличаются?) :
Код
<script>
$('.header-img').attr('id', 'apoheader'); //задает атрибут элементу
    function run() {    
    var image = document.getElementById('apoheader'); //поиск элемента по его id    
    image.onload = function () {    
    var engine = new RainyDay({    
    image: this    
    };);    
    engine.rain([    
    [2, 2, 5], // Поиграйтесь с этими значениями    
    [1, 2, 2] // И с этими тоже
    ], 500);    
    };    
    image.crossOrigin = 'anonymous';    
    image.src = 'http://8.8855.xn--p1ai/wp-content/uploads/2014/06/cropped-cropped-92b49e4d41e8b0381d55a3f24c9ff65f.jpg';    
    }
</script>
Насколько я понимаю, мне нужно задать атрибут(что это за атрибут?) элементу, к которому, я хочу применить данный эффект. Извиняюсь за свои низкие знания(

0
13 [ЦИТИРОВАТЬ]   [Материал]
http://imapo.ru/aporaintest.html - вот демо

Но при масштабировании окна canvas ведёт себя не так, как картинка. Учти это

0
9 [ЦИТИРОВАТЬ]   [Материал]
Извиняюсь за флуд, нашёл информацию по поводу классов в Wordpress, если тему писал злой буратин, то он использовал body_class() , где background, подключается через add_theme_support() со свойствами ( 'custom-background' );
в functions.php, картинка в хеадере, также вызывается с помощью add_theme_support со свойствами ( 'custom-header' );
Это нужно для того, что-бы можно было поставить фон из админки. Также можно подключить ручками в head сайта:
Код
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #ff0505; background-image: url(''); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; }
</style>

С этим разобрался. Теперь стоит вопрос о назначении бекгранду div class'a как это сделать и нужен ли он вообще, так как он уже имеет id в виде id="custom-background-css" и css стиль body.custom-background.

0
10 [ЦИТИРОВАТЬ]   [Материал]
Дай ссылку на свой сайт и чётко сформулируй задачу, которая возложена на этот плагин

0
8 [ЦИТИРОВАТЬ]   [Материал]
В продолжение комментария оставленного выше. Нашел custom-background-css через поиск тотал командере в файле wp-includes\theme.php:
Код
?>
<style type="text/css" id="custom-background-css">
body.custom-background { <?php echo trim( $style ); ?> }
</style>
<?php

и тут wp-includes\js\customize-preview.js:
Код
/* Custom Backgrounds */
bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
return 'background_' + prop;
};);

api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
var body = $(document.body),
head = $('head'),
style = $('#custom-background-css'),
update;

update = function() {
var css = '';

// The body will support custom backgrounds if either
// the color or image are set.
//
// See get_body_class() in /wp-includes/post-template.php
body.toggleClass( 'custom-background', !! ( color() || image() ) );

if ( color() )
css += 'background-color: ' + color() + ';';

if ( image() ) {
css += 'background-image: url("' + image() + '");';
css += 'background-position: top ' + position_x() + ';';
css += 'background-repeat: ' + repeat() + ';';
css += 'background-attachment: ' + attachment() + ';';
}

// Refresh the stylesheet by removing and recreating it.
style.remove();
style = $('<style type="text/css" id="custom-background-css">body.custom-background { ' + css + ' }</style>').appendTo( head );
};

$.each( arguments, function() {
this.bind( update );
};);
};);
};);

};) wp, jQuery );

0
7 [ЦИТИРОВАТЬ]   [Материал]
Привет. Давно хотел разобраться с этим фрамеворком, но получается, не то что я хотел. Как сделать фоновую картинку(просто картинку) с этим элементом разобрался. Дело в том, что в Wordpress у многих тем, фоновая картинка и картинка в header написаны на php(плохо знаю язык, в отличии от html) и не имеют четкого div class, через инспектор(firebug) нахожу этот елемент, к примеру:
Код
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('http://10.7.0.252/wp-content/uploads/2014/12/snow_park_bench_1920x10801.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>

Потом начинаю искать его в страницах и css(header.php index.php footer.php style.css) и нигде его нету. Возможно он написан на php в functions.php, но там нету div class id этого элемента:
Код
// Add theme support
add_theme_support( 'automatic-feed-links' ); add_theme_support( "post-thumbnails" ); add_theme_support( "custom-background" );
function debase_add_editor_styles() {
add_editor_style();
}

$args = array(
'flex-width' => true,
'width' => 480,
'flex-height' => true,
'height' => 100,
'default-text-color' => 'FFF',
'header-text' => true,
);
add_theme_support( 'custom-header', $args );

Суть проблемы заключается в том, что div class #background не существует. Можно создать его и вставить в Index.php(header.php) и style.css, но тогда он будет как отдельная картинка, а не фон сайта(background).
Насколько я понимаю <img id="background" alt="background" src="" /> в этой строке нужно указать div class картинки(в данном случае background) для картинки на которую ты хочешь применить этот эффект, также как и в самом скрипте в этой строке:
Код
var image = document.getElementById('background'); //div class элемента к которому должен применен эффект.

Извиняюсь за такое огромное количество вопросов и инфы, уже 3 день копаюсь не могу разобраться с этим эффектом. Главный вопрос заключается в том, как применить этот эффект, к уже существующим на сайте div class(картинкам id image). В интернете слишком мало инфы для этого эффекта, и то, та что есть, на англ. языке
и везде одинаковая. После 3 дневных поисков, нашел твою страничку, где более менее подробно написано про этот эффект, за что, огромное спасибо и респект, побольше бы таких людей и сайтов.

0
1 [ЦИТИРОВАТЬ]   [Материал]
Блин очень классный эффект, а можно ли его прикрепить к body на прямую и зафиксировать на экране ну как тут, я в js плохо шарю пробовал стилями настроить изображение но почему то не вышло. Такой эффект бы классно смотрелся и на этом сайте

0
2 [ЦИТИРОВАТЬ]   [Материал]
http://jsfiddle.net/apoucoz/7n2v5xrh/2/ - вот тут набросал то, что тебе нужно smile

0
3 [ЦИТИРОВАТЬ]   [Материал]
Благодарю
А подскажите что делать что бы он и при скролле в низ оставался на экране, прямо как на этом сайте, свойство background-attachment:fixed; не помогает

0
4 [ЦИТИРОВАТЬ]   [Материал]
http://jsfiddle.net/apoucoz/7n2v5xrh/11/

0
5 [ЦИТИРОВАТЬ]   [Материал]
Огромнейшее спасибо вам

0
6 [ЦИТИРОВАТЬ]   [Материал]
На здоровье smile

Имя *:
Email: