Все для веб-дизайнера
3D Nexus реализованный с помощью CSS3 и JS
Данные технологии веб-дизайна позволяют создать удивительные вещи, которые ранее были доступны только благодаря flash-анимиции. С помощью трансформаций css и вспомогательных скриптов можно создать удивительные вещи, которые ограничиваются только вашей фантазией и возможностями. Гигант Google создал ряд удивительных гаджетов серии nexus, в данном примере мы рассмотрим как реализовать планшет nexus с помощью css и js. С помощью ориентации по плоскостям мы придадим эффект объемности, кроме этого будет реагировать на курсор мыши.
Мы будем использовать подготовленные ранее изображения, нам понадобятся текстуры планшета со всех сторон. Мы их скрепим в единую коробку.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Шаг 1. HTML
Нам необходимо создать контейнер, в котором будем выводить все изображения по частям, мы установим необходимые размеры для каждого их них.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<section class="container" id="container"> <div class="shadowContainer"> <div class="shadow" id="shadow"><div class="shadow2" id="shadow2"></div></div> </div> <div id="box"> <figure class="front" id="front"> <img src="backgroundlarge.png" id="largeBG" width="900" height="400" style="-webkit-transform: rotate(180deg)" /> <img src="newFront2.png" height="500" width="305" style="-webkit-transform: rotate(180deg)" /> <figure class="shine" id="shine"></figure> </figure> <figure class="back" id="back"> <img src="back.png" height="500" width="305" /> </figure> <figure class="farBack" id="farBack"> <img src="farBack.png" height="500" width="305" /> </figure> <figure class="right" id="right"> <img src="left.png" height="500" width="28" style="-webkit-transform: rotate(180deg)" /> </figure> <figure class="left" id="left"> <img src="right.png" height="500" width="28" style="-webkit-transform: rotate(180deg)" /> </figure> <figure class="top" id="top"> </figure> <figure class="bottom" id="bottom"> </figure> </div> </section> |
Как вы заметили, мы еще добавим трансформацию для некоторых изображений.
Шаг 2. CSS
Нам необходимо установить общие параметры для контейнера и его позиционирование, кроме этого мы добавим теней, для полноты картины. Обратите внимание, что мы подключаем изображения, кроме этого мы устанавливаем ротацию для них, относительно необходимой оси при этом мы указываем необходимый угол вращения в градусов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
#box { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; } figure { opacity: 1; } /* size of each face */ #box figure { display: block; position: absolute; } #box .front, #box .back { width: 305px; height: 500px; } #box .right, #box .left { width: 28px; height: 500px; left: 291px; /* (width - depth) /2*/ } #box .top, #box .bottom { width: 305px; height: 28px; top: 486px; /* (height - depth) /2*/ } #box .front { -webkit-transform: rotateY( 0deg ) translateZ( 15px ); } /* translateZ : width / 2 */ #box .back { -webkit-transform: rotateX( 180deg ) translateZ( 14px ); } /* translateZ : width / 2 */ #box .farBack { -webkit-transform: rotateX( 180deg ) translateZ( 12px ); } #box .right { -webkit-transform: rotateY( 90deg ) translateZ( 0px ); } #box .left { -webkit-transform: rotateY( -90deg ) translateZ( 305px ); } #box .top { -webkit-transform: rotateX( 90deg ) translateZ( 500px ); } #box .bottom { -webkit-transform: rotateX( -90deg ) translateZ( 0px ); } .shine { width: 299px; height: 495px; position: absolute; top: -13px; left: -37px; -webkit-transform: rotate(180deg); opacity: .4; border-radius: 20px; background-image: -webkit-linear-gradient(top left, rgba(255,255,255, 100) 38%, rgba(255,255,255, 0) 38%); } .shadowContainer { border-radius: 20px; position: absolute; top: 300px; left: -80px; height: 500px; width: 500px; } .shadow { top: -300px; left: -400px; border-radius: inherit; position: absolute; height: 120px; width: 305px; opacity: 1; -webkit-transform: rotate(0deg); } .front { overflow: hidden; } #largeBG { position: absolute; right: 0px; bottom: 30px; } #backgroundSurf { position: absolute; width: 1600px; height: 400px; z-index: -1; top: 0px; } |
Шаг 3. JS
Нам нужно вычислить позиционирование для каждого изображения, кроме этого, нам необходимо установить реакцию на курсор мыши:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
(function() { document.getElementById('container').addEventListener('mousemove', function(e){ var container = document.getElementById('container'), box = document.getElementById('box'), x = e.pageX - container.offsetLeft, y = e.pageY - container.offsetHeight, yAct = e.pageY - container.offsetTop, centerX = container.offsetWidth*0.5, centerY = container.offsetHeight*0.5, dist = Math.sqrt((x-centerX)*(x-centerX)+(y-centerY)*(y-centerY)), distPer = dist / container.offsetHeight, xPer = x / (container.offsetWidth+50), yPer = y / container.offsetHeight, frontFace = document.getElementById('front'), backFace = document.getElementById('back'), leftFace = document.getElementById('left'), rightFace = document.getElementById('right'), topFace = document.getElementById('top'), bottomFace = document.getElementById('bottom'), shine = document.getElementById('shine'), shadow = document.getElementById('shadow'), shadow2 = document.getElementById('shadow2'), largeBG = document.getElementById('largeBG'), farBack = document.getElementById('farBack'), gVal = yAct / 500, g1, g2, g3, tempG; if (gVal > 1) { gVal = 1; } if (gVal <= .8) { tempG = Math.abs(1-gVal); g1 = tempG; // 100 - 66 g2 = tempG*.5; // 66 - 33 g3 = gVal; // 33 - 0 } else { tempG = Math.abs(1-gVal); g1 = tempG; // 66 - 33 g2 = tempG*2; // 100 - 66 g3 = gVal; // 33 - 66 } largeBG.style.right = -(xPer*900)+90+'px'; shadow.style.height = (Math.abs(gVal)*200+100)+'px'; shadow.style.top = (-(Math.abs((gVal))*150+150))+'px'; shadow.style.left = (-(Math.abs(gVal*100)))+'px'; box.style.webkitTransform = 'rotateY('+(xPer*360)+'deg) rotateX('+((distPer*90)+90)+'deg)'; leftFace.style.opacity = 0; rightFace.style.opacity = 0; backFace.style.opacity = 0; frontFace.style.opacity = 0; farBack.style.opacity = 1; leftFace.style.webkitTransform = 'rotateY( -90deg ) translateZ( 152px )'; // move to 305 rightFace.style.webkitTransform = 'rotateY( 90deg ) translateZ( -152px )'; // move to 0 backFace.style.webkitTransform = 'rotateX( 180deg ) translateZ( 14px )'; yPer = Math.abs((1+yPer)*50); shine.style.backgroundImage = '-webkit-linear-gradient(top left, rgba(255,255,255, 100) '+yPer+'%, rgba(255,255,255, 0) '+yPer+'%)'; if (xPer > 1) { xPer = 1; } if (xPer <= .25) { xPer /= .25; shadow.style.width = (305-(xPer*250))+'px'; // smaller leftFace.style.opacity = xPer+.2; rightFace.style.opacity = xPer+.2; backFace.style.opacity = 1; leftFace.style.webkitTransform = 'rotateY( -90deg ) translateZ( '+(280 + (10*xPer))+'px )'; backFace.style.webkitTransform = 'rotateX( 180deg ) translateZ( '+(14+(-24*xPer))+'px )'; rightFace.style.webkitTransform = 'rotateY( 90deg ) translateZ( '+(-65 + (65*xPer))+'px )'; } else if (xPer <= .5) { shadow.style.width = (((xPer-.25)*1080)+55)+'px'; //shadow.style.left = 40-(xPer*80)+'px'; farBack.style.opacity = 0; frontFace.style.opacity = 1; leftFace.style.opacity = 1; leftFace.style.webkitTransform = 'rotateY( -90deg ) translateZ( '+(305 - (65*xPer))+'px )'; } else if (xPer <= .75) { frontFace.style.opacity = 1; rightFace.style.opacity = 1; farBack.style.opacity = 0; rightFace.style.webkitTransform = 'rotateY( 90deg ) translateZ( '+(-65 + (70*xPer))+'px )'; xPer -= .5; xPer /= .25; shadow.style.width = (305-(xPer*250))+'px'; // smaller //shadow.style.left = (xPer*40)+'px'; } else { xPer -= .75; xPer /= .25; shadow.style.width = (((xPer)*250)+55)+'px'; //shadow.style.left = 40-(xPer*80)+'px'; rightFace.style.opacity = Math.abs(1-xPer); leftFace.style.opacity = Math.abs(1-xPer)-.1; backFace.style.opacity = 1; leftFace.style.webkitTransform = 'rotateY( -90deg ) translateZ( '+(305-(xPer*48))+'px )'; rightFace.style.webkitTransform = 'rotateY( 90deg ) translateZ( '+(-(xPer*65))+'px )'; backFace.style.webkitTransform = 'rotateX( 180deg ) translateZ( '+(-10+(25*xPer))+'px )'; // from -10 to +14 } },true); document.getElementById('perspRange').addEventListener('change', function(){ document.getElementById('container').style.webkitPerspective = (this.value*10)+'px'; }, true); })(); |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 10.03.2013 в 20:06, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
