Форум PHP программистов > CSS слайдер ,сабж с habra

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: CSS слайдер ,сабж с habra

exotica

8.02.2015 - 14:23

Собственно ссылка оригинала тут: http://habrahabr.ru/post/143025/
Вот ссылка на демо: http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/

И вот в чем вопрос, как ни странно в коментах не задано. Стартовая картинка отображается нормально, но после окончания первой анимации, а также любой последующей . Чуть ниже слайдера появляется белое пустое поле. Даже в демо присутствует.
Вот и возникает вопрос что его пораждает?

Ну и собственно после завершения 5-ой анимации, т.е. возвращения в стартовую позицию к картинке 1. белое пустое поле исчезает

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза

exotica

8.02.2015 - 14:30

хм. а если занимаемое сайтом место по высоте превышает высоту экрана, то пустоты не появляется

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза

sergeiss

8.02.2015 - 15:16

exotica, глубоко не вникал, но если задать для html и body "height:100%", то проблема исчезает.
Либо, даже если не трогаем высоту боди, а выставляем цвет фона для него (вместо картинки), то тоже проблема исчезает.
Что-то есть, связанное с фоном для боди, я думаю. Вникать сейчас неохота

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

GET

8.02.2015 - 15:22

Цитата

Чуть ниже слайдера появляется белое пустое поле. Даже в демо присутствует.

В Chrome не вижу

_____________
Не тот велик, кто не падал, а тот кто падал и поднимался.

exotica

8.02.2015 - 16:21

Цитата

exotica, глубоко не вникал, но если задать для html и body "height:100%", то проблема исчезает.
Либо, даже если не трогаем высоту боди, а выставляем цвет фона для него (вместо картинки), то тоже проблема исчезает.
Что-то есть, связанное с фоном для боди, я думаю. Вникать сейчас неохота smile.gif

height: 100%; не помогло само по себе, НО, как я описал выше когда высота сайта увеличилась, т.к. писал от верха до низа макет, проблема сама собой пропала и больше никак себя не проявляет, чуть позже демо выложу

Цитата

В Chrome не вижу

странно смотрю тоже в хроме, присмотрись там background белый с узорчиком, а пустое поле появляется гдето через 50-60 пикселей ниже слайдера. Я первый раз тоже не увидел. А когда сверстал все под свои размеры и количество кадров только тогда на темном фоне у себя заметил. А потом присмотрелся и там также

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза

GET

8.02.2015 - 16:53

Цитата

точно блин...сам body уменьшается, очень странно.

_____________
Не тот велик, кто не падал, а тот кто падал и поднимался.

exotica

8.02.2015 - 17:11

пока без проблем, но как доверстаю футер, все сложу как положено, надеюсь не поситит меня больше

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза

Zzepish

8.02.2015 - 17:23

Хм. Классно. Намного боле элегантно, чем на js. Надо подкурить css.
Но в коде я обнаружил, что только для мозиилы и хрома. Кто-то на других проверял?

-----------------
p.s. проверил: ie11- не работает, опера- работает.
Короче- все ожидаемо

volter9

8.02.2015 - 20:36

exotica
Надо не только body, но еще и html:

html,
body {
    height: 100%;
}

^ у меня так перестало показывать белое место внизу.

_____________
Мой блог

exotica

8.02.2015 - 20:52

Цитата

Итак я достиг успеха! :D
Идеально работает на Chrome 40.0.2214.111 m , Firefox 29.0.1 , InternetExplorer 11.0.9600.17498

У меня только листаются изображения со ссылками, без подписей и прогрессбара. Во всех браузерах это происходит одинаково без изменений.
CSS префиксы поставлены последовательно, -webkit-, -moz-, clear для каждого свойства animation, а @keyframes дублированы.
Листинг кода с моего шаблона такой:

Листинг CSS

