اسلایدر تصویر Untitled Slider با CSS

91

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

»» شما می توانید در ویدئوی فوق، دمویی از این اسلایدر زیبا را مشاهده کنید.

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


گام اول : کدهای HTML


ابتدا یک فایل با پسوند html ایجاد نمائید و به عنوان مثال، نام آن را index قرار دهید. سپس در بخش body آن، کدهای زیر را کپی کنید:


گام دوم : تعیین فونت


سپس در بخش head فایل index.html کد زیر را قرار دهید تا از فونت های گوگل در این اسکریپت استفاده نمائیم:


گام سوم : کدهای CSS


حال در محلی که فایل index.html خود را ایجاد کردید یک پوشه با نام css ایجاد کنید و سپس در آن یک فایل با پسوند css قرار دهید و نام آن را به عنوان مثال، style قرار دهید. سپس آن را با یک ادیتور باز کنید و کدهای زیر را در آن کپی کنید:

	

		html, body {
		  width: 100vw;
		  height: 100vh;
		  overflow: hidden;
		}

		.untitled {
		  position: absolute;
		  height: 100%;
		  width: 100%;
		  -webkit-animation: rotateHue infinite 20s linear;
		          animation: rotateHue infinite 20s linear;
		  -webkit-animation-delay: 0.625s;
		          animation-delay: 0.625s;
		}
		@-webkit-keyframes rotateHue {
		  0% {
		    -webkit-filter: hue-rotate(0deg);
		            filter: hue-rotate(0deg);
		  }
		  20% {
		    -webkit-filter: hue-rotate(0deg);
		            filter: hue-rotate(0deg);
		  }
		  25% {
		    -webkit-filter: hue-rotate(90deg);
		            filter: hue-rotate(90deg);
		  }
		  45% {
		    -webkit-filter: hue-rotate(90deg);
		            filter: hue-rotate(90deg);
		  }
		  50% {
		    -webkit-filter: hue-rotate(180deg);
		            filter: hue-rotate(180deg);
		  }
		  70% {
		    -webkit-filter: hue-rotate(180deg);
		            filter: hue-rotate(180deg);
		  }
		  75% {
		    -webkit-filter: hue-rotate(270deg);
		            filter: hue-rotate(270deg);
		  }
		  95% {
		    -webkit-filter: hue-rotate(270deg);
		            filter: hue-rotate(270deg);
		  }
		  100% {
		    -webkit-filter: hue-rotate(360deg);
		            filter: hue-rotate(360deg);
		  }
		}
		@keyframes rotateHue {
		  0% {
		    -webkit-filter: hue-rotate(0deg);
		            filter: hue-rotate(0deg);
		  }
		  20% {
		    -webkit-filter: hue-rotate(0deg);
		            filter: hue-rotate(0deg);
		  }
		  25% {
		    -webkit-filter: hue-rotate(90deg);
		            filter: hue-rotate(90deg);
		  }
		  45% {
		    -webkit-filter: hue-rotate(90deg);
		            filter: hue-rotate(90deg);
		  }
		  50% {
		    -webkit-filter: hue-rotate(180deg);
		            filter: hue-rotate(180deg);
		  }
		  70% {
		    -webkit-filter: hue-rotate(180deg);
		            filter: hue-rotate(180deg);
		  }
		  75% {
		    -webkit-filter: hue-rotate(270deg);
		            filter: hue-rotate(270deg);
		  }
		  95% {
		    -webkit-filter: hue-rotate(270deg);
		            filter: hue-rotate(270deg);
		  }
		  100% {
		    -webkit-filter: hue-rotate(360deg);
		            filter: hue-rotate(360deg);
		  }
		}
		.untitled__shutters {
		  position: absolute;
		  height: 150vmax;
		  width: 150vmax;
		  left: calc(50% - 75vmax);
		  top: calc(50% - 75vmax);
		  pointer-events: none;
		  z-index: 2;
		  -webkit-animation: rotateFrame 10s linear infinite;
		          animation: rotateFrame 10s linear infinite;
		}
		@-webkit-keyframes rotateFrame {
		  0% {
		    -webkit-transform: rotate(0deg);
		            transform: rotate(0deg);
		  }
		  100% {
		    -webkit-transform: rotate(180deg);
		            transform: rotate(180deg);
		  }
		}
		@keyframes rotateFrame {
		  0% {
		    -webkit-transform: rotate(0deg);
		            transform: rotate(0deg);
		  }
		  100% {
		    -webkit-transform: rotate(180deg);
		            transform: rotate(180deg);
		  }
		}
		.untitled__shutters:before, .untitled__shutters:after {
		  content: '';
		  position: absolute;
		  height: 100%;
		  width: 100%;
		  left: 50%;
		  -webkit-transform: translate3d(-50%, 0, 0);
		          transform: translate3d(-50%, 0, 0);
		  background-color: #b3401a;
		  pointer-events: auto;
		}
		.untitled__shutters:before {
		  bottom: 50%;
		  -webkit-animation: openTop 5s infinite;
		          animation: openTop 5s infinite;
		}
		@-webkit-keyframes openTop {
		  0% {
		    -webkit-transform: translate3d(-50%, 0, 0);
		            transform: translate3d(-50%, 0, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
		            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
		  }
		  40% {
		    -webkit-transform: translate3d(-50%, -65vmax, 0);
		            transform: translate3d(-50%, -65vmax, 0);
		    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		  70% {
		    -webkit-transform: translate3d(-50%, -65vmax, 0);
		            transform: translate3d(-50%, -65vmax, 0);
		    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		  100% {
		    -webkit-transform: translate3d(-50%, 0, 0);
		            transform: translate3d(-50%, 0, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		}
		@keyframes openTop {
		  0% {
		    -webkit-transform: translate3d(-50%, 0, 0);
		            transform: translate3d(-50%, 0, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
		            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
		  }
		  40% {
		    -webkit-transform: translate3d(-50%, -65vmax, 0);
		            transform: translate3d(-50%, -65vmax, 0);
		    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		  70% {
		    -webkit-transform: translate3d(-50%, -65vmax, 0);
		            transform: translate3d(-50%, -65vmax, 0);
		    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		  100% {
		    -webkit-transform: translate3d(-50%, 0, 0);
		            transform: translate3d(-50%, 0, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		}
		.untitled__shutters:after {
		  top: 50%;
		  -webkit-animation: openBottom 5s infinite;
		          animation: openBottom 5s infinite;
		}
		@-webkit-keyframes openBottom {
		  0% {
		    -webkit-transform: translate3d(-50%, 0, 0);
		            transform: translate3d(-50%, 0, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
		            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
		  }
		  40% {
		    -webkit-transform: translate3d(-50%, 65vmax, 0);
		            transform: translate3d(-50%, 65vmax, 0);
		    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		  70% {
		    -webkit-transform: translate3d(-50%, 65vmax, 0);
		            transform: translate3d(-50%, 65vmax, 0);
		    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		  100% {
		    -webkit-transform: translate3d(-50%, 0, 0);
		            transform: translate3d(-50%, 0, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		}
		@keyframes openBottom {
		  0% {
		    -webkit-transform: translate3d(-50%, 0, 0);
		            transform: translate3d(-50%, 0, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
		            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
		  }
		  40% {
		    -webkit-transform: translate3d(-50%, 65vmax, 0);
		            transform: translate3d(-50%, 65vmax, 0);
		    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		  70% {
		    -webkit-transform: translate3d(-50%, 65vmax, 0);
		            transform: translate3d(-50%, 65vmax, 0);
		    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		  100% {
		    -webkit-transform: translate3d(-50%, 0, 0);
		            transform: translate3d(-50%, 0, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		  }
		}
		.untitled__slides {
		  position: absolute;
		  height: 100%;
		  width: 100%;
		  top: 0;
		  left: 0;
		  background-color: #b3401a;
		}
		.untitled__slide {
		  position: absolute;
		  height: 100%;
		  width: 100%;
		  opacity: 0;
		  -webkit-animation: showHideSlide infinite 20s steps(1);
		          animation: showHideSlide infinite 20s steps(1);
		}
		@-webkit-keyframes showHideSlide {
		  0% {
		    opacity: 1;
		    pointer-events: auto;
		    z-index: 1;
		  }
		  25% {
		    opacity: 0;
		    pointer-events: none;
		    z-index: -1;
		  }
		  100% {
		    opacity: 0;
		    pointer-events: none;
		    z-index: -1;
		  }
		}
		@keyframes showHideSlide {
		  0% {
		    opacity: 1;
		    pointer-events: auto;
		    z-index: 1;
		  }
		  25% {
		    opacity: 0;
		    pointer-events: none;
		    z-index: -1;
		  }
		  100% {
		    opacity: 0;
		    pointer-events: none;
		    z-index: -1;
		  }
		}
		.untitled__slide:nth-child(1) {
		  -webkit-animation-delay: 0s;
		          animation-delay: 0s;
		}
		.untitled__slide:nth-child(1) .untitled__slideBg {
		  background-image: url(1.jpg);
		}
		.untitled__slide:nth-child(2) {
		  -webkit-animation-delay: 5s;
		          animation-delay: 5s;
		}
		.untitled__slide:nth-child(2) .untitled__slideBg {
		  background-image: url(2.jpg);
		}
		.untitled__slide:nth-child(3) {
		  -webkit-animation-delay: 10s;
		          animation-delay: 10s;
		}
		.untitled__slide:nth-child(3) .untitled__slideBg {
		  background-image: url(3.jpg);
		}
		.untitled__slide:nth-child(4) {
		  -webkit-animation-delay: 15s;
		          animation-delay: 15s;
		}
		.untitled__slide:nth-child(4) .untitled__slideBg {
		  background-image: url(4.jpg);
		}
		.untitled__slideBg {
		  position: relative;
		  height: 100%;
		  width: 100%;
		  top: 0;
		  left: 0;
		  background-size: cover;
		  background-position: center;
		  background-color: #b3401a;
		  background-blend-mode: hard-light;
		  opacity: 1;
		  z-index: -1;
		  -webkit-animation: bgInOut 5s infinite;
		          animation: bgInOut 5s infinite;
		}
		@-webkit-keyframes bgInOut {
		  0% {
		    -webkit-transform: rotate(-45deg) scale(1.1);
		            transform: rotate(-45deg) scale(1.1);
		    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
		            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
		  }
		  33% {
		    -webkit-transform: rotate(0deg);
		            transform: rotate(0deg);
		  }
		  50% {
		    -webkit-transform: rotate(0deg);
		            transform: rotate(0deg);
		  }
		  66% {
		    -webkit-transform: rotate(0deg);
		            transform: rotate(0deg);
		    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
		            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
		  }
		  100% {
		    -webkit-transform: rotate(45deg) scale(0.9);
		            transform: rotate(45deg) scale(0.9);
		  }
		}
		@keyframes bgInOut {
		  0% {
		    -webkit-transform: rotate(-45deg) scale(1.1);
		            transform: rotate(-45deg) scale(1.1);
		    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
		            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
		  }
		  33% {
		    -webkit-transform: rotate(0deg);
		            transform: rotate(0deg);
		  }
		  50% {
		    -webkit-transform: rotate(0deg);
		            transform: rotate(0deg);
		  }
		  66% {
		    -webkit-transform: rotate(0deg);
		            transform: rotate(0deg);
		    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
		            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
		  }
		  100% {
		    -webkit-transform: rotate(45deg) scale(0.9);
		            transform: rotate(45deg) scale(0.9);
		  }
		}
		.untitled__slideContent {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  -webkit-transform: translate3d(-50%, -50%, 0);
		          transform: translate3d(-50%, -50%, 0);
		  color: white;
		  font-family: "Abril Fatface", sans-serif;
		  line-height: 0.8;
		  letter-spacing: -0.025em;
		  z-index: 2;
		  opacity: 1;
		  text-shadow: 0 0 0.5em rgba(179, 64, 26, 0.25);
		  mix-blend-mode: lighten;
		}
		.untitled__slideContent span {
		  display: block;
		  font-size: 15vmin;
		}

		.button {
		  font-family: 'Roboto Mono', sans-serif;
		  text-decoration: none;
		  font-weight: 800;
		  text-transform: uppercase;
		  font-size: 2vmin;
		  display: inline-block;
		  position: relative;
		  border: 3px solid white;
		  -webkit-box-shadow: -0.5vmin 0.5vmin 0 rgba(255, 255, 255, 0.5);
		          box-shadow: -0.5vmin 0.5vmin 0 rgba(255, 255, 255, 0.5);
		  background: transparent;
		  margin-top: 5vmin;
		  mix-blend-mode: lighten;
		  color: white;
		  padding: 2vmin 2vmin 1.8vmin 2vmin;
		  letter-spacing: 0.1em;
		  text-shadow: none;
		  line-height: 1;
		  -webkit-transform: translate3d(0.5vmin, -0.5vmin, 0);
		          transform: translate3d(0.5vmin, -0.5vmin, 0);
		  -webkit-transition: all 100ms linear;
		  transition: all 100ms linear;
		}
		.button:hover {
		  -webkit-transform: translate3d(1vmin, -1vmin, 0);
		          transform: translate3d(1vmin, -1vmin, 0);
		  -webkit-box-shadow: -1vmin 1vmin 0 rgba(255, 255, 255, 0.5);
		          box-shadow: -1vmin 1vmin 0 rgba(255, 255, 255, 0.5);
		  background: white;
		  color: black;
		}
		.button:active {
		  -webkit-transform: translate3d(0px, 0px, 0);
		          transform: translate3d(0px, 0px, 0);
		  -webkit-box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.5);
		          box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.5);
		}
	
	

حال بابد فایل style.css را به فایل index.html ضمیمه کنیم. برای این منظور، کد زیر را در بخش head فایل index.html قرار دهید:


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

پیوست ها :
  • این مقاله دارای پیوست نمی باشد.
loder | اُکسیما
»» نویسنده مقاله
علیرضا رئیسی | اُکسیما

علیرضا رئیسی
»» پشتیبانی مقاله

تیم پشتیبانی اُکسیما به صورت 24 ساعت در هر زمان و مکان، پاسخگوی تمامی سوالات و ابهامات شما در مورد این مقاله خواهند بود. بدین منظور شما می توانید از طریق روش های زیر از پشتیبانی فنی این مقاله برخوردار گردید. تیم پشتیبانی این اطمینان خاطر را به شما دانشجویان گرامی خواهند داد که در سریع ترین زمان ممکن پاسخگوی شما عزیزان باشند.


به اشتراک بگذارید ...

دوستان و همراهان گرامی : آیا تمایل دارید این مقاله را با دوستان و آشنایان خود در تلگرام به اشتراک بگذارید؟

[ مشاهده همه ]

مقاله های پیشنهادی

PjtZ8 | اُکسیما
فرم عضویت در خبرنامه به سبک مینیمالیستی

نویسنده: علیرضا رئیسی
145
T4bEX | اُکسیما
اسلایدر تصویر Untitled Slider با CSS

نویسنده: علیرضا رئیسی
91
odn1i | اُکسیما
طراحی مفهومی ارسال لیست کالا

نویسنده: علیرضا رئیسی
124
polygon_drawing | اُکسیما
ابزار نقاشی چند ضلعی

نویسنده: حسین رئیسی
181
matisse | اُکسیما
کتابخانه Matisse

نویسنده: حسین رئیسی
317
fancybutton | اُکسیما
کتابخانه FancyButton

نویسنده: حسین رئیسی
252
flutter_reactnative | اُکسیما
مقایسه Flutter و ReactNative

نویسنده: حسین رئیسی
425
best_language | اُکسیما
8 زبان برتر برنامه نویسی برای یادگیری در سال 2018

نویسنده: حسین رئیسی
369
android_library | اُکسیما
۲۵ کتابخانه برتر اندروید در سال 2018

نویسنده: حسین رئیسی
249
ui_ux | اُکسیما
تفاوت بین طراحی UX و UI چیست؟

نویسنده: حسین رئیسی
397
realm | اُکسیما
دیتابیس Realm

نویسنده: حسین رئیسی
186
fuchsia | اُکسیما
Fuchsia چیست؟

نویسنده: حسین رئیسی
352
dialogbuilder | اُکسیما
کتابخانه DialogBuilder

نویسنده: حسین رئیسی
126
progressbutton | اُکسیما
کتابخانه ProgressButton

نویسنده: حسین رئیسی
150
placeholderview | اُکسیما
PlaceHolderView نمایشی برای تمام لیست ها

نویسنده: حسین رئیسی
130
common_traits_programmers | اُکسیما
۹ ویژگی مشترک برنامه نویسان بزرگ

نویسنده: حسین رئیسی
218
code_books | اُکسیما
9 مورد از بهترین کتاب های برنامه نویسی

نویسنده: حسین رئیسی
227
programmer_warning | اُکسیما
10 اشتباه در یادگیری برنامه نویسی که درست نمی باشند

نویسنده: حسین رئیسی
88