Jump to content
  • 0
Sign in to follow this  
Guest Vadim

Разбор шаблона, как сделать плюшки?

Question

Guest Vadim   
Guest Vadim

Нашел интересный шаблон, с кучей плюшек, вот интересно что из этих всех плюшек можно сделать с помощью Мус и как
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
 
Как сделать:
 

1. Верхнее меню широкое, при прокурутке становится уже
2. Shotswhat change your life - При нажатии на круглую фотку форма выезжает снизу
3. Meetthe developer team - При наведении на фотку она увеличивается
4. Related applications - портфолио с сортировкой

Там еще есть много другого интересного, но пока это.

PS Нужно раздел создать где можно интересные сайты разбирать по полочкам.

Share this post


Link to post
Share on other sites

15 answers to this question

Recommended Posts

  • 0

Хороший пример.

1,3 и 4 - реально сделать стандартными методами запросто. На счет пункта 2 - можно попробовать, вполне может получиться что-то подобное. Например, взять стандартную композицию и в настройках выбрать "изначально скрыть" + "каскадно: по вертикали", затем похимичить со слоями.

Чуть позже попробую показать как сделать по каждому пункту.

_____________________________________________________

Вот, буквально за 30 мин. своял при помощи стандартных средств Muse:

Сужающееся меню, выдвижная снизу форма, слегка увеличивающиеся картинки и "сортировка".

Некоторые плавные анимационные эффекты возможны лишь при подключении сторонних скриптов.

Но вот эффект увеличивающейся при наведении картинки можно сделать при помощи CSS3. Для этого нужно подключить в head примерно следующий код (должен работать на любом сайте Muse):

<style type="text/css">
.block {
 overflow:hidden !important;
 width:294px;
 height:177px;
 }

  img.block{
     -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;

}
  img.block:hover {
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -o-transform: scale(1.1);
}
</style>

Чтобы это работало, нужно заранее подготовить картинки нужного размера и в .block прописать соответствующие размеры. Для более крупного увеличения нужно увеличить параметр scale

Share this post


Link to post
Share on other sites

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
Vadim    50

Круто!

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

Share this post


Link to post
Share on other sites
  • 0
vage-v    0

Спасибо за полезную информацию! 

Но остались еще вопросы по поводу "увеличения картинки во время наведения" : 

1.как сделать чтобы данный скрипт относился не ко всем изображениям, у меня этот скрипт работает на все изображения на которые нужно и на которые не нужно?

2. Как то можно увеличить время "увеличения картинки", чтобы происходил эффект как на сайте, который привел автора вопроса?

Share this post


Link to post
Share on other sites
  • 0

1.как сделать чтобы данный скрипт относился не ко всем изображениям, у меня этот скрипт работает на все изображения на которые нужно и на которые не нужно?

Для этого придется добавлять изображения, как HTML-блок:

<img class="myclass" width="294" height="177" alt="Картинка1" src="/assets/kartinka1.jpg">

Тогда в <head> нужно вместо .block прописать .myclass, а картинки, для удобства, загрузить в assets ("Добавить файлы для передачи" в меню)

И это не скрипт, а анимация CSS3, т.е. javascript не используется Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./default_wink.png" alt=";)">

Share this post


Link to post
Share on other sites
  • 0

2. Как то можно увеличить время "увеличения картинки", чтобы происходил эффект как на сайте, который привел автора вопроса?

Время эффекта изменяется путем редактирования параметра all 1s ease-out, поставьте, например 2.5s, скорость будет намного медленнее.

Share this post


Link to post
Share on other sites
  • 0
Dizago    0

Хороший пример.

1,3 и 4 - реально сделать стандартными методами запросто. На счет пункта 2 - можно попробовать, вполне может получиться что-то подобное. Например, взять стандартную композицию и в настройках выбрать "изначально скрыть" + "каскадно: по вертикали", затем похимичить со слоями.

Чуть позже попробую показать как сделать по каждому пункту.

А Вы не могли бы детальнее разъяснить о пункте 4, сортировка. Вот наподобие такого Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. Без перезагрузки страницы.

Спасибо.

Share this post


Link to post
Share on other sites
  • 0
-IM-    65

