css3鼠标拖拽卡片动画特效



108 428 143



特效描述:css3鼠标拖拽 卡片动画特效,css3鼠标拖拽卡片动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div class="card">
	<img src="img/hearthstone-ragnaros.png" class="card-image" draggable="false">
</div>
<script type="text/javascript">
	var card,
		image,
		cardw,
		cardh,
		cardx,
		cardy,
		ocardx,
		ocardy,
		pinx,
		piny,
		pinxperc,
		pinyperc,
		targetx,
		targety,
		rx,
		ry,
		targetrx,
		targetry,
		scale,
		targetscale,
		ww,
		wh,
		md,
		mx,
		my,
		whoosh,
		whooshvol,
		whooshvoltarget,
		majesty,
		majestyvol,
		majestyvoltarget,
		audioloaded;
	function audioload() {
		audioloaded++;
		if( audioloaded == 2 ) {
			document.body.classList.add( 'loaded' );
			majesty.play();
			whoosh.play();
			bindevents();
			loop();
		}
	}
	function init() {
		onresize();
		card = document.querySelector( '.card' );
		image = document.querySelector( '.card-image' );
		cardw = image.width;
		cardh = image.height;
		cardx = ww / 2 - cardw / 2;
		cardy = wh / 2 - cardh / 2;
		ocardx = cardx;
		ocardy = cardy;
		pinx = 0;
		piny = 0;
		pinxperc = 0;
		pinyperc = 0;
		targetx = cardx;
		targety = cardy;
		rx = 0;
		ry = 0;
		targetrx = 0;
		targetry = 0;
		scale = 1;
		targetscale = scale;
		md = false;
		mx = cardx;
		my = cardy;
		audioloaded = 0;
		whooshvol = 0;
		whooshvoltarget = 0;
		whoosh = new Audio();
		whoosh.addEventListener( 'canplaythrough', audioload );
		whoosh.src = 'media/hs-whoosh.ogg';
		whoosh.volume = 0;
		whoosh.loop = true;
		majestyvol = 0;
		majestyvoltarget = 0;
		majesty = new Audio();
		majesty.addEventListener( 'canplaythrough', audioload );
		majesty.src = 'media/hs-majesty.ogg';
		majesty.volume = 0;
		majesty.loop = true;
	}
	function bindevents() {
		card.addEventListener( 'mousedown', onmousedown );
		window.addEventListener( 'mouseup', onmouseup );
		window.addEventListener( 'mousemove', onmousemove );
		window.addEventListener( 'resize', onresize );
	}
	function onmousedown( e ) {
		md = true;
		mx = e.pageX;
		my = e.pageY;
		pinx = cardw / 2;
		piny = cardh / 2;
		//pinx = mx - cardx; // to pin to click point
		//piny = my - cardy; // to pin to click point
		pinxperc = 100 - ( pinx / cardw ) * 100;
		pinyperc = 100 - ( piny / cardh ) * 100;
	}
	function onmouseup() {
		md = false;
	}
	function onmousemove( e ) {
		if( md ) {
			mx = e.pageX;
			my = e.pageY;
		}
	}
	function onresize() {
		ww = window.innerWidth;
		wh = window.innerHeight;
	}
	function loop() {
		requestAnimationFrame( loop )
		targetx = mx - cardx - pinx;
		targety = my - cardy - piny;
		cardx += targetx * 0.25;
		cardy += targety * 0.25;
		if( cardx < -cardw / 2 ) {
			cardx = -cardw / 2;
		}
		if( cardx > ww - cardw / 2 ) {
			cardx = ww - cardw / 2;
		}
		if( cardy < -cardh / 2 ) {
			cardy = -cardh / 2;
		}
		if( cardy > wh - cardh / 2 ) {
			cardy = wh - cardh / 2;
		}
		targetrx = ( ocardy - cardy - rx ) * 3;
		targetry = ( cardx - ocardx - ry ) * 3;
		targetrx = Math.min( targetrx, 90 );
		targetrx = Math.max( targetrx, -90 );
		targetry = Math.min( targetry, 90 );
		targetry = Math.max( targetry, -90 );
		rx += targetrx * 0.1;
		ry += targetry * 0.1;
		targetscale = md ? 1.2 - scale : 1 - scale;
		scale += targetscale * 0.2;
		card.style[ 'transform' ] = 'translate3d(' + cardx + 'px, ' + cardy + 'px, 0)';
		image.style[ 'transform-origin' ] = pinxperc + '% ' + pinyperc + '%';
		image.style[ 'transform' ] = 'scale(' + scale + ') rotateY(' + ry + 'deg) rotateX(' + rx + 'deg)';
		majestyvoltarget = md ? 0.2 : 0;
		majestyvol += ( majestyvoltarget - majestyvol ) * 0.1;
		majesty.volume = majestyvol;
		whooshvoltarget = ( Math.abs( ( ocardy - cardy ) ) + Math.abs( ( ocardx - cardx ) ) ) * 0.003;
		whooshvol += ( whooshvoltarget - whooshvol ) * 0.1;
		whoosh.volume = Math.min( whooshvol, 1 );
		ocardx = cardx;
		ocardy = cardy;
	}
	window.onload = init;
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片拖动 文字拖动 拖动排序 弹出层拖动 拖动拽动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到