Jquery div плавное появление: Плавное появление блока (div) в Jquery

Плавное появление изображений при загрузке страницы

$(function(){

    /*плагин*/

    (function($){

        $.fn.liImageLoad = function(){

            return this.each(function(){

                var imgEl = $(this),

                    imgElHeight = imgEl.attr(‘height’),

                    imgElSrc = imgEl.data(‘src’),

                    imgElPosTop = imgEl.offset().top,

                    imgElPosBot = (imgElPosTop + imgEl.outerHeight()),

                    wH = $(window).height(),

                    wT = $(window).scrollTop(),

                    wB = (wT + wH),

                    f1 = false,

                    data = ‘data:image/gif;base64,R0lGODlhMgAyAIAAAO7u7gAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkU3RDVGRjNGQjRFMTFFMTk5OEVCNEEyNEEzOUZFMTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkU3RDVGRjRGQjRFMTFFMTk5OEVCNEEyNEEzOUZFMTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCRTdENUZGMUZCNEUxMUUxOTk4RUI0QTI0QTM5RkUxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCRTdENUZGMkZCNEUxMUUxOTk4RUI0QTI0QTM5RkUxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh5N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAyADIAQAIzhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKicFADs=’

                    imgEl. attr(‘src’,data)

                function imgElPos(){    

                    if(f1 == false){

                        if(imgElPosBot > wT && imgElPosTop < wB){

                            f1 = true;

                            imgEl.attr(‘src’,imgElSrc).load(function(){

                                imgEl.css({opacity:’0′}).animate({opacity:’1′});

                            });

                        }

                    }

                }

                imgElPos();

                $(window).on(‘scroll’,function(){

                    wH = $(window).height();    

                    wT = $(window).scrollTop();

                    wB = (wT + wH);

                    imgElPos()

                })

            });

        };

    })(jQuery);

    /*инициализация плагина*/

    $(‘img[data-src]’).liImageLoad();

});

Анимация появления блоков для Landing Page и не только при помощи fm.revealator.jquery.js

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

Главный экран – сразу появляющаяся верхняя часть страницы при загрузке сайта.

Но в общем, для многих сайтов данная анимация не чем не повредит, и даже придаст динамичность, новизну и приятный вид веб проекту. Главное не “пихать” анимацию с “фанатизмом”.

Revealator

Revealator – это простой плагин анимации, запускаемый из области просмотра, который анимирует любые элементы с помощью пользовательских эффектов CSS3 при их прокрутке в окне просмотра.

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

Особенности

• Определяет, находится ли элемент в области просмотра, и добавляет к нему класс
• 8 встроенных анимаций на основе анимации CSS3.
• Вы можете добавить свои собственные эффекты, используя CSS3.
• Пользовательская продолжительность анимации и задержка.

Как работает плагин

Плагин Revealator состоит из двух основных файлов:

fm.revealator.jquery.css – CSS стили эффектов,

fm.revealator.jquery.js – скрипт.

Для работы плагина, необходимо наличие подключенной библиотеки jQuery.

Краткая инструкция по работе с плагином

1. Загрузите таблицу стилей fm.revealator.jquery.css в head раздел и fm.revealator.jquery.js в конец документа.

   <link rel="stylesheet" href="fm.revealator.jquery.css">
   <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
   <script src="fm.revealator.jquery.js"></script>
   

2. Укажите тип эффекта, который вы хотите применить к элементу, когда он появляется.

   revealator-fade
   revealator-rotateleft
   revealator-rotateright 
   revealator-slideleft 
   revealator-sliderightt
   revealator-slideup
   revealator-ZoomIn
   revealator-ZoomOut     

Что бы в верстке объект выглядел примерно так:

При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

Анимация

Обычное появление элемента

Появление элемента с легким поворотом влево

Появление элемента с легким поворотом вправо

Появление элемента слайдом справа на лево

Появление элемента слайдом слева на право

Появление элемента слайдом снизу на вверх

Появление элемента с эффектом увеличения от большого к меньшему

Появление элемента с эффектом увеличения от меньшего к большему

Задержка:

Установить задержку эффекта на 100ms

Установить задержку эффекта на 200ms

Установить задержку эффекта на 300ms

