Не удается скопировать ручку

-1

Я пытаюсь поставить этот http://codepen.io/digitalcraft/pen/yydpbB на моем сайте, но я не могу понять, как это сделать. Я попытался скопировать все html, css и java, но не работает, тогда я попытался скопировать основные части html, без <h4>DC YOLO BOX v1</h4> и скопировать css, скопировав скобки, но нечего делать, почему?Не удается скопировать ручку

$(document).mousemove(rotateScene); 
 

 
function rotateScene(e) { 
 
\t var horizontal = e.pageX/$(document).width(); 
 
\t var vertical = e.pageY/$(document).height(); \t 
 
\t $('.panel').css({ 
 
\t \t '-webkit-transform': 'rotateX(' + (10 - (vertical * 17)) + 'deg) rotateY(' + (-20 + (horizontal * 40)) + 'deg)' 
 
\t }); 
 
}

html{ 
 
\t height:100%; 
 
\t min-height: 100%; 
 
    overflow:hidden; 
 
    } 
 
    body{font: 14px/21px Monaco, sans-serif; 
 
    color: #999; 
 
    font-smoothing: antialiased; 
 
    text-size-adjust: 100%; 
 
    height:100%; 
 
    min-height: 100%; 
 
    } 
 
    
 
    $color: cyan; 
 
$spectrum: 15%; 
 
$duration: 8s; 
 
    
 
    .scene { 
 
    width: 100%; 
 
    height: 100%; 
 
    perspective: 600; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center;} 
 
    
 
    .panel { 
 
    width: 320px; 
 
    height: 240px; 
 
    background: #c5c5c5; 
 
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3); 
 
    /*Start hardware acceleration*/ 
 
    transform: translate3d(0, 0, 0); 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
    animation: colorfader $duration ease-in-out infinite;} 
 
    
 
    h1 { 
 
     font-family: "Lato",sans-serif; 
 
     font-size:60px; 
 
     font-weight:300; 
 
     color:rgba(255,255,255,0.6); 
 
     text-align:center; 
 
     margin-top:33%; 
 
     }

<div class="scene"> 
 
    <div class="panel"><h1>YOLO</h1></div> 
 
</div>

источник

2015-04-17 HellixS

Вы не использовали библиотеку дать ссылку на JQuery попробовать что-то вроде этого

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

в головной секции

источник

2015-04-17 04:30:29 Akshay

Вы должны добавить HTML.

Если вы хотите, чтобы быть полностью функциональным, вам нужно добавить:

<!doctype html> 
<html> 
    <head> 
    <title>Your Title</title> 
    <style> 
html{ 
    height:100%; 
    min-height: 100%; 
    overflow:hidden; 
    } 
    body{font: 14px/21px Monaco, sans-serif; 
    color: #999; 
    font-smoothing: antialiased; 
    text-size-adjust: 100%; 
    height:100%; 
    min-height: 100%; 
    } 

    $color: cyan; /* <- You need to change from whatever preprocessor you're using to css*/ 
$spectrum: 15%; /* <- You need to change from whatever preprocessor you're using to css*/ 
$duration: 8s; /* <- You need to change from whatever preprocessor you're using to css*/ 

    .scene { 
    width: 100%; 
    height: 100%; 
    perspective: 600; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
    justify-content: center;} 

    .panel { 
    width: 320px; 
    height: 240px; 
    background: #c5c5c5; 
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3); 
    /*Start hardware acceleration*/ 
    transform: translate3d(0, 0, 0); 
    transform-style: preserve-3d; 
    backface-visibility: hidden; 
    animation: colorfader $duration ease-in-out infinite;} /* <- You need to change from whatever preprocessor you're using to css*/ 

    h1 { 
     font-family: "Lato",sans-serif; 
     font-size:60px; 
     font-weight:300; 
     color:rgba(255,255,255,0.6); 
     text-align:center; 
     margin-top:33%; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="scene"> 
     <div class="panel"><h1>YOLO</h1></div> 
    </div> 
    </body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
$(document).mousemove(rotateScene); 

function rotateScene(e) { 
    var horizontal = e.pageX/$(document).width(); 
    var vertical = e.pageY/$(document).height(); 
    $('.panel').css({ 
     '-webkit-transform': 'rotateX(' + (10 - (vertical * 17)) + 'deg) rotateY(' + (-20 + (horizontal * 40)) + 'deg)' 
    }); 
} 
</script> 
</html>

Вы, кажется, использует предварительный процессор вместо CSS.

style тег внутри головки содержит CSS и JQuery прямо под закрытие body тег содержит JS.

Библиотека jquery добавлена прямо над вашим js. Причиной этого является время загрузки и производительность.

источник

2015-04-17 05:15:45

Не удается скопировать ручку

ответ

Смежные вопросы