Главная Новости

Красивый эффект для миниатюры сайта с помощью CSS3, jQuery и MooTools


Опубликовано: 01.09.2018

Всем привет!

Сегодня я хочу удивить вас красивым эффектом для миниатюры сайта. Этот эффект созданный при помощи CSS3, jQuery, Moo Tools.

При наведении мыши на миниатюру, снизу выплывет панель с текстом. Текст может быть описанием к картинке или товару с кнопкой купить или добавить в корзину. Идей для применения этого эффекта много.

Демонстрацию эффекта можете посмотреть здесь

[просмотреть демонстрацию ]

Для начала создайте html-файл с любым названием, например, « fx-bloggood-ru.html » и вставьте вот этот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>Красивый эффект для миниатюры сайта с помощью CSS3, jQuery и MooTools на BlogGood.ru</title> <style type="text/css"> .item { position: relative; width: 240px; overflow: hidden; border: 1px solid #ccc; } .item { height: 200px; } .item a { text-decoration: none; color: #000; } .item-billboard, .item-detail { padding: 10px; height: 180px; } .item-billboard { margin-top: 0; background: #fff; } .item-billboard h3 { font-size: 13px; font-weight: bold; color: #262626; font-family: 'Open Sans',arial,sans-serif; } .item-detail { background: #ececec; } </style> </head> <body> </body> </html>

Внимание: этот код будет использоваться во всех трех способах для CSS3, jQuery и MooTools.

Способ №1. С помощью CSS3

Вставьте между тегами <body></body> вот этот код:

<div class="blok"> <h2>CSS3</h2> <div class="item itemCss"> <div class="item-billboard item-billboard-css"> <img src="bloggood-ru.png" /> <h3>CSS на блоге BlogGood.ru </h3> </div> <div class="item-detail"> <p>Текстовое содержание!</p> <p><a href="https://bloggood.ru/">Ссылка на блог</a></p> </div> </div> </div>

В строке №5 пропишите путь к картинке. Желательные размеры картинки 220 х 135px или 220 х 140px.

Перед  тегом </style> вставьте вот этот код для анимации:

/* анимация */ .item-billboard-css { -webkit-transition-property: margin-top; -webkit-transition-duration: .5s; -moz-transition-property: margin-top; -moz-transition-duration: .5s; -o-transition-property: margin-top; -o-transition-duration: .5s; -ms-transition-property: margin-top; -ms-transition-duration: .5s; } .itemCss:hover .item-billboard { margin-top: -200px; }

Это был способ на CSS. Но, к сожалению, не на всех браузерах вы сможете увидеть плавную анимацию . Вот по этой причине на помощь приходят jQuery и  MooTools. Смотрите следующий пример.

Способ №2. С помощью jQuery

Вставьте между тегами <body></body> вот этот код:

<div class="blok"> <h2>jQuery</h2> <div class="item itemJQuery"> <div class="item-billboard"> <img src="fx-css.png" /> <h3>jQuery на блоге BlogGood.ru</h3> </div> <div class="item-detail"> <p>Текстовое содержание!</p> <p><a href="https://bloggood.ru/">Ссылка на блог</a></p> </div> </div> </div>

Теперь подключим библиотеку JQuery и пропишем необходимый скрипт к эффекту. Между тегами <head></head> напишите вот этот код:

<!-- Подключаем библиотеку JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> // jQuery jQuery(document).ready(function() { jQuery(".itemJQuery").bind({ mouseenter: function() { var self = jQuery(this), billboard = self.data("billboardElement"); if(!billboard) { billboard = jQuery(jQuery(".item-billboard", this)[0]); self.data("billboardElement", billboard); } jQuery(billboard).stop().animate({ "margin-top": "-200px" }); }, mouseleave: function() { jQuery(this).data("billboardElement").stop().animate({ "margin-top": 0 }); } }); }); </script>

Вот теперь данный эффект будет работать во всех браузерах на 99%. Давайте еще посмотрим способ №3 с помощью MooTools.

Способ №3. С помощью MooTools

Вставьте между тегами <body></body> вот этот код:

<div class="blok"> <h2>MooTools</h2> <div class="item itemJs"> <div class="item-billboard"> <img src="fx-css.png" /> <h3>MooTools на блоге BlogGood.ru</h3> </div> <div class="item-detail"> <p>Текстовое содержание!</p> <p><a href="https://bloggood.ru/">Ссылка на блог</a></p> </div> </div> </div>

Подключаем библиотеку MooTools и прописываем необходимый скрипт к эффекту. Между тегами <head></head> напишите вот этот код:

<!-- Подключаем библиотеку MooTools --> <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js"></script> <script> // MooTools window.addEvent("domready", function() { $$(".itemJs").addEvents({ mouseenter: function() { var billboard = this.retrieve("billboardElement"); if(!billboard) { billboard = this.getElements(".item-billboard")[0]; this.store("billboardElement", billboard); } billboard.tween("margin-top", "-200px"); }, mouseleave: function() { this.retrieve("billboardElement").tween("margin-top", 0); } }); }); </script>

На этом можно было бы закончить свою статью, но я решил написать общий комбинированный способ. То есть, все три способа воссоединить .

Комбинированный способ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>Красивый эффект для миниатюры сайта с помощью CSS3, jQuery и MooTools на BlogGood.ru</title> <!-- Подключаем библиотеку JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> // jQuery jQuery(document).ready(function() { jQuery(".itemJQuery").bind({ mouseenter: function() { var self = jQuery(this), billboard = self.data("billboardElement"); if(!billboard) { billboard = jQuery(jQuery(".item-billboard", this)[0]); self.data("billboardElement", billboard); } jQuery(billboard).stop().animate({ "margin-top": "-200px" }); }, mouseleave: function() { jQuery(this).data("billboardElement").stop().animate({ "margin-top": 0 }); } }); }); </script> <!-- Подключаем библиотеку MooTools --> <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js"></script> <script> // MooTools window.addEvent("domready", function() { $$(".itemJs").addEvents({ mouseenter: function() { var billboard = this.retrieve("billboardElement"); if(!billboard) { billboard = this.getElements(".item-billboard")[0]; this.store("billboardElement", billboard); } billboard.tween("margin-top", "-200px"); }, mouseleave: function() { this.retrieve("billboardElement").tween("margin-top", 0); } }); }); </script> <style type="text/css"> .item { position: relative; width: 240px; overflow: hidden; border: 1px solid #ccc; } .item { height: 200px; } .item a { text-decoration: none; color: #000; } .item-billboard, .item-detail { padding: 10px; height: 180px; } .item-billboard { margin-top: 0; background: #fff; } .item-billboard h3 { font-size: 13px; font-weight: bold; color: #262626; font-family: 'Open Sans',arial,sans-serif; } .item-detail { background: #ececec; } /* анимация */ .item-billboard-css { -webkit-transition-property: margin-top; -webkit-transition-duration: .5s; -moz-transition-property: margin-top; -moz-transition-duration: .5s; -o-transition-property: margin-top; -o-transition-duration: .5s; -ms-transition-property: margin-top; -ms-transition-duration: .5s; } .itemCss:hover .item-billboard { margin-top: -200px; } </style> </head> <body> <div class="blok"> <h2>CSS3</h2> <div class="item itemCss"> <div class="item-billboard item-billboard-css"> <img src="fx-css.png" /> <h3>CSS на блоге BlogGood.ru </h3> </div> <div class="item-detail"> <p>Текстовое содержание!</p> <p><a href="https://bloggood.ru/">Ссылка на блог</a></p> </div> </div> </div> <div class="blok"> <h2>jQuery</h2> <div class="item itemJQuery"> <div class="item-billboard"> <img src="fx-css.png" /> <h3>jQuery на блоге BlogGood.ru</h3> </div> <div class="item-detail"> <p>Текстовое содержание!</p> <p><a href="https://bloggood.ru/">Ссылка на блог</a></p> </div> </div> </div> <div class="blok"> <h2>MooTools</h2> <div class="item itemJs"> <div class="item-billboard"> <img src="fx-css.png" /> <h3>MooTools на блоге BlogGood.ru</h3> </div> <div class="item-detail"> <p>Текстовое содержание!</p> <p><a href="https://bloggood.ru/">Ссылка на блог</a></p> </div> </div> </div> <br> <div><a href="https://bloggood.ru/">Автор блога Костаневич Степан </a>(BlogGood.ru)</div> </body> </html>

Ну, вот и все! Кажется, все сказал, хотя нет, не все! Подписывайтесь на обновление моего блога, жмите на кнопки социальных сетей, которые размещены снизу.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: для сайта , эффекты для сайта

rss