Установить задержку эффекта на 1900ms

Установить задержку эффекта на 2000ms

Продолжительность:

Установить длительность эффекта на 100ms

Установить длительность эффекта на 200ms

Установить длительность эффекта на 300ms

… … Установить длительность эффекта на 1900ms

Установить длительность эффекта на 2000ms

Полезные ссылки

Глянуть на работу плагина в живую

jQuery-Revealator готовый пример применения

Так же не плохой пример от коллеги по цеху

И еще от одного коллеги

Revealator страница на GitHub

https://github. com/QODIO/revealator

Загрузить Revealator

Источник записи: https://techblog.sdstudio.top

fit_modal — npm

EN

View documentation

RU

_

Адаптивное модальное окно для контента с возможностью ajax загрузки

_

Возможности:

• Простая html структура
• Три типа реализации в html:
  • только блок контента, который автоматически обернется нужными элементами,
  • полный html модального окна,
  • загрузить контент через ajax (с использованием любого из двух предыдущих вариантов)
• 32 опции для полной настройки плагина
• 6 событий + 2 обратных события + пользовательские функции
• Широкий спектр применения (по дефолту активироваться кликом по элементу, но также с легкостью можно повесить активацию на любое другое событие)
• Несколько типов анимации появления а так же легкое создание и присвоение своих анимаций через css
• Пользовательская настройка адаптивности
• Простая настройка ajax возможностей
• Подходит для BEM структуры проекта

Быстрый старт:

Подключаем:

• jquery.fit_modal.css
• jquery.fit_modal.js

или

• jquery.fit_modal.min.css
• jquery.fit_modal.min.js

из папки dist

Для нормальной работы плагина требуется:

• normalize.css или reset.css
• jQuery 1.8.3+

Тип 1:

 
<button class="btn__active-modal" 
    data-title="Feedback form" 
    data-win-animation="fade_in_top" 
    data-content_block=".content__wrap">
    Open modal
</button>
 
<div class="content__wrap">Hallo world!</div>
 
<script>
    $(window).ready(function () {
        
        
        $('.btn__active-modal').fit_modal();
        
    });
</script> 
 

Если у вас на странице несколько типов контента, то каждый будет отдельным модальным окном

Аттрибуты:

• data-title — Заголовок модального окна
• data-win-animation — Анимация появления окна (по умолчанию: fade_in)
• data-content_block — указывает класс обертки контента
• data-href — если включен ajax мод, сюда пишется ссылка на документ или сервер, откуда нужно брать контент

Атрибуты имеют приоритет над опциями!

Тип 2:

 
<button class="btn__active-modal" data-content_block=". content__wrap_1">
    Open modal №1
</button>
<button class="btn__active-modal" data-content_block=".content__wrap_2">
    Open modal №2
</button>
 
<div class="modal__frame">
    <div class="modal__window">
        <div class="modal__window__header">
            <div class="modal__window__close"></div>
            <div class="modal__window__title"></div>
        </div>
        <div class="modal__window__body">
            <div class="content__wrap_1">Hallo world!</div>
 
            <div class="content__wrap_2">I'm alive!</div>
        </div>
    </div>
</div>
 
<script>
    $(window).ready(function () {
        
        
        $('.btn__active-modal_1').fit_modal({
            fast_create : false,
            window_animation_type   : 'fade_in_top',
            frame_animation_speed   :  400, 
            modal_title  :  'Hallo world!',
        });
        $('.btn__active-modal_2').fit_modal({
            fast_create : false,
            window_animation_type   : 'fade_in_left',
            win_animation_speed     :  200, 
            modal_title  :  "I'm alive!",
        });
    });
</script> 
 

Такой вариант активации позволяет запускать в одном модальном окне несколько типов контента с разными параметрами, что может быть полезно в некоторых ситуациях и существенно сокращает количество html кода на странице

Тип 3:

 
<button class="btn__active-modal" data-href="test.html">
    View document
</button>
 
<div class="content__wrap_ajax"></div>
 
<script>
    $(window).ready(function () {
        
        
        $('. btn__active-modal').fit_modal({
            on_ajax_mod  :  true,
            modal_content_block : 'content__wrap_ajax',
            modal_title : 'View document',
            window_animation_type  : 'fade_in_top'
        });
    });
