Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

Рекомендованные сообщения

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

Пример

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

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

 

  • +1 6
Ссылка на комментарий
Поделиться на других сайтах

P.S.

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


с меня +...отлично все работает...)) только напишите лучше что надо изменит 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>
чтоб не возникло вопросов...;)
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


Шикарно!

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

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

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

С уважением.

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

<script src="peel.js" type="text/javascript"></script>

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

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

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

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

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

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

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

flesh_ugolok.zip

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

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

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

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

<!-- Плеер -->

<div id="radio">

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="52" height="20">

<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />

<param name="bgcolor" value="#ffffff" />

<param name="FlashVars" value="mp3=http%3A//www.umka-babyshop.ru/audio/Lullaby.mp3&width=52&loop=1&autoplay=1&showvolume=1&showslider=0&buttonwidth=25&volumewidth=25&bgcolor1=f6f6f6&bgcolor2=f6f6f6&buttoncolor=000000&buttonovercolor=000000&volume=60" />

</object></div>

<!--/Плеер конец -->

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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

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

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

Это не Ява, это Adobe Flash )) Такие вещи (обычно) делаются "под заказ"... ;)
Ссылка на комментарий
Поделиться на других сайтах

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

Ссылка на комментарий
Поделиться на других сайтах

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

Флеш - это очень, оочень плохо :D
Ссылка на комментарий
Поделиться на других сайтах

Господа, простите, что влезаю в вашу философскую беседу, но не соблаговолит ли кто-нибудь (возможно топик-стартер) ответить на мой вопрос? 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

Ссылка на комментарий
Поделиться на других сайтах


  • 4 месяца спустя...

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

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

Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.