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

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

offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

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]



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • C# and PHP Developer
  • Pridružio: 16 Feb 2011
  • Poruke: 1630
  • Gde živiš: Pancevo

CSS + JQuery



offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Hvala, pozdrav

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

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

offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

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.

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

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>

offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Svaka cast, ovo ima da obraduje mnoge.

Ko je trenutno na forumu
 

Ukupno su 699 korisnika na forumu :: 70 registrovanih, 4 sakrivenih i 625 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 19602 - dana 30 Mar 2026 00:11

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: A.R.Chafee.Jr., akrep, Apis Dr, babaroga, Batko.VD.65, blatruc82, bojan1234, bojcistv, bolimejoli, Bubimir, CHARLIE JA., Cp6uH, cuculo, cuvarkuca, dacanaldo, darkkran, dejno, Despot1, Dimitrije Paunovic, Doc, dukajov, dusan.l, ekipo26, Georgius, Glavni Oružni, Goran_, GveX, Ivoo, Jaz, kib, Kolimator, kolle.the.kid, Kudun, Lance Guest, ljuba.b, loon123, MarkoD, Mig 29, mile.ilic75, Miletić Zoran, MrNo, Naturelo, nelezele, nesa1962, novator, nuke92, Parker, pera bager, perunnurep, PlayerOne, PMsnow, radza1, raptorsi, s putnik, Sale0501, Shajlok, sistem22, skok, skvara, sspp, Tila Painen, Troja, Vasilije74, VBoss, Vlada78, Wehicle, Zanzibar, zemljanin, Zorge, 79693