حرفه ای ترین قالب که من در عمرم دیدم

[titreaval]

سلام دوستان

خواستم بدونم جایی آموزش چنین افکت هایی هست که جدیدا مد شده و روی سایتها اینچنین طراحی هایی این عزیزان طراح انجام میدهند ...

نمونه اول از جی دیزاین :

mehromah.ir

تمام صفحات سایتش از جمله صفحه ی اول فوق العاده بوده
و البته چیزی که خیلی هم دنبالش بودم بخش وبلاگ بجای صفحه از آجاکس استفاده شده و با دیدن آخر . تعداد مشخصی پست قدیمی تر لود میشه

نمونه ی دیگه :

teymoori.net

که بدک نیست اما طراحی سختی کرده

سوالاتم :

1** . چطور محتویات از جمله فونت , تصویر و ... کوچک بزرگ میشود با اندازه ی صفحه مرورگر
فقط نکته : با درصد نیست
و با @media screen هم کار نشده
یک چیزی هست که من نمی دونم . باید از css باشه
من هر چی سورسش رو خوندم . با فایر باگ هم کلی روش جستجو کردم اون دستور را نفهمیدم ...

2** . چطور فکت هایی اینجوری را گذاشتند :
من با transform:rotate()
و opacity
انیمیشن و transition و ... این افکتها را انجام دادم اما نمیدونم چطور با زدن لینک # اینجوری که فکر کنم بهش میگند لنگر , روی افکت کنترل داشته باشم ... .

3** . بخش وبلاگش انتشارات مهروماه و هم در www.piday.org/million دیدم با دیدن آخر صفحه لود میشه و رکوردهای بعدی یکی یکی بالا میاد ...


پیشا پیش از پاسخ و راهنمایی شما ممنونم :

[titreaval]

واقعا اینقدر این سایت سخت طراحی شده که کسی از کارش سر در نیاورد ...

فکر نکنم ...

من تا پایان هفته اگه کسی نگفت خودم میام آموزشش رو میزارم
باید وب رو زیرورو کنم

اما خواهشا اگه کمکی هست دریغ نکنید


2 نمونه اینچنینی مثال زدم

[2undercover]

1. هر وقت اندازه ی صفحه کوچک و بزرگ میشه با استفاده از جاوااسکریپت میزانی که باید کوچک بشه رو حساب می کنه بعد با استفاده از scale عناصر صفحه رو کوچک و بزرگ می کنه!

2. اون رو هم با استفاده از جاوااسکریپت و با استفاده از rotate و translate3d و عنصری رو که در برگیرنده ی slide ها هست اون افکت رو اجرا می کنند!

3. به اون تکنیک هم می گن Lazy Load که اون هم با استفاده از جاوااسکریپت هر وقت اسکرول به پایان رسید با استفاده از AJAX اطلاعات بعدی رو بارگذاری می کنند! البته Plugin هایی برای Jquery هم نوشته شده برای اینکار!

[titreaval]

2 . مشکل من افکت نبود
مشکل من لینک کردن به افکت بود
وگرنه با شکلهای موس مثل hover و ... میشه تغییر داد
ولی وقتی من به یک شی اشاره دارم نمیشه ...
مثلا وقتی می خواهم شی درباره ی لینک بشم بگم شکلهای دیگه محو و کد بر حسب قانونی که تعریف کردم و بعد اون شی بیاد وسط و ... با اشاره ی : #
3. فوق العاده دستتون درد نکنه ...
با



$M=0
$L=5
limit $M,$L


هر بار که جلو میره میشه


$M=$M+5


خلاصه دستور فوق با عمل آجاکس باید اضاف گردد
جالب بود
1. بازم ممنونم ...
آموزش هر دو را در همینجا امشب قرار خواهم داد
اما دومی را نگرفتم

[titreaval]

سوال 1 من ...
آموزش بزرگ و کوچکی همراه با افکت

skew : کج
scale : بزرگی
rotate : چرخش


