mootools でハサミ効果を作成しようとしていますが、これまで半分の効果を達成できました。
index.html
window.addEvent('domready', function() {
events = [{transform: ['rotate(0deg) scale(1, 0) skew(0, 3deg) translate(100px, 50px)', 'rotate(180deg) scale(1.5, 4) skew(0, 3deg) translate(20px, 3px)']},
{transform: 'rotate(90deg) scale(1, 1) skew(0,0) translate(100, 100)'},
{transform: 'rotate(-10deg)'},
{transform: 'rotate(0)'},
{transform: 'rotate(90deg) scale(1, 1) skew(0,0) translate(100, 100)'},
{transform: 'rotate(10deg)'},
{transform: 'rotate(0deg)'}
];
$('triangle').addEvent('mouseenter', function(){
document.getElements('.down-triangle').each(function (el) {
el.set('tween', {duration: 1000, link: 'chain'}).addEvent('domready', function () {
this.get('tween').cancel().
start('transform', 'rotate(0)', events[2].transform).
start('transform', events[3].transform).s
})
})
document.getElements('.up-triangle').each(function (el) {
el.set('tween', {duration: 1000, link: 'chain' }).addEvent('domready', function () {
this.get('tween').cancel().
start('transform', 'rotate(0)', events[5].transform).
start('transform', events[6].transform).s
})
})
});
});
</script>
</head>
<body>
<div id="up">
<div id="bluebox" class="bluebox">
<div class="noshow">
<p>Need a website? </p>
</div>
</div>
</div>
<div id="bluebox1" class="bluebox1">
</div>
<div id="triangle" style="position:fixed;" >
<div id="up-triangle" class="up-triangle"></div>
<div id="down-triangle" class="down-triangle"></div>
</div>
</body>
style.css
#bluebox {
height:200px;
width:200px;
border:12px solid #000;
border-radius:500px;
margin-top:100px;
margin-left:800px;
-webkit-transition: -webkit-transform 550ms;
-moz-transition:-moz-transform 550ms;
transition: transform 550ms;
cursor:pointer;
}
.noshow{display: none; color:#fff;}
#bluebox:hover{
height:200px;
width:200px;
background:black;
-webkit-transform: scale(1.4);
-moz-transition:scale(1.4);
transform: scale(1.4);
z-index:20;
}
#bluebox:hover .noshow{display:inline;}
#bluebox1 {
height:200px;
width:200px;
border:12px solid #000;
border-radius:500px;
margin-top:0px;
margin-left:800px;
-webkit-transition: -webkit-transform 550ms;
-moz-transition:-moz-transform 550ms;
transition: transform 550ms;
cursor:pointer;
}
#bluebox1:hover{
height:200px;
width:200px;
background:#000;
-webkit-transform: scale(1.4);
-moz-transition:scale(1.4);
transform: scale(1.4);
}
#triangle{
width: 1px;
height: 1px;
}
#up-triangle {
width: 0px;
height: 0px;
border-bottom: 120px solid black;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
margin-top:-345px;
margin-left:300px;
cursor:pointer;
}
#down-triangle {
width: 0;
height: 0;
border-top: 120px solid black;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
margin-left:300px;
margin-top:2px;cursor:pointer;
}
達成される効果は、三角形が上下に移動することです。しかし、三角形と一緒に円を上下に動かしたいのです。その効果を出したい。どうやってやるの？