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:

1. .view {
2.    width: 100%;
3.    height: 100%;
4.    overflow: hidden;
5.    position: relative;
6.    background:#000;
7.    text-align: center;
8.    margin:0px;
9. }
10. .view .mask, .view .content {
11.    width: 100%;
12.    height: 100%;
13.    position: absolute;
14.    overflow: hidden;
15.    top: 0;
16.    left: 0;
17. }
18. .mask a {
19.     display: inline-block;
20.     background: url(../images/play.png) no-repeat;
21.     text-indent: -9999px;
22.     width: 85px;
23.     height: 85px;
24.     top: 33.33%;
25.     position: relative;
26. }
27.  
28. .view img {
29.    display: block;
30.    position: relative;
31. }
32. .view-first img {
33.    -webkit-transition: all 0.2s linear;
34.    -moz-transition: all 0.2s linear;
35.    -o-transition: all 0.2s linear;
36.    -ms-transition: all 0.2s linear;
37.    transition: all 0.2s linear;
38. }
39. .view-first .mask {
40.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
41.    filter: alpha(opacity=0);
42.    opacity: 0;
43.    background-color: rgba(234, 0, 255, 0.3);
44.    -webkit-transition: all 0.4s ease-in-out;
45.    -moz-transition: all 0.4s ease-in-out;
46.    -o-transition: all 0.4s ease-in-out;
47.    -ms-transition: all 0.4s ease-in-out;
48.    transition: all 0.4s ease-in-out;
49. }
50. .view-first h2 {
51.    -webkit-transform: translateY(-100px);
52.    -moz-transform: translateY(-100px);
53.    -o-transform: translateY(-100px);
54.    -ms-transform: translateY(-100px);
55.    transform: translateY(-100px);
56.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
57.    filter: alpha(opacity=0);
58.    opacity: 0;
59.    -webkit-transition: all 0.2s ease-in-out;
60.    -moz-transition: all 0.2s ease-in-out;
61.    -o-transition: all 0.2s ease-in-out;
62.    -ms-transition: all 0.2s ease-in-out;
63.    transition: all 0.2s ease-in-out;
64. }
65. .view-first p {
66.    -webkit-transform: translateY(100px);
67.    -moz-transform: translateY(100px);
68.    -o-transform: translateY(100px);
69.    -ms-transform: translateY(100px);
70.    transform: translateY(100px);
71.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
72.    filter: alpha(opacity=0);
73.    opacity: 0;
74.    -webkit-transition: all 0.2s linear;
75.    -moz-transition: all 0.2s linear;
76.    -o-transition: all 0.2s linear;
77.    -ms-transition: all 0.2s linear;
78.    transition: all 0.2s linear;
79. }
80. .view-first:hover img {
81.    -webkit-transform: scale(1.1,1.1);
82.    -moz-transform: scale(1.1,1.1);
83.    -o-transform: scale(1.1,1.1);
84.    -ms-transform: scale(1.1,1.1);
85.    transform: scale(1.1,1.1);
86. }
87. .view-first a.info {
88.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
89.    filter: alpha(opacity=0);
90.    opacity: 0;
91.    -webkit-transition: all 0.2s ease-in-out;
92.    -moz-transition: all 0.2s ease-in-out;
93.    -o-transition: all 0.2s ease-in-out;
94.    -ms-transition: all 0.2s ease-in-out;
95.    transition: all 0.2s ease-in-out;
96. }
97. .view-first:hover .mask, .view-first:hover .mask-loupe {
98.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
99.    filter: alpha(opacity=100);
100.    opacity: 1;
101. }
102. .view-first:hover h2,
103. .view-first:hover p,
104. .view-first:hover a.info {
105.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
106.    filter: alpha(opacity=100);
107.    opacity: 1;
108.    -webkit-transform: translateY(0px);
109.    -moz-transform: translateY(0px);
110.    -o-transform: translateY(0px);
111.    -ms-transform: translateY(0px);
112.    transform: translateY(0px);
113. }
114. .view-first:hover p {
115.    -webkit-transition-delay: 0.1s;
116.    -moz-transition-delay: 0.1s;
117.    -o-transition-delay: 0.1s;
118.    -ms-transition-delay: 0.1s;
119.    transition-delay: 0.1s;
120. }
121. .view-first:hover a.info {
122.    -webkit-transition-delay: 0.2s;
123.    -moz-transition-delay: 0.2s;
124.    -o-transition-delay: 0.2s;
125.    -ms-transition-delay: 0.2s;
126.    transition-delay: 0.2s;
127. }

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

Svaka cast, ovo ima da obraduje mnoge.