Pitanje: efekti na sajtovima da li je Javascript, jquery?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Pitanje da li su ovi efekti menija, na slikama ili uopste na sajtu radjeni u cistom javaskriptu ili jquery. Gledao sam u inspect element pise javascript, ili je ovo neka kombinacija necega. Ako moze odgovor sta je, i kako je najlakse ovo poceti uciti. Ucio sam slicne efekte javascripta na w3schools, codecademy, ali je ovo nekako lepse uradjeno.
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

CSS + JQuery

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Hvala, pozdrav

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

Ako mislis na zoom efekat kada predjes misem na sliku, to moze da se odradi i bez js/jquery.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Napisano: 08 Apr 2015 23:22

Ako moze uput, ne mora odgovor, da naucim.

Dopuna: 08 Apr 2015 23:26

Vidim ja na internetu ima dosta tutorijala, ali koji je najpravilniji nacin da se ovi efekti uklope sa bootstrap 3, vidim kad menjam boju za navigaciju nav preko css-a za bootstrap, svasta ima, pa nadjem resenje, nego mislim da je ovo sve nesto mesano pa da neucim pogresno.

• 3Ovo se svidja korisnicima: dejnik978, Max, eleutheros
  
  Registruj se da bi pohvalio/la poruku!

Ovaj kod radi onajn hover efekat preko slike, a po potrebi moze i da ispisuje na slici. Nemoj tolko obracati paznju na kod, posto je za pocetnika malo komplikovan.

css:

.view {    width: 100%;    height: 100%;    overflow: hidden;    position: relative;    background:#000;    text-align: center;    margin:0px; } .view .mask, .view .content {    width: 100%;    height: 100%;    position: absolute;    overflow: hidden;    top: 0;    left: 0; } .mask a {     display: inline-block;     background: url(../images/play.png) no-repeat;     text-indent: -9999px;     width: 85px;     height: 85px;     top: 33.33%;     position: relative; } .view img {    display: block;    position: relative; } .view-first img {    -webkit-transition: all 0.2s linear;    -moz-transition: all 0.2s linear;    -o-transition: all 0.2s linear;    -ms-transition: all 0.2s linear;    transition: all 0.2s linear; } .view-first .mask {    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    opacity: 0;    background-color: rgba(234, 0, 255, 0.3);    -webkit-transition: all 0.4s ease-in-out;    -moz-transition: all 0.4s ease-in-out;    -o-transition: all 0.4s ease-in-out;    -ms-transition: all 0.4s ease-in-out;    transition: all 0.4s ease-in-out; } .view-first h2 {    -webkit-transform: translateY(-100px);    -moz-transform: translateY(-100px);    -o-transform: translateY(-100px);    -ms-transform: translateY(-100px);    transform: translateY(-100px);    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    opacity: 0;    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out; } .view-first p {    -webkit-transform: translateY(100px);    -moz-transform: translateY(100px);    -o-transform: translateY(100px);    -ms-transform: translateY(100px);    transform: translateY(100px);    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    opacity: 0;    -webkit-transition: all 0.2s linear;    -moz-transition: all 0.2s linear;    -o-transition: all 0.2s linear;    -ms-transition: all 0.2s linear;    transition: all 0.2s linear; } .view-first:hover img {    -webkit-transform: scale(1.1,1.1);    -moz-transform: scale(1.1,1.1);    -o-transform: scale(1.1,1.1);    -ms-transform: scale(1.1,1.1);    transform: scale(1.1,1.1); } .view-first a.info {    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    opacity: 0;    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out; } .view-first:hover .mask, .view-first:hover .mask-loupe {    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";    filter: alpha(opacity=100);    opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info {    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";    filter: alpha(opacity=100);    opacity: 1;    -webkit-transform: translateY(0px);    -moz-transform: translateY(0px);    -o-transform: translateY(0px);    -ms-transform: translateY(0px);    transform: translateY(0px); } .view-first:hover p {    -webkit-transition-delay: 0.1s;    -moz-transition-delay: 0.1s;    -o-transition-delay: 0.1s;    -ms-transition-delay: 0.1s;    transition-delay: 0.1s; } .view-first:hover a.info {    -webkit-transition-delay: 0.2s;    -moz-transition-delay: 0.2s;    -o-transition-delay: 0.2s;    -ms-transition-delay: 0.2s;    transition-delay: 0.2s; }

html:

<div class="view view-first">   <img src="img/mala-slika.jpg" alt="" class="img-responsive">   <div class="mask wrapper-parent">      <a href="img/velika-slika.jpg" class="img-responsive">Open</a>   </div> </div>

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Svaka cast, ovo ima da obraduje mnoge.