Понедельник, 25.09.2017
Главная / Landing Page / 3D Flip эффект картинки на jQuery

3D Flip эффект картинки на jQuery

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

Благодаря библиотеке jQuery Flip plugin и немного CSS, этого эффекта легко достичь.

Для создания flip анимации на HTML, мы должны создать два div’a: front (видимый) и back (скрытый), затем применить некоторые CSS стили и небольшой кусок кода на javascript.

Вот страничка плагина с примерами от автора.

Шаг №1. Скачать плагин jQuery Flip plugin

Переходим в jQuery Flip plugin’s repository и нажимаем  кнопку «Скачать zip».

 jQuery Flip plugin

  • Распаковываем архив
  • Находим файл jquery.flip.min.js
  • Загружаем файл на ваш хостинг

Шаг №2. HTML код

<div class="flip"> 
    <div class="front"> 
        <img src="/path/to/image.jpg" alt="" />
    </div> 
    <div class="back">
        <h3>Some Text in the Back!</h3>
        <!-- На развороте будет другая картинка
        <img src="/path/to/image2.jpg" alt="" />
        -->
    </div> 
</div>

Подгоните данный код под ваши нужды.

Шаг №3. CSS стили

В каждой конкретной ситуации стили будут отличаться, но вот пример:

.flip {
    height: 199px;
    width: 300px;
    margin: 0 auto;
}
.flip img {
    width: 300px;
    height: auto;
}
.flip .back {
    background: #2184cd;
    color: #fff;
    text-align: center;
}

Шаг №4. Код Javascript

Подключаем в head библиотеку jquery (если она у вас еще не была подключена)

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Подключаем jQuery Flip plugin

<script src="/path/to/jquery.flip.min.js"></script>

Добавить следующий js код для инициации эффекта при наведении мыши

<script>
$(function(){
    $(".flip").flip({
        trigger: 'hover'
    });
});
</script>

Для эффекта переворота по горизонтали

<script>
$(function(){
    $(".flip").flip({
        trigger: 'hover',
        axis: 'x'
    });
});
</script>

Дополнительные опции плагина

Атрибут Возможное значение По умолчанию Доступность Описание
axis ‘y’, ‘x’ ‘y’ Всегда Ось, вокруг которой хотите вращать
trigger ‘click’, ‘hover’, ‘manual’ ‘click’ Init only Event that activates the flip action. Using manual means that you have to activate it via javascript. When this is set to click and the tap event is available (through e.g. jQuery Mobile or jQuery Touch Events), flip will bind to that instead of to click as a regular click will also instantaneously trigger a tap event, but not vice-versa. This gets rid of the 300ms click delay on mobile browsers.
reverse true, false false Всегда Set to true if you want to reverse the direction of the flip.
speed any integer 500 Init only Duration of the flipping animation in miliseconds. Higher means slower.
front [selector], jQuery object ‘.front’ Init only The selector that flip will use to find the front face of the flippable content.
back [selector], jQuery object ‘.back’ Init only The selector that flip will use to find the back face of the flippable content.
autoSize true, false true Init only Whether the front and back panels should be automatically sized to fit the container. Will make flip add styles width:100% and height:100% to them. Works well in fluid containers.
forceWidth true, false false Init only Whether the front and back panels should be forced to the width of the container. Will make flip add style width:xxpx to them (where xx is the container’s outerWidth). Does not work well with fluid containers.
NOTE: This option is provided for backward compatibility and should eventually be deprecated. If you are migrating from an older version of Flip and are having issues with the new dynamic sizing feature, you can set forceWidth and forceHeight to true, and autoSize to false to make Flip behave the same as it did before. If you find you need this option, please report it to us as it should not be needed.
forceHeight true, false false Init only Whether the front and back panels should be forced to the height of the container. Will make flip add style height:yypxto them (where yy is the container’s outerHeight). Does not work well with fluid containers.
NOTE: This option is provided for backward compatibility and should eventually be deprecated. If you are migrating from an older version of Flip and are having issues with the new dynamic sizing feature, you can set forceWidth and forceHeight to true, and autoSize to false to make Flip behave the same as it did before. If you find you need this option, please report it to us as it should not be needed.

Автор: Алексей Байков

Алексей Байков
Веду записи в основном для себя, т.к. частенько всё забываю.

Может это сойдет?

Contact Form 7 во всплывающем окне — PopUp форма обратной связи для WordPress

Contact Form 7 во всплывающем окне — казалось бы, такая незаменимая вещь, как всплывающие формы …