scss 方向感知悬停效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 方向感知悬停效果相关的知识，希望对你有一定的参考价值。
/**
* jquery.hoverdir.js v1.1.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2012, Codrops
* http://www.codrops.com
*/
;( function( $, window, undefined ) {
'use strict';
$.HoverDir = function( options, element ) {
this.$el = $( element );
this._init( options );
};
// the options
$.HoverDir.defaults = {
speed : 300,
easing : 'ease',
hoverDelay : 0,
inverse : false
};
$.HoverDir.prototype = {
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.HoverDir.defaults, options );
// transition properties
this.transitionProp = 'all ' + this.options.speed + 'ms ' + this.options.easing;
// support for CSS transitions
this.support = Modernizr.csstransitions;
// load the events
this._loadEvents();
},
_loadEvents : function() {
var self = this;
this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
var $el = $( this ),
$hoverElem = $el.find( 'div' ),
direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
styleCSS = self._getStyle( direction );
if( event.type === 'mouseenter' ) {
$hoverElem.hide().css( styleCSS.from );
clearTimeout( self.tmhover );
self.tmhover = setTimeout( function() {
$hoverElem.show( 0, function() {
var $el = $( this );
if( self.support ) {
$el.css( 'transition', self.transitionProp );
}
self._applyAnimation( $el, styleCSS.to, self.options.speed );
} );
}, self.options.hoverDelay );
}
else {
if( self.support ) {
$hoverElem.css( 'transition', self.transitionProp );
}
clearTimeout( self.tmhover );
self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
}
} );
},
// credits : http://stackoverflow.com/a/3647634
_getDir : function( $el, coordinates ) {
// the width and height of the current div
var w = $el.width(),
h = $el.height(),
// calculate the x and y to get an angle to the center of the div from that x and y.
// gets the x value relative to the center of the DIV and "normalize" it
x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
y = ( coordinates.y - $el.offset().top - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
// the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);
// first calculate the angle of the point,
// add 180 deg to get rid of the negative values
// divide by 90 to get the quadrant
// add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4;
return direction;
},
_getStyle : function( direction ) {
var fromStyle, toStyle,
slideFromTop = { left : '0px', top : '-100%' },
slideFromBottom = { left : '0px', top : '100%' },
slideFromLeft = { left : '-100%', top : '0px' },
slideFromRight = { left : '100%', top : '0px' },
slideTop = { top : '0px' },
slideLeft = { left : '0px' };
switch( direction ) {
case 0:
// from top
fromStyle = !this.options.inverse ? slideFromTop : slideFromBottom;
toStyle = slideTop;
break;
case 1:
// from right
fromStyle = !this.options.inverse ? slideFromRight : slideFromLeft;
toStyle = slideLeft;
break;
case 2:
// from bottom
fromStyle = !this.options.inverse ? slideFromBottom : slideFromTop;
toStyle = slideTop;
break;
case 3:
// from left
fromStyle = !this.options.inverse ? slideFromLeft : slideFromRight;
toStyle = slideLeft;
break;
};
return { from : fromStyle, to : toStyle };
},
// apply a transition or fallback to jquery animate based on Modernizr.csstransitions support
_applyAnimation : function( el, styleCSS, speed ) {
$.fn.applyStyle = this.support ? $.fn.css : $.fn.animate;
el.stop().applyStyle( styleCSS, $.extend( true, [], { duration : speed + 'ms' } ) );
},
};
var logError = function( message ) {
if ( window.console ) {
window.console.error( message );
}
};
$.fn.hoverdir = function( options ) {
var instance = $.data( this, 'hoverdir' );
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
if ( !instance ) {
logError( "cannot call methods on hoverdir prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for hoverdir instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
if ( instance ) {
instance._init();
}
else {
instance = $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
}
});
}
return instance;
};
} )( jQuery, window );
....
....
<!-- Modernizr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- jQuery HoverDir -->
<script src="assets/build/js/jquery.hoverdir.js"></script>
</body>
</html>/* Direction-Aware Hover
------------------------------------------------------------------------------*/
$(function() {
$(' #benefits > li ').each( function() { $(this).hoverdir(); } );
});
this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
var $el = $( this ),
$hoverElem = $el.children( '.box--back' ),
direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
styleCSS = self._getStyle( direction );
if( event.type === 'mouseenter' ) {
$hoverElem.hide().css( styleCSS.from );
clearTimeout( self.tmhover );
self.tmhover = setTimeout( function() {
$hoverElem.show( 0, function() {
var $el = $( this );
if( self.support ) {
$el.css( 'transition', self.transitionProp );
}
self._applyAnimation( $el, styleCSS.to, self.options.speed );
} );
}, self.options.hoverDelay );
}
else {
if( self.support ) {
$hoverElem.css( 'transition', self.transitionProp );
}
clearTimeout( self.tmhover );
self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
}
} );<section class="benefits">
<div class="wrapper">
<div class="item item--title">
<h1 class="title">Benefits</h1>
<p class="sub-title">Benefits vary by country</p>
</div>
<ul id="benefits" class="item item--benefits">
<?php
include('benefits--data.php');
$x = 1;
foreach($benefits as $benefit) {
?>
<li>
<a class="benefit benefit--1" href="javascript:void(0);">
<span class="box--front">
<span class="box">
<img src="assets/build/img/benefits/<?php echo $benefit['image']; ?>" alt="Icon">
<h2 class="front--title"> <?php echo $benefit['title']; ?> </h2>
</span>
</span>
<div class="box--back">
<span class="box">
<h3 class="back--title"> <?php echo $benefit['title']; ?> </h3>
<p class="back--copy"> <?php echo $benefit['copy']; ?> </p>
</span>
</div>
</a>
</li>
<?php } ?>
</ul>
</div>
</section>
<?php
$benefits = array(
array(
'image' => 'icon_1.svg',
'title' => 'Employee Scholar Program',
'copy' => 'The Employee Scholar Program encourages employees to develop new skills and engage in lifelong learning. The company covers eligible expenses up to $25,000 per year as well as up to 3 hours a week of PTO for study time. Eligible employees are welcome to earn degrees in any field of study at UTC-approved educational institutions.'
),
array(
'image' => 'icon_2.svg',
'title' => 'Flexible Work Arrangements',
'copy' => 'With the competing demands of work and family, keeping traditional work hours of 8am to 5pm has become increasingly difficult to manage for some. To accommodate the schedules of life outside the office, we offer flexible work hours to eligible employees (at the discretion of their supervisor).'
),
array(
'image' => 'icon_3.svg',
'title' => 'Employee Resource Groups',
'copy' => 'Our ERGs bring together highly engaged people with similarities and affinities to help them fulfill their personal and professional potential. Meetings, gatherings and events connect people who may otherwise never meet to create interdepartmental partners and friendships.'
),
array(
'image' => 'icon_4.svg',
'title' => 'Online Tools & Resources',
'copy' => 'HelloWallet, a personalized financial guidance application, is just one of the online tools and resources included in our benefits package. More than a simple app, HelloWallet is a systematic service that helps with monetary matters, such as budgets, savings and debt. Best Doctors and Doctor on Demand are also free, web-based benefits. These personalized healthcare tools help ensure you and your family are healthy and happy.'
),
array(
'image' => 'icon_5.svg',
'title' => 'Competitive <br class="hidden-xs">Savings Plan',
'copy' => 'Our goal is to ensure UTC employees have the resources they need to prepare for retirement. Our 401(k) plan with a 60% company-match of the first 6% employees invest is a great way to invest in your future. We also offer a Savings Plan flexible enough to serve all employees depending on their financial savvy and risk tolerance.'
),
array(
'image' => 'icon_6.svg',
'title' => 'Health & Dental Insurance',
'copy' => 'It’s important to us that all of of our employees and their families have quality medical insurance at rates that fit into their budgets. We offer multiple coverage options to select from, including several comprehensive plans and three high-deductible plans as well as Health Savings Account (HSA) options. All medical and dental plans cover routine and necessary health care. Employee fitness centers are available at certain locations.'
),
array(
'image' => 'icon_7.svg',
'title' => 'Parental Leave',
'copy' => 'We want our employees to enjoy the most important things in life and that certainly includes family. With up to 12 weeks PTO for birth adoption and parental leave, this benefit extends beyond legal requirements. We provide this to our employees because it’s the right thing to do for everybody – mothers, fathers and children.'
),
array(
'image' => 'icon_8.svg',
'title' => 'LifeWorks Program',
'copy' => 'Our LifeWorks Program can be a lifeline for employees and their immediate families. This free and confidential comprehensive resource and referral program provides practical solutions, information and support for real life issues. Professional consultants are available 24/7 by phone or online to assist with financial, parenting, elder care, education, health, emotional well-being and other challenges that may arise.'
),
);
?>section.benefits {
@extend .flex;
.wrapper {
@extend .flex;
@extend .flex--wrap;
@extend .flex--center;
padding: 40px 10px 100px;
max-width: 1200px;
}
.title {
color: $blue;
font-family: $main-font-regular;
letter-spacing: 0.5px;
margin-left: 5%;
}
.sub-title {
font-family: $body-font;
font-weight: 300;
font-size: 1.5rem;
color: $grey-dark;
margin-bottom: 30px;
margin-left: 5%;
}
.item {
&--title {
flex: 1 100%;
}
&--benefits {
@extend .flex;
@extend .flex--wrap;
list-style: none;
padding: 0;
margin: 0;
font-family: $body-font;
li {
flex: 1 23%;
padding: 0;
margin: 2.5px;
position: relative;
}
a {
display: block;
overflow: hidden;
cursor: default;
text-decoration: none;
}
a,
.box--front {
position: relative;
background: $orange;
color: white;
min-height: 290px;
}
.box {
width: 100%;
margin: auto;
}
.box--front {
@extend .flex;
text-align: center;
img {
height: 80px;
width: 80px;
position: relative;
}
.front--title {
font-size: 1.65rem;
line-height: 1.25;
margin: 30px auto 0;
max-width: 180px;
}
}
.box--back {
position: absolute;
background: $blue;
text-align: left;
color: white;
width: 100%;
height: 100%;
padding: 20px 30px;
overflow: scroll;
.back--title {
font-size: 2.9rem;
line-height: 1;
font-weight: bold;
}
.back--copy {
font-size: 1.14rem;
line-height: 1.2;
}
}
}
}
}以上是关于scss 方向感知悬停效果的主要内容，如果未能解决你的问题，请参考以下文章