сортировку дела на бутстрапе сам а вот на музе что то непровал. мне кажется стандартным методом это не решить только вставкой кода )  там лишь надо класс в див блок прописать для фильтра  потом на кажду картирнку нужный класс... будет время тоже напишу )

Share this post


Link to post
Share on other sites
  • 0
Dizago    0

сортировку дела на бутстрапе сам а вот на музе что то непровал. мне кажется стандартным методом это не решить только вставкой кода )  там лишь надо класс в див блок прописать для фильтра  потом на кажду картирнку нужный класс... будет время тоже напишу )

Большое спасибо, жду с нетерпением

Share this post


Link to post
Share on other sites
  • 0

А Вы не могли бы детальнее разъяснить о пункте 4, сортировка. Вот наподобие такого Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. Без перезагрузки страницы.

Спасибо.

На моем примере сортировка, можно сказать "фикция", но как вариант, в принципе, имеет место быть в случае, если нет другой возможности и надо просто применять это, а не сидеть и ждать, что с неба свалиться решение))

Т.е. берется простой виджет Табы (вкладки) и в каждую вкладку "в ручном" режиме добавляется требуемый контент. Пу-сути, это будет дублирование некоторого контента и если элементов очень много то это не очень подойдет, т.к. будет влиять на скорость загрузки страницы.

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

Share this post


Link to post
Share on other sites
  • 0

Для этого придется добавлять изображения, как HTML-блок:

<img class="myclass" width="294" height="177" alt="Картинка1" src="/assets/kartinka1.jpg">

Тогда в <head> нужно вместо .block прописать .myclass, а картинки, для удобства, загрузить в assets ("Добавить файлы для передачи" в меню)

И это не скрипт, а анимация CSS3, т.е. javascript не используется Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./default_wink.png" alt=";)">

немного модифицировал ваш скрипт

<style type="text/css">
.myclass {
 overflow:hidden !important;
 width:294px;
 }

  img.myclass{
     -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;

}
  img.myclass:hover {
     -webkit-transform: scale(1.5)  translate(-30px);
     -moz-transform: scale(1.5)  translate(-30px);
     -o-transform: scale(1.5)  translate(-30px);
    transform: scale(1.5)  translate(-30px);
}
</style>

<div align=center><img class="myclass" width="294" height="307" alt="Картинка1" src="assets/1.jpg" align=center></div>

на выходе картинка увеличивается в 1.5 раза но расширяется равномерно и влево и вправо.

Для Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

нужное купим. как например убиралку Email из форм.

ненужное - сам понимаешь )

Share this post


Link to post
Share on other sites
  • 0
STAG    10
В 20.09.2014 at 23:14, Greymouse2 сказал:

 

немного модифицировал ваш скрипт

Спасибо за код! А как сделать, чтобы например 5 изображений в ряд не перекрывали друг-друга при увеличении?

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
Share on other sites
  • 0
Guest   
Guest
В 17.04.2014 at 11:40, Александр Бузмаков сказал:

Хороший пример.

1,3 и 4 - реально сделать стандартными методами запросто. На счет пункта 2 - можно попробовать, вполне может получиться что-то подобное. Например, взять стандартную композицию и в настройках выбрать "изначально скрыть" + "каскадно: по вертикали", затем похимичить со слоями.

Чуть позже попробую показать как сделать по каждому пункту.

 

_____________________________________________________

 

Вот, буквально за 30 мин. своял при помощи стандартных средств Muse:

Сужающееся меню, выдвижная снизу форма, слегка увеличивающиеся картинки и "сортировка".

 

Некоторые плавные анимационные эффекты возможны лишь при подключении сторонних скриптов.

Но вот эффект увеличивающейся при наведении картинки можно сделать при помощи CSS3. Для этого нужно подключить в head примерно следующий код (должен работать на любом сайте Muse):


<style type="text/css">
.block {
 overflow:hidden !important;
 width:294px;
 height:177px;
 }

  img.block{
     -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;

}
  img.block:hover {
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -o-transform: scale(1.1);
}
</style>

Чтобы это работало, нужно заранее подготовить картинки нужного размера и в .block прописать соответствующие размеры. Для более крупного увеличения нужно увеличить параметр scale

 

Share this post


Link to post
Share on other sites
Sign in to follow this  

×
×
  • Create New...