14 февраля, сердечки, рюшечки и это вот все! Круче чем новогодняя мотня яндекса!

[Yoda]

<style>
	#hearts {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
	z-index:999999;
	pointer-events:none;
}
.heart-container {
    float: left;
    position: absolute;
    top: -20px;
    left: -20px;
    -moz-animation-duration: 8s;
    -moz-animation-name: fall;
    -moz-animation-timing-function: linear;
    -webkit-animation-duration: 8s;
    -webkit-animation-name: fall;
    -webkit-animation-timing-function: linear;
}
@-moz-keyframes fall {
    from {
        top: -20px;
    }
    to {
        top: 100%;
    }
}
@-webkit-keyframes fall {
    from {
        top: -10%;
    }
    to {
        top: 100%;
    }
}
.heart {
    overflow: hidden;
    height: 20px;
    width: 20px;
    font-size: 20px;
    text-align: center;
    color: red;
    -moz-animation-duration: 0.5s;
    -moz-animation-name: swing;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-transform-origin: center center;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: swing;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-transform-origin: center center;
}
@-moz-keyframes swing {
    from {
        -moz-transform: rotate(-45deg) translateX(10px);
    }
    to {
        -moz-transform: rotate(45deg) translateX(-10px);
    }
}
@-moz-keyframes spin {
    from {
        -moz-transform: scaleX(1) translateX(5px);
    }
    50% {
        -moz-transform: scaleX(0.1);
    }
    to {
        -moz-transform: scaleX(1) translateX(-5px);
    }
}
@-webkit-keyframes swing {
    from {
        -webkit-transform: rotate(-45deg) translateX(10px);
    }
    to {
        -webkit-transform: rotate(45deg) translateX(-10px);
    }
}
@-webkit-keyframes spin {
    from {
        -webkit-transform: scaleX(1) translateX(5px);
    }
    50% {
        -webkit-transform: scaleX(0.1);
    }
    to {
        -webkit-transform: scaleX(1) translateX(-5px);
    }
}

</style>

<script>
	$("body").append('<div id="hearts"><div class="heart-container"><div class="heart">♥</div></div></div>');
	
	function newHeart () {
    var hearts = $('.heart');
    if (hearts.length >= 120) return setTimeout(newHeart, 1000);
    var c = $('.heart-container:first').clone();
    var anims = ['swing', 'spin'];
    var a = anims[Math.round(Math.random())];
    c.find('.heart')
                  .css('opacity', 0.2 + Math.random() * 0.8)
                  .css('-webkit-animation-name', a)
                  .css('-moz-animation-name', a);
    c.css('left', (10 + Math.random() * ($('body').innerWidth() - 10)) + 'px');
    c.css('-webkit-animation-name', 'fall');
    c.css('-webkit-animation-duration', (4 + Math.random() * 14) + 's');
    c.css('-webkit-transform', 'scale(' + (0.4 + Math.random() * 2) + ')');
    c.css('-moz-animation-duration', (4 + Math.random() * 14) + 's');
    c.css('-moz-transform', 'scale(' + (0.4 + Math.random() * 2) + ')');
    $('#hearts').append(c);
    c.bind('animationend', function () { c.remove(); });
    c.bind('webkitAnimationEnd', function () { c.remove(); });
    setTimeout(newHeart, 100);
}
setTimeout(newHeart, 100);

</script>

 

тут меня в три часа ночи поймали перед сном, попросили сделать падающие сердечки ко дню святого Валентины.
За три секунды был найдет отличный скрипт:

http://jsfiddle.net/rfreebern/KCfkz/

 

Выше немного модифицированный, увеличено количество падающих элементов, и поправлен стиль, для того, чтобы сделать кликабельным все что ниже дива под сердечками, а так же решен вопрос со скролом и шириной экрана. 

 

Вставляйте куда хотите, в footer.tpl или в header.tpl (для 3.x в header.twig или footer.twig).

Не благодарите!

 

 

[Shureg]

Жесть. И кто-то до сих пор такой трэш на свой сайт ставит?

[Milanix]

Также сердечки 

1. Скачать архив heart.zip и распаковать его на рабочий стол.

2. Закачать файл heart.js на ваш сайт по FTP .

3. Подключить скрипт перед закрывающим тегом </body>:

<script src="/путь к файлу/heart.js"></script>

Установка закончена

В самом файле heart.js вы можете изменить настройки (размер, скорость и другие параметры).

 

 

heart.rar