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.
http://www.templatemonster.com/demo/47446.html
http://www.templatemonster.com/demo/48966.html
http://www.templatemonster.com/demo/48966.html



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: 1625
  • 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 1014 korisnika na forumu :: 59 registrovanih, 11 sakrivenih i 944 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3028 - dana 22 Nov 2019 07:47

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: _commandos_, A.R.Chafee.Jr., Acaks88, Albin0, Arhiv, babaroga, bato3, benne, bojank, Boris902, branko72, brufen, bufanje, cifra, darkangel, DARKMEN22, Denaya, doom83, draganca, DucicM, Georgius, GreenMan, Jester, kalens021, kerinjo, Kiki2004, kovinacc, krkalon, kvarc, lord sir giga, mercedesamg, Mercury2, miodrag, mirbat, nebkv, Nebo_M, nebojsag, Nesho, novator, ObelixSRB, ok2, ostoja, pein, pinki83, PrintZip, rkekoke, S2M, Snorks, spektorsky, sunto, Suva planina, T-72, vathra, vdeki, Vlada1389, Wrangler, xoxxvelja, zajcev1, šumar bk2