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

روژ دیزاین | طراحی سایت

نتایج جست جوی شما دربین تمامی مطالب موجود در سایت جست جو میشود !

آیا از ما و فعالیت هایمان به قدر کافی میدانید؟

گروه روژدیزاین در سال 1390 با مدیریت مهندس شاهین جلوه و با برند کیمیا گروپ کار خود را اغاز نمود و بسیاری از پروژه های کوچک و بزرگ ما نیز همینک با این اسم است اما در سال1396 این برند به نام روژدیزاین تغییر نام داده و در حوضه فناوری در ضمینه برنامه نویسی طراحی وبسایت اپلیکیشن اندروید مباحث امنیتی شبکه طراحی نرم افزار های سیستمی و گرافیک وطراحی بنر و کارهای گرافیکی فعالیت می نماید. بیشتــــر بدانیــــد..

چرا روژ دیزاین

شاید با مشاهده پروژه های بزرگ مان بتوانید به این نتیجه برسید که قدرت ما در برنامه نویسی چقدر است و با مشاهده نمونه کارهایمان بدانید که رابط های کاربری ما چقدر کاربردی و مفید است در این باره بیشتر بدانیــــد

روژدیزاین- 2035

مشاهده شده: 445 نظر : 0 افزودن به علاقه مندی ها تاریخ ارسال: 1396/11/20

اموزش ساخت اسلایدر انیمیشن با css3


اموزش ساخت اسلایدر انیمیشن با css3   

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

ما امروز اموزش ساخت این اسلایدر ها را با کد های ساده سی اس اس 3,css3و اپ تی ام ال به شما می اموزیم و نمونه اماده شده را می توانید در ادرس زیر مشاهده نمایید.

مشاهده دمو

اموزش ساخت :

کد های html

  <header>
  <section class="header-content">
    <img class="rocky-dashed animate-pop-in" src="https://cssanimation.rocks/levelup/public/images/rocky-dashed.svg">
    <h1 class="header-title animate-pop-in">Your awesome landing page</h1>
    <h3 class="header-subtitle animate-pop-in">A useful start for your projects</h3>
    <p class="header-button animate-pop-in"><a href="http://courses.cssanimation.rocks/p/level-up" class="button">Get started today</a></p>
  </section>
</header>

کد های سی اس اس :

header {
  align-items: center;
  display: flex;
  font-size: 18px;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
  perspective: 100px;
}

header:before {
  animation: fade-slide-down 2s .5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
              url(https://cssanimation.rocks/levelup/public/images/background.jpg) no-repeat bottom;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  z-index: -1;
}

header:after {
  animation: rotate-up .5s .5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: #F9FCFF;
  content: "";
  height: 40rem;
  left: -5%;
  position: absolute;
    right: -5%;
    top: 90%;
  transform-origin: 0 0;
  z-index: 0;
}

.header-title, .header-subtitle {
  color: #fff;
}

.header-subtitle {
  text-transform: uppercase;
  margin-bottom: 5rem;
}

.header-button {
  transform: translateZ(.1px);
  position: relative;
  z-index: 10;
}

.animate-pop-in {
  animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards;
  opacity: 0;
}

.rocky-dashed {
  animation-delay: .6s;
}

.header-title {
  animation-delay: .8s;
}

.header-subtitle {
  animation-delay: 1s;
}

.header-button {
  animation-delay: 1.1s;
}


/* Animations */

@keyframes fade-slide-down {
  0% {
    opacity: 0;
    transform: translateY(-4rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(-4rem) scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rotate-up {
  100% {
    transform: rotateZ(-4deg);
  }
}

خلاصه مطلب:: اموزش ساخت اسلایدر انیمیشن با css3,شاید بارها اسلایدر های را دیده باشید که به ارامی تصاویر و متن ها را لود میکنند در این آموزش با نحوه ساخت این اسلایدر ها با کمک سی اس اس 3 اشنا میشوید

اموزش ساخت اسلایدر انیمیشن با ,CSS Animation,Animating your hero header,css3 ,اموزش css3اموزش انیمیشن در سی اس اس 3,اموزش ساخت اسلایدر انیمیشن,اموزش ساخت متن متحرک,متن ظاهر شونده,اموزش اسلایدر متن

شبکه های اجتماعی

این مطلب را به اشتراک بگذارید

باسلام لطفا از درج نظرات توهین آمیز و مغایر با قوانین خوداری فرمایید.

هرگاه دیدگاهم تایید شد، من را از طریق ایمیل مطلع کن