Слайдер с паралаксом, нужна помощь

L
На сайте с 18.02.2012
Offline
83
472

Здравствуйте, поставил слайдер вот такой вот, вожусь с ним, уже замучился.

http://ruseller.com/lessons/les1400/demo/index2.html

Фог паралакса во всю ширину горизонта, все правильно, мне так и надо.

А как сам блок с текстом и картинкой сделать что бы был по середине и 1000px.

Вот css

Css анимации в коде не стал вставлять, много css кода.

.da-slider - отвечает за весь блок, его можно сделать 1000px, но тогда фон будет не во всю ширину, что плохо.

Я пытался сделать свой стиль и обернуть все это ! но чет в слайдере ничего не показывалось.

.obertka{

margin-left: auto;

margin-right: auto;

width: 1000px;

}


.da-slider{
width: 100%;
min-width: 520px;
height: 400px;
position: relative;
margin: 30px auto;
overflow: hidden;
background: transparent url(../images/waves.gif) repeat 0% 0%;
border-top: 8px solid #efc34a;
border-bottom: 8px solid #efc34a;
box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
-webkit-transition: background-position 1s ease-out 0.3s;
-moz-transition: background-position 1s ease-out 0.3s;
-o-transition: background-position 1s ease-out 0.3s;
-ms-transition: background-position 1s ease-out 0.3s;
transition: background-position 1s ease-out 0.3s;
}
.da-slide{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
text-align: left;
}
.da-slide-current{
z-index: 1000;
}
.da-slider-fb .da-slide{
left: 100%;
}
.da-slider-fb .da-slide.da-slide-current{
left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
position: absolute;
opacity: 0;
left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
left: 10%;
opacity: 1;
}
.da-slider-fb .da-slide .da-img{
left: 60%;
opacity: 1;
}
.da-slide h2{
color: #fff;
font-size: 66px;
width: 50%;
top: 60px;
white-space: nowrap;
z-index: 10;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-family: 'Economica', Arial, sans-serif;
font-weight: 700;
}
.da-slide p{
width: 45%;
top: 155px;
color: #916c05;
font-size: 18px;
line-height: 26px;
height: 80px;
overflow: hidden;
font-style: italic;
font-family: 'Economica', Arial, sans-serif;
font-weight: 400;
font-style: italic;
}
.da-slide .da-img{
text-align: center;
width: 30%;
top: 70px;
height: 256px;
line-height: 320px;
left: 110%; /*60%*/
}
.da-slide .da-link{
top: 270px; /*depends on p height*/
border-radius: 30px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border: 8px solid rgba(255,255,255,0.8);
padding: 2px 20px 0px;
font-size: 18px;
line-height: 30px;
width: 80px;
text-align: center;
background: rgba(255,255,255,0.2);
}
.da-slide .da-link:hover{
background: rgba(255,255,255,0.3);
}
.da-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
z-index: 2000;
-moz-user-select: none;
-webkit-user-select: none;
}
.da-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #e4b42d;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.da-arrows{
-moz-user-select: none;
-webkit-user-select: none;
}
.da-arrows span{
position: absolute;
top: 50%;
height: 30px;
width: 30px;
border-radius: 50%;
background: #e4b42d;
cursor: pointer;
z-index: 2000;
opacity: 0;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.1);
-webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
-moz-transition: opacity 0.4s ease-in-out-out 0.2s;
-o-transition: opacity 0.4s ease-in-out-out 0.2s;
-ms-transition: opacity 0.4s ease-in-out-out 0.2s;
transition: opacity 0.4s ease-in-out-out 0.2s;
}
.da-slider:hover .da-arrows span{
opacity: 1;
}
.da-arrows span:after{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 5px;
left: 5px;
background: transparent url(../images/arrows.png) no-repeat top left;
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after{
box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
background-position: top right;
}
.da-arrows span.da-arrows-prev{
left: 15px;
}
.da-arrows span.da-arrows-next{
right: 15px;
}

.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{
left: 10%;
opacity: 1;
}
.da-slide-current .da-img{
left: 60%;
opacity: 1;
}

дани мапов
На сайте с 06.09.2012
Offline
204
#1

Обязательно чтобы фиксированно было 1000px, или важнее чтобы было по центру? Поставьте

.da-slide {

width: 70%;

left: 15%;

............

}

Текст с картинкой по будет центру, на разрешении 1366x768 ширина блока примерно 950px.

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
L
На сайте с 18.02.2012
Offline
83
#2
дани мапов:
Обязательно чтобы фиксированно было 1000px, или важнее чтобы было по центру? Поставьте

.da-slide {
width: 70%;
left: 15%;
............
}

Текст с картинкой по будет центру, на разрешении 1366x768 ширина блока примерно 950px.

работает, спасибо, но если сжимаешь браузер до 1000px по ширине, то оно все как то центруется.

хотелось бы что бы не сжималось, а было не меньше 1000 и не больше 1000.

L
На сайте с 18.02.2012
Offline
83
#3

реализовал так:

left: 50%;

margin-left: -600px;

position: absolute;

width: 1200px;

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий