how-to [How-To] Эффект перелистывания страниц. (Отгибающийся уголок)

tim21701 · 16 березня 2011

Наверное, многие видели такую рекламу; в углу страницы - загнутый уголок, подводишь к нему курсор - и он отгибается, открывая пространство с информацией...
Сделаем тоже самое в нашем магазине.
Пример

Зарание, прошу прощения у администрации сайта за использования в качастве примера Символики/Логотипа...

1). Открываем файл catalog/view/theme/ВАША ТЕМА/template/common/header.tpl и перед закрывающимся тегом </head> вставляем код:

<script type="text/javascript">$(document).ready(function(){$("#pageflip").hover(function() {$("#pageflip img , .msg_block").stop().animate({width: '307px',height: '319px'}, 500);} , function() {$("#pageflip img").stop().animate({width: '50px',height: '52px'}, 220);$(".msg_block").stop().animate({width: '50px',height: '50px'}, 200);});});</script>

2). Далее (в этом же файле), после тега <body> вставляем этот код:

<div id="pageflip"><a href="http://myopencart.ru/download.php"><img src="catalog/view/theme/ВАША_ТЕМА/image/page_flip.png" alt="" /><span class="msg_block">Скачать русский OpenCart</span></a></div>

3). Затем, открываем файл со стилями нашей темы catalog/view/theme/ВАША ТЕМА/stylesheet/stylesheet.css и в самом конце добавляем три блока:

#pageflip {position: absolute;top: 0px;right: 0px;}#pageflip img {width: 50px; height: 52px;z-index: 99;position: absolute;top: 0px;right: 0px;-ms-interpolation-mode: bicubic;}#pageflip .msg_block {width: 50px; height: 50px;position: absolute;z-index: 50;top: 0px;right: 0px;background: url('../image/download.png') no-repeat right top;text-indent: -9999px;}

4). Теперь нам надо скопировать в папку catalog/view/theme/ВАША ТЕМА/image два png файла: (ссылка ниже) download.png и page_flip.png.

Всё.

P.S.
Убедительная просьба отписаться у кого браузеры Mozilla, Safari, Netscape, Google Chrome и прочие, на проверку совместимости.
Работает в IE6.0 и Opera 11.01.

Архив: image.zip

gdi31 · 16 березня 2011

P.S.

Убедительная просьба отписаться у кого браузеры Mozilla, Safari, Netscape, Google Chrome и прочие, на проверку совместимости.

Работает в IE6.0 и Opera 11.01.

В Google Chrome 7.0.517.44, IE8.0, Firefox/3.6.15 - всё отлично!

akanext · 17 березня 2011

firefox 4.0 все работает корректно! СПС

fantasm · 17 березня 2011

с меня +...отлично все работает...)) только напишите лучше что надо изменит default на ваша_тема в

<div id="pageflip">
  <a href="https://myopencart.com/download.php">
    <img src="catalog/view/theme/default/image/page_flip.png" alt="" />
   <span class="msg_block">Download Russian OpenCart</span>
  </a>
</div>

чтоб не возникло вопросов...;)

AlexFisher · 18 березня 2011

Шикарно!

Буквально на днях изучал эту примочку, а тут целый мануаль по установке. Риспект.

(правда, передумал ставить :), но ничего, для других проектов сгодится )

У меня во всех браузерах нормально кажет. А у меня их много))) Сафари только нет. а так: Хром, Файрфокс, Гринбраузер, Опера, Ишак - все четко.

С уважением.

DmitriSyr · 26 березня 2011

_{_{Уголок на флешь.. лучше смотрится}}

:blink: Смотреть демо

Установка такого объявления в страничку очень проста и займет несколько секунд. Все, что Вам необходимо сделать в файле catalog/view/theme/default/template/common/header.tpl - после тега <body> вставить следующий код:

Важно: файлы из архива flesh_ugolok.rar необходимо класть в корень сайта. Если файл скрипта переместите в другую папку, не забывайте про правильный путь.

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

Теперь нам необходимо немного модифицировать файл peel.js.

Поменяйте ссылку так... найти следующую строчку:

jaaspeel.ad_url = escape('http://www.170r.ru');

Вместо "170r.ru" необходимо ввести Ваш УРЛ (страницу на которую должен перейти пользователь после нажатия на объявление).

Кроме этого в файле peel.js находятся пути к картинкам. Если Вы будете их перемещать в другие папки, не забудьте поменять и пути к ним.

flesh_ugolok.zip

Googlah · 26 березня 2011

а как сделать вот такое не подскажешь?

http://www.elho.com/intro/frameset.php

очень интересно как сделанно

понятное дело конечно что на Яве но может кто-то где то видел готовый скрипт такого чуда?уж очень заинтересовало

