قراردادن اسلایدر در یک عکس
-
![banoobagheri]()
banoobagheri
- 79 ماه قبل
- 79 ماه قبل
- 306 نمایش
با سلام خدمت طراحان وب عزیز
بنده یک صفحه ی خیلی ساده رو با استفاده از تگ DIV که معرف حضور همه ی عزیزازن هست به دو بخش تقسیم کردم
و در هر دو بخش در با استفاده از CSS برای اونها بک گراند عکس قرار دادم و zindex و طوری قرار دادم که بروی تمام چیزهای دیگر قرار بگیرن
الان تنها مشکل من اینه که می خوام یک اسلایدر در بخشی که مشخص کردم با بیضی طلایی رنگ قرار بدم :
نمی دونم چطور اینکار و باید انجام بدم از چندتا اسلایدر اماده استفاده کردم اما فایده ایی نداشت متاسفانه
این تمام کدهای html بنده :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/lightbox.min.css">
<script src="js/lightbox-plus-jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>Shahriar | Shervin</title>
</head>
<body>
<!-- loading -->
<div id="loading"><img src="img/Disk.svg" id="loading_gif"></div>
<!--header-->
<div id="header" class="container-fluid">
<div id="contactlink">
<p href="">Contact</p>
</div>
<!-- Header Animation -->
<div class="eyes">
<span id="eye1">OO</span>
<span id="eye2">OO</span>
<span id="eye3">OO</span>
<span id="eye4">OO</span>
</div>
<div id="skull">
<img draggable="false" id="logo" src="img/00.png" alt="">
<img draggable="false" id="sk1" src="img/0000.png" alt="">
<img draggable="false" id="sk2" src="img/000000.png" alt="">
</div>
<div id="main">
<a id="design" href="">Design & Illustration</a><br>
<a id="cc" href="">Character Concept</a><br>
<a id="canim" href="">Cartoon & Animation</a><br>
<a id="art" href="">Artworks</a>
</div>
</div>
<!-- Default Page Loaded -->
<div id="concept" class="container-fluid">
<!-- Slider -->
<div id="slider" >
<ul class="slides ">
<a href="img/Layer 1.png" data-lightbox="example-set1" class="slide slide1 example-image-link"><img class="example-image " src="img/Layer 1.png" alt="name1"></a>
<a href="img/Layer 2.png" data-lightbox="example-set1" class="slide slide2 example-image-link"><img class="example-image " src="img/Layer 2.png" alt=""></a>
<a href="img/Layer 3.png" data-lightbox="example-set1" class="slide slide3 example-image-link"><img class="example-image " src="img/Layer 3.png" alt="name3"></a>
<a href="img/Layer 4.png" data-lightbox="example-set1" class="slide slide4 example-image-link"><img class="example-image " src="img/Layer 4.png" alt=""></a>
<a href="img/Layer 5.png" data-lightbox="example-set1" class="slide slide5 example-image-link"><img class="example-image " src="img/Layer 5.png" alt="name5"></a>
<a href="img/Layer 6.png" data-lightbox="example-set1" class="slide slide6 example-image-link"><img class="example-image " src="img/Layer 6.png" alt=""></a>
<a href="img/Layer 7.png" data-lightbox="example-set1" class="slide slide7 example-image-link"><img class="example-image " src="img/Layer 7.png" alt="name7"></a>
<a href="img/Layer 8.png" data-lightbox="example-set1" class="slide slide8 example-image-link"><img class="example-image " src="img/Layer 8.png" alt=""></a>
<a href="img/Layer 9.png" data-lightbox="example-set1" class="slide slide9 example-image-link"><img class="example-image " src="img/Layer 9.png" alt="name9"></a>
<a href="img/Layer 10.png" data-lightbox="example-set1" class="slide slide10 example-image-link"><img class="example-image " src="img/Layer 10.png" alt=""></a>
<a href="img/Layer 11.png" data-lightbox="example-set1" class="slide slide11 example-image-link"><img class="example-image " src="img/Layer 11.png" alt=""></a>
<a href="img/Layer 12.png" data-lightbox="example-set1" class="slide slide12 example-image-link"><img class="example-image " src="img/Layer 12.png" alt=""></a>
</ul>
</div>
<img id="rimage" src="img/next.png" style="top: 26.5vw;right: 18vw;overflow: hidden !important;position: absolute;cursor:pointer"/>
<img id="limage" src="img/prev.png" style="top: 26.5vw;right: 78vw;overflow: hidden !important;position: absolute;cursor:pointer"/>
<p>Character Consept <br> 2003-2013</p>
<h5>
ALL IMAGES AND CONTACT COPYRIGHT (C) SHAHRIAR SHERVIN, ALL RIGHTS RESERVED <br>
EXCEPT WHERE TRADEMARK OR COPYRIGHT IS HELD BY PREVIOUS OWNER
</h5>
</div>
<!-- Contact Section -->
<div id="contact" class="container-fluid">
<!-- Slider -->
<div id="slider" >
<ul class="slides ">
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide1 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide2 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide3 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide4 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide5 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide6 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide7 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide8 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide9 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
<a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide10 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
</ul>
</div>
<h5>
ALL IMAGES AND CONTACT COPYRIGHT (C) SHAHRIAR SHERVIN, ALL RIGHTS RESERVED <br>
EXCEPT WHERE TRADEMARK OR COPYRIGHT IS HELD BY PREVIOUS OWNER
</h5>
</div>
</body>
</html>
این هم تمام کدهای CSS بنده :
*{
font-family: courier;
}
body{
background-color: #191919;
}
@keyframes anim1 {
0% {transform: rotate(3deg); }
25% {transform: scale(1.03) rotate(-3deg);}
50% {transform: scale(.98) rotate(0deg);}
75% {transform: scale(1.03) rotate(-3deg);}
100% {transform: rotate(3deg);}
}
@keyframes eyes1 {
0% {opacity: 1;}
50% {opacity: 0;}
}
#header{
height: 62vw;
background-image: url(../img/contact.jpg) !important;
background-size: 100%;
z-index: 50;
background-repeat: no-repeat;
}
.eyes{
cursor:default;
}
#slider {
position: absolute;
top: 24vw;
right: 22vw;
width: 55vw;
height: 8vw;
z-index: 90;
/*background: #121212;*/
-webkit-border-radius: 70vw / 10vw;
border-radius: 70vw / 10vw;
overflow: hidden!important;
}
#slider .slides {
padding: 0;
margin: 0;
width: 100vw!important;
height: 20vw!important;
}
#slider .slide {
float: right!important;
list-style-type: none!important;
width: 12vw!important;
height: 2vw!important;
}
#slider img{
margin-top: .5vw;
width: 12vw;
padding-left: 1vw;
}
#logo{
position: absolute;
width: 12.6vw;
top: 27.5vw;
left: 44.3vw;
transition: all 0.4s;
}
#sk1{
width: 18vw;
position: absolute;
top: 27vw;
left: 9.5vw;
transition: all 0.4s;
}
#sk2{
width: 18vw;
position: absolute;
top: 27.5vw;
right: 8.5vw;
transition: all 0.4s;
}
#logo:hover{
animation-timing-function:ease-out;
animation-fill-mode: both;
animation-name: anim1;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#sk1:hover{
animation-iteration-count: infinite;
animation-name: anim1;
animation-duration: 1s;
animation-timing-function:ease-out;
animation-fill-mode: both;
}
#sk2:hover{
animation-iteration-count: infinite;
animation-name: anim1;
animation-duration: 1s;
animation-timing-function:ease-out;
animation-fill-mode: both;
}
#eye1{
position: absolute;
z-index: 70;
left:13vw;
top: 39vw;
color: blue;
font-size: 2vw;
background: #c13535;
filter: blur(1.2vw);
animation-name: eyes1;
animation-duration: 2.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
/*animation-timing-function:cubic-bezier();*/
}
#eye2{
position: absolute;
z-index: 70;
left:22.3vw;
top: 39vw;
color: blue;
font-size: 2vw;
background: #c13535;
filter: blur(1.2vw);
animation-name: eyes1;
animation-duration: 2.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
/*animation-timing-function:cubic-bezier();*/
}
#eye3{
position: absolute;
z-index: 70;
right:12.3vw;
top: 39vw;
color: blue;
font-size: 2vw;
background: #c13535;
filter: blur(1.2vw);
animation-name: eyes1;
animation-duration: 2.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
/* animation-timing-function:cubic-bezier();*/
}
#eye4{
position: absolute;
z-index: 70;
right:21vw;
top: 39vw;
color: blue;
font-size: 2vw;
background: #c13535;
filter: blur(1.2vw);
animation-name: eyes1;
animation-duration: 2.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
/* animation-timing-function:cubic-bezier();*/
}
#loading{
width: 100%;
height: 200%;
position: fixed;
top: 0;
margin: 0 auto;
z-index: 100;
background-color: #191919;
}
#loading_gif{
position: fixed;
margin-top: 20vw;
margin-right: 44.5vw;
width: 8vw;
z-index: 100;
}
a{
color: #d1d1d1 !important;
}
a:link{
text-decoration: none !important;
}
a:hover{
color: white !important;
text-decoration: none !important;
}
a:visited{
text-decoration: none !important;
}
a:active{
text-decoration: none !important;
}
#contactlink p {
font-size: 1.5vw;
font-weight: 600;
padding: 6.5% 3.5%;
position: absolute;
margin-top: 27%;
left: 28%;
z-index: 50;
cursor: pointer;
color: #d1d1d1;
}
#contactlink > p:hover{
color: white;
}
#main{
z-index: 50;
line-height: 2vw;
text-align: center;
font-weight: bold;
font-size: 1.5vw;
padding: 6.5% 2.6%;
position: absolute;
margin-top: 41.5%;
left: 39%;
}
#concept{
background-image: url(../img/2222.png);
background-size: 100%;
height: 57vw;
background-repeat: no-repeat;
width: 100%;
z-index: 20;
position: absolute;
}
#concept > p{
font-weight: bolder;
text-align: center;
margin-top: 36vw;
font-size: 1.5vw;
color: black;
}
#concept h5{
font-weight: bolder;
font-size: 1.2vw;
margin-top: 13.5vw;
}
#contact h5{
font-weight: bolder;
font-size: 1.2vw;
margin-top: 54vw;
}
#contact{
background: url(../img/1111.png);
background-size: 100%;
height: 57.5vw;
width: 100%;
position: absolute;
display: none;
}
لینک دانلود کامل پروژه
http://www.mediafire.comfile4hi4b4vz71cnbih/SH.zip
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
پاسخ ها به این سوال
پست های وبلاگ
جدیدترین مقالات
سوالات محبوب
فعالترین سوالات