البته همانطور که دوستمون فرمود با جاوا اسکریپت باید باشه بهتره
و بعد این کدی که من در زیر گذاشتم بدون استایل بندی درست , نوشتم
و ...
الان خامش رو برای شما نوشتم و گذاشتم

شب هم آموزش لودینگ رکورد ها با آجاکس را آموزش می دهم به روش Lazy Load ...






<style type="text/css">

@media screen and (min-width: 400px){
#home{
width:500px;
margin:auto;
transform:scale(0.8,0.8)

}}

@media screen and (min-width: 600px){
#home{
width:500px;
margin:auto;

transform:scale(1,1)

}}
@media screen and (min-width: 800px){
#home{
padding-top:100px;
width:500px;
margin:auto;

transform:scale(1.2,1.2)

}}
</style>


<div id="home">
<p>سلام :</p>
<p> متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان.ر</p>
<p> متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن ش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان.</p>
<p> متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزماوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان.</p>
<p>ا متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمآزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان. متن آزمایش است دوستان.</p>
</div>

[titreaval]

کاش یکی نمونه خام و ساده همراه با توضیح سایت یعنی :
teymoori.net
و
mehromah.ir
میزاشت
یک شبانه روز هست که تو فکرشم :(

[refugee]

میشه لطف کنید یک دمو هم با همین کد هایی که گفتین درست کنید بذارید ؟

اگه سمت سرور هم کار شده لطفا تو فایل زیپ بذارید تا تو سیستم خودمون هم تست کنیم .

مرسی

[titreaval]

میشه لطف کنید یک دمو هم با همین کد هایی که گفتین درست کنید بذارید ؟

اگه سمت سرور هم کار شده لطفا تو فایل زیپ بذارید تا تو سیستم خودمون هم تست کنیم .

مرسی
نه نه اشتباه فکر کردید
این کد بالا بخش آموزش یکی از سوالات من بود
و من آموزش آن را گذاشتم
دمو نیست . کل کد هست که نوشتم برای دوستان ...
برای دوستان تا با استفاده از آن بتوانند کاراهایی جالب درست کنند

سایت های ذکر شده سوال من هست .
که چگونه دقیقا چنین چیزی درست شده
به نظر من مثلا mehromah.ir کار شخص نیست
چند کتابخانه جاوا اسکریپت است
و با آموزش خاصش که الان طراحان با استفاده از آن به آسانی و بدون درد سر چنین چیزهایی درست میکنند
تا الان 6 مدل سایت اینچنین برای افراد حتی ... که اصلا نه سن (دختر 11 ساله !!) و نه چهره ی یک برنامه نویس و طراح را دارند چنین طراحی هایی کردند ...
پس معلومه یکجا آموزشش به انگلیسی هست
که کامل و واضح توضیح داده
من اونو می خوام
نه من
همههههههههههههههههههههه

[Omid Jackson]

به نظرت کار تیموری با JQuery بوده؟
مثل نمونه زیر:
http://codecanyon.net/item/css3-cube-slider-jquery-3d-slider/full_screen_preview/2751468

[r4hgozar]

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

موفق باشید

[tadayoni]

میتونید از scss هم استفاده کنید . تو اینترنت CSS Dynamic languages رو جستجو کنید

[Omid Jackson]

میتونید از scss هم استفاده کنید . تو اینترنت CSS Dynamic languages رو جستجو کنید
http://sass-lang.com/
این سایت به درد میخوره برا یادگیری؟

[Omid Jackson]

من نمونه هایی که میبینم رو میذارم اینجا
http://alexdunphy.github.io/refineslide/
http://www.codingjack.com/carousel/

[Omid Jackson]

http://tympanus.net/Development/Windy/
http://tympanus.net/Development/Slicebox/index.html

[mehbod.rayaneh]

قالب ریپه! :عصبانی++:
http://ursus-polaris.html.themewoodmen.com/#/about
چ وضعشه آخه؟! :افسرده:

[titreaval]

دمتتتتتتتتتتتتتتتتتتتتتتت تتتتتتتتتتتتتتتتتتتتتتتتت تتتتتتتتتتتتتتتتتتتتتت
گرررررررررررررررررررررررر ررررررررررررررررررررررررر ررررررررررررررررررررررم

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

[Omid Jackson]

راستی من دیشب داشتم رو mehromah.ir کار میکردم
کل سایت با JQuery و CSS3 درست شده
از Transition, Transform (Scale, Rotate, Translate), Opacity, ... استفاده کرده
دیشب یه چیز خیلی ساده درست کردم تقریبا اون شکلی
البته این از delay استفاده میکنه برا کاراش و یه قسمتی هم از coverscroll() استفاده کرده که کتابا رو میتونی با اسکرول موس عوض کنی، همینا رو یادم بود
کارش فقط ابتکاریه و خیلی هم جالب :)
با JQuery هم میشه به صورت زیر عمل کرد:



