نگــاهــی متفـــاوت بــه طراحـــی
A Different View on design

Hypertemp.ir

آموزش ساخت دکمه هدایت به بالا با انیمیشن

پست شماره 233
20:46 , یکشنبه 05 مهر 1394

با سلام خدمت همه هایپری ها همونطور که میدونید پرچممون خیلی بالاست دی :|

چطورید ؟خوبین ؟خوشین ؟ سلامتین؟امروز با شما هستیم با یه مطلب آموزشی مفید ساده در خدمتتون هستم که حدود 30 درصد کدنویسا دنبال این کد هستند که در اوج سبکی کد، دکمه هدایت به بالا با انیمیشن بسازند اما با یه سری کد چرت و پرت 50 خطی مواجه میشند و منصرف میشند.این  کد جی کوئری رو به شما تقدیم میکنیم و امیدواریم براتون مفید واقع شه.

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

لایه باز لوگو خبرنامه (کاملا لایه باز)

پست شماره 115
13:59 , یکشنبه 23 فروردين 1394

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

 

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

آموزش و معرفی کتابخانه animate.css

پست شماره 114
17:7 , شنبه 22 فروردين 1394

با سلام خدمت کاربران و میهمانان عزیز هایپرتمپ

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

آموزش استفاده از کتابخانه animate.css

در ابتدا لازم است که کتابخانه آن را در head قالب خود قرار دهید یعنی بین دو تگ زیر

و کد فراخوانی کتابخانه که باید بین دو تگ بالا قرار بگیرد :

خوب حالا ما کتابخانه رو در قالب خودمون قرار دادیم و نوبت اینه که کلاس (مشخصه)  هارو به اجزای قالب خودمون اضافه کنیم :

خوب مشخصه animated الزامه اجرای انیمیشن و نحوه اجرای انیمیشن که ما از zoomIn استفاده کردیم . ما تمامی مشخصه های انیمیشن هارو در زیر قرار دادیم:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

یک مثال که ما در آن به یک دایو انیمیشن دادیم :

خوب تا اینجا ما موفق شدیم انیمیشن رو به جز دلخواهمون در کدنویسی بدیم ولی این انیمیشن ها همگی در ابتدا که لود شد اجرا میشن و اگه ما بخوایم این انیمیشن اجزا وقتی اجرا بشن که روشون اسکرول شد به مانند قالب هایپرتمپ نسخه 1.3 اجرا شوند باید کتابخانه زیر را علاوه بر کتابخانه بالا به head قالبمون اضافه کنیم :

و کلاس زیر رو به جزهای دلخواهمون در قالب نیز اضافه کنیم

یک مثال :

اگه سوالی در این مورد داشتین در نظرات با ما درمیان بگزارید.

 

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

کد تبلیغات متنی به سبک هایپر + آموزش استفاده

پست شماره 69
17:12 , سه شنبه 23 دي 1393

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

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

خوب در این مطلب ما برای شما کد تبلیغات متنی هایپر تمپ رو طراحی  و فرآهم آوردیم .که دموش هم رو سایت هایپرخودمون هست هم تو جعبه دانلود قرار دادیم.این کد طولش رو خودکار تعیین میکنه پس نیازی به ویرایش استایل نداریم . این کد در 5 رنگ سبز , آبی , قرمز ,زرد و مشکی که رنگه عشقه دی :) ارائه شده که شما با کمی ویرایش میتونید هر رنگ دلخواه رو اضافه کنید و چنانچه با css  آشنایی ندارین میتونید در انجمن مطرح کنید تا ما براتون حلش کنیم .

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

آموزش استفاده :

1- چنانچه کتابخانه آیکون های زنده را در قالب خود ندارید این کد را به بخش head قالبتون اضافه کنید:

2- کتابخانه استایل تبلیغات متنی رو باز به head قالبتون اضافه کنید :

3- کد تبلیغات متنی رو هر کجا که از قالبتون عشقتون کشید اضافه کنید :

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

باتشکر مرتضی مدیریت هایپرتمپ

 

 

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

فیلم آموزش کدنویسی قالب 404

پست شماره 64
16:0 , دوشنبه 15 دي 1393

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

 

 

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

آموزش طراحی قالب html - قسمت اول

پست شماره 63
16:0 , شنبه 13 دي 1393

به نام خدا.

درود خدمت کاربران عزیز.

امروز برای شما آموزش ساخت قالب html رو به صورت فیلم آماده کردیم که در چند قسمت ارائه میشه. امیدوازیم از آموزش خوشتون بیاد.

کاری از گروه آموزشی هایپرتمپ

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

منوی فلت با با سبک هایپر تمپ

پست شماره 23
12:23 , جمعه 23 آبان 1393

با عرض سلام و خسته نباشید خدمت همه ی کاربران و میهمانان عزیز هایپر تمپ

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

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

ابزار ساخت و اضافه کردن آیکون زنده به قالب

پست شماره 15
14:0 , جمعه 16 آبان 1393

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

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.

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

پست شماره 6
22:23 , جمعه 09 آبان 1393

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

توجه : تمام حقوق مطالب برای هایپرتمپ محفوظ می باشد.