</script> 
 

Таким способом вы можете подгрузить контент через ajax

У ajax мода есть свои настройки:

    $('element').fit_modal({
        on_ajax_mod  :  true,
 
        ajax_mod                : { 
            href      :  null, 
            post_type :  'GET', 
            data      :  null, 
            error_message : "Server error or page not found.", 
            success_custom_func : null, 
            error_custom_func : null 
        },
    });

Адаптивность

    $('element').fit_modal({
        responsive_mod          : {  
            media : 0, 
            on_custom : null, 
            off_custom : null, 
            custom_func : null 
        }
    });

В параметре media указывается с какого разрешения запускать адаптивность (по умолчанию 768px). 0 — адаптивность отключена. Остальные параметры это пользовательские функции.

Быстрая стилизация

    $('element').fit_modal({
           window_style : {
               "background" : "rgba(110, 117, 142, 0.5)"
           },
 
 
           frame_style : {
               "borderRadius" :  "15px"
           }, 
    });

• frame_style — Стиль фона
• window_style — Стиль окна

Можно задать любые параметры css.

API

Опции

Name	Default	Description
modal_frame	.modal__frame	Класс общей обертки (фона) модального окна
modal_window	. modal__window	Класс модального окна
modal_body	.modal__window__body	Класс тела модального окна
modal_title_class	.modal__window__title	Класс заголовка модального окна
modal_title	Modal window	Заголовок модального окна
modal_content_block	null	Класс обертки контента
frame_animation_speed	300	Скорость анимации фона
win_animation_speed	500	Скорость анимации окна
window_animation_type	fade_in_top	Тип анимации окна
modal_close	.modal__window__close	Класс кнопки закрытия
fast_create	true	Сгенерировать модальное окно и обернуть им контент
active_custom_func	null	Пользовательская функция активируется при включении окна
close_custom_func	null	Пользовательская функция активируется при закрытие окна
window_style	{}	Быстро задать стили окна
frame_style	{}	Быстро задать стили фона
on_ajax_mod	false	Включить Ajax мод (Загрузка внешнего контента)
ajax_mod	{options}	Опции ajax
close_on_bg	true	Закрывать окно кликом по фону
responsive_mod	{options}	Настройки адаптивности
fix_fw_el	null	Исправляет прыгание fixed элементов с 100% шириной (нужно добавить класс элемента)
fix_right_el	null	Коррекция фиксированного и абсолютного элементы с позиционированием по правому краю (вам нужно добавить класс элемента)

ajax_mod

Name	Default	Description
href	null	Ссылка на страницу или сервер
post_type	‘GET’	Тип запроса
data	null	Что передать нужно отдать на сервер
error_message	Server error or page not found.	Сообщение об ошибке
success_custom_func	null	Функция при успешной отправке
error_custom_func	null	Функция при ошибке

responsive_mod

Анимации

• fade_in — Плавное появление
• fade_in_top — Плавное появление сверху
• fade_in_down — Плавное появление снизу
• fade_in_left — Плавное появление слева
• fade_in_right — Плавное появление справа
• zoom_in — Плавное увеличение

События

• fm.onActive — При Активации модального окна
• fm.onWindow — При Появлении контентной области модального окна
• fm.onClose — При закрытии модального окна
• fm.onCloseFrame — При полном закрытии модального окна
• fm.onResponsive — При включении адаптивности
• fm.offResponsive — При выключении адаптивности

   var this_modal = $('element').fit_modal();
 
   this_modal.on('fm.onActive', function() {
       console.log('wow!')
   });

##### Пользовательская функция

     $('element').fit_modal({
        active_custom_func : function (el, id) {
            console.log(el);
            $(this.modal_content_block).html('ID your modal window' + id.slice(1));
        }
     });

В примере мы вывели в консоль объект на который был произведен клик и произвольно сгенерированный индикатор модального окна в область контента.

Обратное событие

    
    var element = $('element'). fit_modal({
        modal_title : 'Hallo World!',
        modal_content_block : '.content-block',
        window_animation_type   : 'fade_in_top'
    });
    
    function active_modal() {
        return element.trigger('on.modal.active');
    }
    
     setTimeout(active_modal, 5000);

