ZorNet.Ru — сайт для вебмастера » HTML и CSS » Появление элементов и исчезновение при прокрутки

Появление элементов и исчезновение при прокрутки

Теперь веб мастер может при помощи этих функций, плавно задать появление элемента на страницы, или кнопки, что будет находится под ссылкой. Что по умолчанию она появится в полу прозрачном виде, но стоит навести курсор, как будет отображение на 100% в палитре цвета. Теперь вы можете поставить под этот элемент разные функциональные определение. Это может носить как рекламный характер, так и под ссылку, чтоб можно перейти на основной материал. что будет отображен на изображение, что появится.

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

Приступаем к установки:

HTML

Код

CSS

Код

#sartumolsa_surenta {
  position: fixed;
  right: 0px;
  bottom: 0px;
  display: none;
}

#sartumolsa_surenta img {
  opacity: 0.3;
  cursor: pointer;
}

#sartumolsa_surenta img:hover {
  opacity: 1;
}

jQuery

Код

jQuery(function(f) {
  var element = f('#sartumolsa_surenta');
  f(window).scroll(function() {
  element['fade' + (f(this).scrollTop() > 100 ? 'In' : 'Out')](500);
  });
});

Похожий материал вы можете посмотреть на форуме, где по функциональности аналогичен.

Демонстрация

18 Апреля 2018 Просмотров: 1330 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0