нестандартная карусель

[cyklop77]

помогите пожалуйста советом

 

никому не попадалась карусель, которая работает следующим образом? если попадалась, то поделитесь ссылочкой или названием

 

START: в центре экрана появляется(с любым эффектом) изображение, затем по бокам от него появляются ещё 4 изображения. пользователь жмёт кнопку и центральное изображение исчезает, затем исчезают изображения по бокам

go to START

Edited July 4, 2014 by cyklop77

[amelice]

Хм, интересная реализация должна быть. Если найдешь,  поделись плиз с находкой  

[mishka]

Самому писать. Самое главное это описать поведение. На русском опиши шаг за шагом как должно работать, потом берешь и скрипт пишешь.

[cyklop77]

самому написать такое не проблема, возиться не хочется. но, чувствую, придётся)

 

что только не приходит в голову заказчику...

[cyklop77]

Хм, интересная реализация должна быть. Если найдешь,  поделись плиз с находкой  

не нашёл, свой вариант написал. фиддл

 

друзья, помогите пожалуйста доработать это решение

 

здесь нужно сделать так чтобы при каждом нажатии на .next центральное изображение(которое выше всех) плавно опускалось в коробку. и только после этого новые картинки появлялись в том виде, в котором сейчас появляются

Edited July 5, 2014 by cyklop77

[Николя223]

1) используй другой вид анимации для получении резины, или разных эффектов - будет более хорошо смотреться.  http://gsgd.co.uk/sandbox/jquery/easing/

2)Придется позаморачиваться чтобы до красивых движений довести. возможно функции описывающие траекторию придется писать.

3) в коробку.

  здесь алгоритм такой.

при клике по картинке - получаешь её координаты(или же по кнопке .next - координаты картинки).   например через offset() или position();

Затем клонируем картинку  .clone() , добавляем клону полученое абсолютное положение картинки и вставляем в конец body аппендом. Старую картинку скрываем

Мы подменили бысро её)))) ну а дальше анимируем в коробку с одновременной анимацией прозрачности)) после анимации - удаляем))) всё

 

Ты ж здесь давно)) такие вещи писать на самом деле просто, главное с кроссбраузерностью не намудрить

Edited July 5, 2014 by Николя223

[cyklop77]

1) используй другой вид анимации для получении резины, или разных эффектов - будет более хорошо смотреться.  http://gsgd.co.uk/sandbox/jquery/easing/

2)Придется позаморачиваться чтобы до красивых движений довести. возможно функции описывающие траекторию придется писать.

3) в коробку.

  здесь алгоритм такой.

при клике по картинке - получаешь её координаты(или же по кнопке .next - координаты картинки).   например через offset() или position();

Затем клонируем картинку  .clone() , добавляем клону полученое абсолютное положение картинки и вставляем в конец body аппендом. Старую картинку скрываем

Мы подменили бысро её)))) ну а дальше анимируем в коробку с одновременной анимацией прозрачности)) после анимации - удаляем))) всё

 

Ты ж здесь давно)) такие вещи писать на самом деле просто, главное с кроссбраузерностью не намудрить

спасибо, но что-то у меня мозги на выходных не соображают уже) зачем ещё один клон? их и так там полно. дел то всего лишь запустить функцию animate для верхней картинки. проблема в том, что остальные эффекты начинают выполняться сразу же(когда картинка до низа не доехала ещё). в js очередь событий остановить что-то не получается у меня

[Николя223]

Выкладывай что получилось у тебя. Завтра утром посмотрю

[cyklop77]

del 

Edited July 5, 2014 by cyklop77

[cyklop77]

Выкладывай что получилось у тебя. Завтра утром посмотрю

вот мой неработающий вариант

[Николя223]

Актуально?

Сделал ввиде настраемого плагина

http://jsfiddle.net/aRJ6r/1/embedded/result/

впринципе время сам можешь подрегулировать

растояния, количество - регулируется

 

 

 

fix 

Добавил в настройки выбор эффекта анимации, из этого плагина http://gsgd.co.uk/sa.../jquery/easing/

 

http://jsfiddle.net/aRJ6r/3/

Edited July 6, 2014 by Николя223

[cyklop77]

конечно актуально. спасибо огромное

[amelice]

Актуально?

Сделал ввиде настраемого плагина

http://jsfiddle.net/aRJ6r/1/embedded/result/

впринципе время сам можешь подрегулировать

а почему бы переменные не назвать нормальными названиями? Ведь код вообще не читаемый...

Edited July 8, 2014 by amelice

[Николя223]

Ты про это? _.me  - так удобнее.  

[amelice]

Ты про это? _.me  - так удобнее.  

да, и также  _=,   _.goSlide...

По поводу удобства - кому как, я не смогла прочитать. А так каруселька очень понравилась. Потом надо самой попробовать сделать.

[Николя223]

Попробуй))) попытайся сделать без транслэйтов. на абсолютах я сначала на них хотел сделать, но понял что трансформом быстрее.

Впринципе можно с помощью используемых плагинов данный вариант и для IE8 приспособить

 

по поводу названий переменных =)

 

в моём понимании -  _ не обозначает ничего, просто хранилище. поэтому нет никакого лексического окраса.

Edited July 8, 2014 by Николя223

[tasadar]

Почитал тему, Николя223 сделал все хорошо, так что по реализации добавить нечего, но сама идея такого отображения информации мне кажется очень плохой. пользователь клацает кнопку, получая знатный рандом, при чем, как я понимаю, если он захочет ознакомится с каким то вариантом, а потом посмотреть соседний, то ему надо все заново прокликивать, так же нет кнопки назад, то есть если он случайно пропустил нужный ему вариант, то все заново, дорогой) Но,  может я чего не понял.

[cyklop77]

Почитал тему, Николя223 сделал все хорошо, так что по реализации добавить нечего, но сама идея такого отображения информации мне кажется очень плохой. пользователь клацает кнопку, получая знатный рандом, при чем, как я понимаю, если он захочет ознакомится с каким то вариантом, а потом посмотреть соседний, то ему надо все заново прокликивать, так же нет кнопки назад, то есть если он случайно пропустил нужный ему вариант, то все заново, дорогой) Но,  может я чего не понял.

 

что только не приходит в голову заказчику...

 

[Romanius]

Хочу изменить файлы темы а мне показывает (когда инспектируешь элемент в опере)  что они находятся в файле (index) :50, нигде не могу найти такую папку или файл. Подскажите не опытному что это за файл и где он находится!