$("#id").click(function(){
$("div").removeClass();
$("div").addClass("class");
});


شاید یه خورده اشتباه داشته باشم ولی تقریبا شکل کلی برای تغییر کلاس با جی کوئری اینطوریه یا میشه پروپرتی CSS رو همینجا تغییر داد ولی کد خیلی زشت میشه

[azamicu]

دوستان میشه نظرتون رو در باره این قالب هم بدید
مال خودمه
http://www.sarat.ir/

[titreaval]

حس سایت شما : متانت , ملایمت , آرامش
seo : امتیاز (8.5 از نظر تخصصی) 10 نمره شخصی // از 20 //
زیبایی : 15 از نگاه یک سایت / از نگاه یک سایت طراحی وب 13
افکت های ایده ای و جدید : 12
سبکی : 16

روحیه ی شخص طراح : فردی متین ملایم / افسرده در عین حال اجتماعی / فردی سنت گرا , شاید سن بالای 30 / حتما مرد / دقت در کارها بالا / ساده و بی آلایش

[f.gh1372]

قالب مهر و ماه یه قالب خارجیه که فارسیش کردن !! بذارم بچه ها دانلود کنن حالشو ببرن ؟!؟ :قهقهه:

[titreaval]

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

[mehbod.rayaneh]

قالب مهر و ماه یه قالب خارجیه که فارسیش کردن !! بذارم بچه ها دانلود کنن حالشو ببرن ؟!؟ :قهقهه:
اگه رایگان منتشر شده بذارید! :تشویق:
اگه ن ک واقعا انتشار قالب ریپ شده کار زشتیه ! :چشمک:

[f.gh1372]

چون قالب ریپ شده اس و پسر عمه گرامی بنده هم تذکر دادن نمیذارم ! :لبخند:

[1599511]

این آخرین باری هست که وارد سایت به عنوان کاربر می شوم

من titreaval هستم و دیگه بخاطر اهانتهایی که به من در پستها شد وارد سایت نمیشوم

و این اکانتم به عنوان اکانت یکبار مصرف ساختم ...

-----------------------------------------------------------------
فقط دلم سوخت که شما به من اهانت هایی کردید حتی در این پست , غیره مستقیم ...
رمز و رمز ایمیل اکانتم هم پاک کردم

----------------------------------------------------------------
اومدم بگم که این کد رایگانه
و من درخواست قالب غیره رایگان نکردم
و اصلا من دزد کد نیستم ...

https://github.com/bartaz/impress.js

تکنیک سایت

بی خودی به کسی چیزی نه در خصوصی بگید نه غیره مستقیم و عمومی
من تابحال از قالب های پولی استفاده نکردم و نخواهم کرد . و نمیخواستم کد این قالب را برایم بدزدید
خواستم ببینم این کد رایگان هست یا نه
ریپ کردن رو دوست ندارم

برای همیشه بای

قیامت هم میشه دیگه ...

بای