Анимация CSS3 Joomla

Для создания красивой анимации на сайте средствами CSS3 используем следующие вещи:
1. С этой страницы скачиваем файл animations.css и помещаем в папку css Вашего шаблона
http://www.justinaguilar.com/animations/


2. В index.php шаблона в блок <header> </header> помещаем код

<link rel="stylesheet" href="<путь до файла>/animations.css">

3. Прописываем класс для анимируемого элемента.

 <div id="object" class="slideUp">

4. В CSS файле шаблона делаем элемент невидимым


 #object{
    visibility: hidden;
}


5. В секцию <header> подключим скрипт

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

6. Перед закрывающим тегом </body> пропишем скрипт добавляющий анимацию при прокрутке страницы


<script>
    $(window).scroll(function() {
        $('#object').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+400) {
                $(this).addClass("slideUp");
            }
        });
    });
</script>


- где #object ID элемента, slideUp тип анимации

Предлагаю вашему вниманию подборку интересных каналов Telegram по дизайну интерьера и архитектуре

https://tele.gg/dizain_interjera - канал практикующего дизайнера интерьера с интересными советами по ремонту и декору.

https://tele.gg/interio_inspiration - канал с ежедневной подборкой проектов интерьера для вашего вдохновения

https://tele.gg/arh_inspiration - так же подборка вдохновляющих проектов, но уже по архитектуре