hamid80

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

17 پست در این موضوع

سلام

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

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

درود بر شما

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

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

موفق پایدار

Share this post


Link to post
Share on other sites

ممنون من یک کد پیدا کردم ولی مشکلش اینه که می اید 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;    


}

Share this post


Link to post
Share on other sites

به جای کد

   -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);

Share this post


Link to post
Share on other sites

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

.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);
}

موفق باشید

Share this post


Link to post
Share on other sites

/*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;}

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

/*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;}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
ممنون یک جورایی درست شد فقط مال سایت جومدیا می اید بالا وقتی می ری روش موس نگه می داری و الان لوگوی من فقط یه سمت چپ می ری و وقتی موسو از روش ور می داری می اید سر جاش البته من از این کد استفاده کردم

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

Share this post


Link to post
Share on other sites

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

eerwerwe.jpg

http://extensions.joomlafarsi.com/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

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

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

ویرایش شده در توسط hamid80

Share this post


Link to post
Share on other sites

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

@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;

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری