【jQuery】マウスの動きに合わせたホバーエフェクトGHover

jQuery

GHover

January 15, 2017

GHoverはCSS 3Dを使用してマウスの動きに合わせたホバー効果を作成するためのツール。

Installation

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="scripts/ghover.js"></script>

Properties

		    selector: '', // Your class or id selector for wrapper.
		    children: [
		      {
		        className: '',                   // Class name for transform
		        rotate: { x: 0, y: 0, z: 0 },    // Rotate
		        translate: { x: 0, y: 0, z: 0 }, // Translate
		        transition: 'all 0.2s ease',     // Transition default is 'all 0.2s ease'
		      }
		    ]

Example

// Single

	var setup = {
	  selector: '.box-hover',
	  children: [
	    {
	      className: '.box',
	      rotate: { x: -5, y: -5, z: 0 },
	    },
	    {
	      className: '.border',
	      translate: { x: 20, y: 20, z: 0 },
	      transition: 'all 0.5s ease-in-out',
	    },
	    {
	      className: '.title, .sub-title',
	      rotate: { x: -10, y: -10, z: 3 },
	      translate: { x: 30, y: 30, z: 0 },
	      transition: 'all 0.6s ease',
	    }
	  ]
	};
			  
	GHover(setup); // Call function
		
// Setup with array for multiple layout

	var setup = [
	  {
	    selector: '.box-hover',
	    children: [
	      {
	        className: '.box',
	        rotate: { x: -50, y: -25, z: 0 },
	      },
	    ]
	  },
	  {
	    selector: '.box-hover-2',
	    children: [
	      {
	        className: '.box-2',
	        rotate: { x: -15, y: 5, z: 0 },
	      },
	    ]
	  };
	]
			  
	GHover(setup); // Call function

Latest Posts

Related Posts