tanie strony www bydgoszcz tanie strony www bydgoszcz tanie strony www bydgoszcz
Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz
www.at.bydgoszcz.pl
Efektywne zdjęcia na stronie WWW - Koniec z nudą!

Efektywne zdjęcia na stronie WWW - Koniec z nudnymi miniaturami!

Poniżej znajduje się efekt "koloryzacji" zdjęcia po najechaniu na nie myszką.
Efekt ten został uzyskany jedynie za pomocą styli CSS

Zaledwie kilka linijek kodu CSS ożywi nam obraz całej strony, a przy tym bez zbędnych "fajerwerków" uczyni ją atrakcyjniejszą!
W bardzo prosty sposób możemy odwrócić ten efekt poprzez podmianę ":hover" z linii 9 do linii 1 ;)

.css-grayscale{
   filter: grayscale(100%);
   -webkit-filter: grayscale(100%);
   filter: gray;
}
.css-grayscale{
   -webkit-transition: all .6s ease;
}
.css-grayscale:hover{
   filter: grayscale(0%);
   -webkit-filter: grayscale(0%);
   -webkit-transition: all .6s ease;
}


Inny sposób wykonania efektu przy pomocy javascript (jQuery):


$(document).ready(function() {
  $('.js-grayscale img').each(function() {
    $(this).wrap('<div style="display:inline-block;width:' 
    + this.width + 'px;height:' + this.height + 'px;">')
    .clone().addClass('gotcolors').css({'position': 'absolute', 'opacity' : 0 })
    .insertBefore(this);
    this.src = grayscale(this.src);
  }).animate({opacity: 1}, 500);
  $(".js-grayscale").hover(function() {
    $(this).find('.gotcolors').stop().animate({opacity: 1}, 200);},function() {
    $(this).find('.gotcolors').stop().animate({opacity: 0}, 500);
  });
});
function grayscale(src) {
   var supportsCanvas = !!document.createElement('canvas').getContext; 	
   if (supportsCanvas) {
      var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d'),
      imageData, px, length, i = 0, gray, img = new Image();
      img.src = src; canvas.width = img.width; canvas.height = img.height;
      context.drawImage(img, 0, 0);
      imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      px = imageData.data; length = px.length;
      for (; i < length; i += 4) {
        gray = px[i] * .3 + px[i + 1] * .59 + px[i + 2] * .11;
        px[i] = px[i + 1] = px[i + 2] = gray;
      }
      context.putImageData(imageData, 0, 0); return canvas.toDataURL();
   } else {
      return src;
   }
}

 ↻ do góry  « powrót 
Copyright © 2017-2019 www.at.bydgoszcz.pl

Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz

Strony Internetowe    Pytania i odpowiedzi    Szablony tanich stron    Zamów stronę WWW
projekty stron strony internetowe bydgoszcz
g+