Googlah · 26 березня 2011

DmitriSyr, не работает ссылка на демо твое

tim21701 · 26 березня 2011

Уголок на флешь.. лучше смотрится

Спорный вопрос.

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

У меня, например, на iPad - Ваш пример не работает.

gdi31 · 26 березня 2011

Уже много раз слышал, что музыка на сайте это …..

Но мой вопрос заключается не в том хорошо это или плохо, а втом, как это реализовать.

На главной, чтоб пело – было.

На всех и чтоб на каждой новой странице с начала – проходили.

Но вот так как по ссылке в посте № 7 – это для меня ещё экзотика.

Кто ни будь, постиг эту мантру?

Можно ли вот это:

</object></div>

заставить петь так, как там?

DmitriSyr · 26 березня 2011

DmitriSyr, не работает ссылка на демо твое

демо здесь http://lider-spets.ru

DmitriSyr · 26 березня 2011

Спорный вопрос.

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

У меня, например, на iPad - Ваш пример не работает.

Ну не знаю .. я не спец.

tim21701 · 26 березня 2011

демо здесь http://lider-spets.ru

Данный пример вообще практически не чем не отличается от того - что здесь описан. ))) Единственное, что более-менее интересно, так это колышащийся уголок, "типо на ветру". И всё! )))) Зеркальное отображение можно и тут настроить, фотошоп никто не отменял. Так что, о плюсах того или этого способа - заинтересовать клиента, ничего сказать не могу. Каждый, вибирает для себя то - что ему больше нравится. Дело вкуса.

tim21701 · 26 березня 2011

а как сделать вот такое не подскажешь?

http://www.elho.com/intro/frameset.php

очень интересно как сделанно

понятное дело конечно что на Яве но может кто-то где то видел готовый скрипт такого чуда?уж очень заинтересовало

Это не Ява, это Adobe Flash )) Такие вещи (обычно) делаются "под заказ"... ;)

madbadjack · 31 березня 2011

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

Googlah · 1 квітня 2011

gdi31, музыка ан сайте ет дерьмо если честно)

но некоторым нравиться)

tim21701, мне казалось ет Ява)

ну ладно я не сморел исходного кода)

Флеш ет хорошо конечно)

но мб кто-то видел реализацию на Яве такую?

либо за сколько кто сделает такое же?

gdi31 · 1 квітня 2011

gdi31, музыка ан сайте ет дерьмо если честно)

...стем что дерьмо это то понятно!

А вот как сделать это, так и осталось в тайне :)?

AlexFisher · 1 квітня 2011

Господа. Если насчет флесха идет речь, то отакая шевелящаяся какая_угодно_хрень делается за пару минут. А ваще - музыка на сайте таки-да - дермо)

Googlah · 1 квітня 2011

AlexFisher,можешь ткнуть носом пожалуйста где почитать?)

AlexFisher · 1 квітня 2011

Googlah я читал на демиарте. Только если быстро хочется - скорее всего хрен, что выйдет. Репетировать долго и нудно нада буит ;)

Googlah · 1 квітня 2011

да как раз хотел взяться за изучение графики)

AlexFisher · 1 квітня 2011

а чё ее изучать? МогЁшь - рисуешь. Не могЁшь - нанимаешь таких-же орлов, как сам, только умеющий. Тут-жеж дело такое.. хЫст потрибэн 8)

tim21701 · 2 квітня 2011

1301685510[/url]' post='15426']...tim21701, мне казалось ет Ява)

ну ладно я не сморел исходного кода...

Зачем лезть в исходный код, ткните правой кнопкой мыши на сайте и поймёте...

1301685510[/url]' post='15426']...Флеш ет хорошо конечно)...

Флеш - это очень, оочень плохо :D

madbadjack · 2 квітня 2011

Господа, простите, что влезаю в вашу философскую беседу, но не соблаговолит ли кто-нибудь (возможно топик-стартер) ответить на мой вопрос? https://opencartforum.com/topic/2178-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82-%d0%bf%d0%b5%d1%80%d0%b5%d0%bb%d0%b8%d1%81%d1%82%d1%8b%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86-%d0%be%d1%82%d0%b3%d0%b8%d0%b1%d0%b0%d1%8e%d1%89%d0%b8%d0%b9%d1%81%d1%8f-%d1%83/page__view__findpost__p__15296

gdi31 · 7 серпня 2011

Наверное, многие видели такую рекламу; в углу страницы - загнутый уголок, подводишь к нему курсор - и он отгибается, открывая пространство с информацией...

А такой уголок есть в загашнике?

Вхід

how-to [How-To] Эффект перелистывания страниц. (Отгибающийся уголок)

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information