Переделать карусель Jquery
Нужно переделать http://www.blarnee.com/projects/coverflow/
|
250$
аргумент-минимальная стоимость этой работы |
Цитата:
Цитата:
|
Кто знает, могли бы вы ответить на несколько вопросов если не затруднит, я посмотрел на изображение и стало интересно.
1. Какими способами можно исказить картинку в виде трапеции как на примере, в голову приходит только canvas (пробовал css transform, но там вроде только простые искажения, rotate, skew, есть еще 2d 3d преобразорвания, я в них пока не разобрался (с помощью них можно сделать трапецию или повернуть картинку в 3d пространстве чтобы учитывалась перспектива?)) В сафари можно родителю искажаемого элемента задать -webkit-perspective: Npx, и потом например повернуть элемент как надо с помощью rotate, получится то что нужно. Но хочется чтобы это работало во всех, хотя бы последних версиях популярных браузеров. 2. С помощью 2d преобразования удалось только отразить блок с картинкой (на примере под картинками что-то не логичное, я думаю логичнее туда отражения поместить) так:
<!DOCTYPE html>
<style type = "text/css">
.wrapper{
text-align: center;
background-color: #000;
}
.preview{
display: inline-block;
}
.preview div img{
vertical-align:top;
}
.reflection{
-webkit-transform: matrix(1,0,0,-1, 0,0);
-moz-transform: matrix(1,0,0,-1, 0,0);
-ms-transform: matrix(1,0,0,-1, 0,0);
-o-transform: matrix(1,0,0,-1, 0,0);
position: relative;
}
.gradi{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0,0,0,0.75)), color-stop(1, rgba(0,0,0,1)));
}
</style>
<div class = "wrapper">
<div class = "preview">
<div><img src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" /></div>
<div class = "reflection"><img src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" /><div class = "gradi"></div></div>
</div>
</div>
Вобщем, какие подходы можно использовать для решения подобных задач? Если в подобной галерее будет строго N картинок, то конечно можно в фотошопе подготовить все картинки, но так не интересно. Как бы вы делали подобную карусель, если очень абстрактно. Спасибо. Вот пример как повернуть в пространстве картинку, но такое только в сафари доступно, даже в хроме не работает
<!DOCTYPE html>
<style type = "text/css">
.wrapper{
text-align: center;
}
.preview{
padding:50px;
-webkit-perspective:500px;
display: inline-block;
}
.preview div img{
vertical-align:top;
}
.reflection{
-webkit-transform: rotateY(60deg);
}
</style>
<div class = "wrapper">
<div class = "preview">
<div class = "reflection"><img src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" /></div>
</div>
</div>
|
poorking,
я бы через канву шел-но могу ошибаться. возможно всё в сss можно сделать на примере под картинками ещё прозрачность применена и градиент сверху лежит |
dmitriymar,
С перспективой в css можно, но кроме как в сафари нигде пока что к сожалению, значит canvas, спасибо за совет) UPD http://www.satine.org/research/webki...snowstack.html вот интересная вещь, но адекватно только в сафари работает опять же, да и тормозит вся жутко (ну у меня тормозит :) ), так что все таки canvas |
poorking,
погодь-у меня гдето был ссылка на презентацию и там была перспектива и работало это в фф по ходу нет...но там был и поворот и перспектива-по отношению к банке кокаколы и работало в фф |
Цитата:
|
http://ruseller.com/lessons.php?rub=2&id=991 перспектива и поворот
отражение средствами сss .а прозрачность применить к к контейнеру содержащем канву,градиент к канве и накрыть ей все блоки содержащие отражения. ширина и высота ведь низа известна.блоки основных изображений положить выше канвы |
poorking, dmitriymar вы друзья разделом не ошиблись? :nono:
Если у вас есть, что по теме обсудить делайте это с TC лично. |
| Часовой пояс GMT +3, время: 14:37. |