ایجاد شده در ۰۳ اسفند ۱۴۰۰
مرورگر فایرفاکس از سودو کلاس هایی که روی اینپوت‌ها تعریف میکنیم پشتیبانی نمی‌کنه, البته روی مابقی المنت‌ها مشکلی نداره و میتونیم از سودو کلاس‌ها استفاده کنیم .
پس استایل هایی که با استفاده از سودو کلاس‌های affter and before به اینپوت‌ها دادیم در فایر فاکس اجرا نمیشه.
برای حل کردن این موضوع خیلی سرچ کردم ولی راه حلی پیدا نکردم و برای اینکه هم با کروم و هم با فایرفاکس سازگار باشه این پروژه رو با یه ساختار جدید پیاده کردم و کدش رو در ادامه قرار میدم
لطفا اگر کسی راه حلی برای این مورد داره در قسمت کامنت‌ها به اشتراک بزاره
HTML :
<body dir="rtl">
<section class="wrapper">
<div class="page-scroller">
<input type="radio" name="dummy-name" id="dummy-id1" checked>
<input type="radio" name="dummy-name" id="dummy-id2">
<input type="radio" name="dummy-name" id="dummy-id3">
<div class="labels">
<label class="label label1" for="dummy-id1">label>
<label class="label label2" for="dummy-id2">label>
<label class="label label3" for="dummy-id3">label>
div>
<div class="slides">
<div class="slide slide1">
<h1>Header Section Oneh1>
<p>Subtitle Section Onep>
div>
<div class="slide slide2">
<h1>Header Section Twoh1>
<p>Subtitle Section Twop>
div>
<div class="slide slide3">
<h1>Header Section Threeh1>
<p>Subtitle Section Threep>
div>
div>
div>
section>
body>
CSS :
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgb(110, 108, 108);
overflow: hidden;
}
.wrapper {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.page-scroller {
width: 100%;
height: 100%;
position: relative;
}
.page-scroller input {
display: none;
}
.page-scroller .labels {
position: absolute;
left: 0;
margin-left: 20px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 100;
}
.page-scroller .labels .label {
width: 15px;
height: 15px;
background-color: transparent;
border: 3px solid #fff;
border-radius: 50%;
margin-top: 15px;
}
.page-scroller .labels .label:first-child {
margin-top: 0;
}
.page-scroller .slides {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
.page-scroller .slides .slide {
position: absolute;
top: 120%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
transition: top .5s ease;
}
.page-scroller .slides .slide h1 {
font-size: 4em;
}
.page-scroller .slides .slide p {
font-size: 2em;
}
.page-scroller .slides .slide1 {
background-color: red;
}
.page-scroller .slides .slide2 {
background-color: purple;
}
.page-scroller .slides .slide3 {
background-color: deeppink;
}
#dummy-id1:checked ~ .labels .label1,
#dummy-id2:checked ~ .labels .label2,
#dummy-id3:checked ~ .labels .label3 {
background-color: #fff;
}
#dummy-id1:checked ~ .slides .slide1,
#dummy-id2:checked ~ .slides .slide2,
#dummy-id3:checked ~ .slides .slide3 {
top: 0;
transition-delay: .5s;
}
