آموزش های کوچک » نتایج بزرگ همراه با آموزش فارسی

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

scss-arrow-animation

برنامه نویسی 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">

قسمت فایل سی اس اس 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 و اموزش طراحی سایت و آموزش سئو رتبه اول گوگل و دیگر فایل های آموزشی تحت اختیار شما قرار خواهد داد تا جامعه ای هوشمندتری داشته باشیم …

 

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

 

آموزش فارسی

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

نوشته‌های مرتبط

قوانین ارسال دیدگاه

  • چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
  • چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
  • چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
  • چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
  • چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
دیدگاه‌ها

*
*

تخفیف 30%
کد تخفیف 75%
کد تخفیف 100%
تخفیف 50%
دانلود مقاله اشتباهات هزینه دار سئو SEO
کد تخفیف 13%
کد تخفیف 20%
کد تخفیف 90%
شانس خود را برای دریافت جایزه دریافت کنید!
آدرس ایمیل و تلفن همراه خود را وارد کنید و چرخ را چرخانید. این شانس شما برای به دست آوردن تخفیف های شگفت انگیز است!