В данном примере мы активируем модальное окно на странице через 5 секунд после ее загрузки используя обратное событие on.modal.active

Обратное события

• on.modal.active — активация модального окна
• on.modal.close — закрытие модального окна

Планы по развитию плагина

• Возможность переключения между модальными окнами (пролистывание) при помощи встроенного интерфейса
• Встроенный мод галереи изображений

Build

 
__dist     -->  Файлы плагина
__dist_src -->  Исходники плагина
__public   -->  Файлы демо страницы
______Css           -->  Стили  (minify)
______fonts         -->  Шрифты     
______Js            -->  javaScript (minify)
______img           -->  Изображения
__src      --> Исходники демо страницы
______components    -->  Компоненты
______js            -->  javaScript (not minify)
______css           -->  css (not minify)
______nib           -->  функции для stylus
______plugins       -->  Плагины
 

По всем вопросам пишите на e-mail: [email protected]

Лицензия

© Philipp Zhulev MIT License.

jQuery fadeOut (расширенный) | Кевин Чисхолм

Метод jQuery fadeOut может принимать несколько аргументов. Вы можете установить продолжительность, замедление, а также предоставить обратный вызов завершения

Скрытие элементов DOM, безусловно, является общей задачей для любого веб-разработчика интерфейса
, а метод jQuery.fadeOut () позволяет не только скрыть элемент, но и анимировать это действие. Теперь, хотя постепенное исчезновение может улучшить пользовательский опыт, для веб-разработчика было бы неплохо иметь некоторый контроль над этим.К счастью, метод jQuery.fadeOut () обеспечивает именно это. Благодаря некоторым расширенным функциям, которые позволяют определять продолжительность анимации и эффект замедления, он управляет «ощущением» этой анимации. Другими словами, мы не просто хотим переместить объект из точки A в точку B; мы хотим, чтобы это движение имитировало движение объектов в реальном мире. Мы также можем передать функцию обратного вызова методу jQuery.fadeOut () , который позволяет нам действовать после успешного завершения постепенного исчезновения этого элемента DOM.Хотя вам не всегда нужно пользоваться этой функцией, это, безусловно, очень важно знать об этом. Дело в том, что способность надежно действовать после успешного завершения анимации — это бизнес-требование, которое возникает чаще, чем многие могут подумать.

Существует нечеткая линия между методами jQuery hide , fadeOut и animate . В конце концов, все они используют анимацию jQuery. В методе fadeOut , если вы не передаете аргументов, совпадающие элементы исчезают с длительностью 800 мс (0.8 секунд). Но если вы хотите, чтобы постепенно исчезал с элементов, вы можете указать настраиваемую продолжительность, замедление и обратный вызов, когда метод fadeOut завершится.

Попробуйте сами!

В приведенном выше примере нажмите кнопку с надписью: «Угасание абзаца». Вы заметите, что абзац постепенно исчезает. Вторая кнопка просто обновляет страницу, так что пример можно легко повторять снова и снова.

Теперь перейдите на вкладку HTML . Вы увидите встроенную таблицу стилей (элемент style ). Здесь мы определяем класс .done , который утверждает, что любой элемент с этим классом имеет зеленый фон и белый текст. Когда вы запустите пример кода, вы заметите, что после завершения анимации фон кнопки изменится на зеленый с белым текстом.

Теперь перейдите на вкладку JavaScript . Для элемента есть обработчик события щелчка: button # fadeOut .При нажатии этой кнопки метод jQuery fadeOut вызывается для каждого элемента абзаца на странице (в данном случае только один).

Обратите внимание, что методу jQuery fadeOut передаются три аргумента. Первый аргумент — это свойство duration , которое имеет значение: 2000 . Это означает, что постепенное исчезновение абзаца должно длиться 2000 миллисекунд, или две секунды . Второй аргумент: «качели» — для смягчения.Это делает анимацию более реалистичной. Третий аргумент — это функция. Эта функция обратного вызова будет выполнена после завершения постепенного исчезновения. Внутри этой функции мы меняем текст кнопки на «Затухание завершено!» . Также мы добавляем класс «готово» .

8 демонстраций table, menu, div и др.