رفتن به مطلب

ویژه آموزش کامل طراحی با استفاده از کتابخانه های JavaScript

Mohsen_Nirouzad

توسط Mohsen_Nirouzad ،
در آموزش

به نظرتون آموزش ها چطوره؟  

2 کاربر تاکنون رای داده است

  1. 1. به نظرتون آموزش ها چطوره؟

    • بسیار نیکوست!
      0
    • Absolutely brilliant!
      0
    • کا دمت گرم!
      2
    • جالب نیست! امید است سطح کیفی آموزش ها افزایش یابد.
      0
    • اصلا ایده خوبی نیست!
      0

پست های پیشنهاد شده

Mohsen_Nirouzad

Mohsen_Nirouzad 538

ارسال شده در
ارسال شده در

با درود فراوان بر شما کاربران و مدیران گرامی انجمن 20 اسکریپت،

در این مدت که تقریبا نبودم، تونستم با تمرین در حوزه برنامه نویسی سمت کاربر و مخصوصا Javascript، صفحات زیبایی طراحی کنم که تصمیم گرفتم تجربیاتم رو با شما به اشتراک بگذارم.

هر روز یک کتابخانه Java script و یک آموزش کامل از آن در این مطلب قرار داده خواهد شد.

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

در ضمن چرا صفحه هی ریفرش میشه هر یه مدت مطالب که نوشتم میپره؟

پس با ما همراه باشید.cool

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
Mohsen_Nirouzad

Mohsen_Nirouzad 538

ارسال شده در
  • مالک
ارسال شده در

 

ساخت پس زمینه ( background ) پارالکس با استفاده از parallax.js

نویسنده: محسن نیروزاد

 

 

 

افزودن پرونده ها

پرونده ای که میخواهید در آن از پس زمینه پارالکس استفاده کنید را باز کنید و فرم اصلی html را در آن وارد کنید مثلا:

 

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Document</title></head><body></body></html>

 

 

خوب حالا قبل از بسته شدن تگ بدنه (body) کد های زیر را بیافزایید:

 

    <script src="http://cdn.persianboard.ir/jquery-3.0.0.min.js"></script>   <script src="http://cdn.persianboard.ir/parallax.min.js"></script>

 

حال یک پرونده مثلا به نام application.js در کنار پرونده اصلی تان که میخواهید در آن پارالکس را ایجاد کنید بسازید و آن را با استفاده از تگ اسکریپت به پرونده اصلی بیافزایید:

 

<script src="application.js"></script>

 

در پرونده application.js، تکه کد زیر را بیافزایید:

 

$(".parallax-window").parallax({imageSrc:"[image_url]"});

 

 

توجه: به جای [image_url] آدرس تصویر خود را وارد کنید مثلا image.png

دقت کنید که اگر در قسمتی که حاوی پس زمینه پارالکس است هیچ متنی وارد نکنید، شما هیچ تصویری نیز نخواهید دید، (مثل مثال بالا) پس باید از کد زیر استفاده کنید:

 

.parallax-window{min-height:400px;background:transparent}

 

کد CSS بالا را در style یا یک فایل جدا قرار دهید.

موفق باشید!

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
Mohsen_Nirouzad

Mohsen_Nirouzad 538

ارسال شده در
  • مالک
ارسال شده در

 

چارچوب VideoJS |

لینک ها تنها برای اعضای سایت قابل نمایش است.

نویسنده: محسن نیروزاد

 

 

این جارچوب به شما کمک میکند تا پرونده های تصویری را بسیار زیباتر، پیشرفته تر و آسان تر نمایش دهید. ( در مقایسه با تگ video که امکانات به خصوصی ندارد. )

برای شروع استفاده، تکه کد های زیر را قبل تز تگ </head> یا </body> بگذارید:

 

  <link href="https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است.  " rel="stylesheet"> <script src="http://persianboard.ir/cdn/video.js-5.10.6/dist/ie8/videojs-ie8.min.js"></script> <script src="http://persianboard.ir/cdn/video.js-5.10.6/dist/video.min.js"></script>

 

 

حالا هر کجا که میخواهید کد زیر را برای نمایش پرونده تصویری قرار دهید:

 

  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">   <source src="[MY_VIDEO].mp4" type='video/mp4'>   <source src="[MY_VIDEO].webm" type='video/webm'>   <p class="vjs-no-js">     To view this video please enable JavaScript, and consider upgrading to a web browser that     <a href="https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است.  " target="_blank">supports HTML5 video</a>   </p> </video>

 

 

توجه کنید که به جای [my_video].mp4 و [my_video].webm نشانی پرونده های تصویری خود را قرار دهید. ( دو نسخه MP4 و Webm)

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
  • 3 سال پیش...

بایگانی شده

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
رفتن به فهرست موضوع ها
×
×
  • اضافه کردن...