Jump to content

визуальные эффекты


rash
 Share

Recommended Posts

Обратил внимание на страницу

http://www.apple.com/safari/

и возник вопрос - как достигается эффект плавной смены контента, как сделано у них при переходе между пунктами на странице?

Так как я все-таки не уверен, с помощью чего достигается такой эффект, размещаю вопрос здесь...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Попробую вчитаться в код внимательно - может разберусь...

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 11 months later...

Это можно сделать с помощью тега, какого не помню, помню что размещается в head'e, на форуме юкоза есть топик об этом. Как раз ща посмотрю как там и выложу ссылку.

Вот, сразу первым сообщением: http://www.forum.ucoz.ru/forum/31-17277-1

Блин, работает только в ие(((((

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy