حرکت کردن لوگو

[hamid80 10]

سلام

در سایت http://www.joomedia.ir/ وقتی روی کلمه جومدیا موس را قرار می دی نوشته حرکت می کنه و می اید جلو چه طور می شه این کار را کرد با تشکر

[Mohammad Deljou 13]

درود بر شما

این مربوط میشه به تکنیک های css3

در انجمن جستجو کنید دوستان یکسری اموزش برای css ارائه کردن .

موفق پایدار

[hamid80 10]

ممنون من یک کد پیدا کردم ولی مشکلش اینه که می اید 360 درجه می چرخه من می خواهم وقتی روی لوگو می ری بیاد جلو می شه این کد تغییرایت توش به وجود اورد شبیح چیزی که من یخواهم در اورد

#logo {
   background-image:url(images/main.png);
   width:150px;
   height:150px;
   margin:auto;
   margin-top:100px;
    -moz-transition: all 5s ease 0s;
   opacity: 0.6;
   background-repeat:no-repeat;

}

#logo:hover {

   -moz-transform: rotate(360deg);
   -moz-transition: all 3s ease 0s;
   opacity: 0.9;    


}

[blazhel 16]

به جای کد

   -moz-transform: rotate(360deg);
   -moz-transition: all 3s ease 0s;

این کد رو قرار بدین

-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);

[Vahid Taheri 74]

از این کد استفاده کنید:

.logo {
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.logo:hover{
-moz-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
}

موفق باشید

[hamid80 10]

/*logo*/
#zt-logo {margin:0;}
#zt-logo-image {display: block;margin: 0 auto; height: 52px; width: 308px; padding: 40px 0;}
#zt-logo-image span{  display: none; }
#zt-text-outer {text-align: center;}
#zt-logo-text {color: #2f363b!important; font-size: 400%; text-align: center;line-height: 100%;}
#zt-logo-text span{ text-align: center;text-transform: uppercase;font-family: 'Blackoak Std', arial; }
#zt-logo-slogan { display: none; margin: 0; letter-spacing: 9px; float:left;}
#logo:hover {

   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   -ms-transition: all .3s;
   -webkit-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);     


}

به بینید من در template.css این کدها را جایگزین کردم اتفاقی نیفتاد

/*logo*/
.logo {
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.logo:hover{
-moz-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
}
#zt-logo {margin:0;}
#zt-logo-image {display: block;margin: 0 auto; height: 52px; width: 308px; padding: 40px 0;}
#zt-logo-image span{  display: none; }
#zt-text-outer {text-align: center;}
#zt-logo-text {color: #2f363b!important; font-size: 400%; text-align: center;line-height: 100%;}
#zt-logo-text span{ text-align: center;text-transform: uppercase;font-family: 'Blackoak Std', arial; }
#zt-logo-slogan { display: none; margin: 0; letter-spacing: 9px; float:left;}

[Vahid Taheri 74]

جای .logo اینو بزارید : #zt-logo

و جای .logo:hover هم #zt-logo:hover

چون در قالب شما آی دی لوگو zt-logo هست و در سی اس اس آی دی یا شناسه رو با # نشون میدن

[hamid80 10]

ممنون یک جورایی درست شد فقط مال سایت جومدیا می اید بالا وقتی می ری روش موس نگه می داری و الان لوگوی من فقط یه سمت چپ می ری و وقتی موسو از روش ور می داری می اید سر جاش البته من از این کد استفاده کردم

/*logo*/
#zt-logo{
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#zt-logo:hover{
-moz-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(-30px) translateY(0px) skewX(0deg) skewY(0deg);
}
#zt-logo {margin:0;}
#zt-logo-image {display: block;margin: 0 auto; height: 52px; width: 308px; padding: 40px 0;}
#zt-logo-image span{  display: none; }
#zt-text-outer {text-align: center;}
#zt-logo-text {color: #2f363b!important; font-size: 400%; text-align: center;line-height: 100%;}
#zt-logo-text span{ text-align: center;text-transform: uppercase;font-family: 'Blackoak Std', arial; }
#zt-logo-slogan { display: none; margin: 0; letter-spacing: 9px; float:left;}

[asrertebat 12]

با سلام من در سایتم به آدرس http://www.robatsaz.com برای حرکت دادن لوگو چیکار باید بکنم از ja-portifilo استفاده کردم

[reza.sh 19]

کد های بالا رو در فایل css مربوط به {قسمت (class or id)} لوگو قرار بده

[Vahid Taheri 74]

ممنون یک جورایی درست شد فقط مال سایت جومدیا می اید بالا وقتی می ری روش موس نگه می داری و الان لوگوی من فقط یه سمت چپ می ری و وقتی موسو از روش ور می داری می اید سر جاش البته من از این کد استفاده کردم

مقدار های translateX رو 0 کنید و به translateY ها مقدار مثبت مثل 30 بدین

[hamid80 10]

ممنون دوست عزیز من یک ارم متحرک دیگه دیدم که هم وقتی روش کلید می کنید می چرخه هم حرک میکنه و ارو دو تا می شه و بعد از حرک ارم به جای خودش بر می گرده چه طور می شه یک چیزی شبیح این درست کرد

http://extensions.joomlafarsi.com/

[Vahid Taheri 74]

برای چرخش در کد به rotate(0deg) به جای 0 مقدار بر حسب درجه قرار بدید(بیشتر از 360 هست میشه)

[hamid80 10]

ممنون دوست عزیز ولی اگر به اون سایت یک نگاهی بیندازید لوگوش دوتا می شه وقتی روی عکس کلید می کنی و یکی از لوگو ها ثابت می ماند و اون یکی حرکت می کنه چه طور می شه دوتا لوگو استفاده کرد یا این سایت از چه ترفندی استفاده کرده برا یاین کار

[Vahid Taheri 74]

فکر نکنم با css این چنین کاری بشه کرد.احتمالا از جاوا اسکریپت استفاده شده

[hamid80 10]

ممنون حالا میشه کدی که تو جاوا اسکریپ استفاده کرده را بدست اورد و یک چیزی شبیح این درست کرد

یا یک جای دیدم یک کد بود که با css نوشته شده بود روش کلید می کردی یک عکس دیگه باز می شد

ویرایش شده در بهمن 91 توسط hamid80

[hamid80 10]

یا مثلا از این کد استفاده کرد که یک نوع تغییر رنگ هست استفاده کرد

@keyframes demo {
 from {
   background-color: Lime;
   animation-timing-function: ease-in-out;
 }
 50% {
   background-color: Red;
   animation-timing-function: ease-in;
 }
 to {
   background-color: Transparent;
   animation-timing-function: ease;
 }
}

animation-delay: 1.3s;

animation-direction: alternate;

animation-duration: 1.5s;

animation-fill-mode: forwards;

animation-iteration-count: 4;

animation-name: demo;