/* SLIDER */
.header_slider {
  width: 960px;
  height: 300px;
  float: right;
  border-left: 2px solid #41a4f0;
  box-shadow: 1px -1px 3px rgba(0,0,0,0.5);
}
.mask {
  overflow: hidden;
  height: 300px;
}
.header_slider  ul {
  margin: 0;
  padding: 0;
  position: relative;
}
.header_slider  li {
  width: 960px;
  height: 300px;
  position: absolute;
  top: -300px;
  list-style: none;
}
.header_slider li.animation1 {
  -webkit-animation: cycle 20s linear infinite;
  -moz-animation: cycle 20s linear infinite;
  animation: cycle 20s linear infinite;
}
.header_slider li.animation2 {
  -webkit-animation: cycletwo 20s linear infinite;
  -moz-animation: cycletwo 20s linear infinite;
  animation: cycletwo 20s linear infinite;
}
.header_slider li.animation3 {
  -webkit-animation: cyclethree 20s linear infinite;
  -moz-animation: cyclethree 20s linear infinite;
  animation: cyclethree 20s linear infinite;
}
.header_slider li.animation4 {
  -webkit-animation: cyclefour 20s linear infinite;
  -moz-animation: cyclefour 20s linear infinite;
  animation: cyclefour 20s linear infinite;
}
.header_slider li.animation5 {
  -webkit-animation: cyclefive 20s linear infinite;
  -moz-animation: cyclefive 20s linear infinite;
  animation: cyclefive 20s linear infinite;
}
@-webkit-keyframes cycle {
   0%  { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */
   4%  { top: 0px; } /* Стартовая позиция */
   16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */
   20% { top: 300px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/
   21% { top: -300px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */
   92% { top: -300px; opacity: 0; z-index: 0; }
   96% { top: -300px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */
   100%{ top: 0px; opacity: 1; }
}
@-webkit-keyframes cycletwo {
   0%  { top: -300px; opacity: 0; } /* Исходная позиция за пределами маски */
   16% { top: -300px; opacity: 0; }/* Начало движения с 16% */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* С 20% до 24% (в течении 1 секунды) — вход*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* С 24% до 36 % (3 секунды) изображение видимо */
   40% { top: 300px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)— выход */
   41% { top: -300px; opacity: 0; z-index: -1; }   /* Возврат на исходную позицию */
   100%{ top: -300px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclethree {
   0%  { top: -300px; opacity: 0; }
   36% { top: -300px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 300px; opacity: 0; z-index: 0; }
   61% { top: -300px; opacity: 0; z-index: -1; }
   100%{ top: -300px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclefour {
   0%  { top: -300px; opacity: 0; }
   56% { top: -300px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 300px; opacity: 0; z-index: 0; }
   81% { top: -300px; opacity: 0; z-index: -1; }
   100%{ top: -300px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclefive {
   0%  { top: -300px; opacity: 0; }
   76% { top: -300px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 300px; opacity: 0; z-index: 0; }
}

@-moz-keyframes cycle {
   0%  { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */
   4%  { top: 0px; } /* Стартовая позиция */
   16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */
   20% { top: 300px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/
   21% { top: -300px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */
   92% { top: -300px; opacity: 0; z-index: 0; }
   96% { top: -300px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */
   100%{ top: 0px; opacity: 1; }
}
@-moz-keyframes cycletwo {
   0%  { top: -300px; opacity: 0; } /* Исходная позиция за пределами маски */
   16% { top: -300px; opacity: 0; }/* Начало движения с 16% */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* С 20% до 24% (в течении 1 секунды) — вход*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* С 24% до 36 % (3 секунды) изображение видимо */
   40% { top: 300px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)— выход */
   41% { top: -300px; opacity: 0; z-index: -1; }   /* Возврат на исходную позицию */
   100%{ top: -300px; opacity: 0; z-index: -1; }
}
@-moz-keyframes cyclethree {
   0%  { top: -300px; opacity: 0; }
   36% { top: -300px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 300px; opacity: 0; z-index: 0; }
   61% { top: -300px; opacity: 0; z-index: -1; }
   100%{ top: -300px; opacity: 0; z-index: -1; }
}
@-moz-keyframes cyclefour {
   0%  { top: -300px; opacity: 0; }
   56% { top: -300px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 300px; opacity: 0; z-index: 0; }
   81% { top: -300px; opacity: 0; z-index: -1; }
   100%{ top: -300px; opacity: 0; z-index: -1; }
}
@-moz-keyframes cyclefive {
   0%  { top: -300px; opacity: 0; }
   76% { top: -300px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 300px; opacity: 0; z-index: 0; }
}

@keyframes cycle {
   0%  { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */
   4%  { top: 0px; } /* Стартовая позиция */
   16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */
   20% { top: 300px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/
   21% { top: -300px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */
   92% { top: -300px; opacity: 0; z-index: 0; }
   96% { top: -300px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */
   100%{ top: 0px; opacity: 1; }
}
@keyframes cycletwo {
   0%  { top: -300px; opacity: 0; } /* Исходная позиция за пределами маски */
   16% { top: -300px; opacity: 0; }/* Начало движения с 16% */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* С 20% до 24% (в течении 1 секунды) — вход*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* С 24% до 36 % (3 секунды) изображение видимо */
   40% { top: 300px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)— выход */
   41% { top: -300px; opacity: 0; z-index: -1; }   /* Возврат на исходную позицию */
   100%{ top: -300px; opacity: 0; z-index: -1; }
}
@keyframes cyclethree {
   0%  { top: -300px; opacity: 0; }
   36% { top: -300px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 300px; opacity: 0; z-index: 0; }
   61% { top: -300px; opacity: 0; z-index: -1; }
   100%{ top: -300px; opacity: 0; z-index: -1; }
}
@keyframes cyclefour {
   0%  { top: -300px; opacity: 0; }
   56% { top: -300px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 300px; opacity: 0; z-index: 0; }
   81% { top: -300px; opacity: 0; z-index: -1; }
   100%{ top: -300px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -300px; opacity: 0; }
   76% { top: -300px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 300px; opacity: 0; z-index: 0; }
}

Быстрый ответ:

Здесь расположена полная версия этой страницы.