کد نویسی arrow-animations حرکت موشن دار

بازدید: 3105 بازدید

برنامه نویسی arrow-animations حرکت موشن دار

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

این بار می خواهم در مورد کد نویسی صحبت کنم که شاید به درد خیلی از افراد می خورد برنامه نویسی که آموزش های جاوا اسکریپت javascript ، اچ تی ام ال html و سی اس اس css را در خود جای داده است .

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

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

خوب بریم سراغ آموزش خودمان :

این بار آموزشی که مد نظرمان است برای شما پیاده سازی بکنیم ، اول در فیلم آموزشی بالا به شما کاملا توضیحات کامل داده شده و کد مورد نظر را برای شما می گذارم تا بتوانید بهترین استفاده را ببرید …

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

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

 

قسمت فایل HTML اچ تی ام ال حرکت موشن دار :

خوب اول از همه باید در اچ تی ام ال html خود یک دایو div قرار دهیم و بعد به آن کلاس class بدهیم مثال :

<div class="wrap">
	
	<span class="arrow">
		<span></span>
		<span></span>
	</span>
	
	<span class="arrow--l-r right">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</span>
	
	</div>

 

خوب بعد از گذاشتن این کد اچ تی ام ال html باید یک فایل css سی اس اس درست کنید و به این اچ تی ام ال لینک بدهید طریقه لینک دادن را اول توضیح بدهم :

<head>
  <meta charset="UTF-8">
  <title>آموزش فارسی amozeshfarsi.ir</title>
  
      <link rel="stylesheet" href="css/style.css">
  
</head>

از این طریق می توانید لینک بدهید در اصل کد زیر در داخل تگ head باید قرار بگیره :

<link rel="stylesheet" href="css/style.css">
کد نویسی arrow-animations حرکت موشن دار
scss-arrow-animation

 

قسمت فایل سی اس اس CSS حرکت موشن دار :

خوب بعد از اینکه فایل سی اس اس را به فایل اچ تی ام ال وصل کردید درون فایل css این کد را قرار بدهید :

html {
  height: 100%;
  font-size: 20px;
}
body {
  min-height: 100%;
  font-family: Lato;
  color: #3d3d3d;
  background-color: RebeccaPurple;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  position: relative;
  margin: 0 1rem;
}
.arrow span {
  top: 0.5rem;
  position: absolute;
  width: 0.75rem;
  height: 0.1rem;
  background-color: #efefef;
  display: inline-block;
  transition: all 0.2s ease;
}
.arrow span:first-of-type {
  left: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.arrow span:last-of-type {
  right: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.arrow.active span:first-of-type {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.arrow.active span:last-of-type {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.arrow--l-r {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  position: relative;
  margin: 0 1rem;
}
.arrow--l-r.left span:nth-child(4) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.arrow--l-r.left span:nth-child(5) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.arrow--l-r.right span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.arrow--l-r.right span:nth-child(2) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.arrow--l-r span {
  position: absolute;
  height: 0.1rem;
  background-color: #efefef;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.arrow--l-r span:nth-child(1),
.arrow--l-r span:nth-child(2),
.arrow--l-r span:nth-child(4),
.arrow--l-r span:nth-child(5) {
  width: 0.625rem;
  top: 0.625rem;
}
.arrow--l-r span:nth-child(1) {
  right: 0;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
.arrow--l-r span:nth-child(2) {
  right: 0;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}
.arrow--l-r span:nth-child(3) {
  width: 1.25rem;
  top: 0.625rem;
}
.arrow--l-r span:nth-child(4) {
  left: 0;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.arrow--l-r span:nth-child(5) {
  left: 0;
  -webkit-transform-origin: top left;
          transform-origin: top left;
}

 

قسمت فایل Javascript جاوااسکریپت حرکت موشن دار :

خوب بعد از این ۲ تا فایل جاوا اسکریپ هم هست که در پایین کد درون html باید وارد کنید البته ادرس فایل جی اس js را و بعد از اینکه فایل js را ساختید این کد نویسی را درونش قرار می دهید :

البته این فایل اول باید لینک شود … در فیلم توضیح داده شده :

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

 

و در اخر سر این لینک باید زده شود و در یک فایل دیگر که لین کرده اید را کد زیر وارد کنید :

$('.arrow').on('click', function() {
    $(this).toggleClass('active');
});

$('.arrow--l-r').on('click', function() {
    $(this).toggleClass('left right');
});

 

 

خوب اگر فیلم آموزشی کد نویسی arrow-animations حرکت موشن دار را تا اخر آن ببینید میتوجه خواهید شد که چگونه اجرا می شود …

 

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

 

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

 

در پناه حق دیگر فیلم های آموزشی ما را دنبال کنید …