Тут хочу написать несложную карусель на JS, но пока-что сам эффект вращения выглядит нереалестично.
Вот код
-----------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
font-family: sans-serif, Arial;
background-color: #eee;
}
*{
margin: 0px;
padding: 0px;
-webkit-transition: all 2s;
}
#page1,
#page2,
#page3{
-webkit-box-shadow: 0px 0px 30px rgba(50, 50, 50, 0.75);
width: 400px;
height: 240px;
background-color: #333;
float: left;
position: relative;
margin: 10px;
background-size: 110%;
/*background-image: url(http://www.niceoneilike.com/webdesign-inspiration/179_1_adhamdannaway.com-webdesign-inspiration-website-clean-creative.jpg);*/
}
#page1{
z-index: 1;
background-image: url(http://www.niceoneilike.com/webdesign-inspiration/179_1_adhamdannaway.com-webdesign-inspiration-website-clean-creative.jpg);
}
#page2{
z-index: 2;
background-image: url(http://www.inspiiired.com/wp-content/uploads/2011/01/dark-portfolio-design-1.jpg);
}
#page3{
z-index: 0;
background-image: url(http://www.web-lovers.de/wp-content/uploads/2010/08/davidhellmann-awsome-portfolio-design.jpg);
-webkit-transition: right 2s;
}
#slideshow-container{
height: 320px;
margin: 80px auto;
width: 1260px;
}
.next,
.preview{
color: #333;
border: none;
font-size: 30px;
position: relative;
z-index: 3;
top: -130px;
background-color: transparent;
float: left;
}
.next:hover,
.preview:hover{
color: #000;
}
.next{
left: 1260px;
}
.preview{
right: 40px;
}
</style>
<title>portfolio slideshow</title>
</head>
<body onload="start();">
<div id="slideshow-container">
<div id="pages-container">
<!--<div id="page1"></div>-->
<div id="page1"></div>
<div id="page2"></div>
<div id="page3"></div>
</div><!--pages-container-->
<form>
<div class="buttons-wrapper">
<div type="button" class="preview"><</div>
<div type="button" class="next" onclick="next();">></div>
</div>
</form>
</div><!--slideshow-container-->
<script type="text/javascript">
function start(){
document.getElementById('page2').style.webkitTransform = 'scale(1.6)';
}
var pages = new Array(2);
pages[0] = document.getElelmentById('page1');
pages[1] = document.getElelmentById('page2');
pages[2] = document.getElelmentById('page3');
function next(){
document.getElementById('page3').style.right = '840px';
document.getElementById('page2').style.webkitTransform = 'scale(1)';
document.getElementById('page2').style.zIndex = '1';
document.getElementById('page2').style.right = '-400px';
document.getElementById('page1').style.webkitTransform = 'scale(1.6)';
document.getElementById('page1').style.zIndex = '2';
document.getElementById('page1').style.right = '-400px';
}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------
Просто подскажите как сделать эффект вращения реалистичным, просьба не делать всю остальную работу за меня. И картинки я так понимаю лучше вставлять тегом IMG? Если это так, то как убрать рамку, border: none; не помогает.
Примечание:
Я знаю что код безобразный, мне сейчас нужно сделать эффект вращения! В скайпе тебя не находит, сорри, можешь поискать меня Verstalshik2.0
Примечание:
Того, что мне надо не нашел, или там было куча ненужного функционала, либо это было вообще то, что мне не нужно.
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.