در این مطلب از پرشیا وب به طراحی کارت‌های بزرگ و حرفه‌ای می‌پردازیم که به اندازه اسلایدر باز و نمایش داده می‌شوند. برای طراحی این کارت‌ها از HTML و CSS و جاوا اسکریپت استفاده می‌شود.
طراحی اسلایدر کلیکی
برای طراحی به این صورت عمل می‌کنیم:
ابتدا یک فایل با نام index.html ایجاد و در آن مقادیر زیر را وارد می‌کنیم:
<html> <head> <meta charset="UTF-8"> <title>عنوان دلخواه</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'> <link rel='stylesheet' href='https://static.fontawesome.com/css/fontawesome-app.css'> <link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.2.0/css/all.css'> <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css'> <link rel="stylesheet" href="./style.css"> </head>
همانطور که مشخص است در این قطعه کد ما هدر صفحه را نوشته‌ایم که در آن کتابخانه normalize.css، فونت fontawesome و وزیر متن و فایل استایل را فراخوانی می‌کنیم. فایل استایل در ادامه ساخته می‌شود.
در ادامه کدهای زیر را به آن اضافه می‌کنیم. این کدها بدنه اصلی محتوای ما را تشکیل می‌دهند:
<body>
<div class="options">
<div class="option" style="--optionBackground:url(image.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-walking"></i>
</div>
<div class="info">
<div class="main">عنوان ۵</div>
<div class="sub">متن زیرین برای تست ۵</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(image.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-snowflake"></i>
</div>
<div class="info">
<div class="main">عنوان ۴</div>
<div class="sub">متن زیرین ۴</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(image.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-tree"></i>
</div>
<div class="info">
<div class="main">عنوان ۳</div>
<div class="sub">متن زیرین ۳</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(image.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-tint"></i>
</div>
<div class="info">
<div class="main">عنوان ۲</div>
<div class="sub">متن زیرین ۲</div>
</div>
</div>
</div>
<div class="option active" style="--optionBackground:url(image.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-sun"></i>
</div>
<div class="info">
<div class="main">عنوان</div>
<div class="sub">متن زیرین </div>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="./script.js"></script>
</body>
</html>
توجه داشته باشید که در کدهای بالا بجای image.jpg باید آدرس تصاویر دلخواه خود را جایگذاری نمایید.
در دو خط آخر نیز جی‌کوئری ورژن ۳.۳.۱ و فایل اسکریپت که در ادامه به آن می‌پردازیم فراخوانی می‌شود.
حالا نوبت فایل استایل است. یک فایل با نام style.css در کنار فایل قبلی که ساخته‌اید بسازید و کدهای زیر را در آن قرار دهید:
@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);
:root {
--user-button-circle: rgba(0,0,0,0.025);
--user-button-cardborder: rgba(255,255,255,0.25);
--user-button-text:#323133;
--user-button-shadow:rgba(0,0,0,0.1);
}
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
height: 100vh;
text-align: right !important;
font-family: "vazirmatn", sans-serif;
transition: 0.25s;
}
body.dark {
background: #232223;
color: white;
}
@media (prefers-color-scheme: dark) {
body:not(.light) {
background: #232223;
color: white;
}
}
body .credit {
position: absolute;
bottom: 20px;
left: 20px;
color: inherit;
}
body .options {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
min-width: 600px;
max-width: 900px;
width: calc(100% - 100px);
height: 400px;
}
@media screen and (max-width: 718px) {
body .options {
min-width: 520px;
}
body .options .option:nth-child(5) {
display: none;
}
}
@media screen and (max-width: 638px) {
body .options {
min-width: 440px;
}
body .options .option:nth-child(4) {
display: none;
}
}
@media screen and (max-width: 558px) {
body .options {
min-width: 360px;
}
body .options .option:nth-child(3) {
display: none;
}
}
@media screen and (max-width: 478px) {
body .options {
min-width: 280px;
}
body .options .option:nth-child(2) {
display: none;
}
}
body .options .option {
position: relative;
overflow: hidden;
min-width: 60px;
margin: 10px;
background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
background-size: auto 120%;
background-position: center;
cursor: pointer;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option:nth-child(1) {
--defaultBackground:#ED5565;
}
body .options .option:nth-child(2) {
--defaultBackground:#FC6E51;
}
body .options .option:nth-child(3) {
--defaultBackground:#FFCE54;
}
body .options .option:nth-child(4) {
--defaultBackground:#2ECC71;
}
body .options .option:nth-child(5) {
--defaultBackground:#5D9CEC;
}
body .options .option:nth-child(6) {
--defaultBackground:#AC92EC;
}
body .options .option.active {
flex-grow: 10000;
transform: scale(1);
max-width: 600px;
margin: 0px;
border-radius: 40px;
background-size: auto 100%;
/*&:active {
transform:scale(0.9);
}*/
}
body .options .option.active .shadow {
box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
}
body .options .option.active .label {
bottom: 20px;
right: 20px;
direction: rtl;
}
body .options .option.active .label .info > div {
left: 0px;
opacity: 1;
}
body .options .option:not(.active) {
flex-grow: 1;
border-radius: 30px;
}
body .options .option:not(.active) .shadow {
bottom: -40px;
box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
body .options .option:not(.active) .label {
bottom: 10px;
left: 10px;
}
body .options .option:not(.active) .label .info > div {
left: 20px;
opacity: 0;
}
body .options .option .shadow {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 120px;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label {
display: flex;
position: absolute;
right: 0px;
height: 40px;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label .icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 40px;
max-width: 40px;
height: 40px;
border-radius: 100%;
background-color: white;
color: var(--defaultBackground);
}
body .options .option .label .info {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 10px;
color: white;
white-space: pre;
}
body .options .option .label .info > div {
position: relative;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
body .options .option .label .info .main {
font-weight: bold;
font-size: 1.2rem;
}
body .options .option .label .info .sub {
transition-delay: 0.1s;
}
یک فایل با نام script.js نیز در کنار آن بسازید و کد زیر را در آن قرار دهید:
$(".option").click(function(){
$(".option").removeClass("active");
$(this).addClass("active");
});
کار تمام شد! اکنون با باز کردن فایل index.html باید پروژه نمایش داده شود:
See the Pen
Expanding flex cards by PersiaWeb (@PersiaWeb)
on CodePen.
یکی از خدمات حرفه‌ای پرشیا وب طراحی سایت است.
