Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

Пример

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

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, мне казалось ет Ява)

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

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

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

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

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


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

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

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 months later...

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

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

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


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

Ви повинні бути користувачем, щоб залишити коментар

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

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.