初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery ホバーした方向によってスクロールの方向も変わる

職業訓練の先生に教えてもらったサイトのjQueryの動きが
カッコ良かったのでアナライズして余計な記述を削ぎ落として
分かりやすくシンプルに変更してみました。

画像をホバーするとホバーした方向から画像にカバーがかかる
エフェクトです。

f:id:bellsmarket:20150514202137p:plain
デモはこちらになります。
ホバースクロール

jQueryのisotopeもつけています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ホバースクロール</title>
<link rel="stylesheet" href="css/move.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/scroll.js"></script>
<script src="js/masonry.js"></script>

</head>
<body>
<div id="container">
    <nav class="sort_menu">
        <a href="#" class="current-filter" title="All" data-filter="*">All</a>
        <a href="#" title="short_hair" data-filter=".short_hair">Short Hair</a>
        <a href="#" title="long_hair" data-filter=".long_hair">Long Hair</a>
        <a href="#" title="White" data-filter=".white">White</a>
        <a href="#" title="Gray" data-filter=".gray">Gray</a>
        <a href="#" title="Brown" data-filter=".brown">Brown</a>
    </nav><!--sort_menu-->
	<div class="projects-thumbnails-wrapper" id="msnry-wrapper">
		<!--ここから画像1の記述-->
		<div class="thumbnail project long_hair brown">
			<a href="http://www.nyanderful.biz/dictionary/americanbobtail.html" class="project-link project-link-big" title="アメリカン・ボブテイル">
				<img class="attachment-thumb-home" src="img/cat/01.png" title="アメリカン・ボブテイル">
			<div class="overlay">
				<div class="wrap">
					<h3>アメリカン・ボブテイル</h3>
					<p>Long Hair・Brown</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div><!--thumbnail project video short_hair-->
		<!--ここまで画像1の記述-->
		<!--ここから画像2の記述-->
		<div class="thumbnail project gray white short_hair">
			<a href="http://wiseyeti.co.uk/work/mmi/" class="project-link project-link-big" title="アメリカン・ショート・ヘア">
				<img class="attachment-thumb-home" src="img/cat/02.png" title="アメリカン・ショート・ヘア">
			<div class="overlay">
				<div class="wrap">
					<h3>アメリカン・ショート・ヘア</h3>
					<p>Short hair・White・Gray</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像2の記述-->
		<!--ここから画像3の記述-->
		<div class="thumbnail project  short_hair brown white">
			<a href="http://wiseyeti.co.uk/work/mmi/" class="project-link project-link-big" title="コーニッシュ・レックス">
				<img class="attachment-thumb-home" src="img/cat/03.png" title="コーニッシュ・レックス">
			<div class="overlay">
				<div class="wrap">
					<h3>コーニッシュ・レックス</h3>
					<p>Short hair・White・Brown</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像3の記述-->
		<!--ここから画像4の記述-->
		<div class="thumbnail project long_hair white brown">
			<a href="http://wiseyeti.co.uk/work/mmi/" class="project-link project-link-big" title="キムリック">
				<img class="attachment-thumb-home" src="img/cat/04.png" title="キムリック">
			<div class="overlay">
				<div class="wrap">
					<h3>キムリック</h3>
					<p>Long hair・White・Brown</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像4の記述-->
		<!--ここから画像5の記述-->
		<div class="thumbnail project brown short_hair">
			<a href="http://www.nyanderful.biz/dictionary/egyptianmau.html" class="project-link project-link-big" title="エジプシャンマウ">
				<img class="attachment-thumb-home" src="img/cat/05.png" title="エジプシャンマウ">
			<div class="overlay">
				<div class="wrap">
					<h3>エジプシャンマウ</h3>
					<p>Short hair・Brown</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像5の記述-->
		<!--ここから画像6の記述-->
		<div class="thumbnail project brown long_hair">
			<a href="http://www.nyanderful.biz/dictionary/himalayan.html" class="project-link project-link-big" title="ヒマラヤン">
				<img class="attachment-thumb-home" src="img/cat/06.png" title="ヒマラヤン">
			<div class="overlay">
				<div class="wrap">
					<h3>ヒマラヤン</h3>
					<p>Long hair・Brown</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像6の記述-->
		<!--ここから画像7の記述-->
		<div class="thumbnail project white long_hair">
			<a href="http://www.nyanderful.biz/dictionary/persian.html" class="project-link project-link-big" title="ペルシャ">
				<img class="attachment-thumb-home" src="img/cat/07.png" title="ペルシャ">
			<div class="overlay">
				<div class="wrap">
					<h3>ペルシャ</h3>
					<p>Long hair・White</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像7の記述-->
		<!--ここから画像8の記述-->
		<div class="thumbnail project white long_hair">
			<a href="http://www.nyanderful.biz/dictionary/ragdoll.html" class="project-link project-link-big" title="ラグドール">
				<img class="attachment-thumb-home" src="img/cat/08.png" title="ラグドール">
			<div class="overlay">
				<div class="wrap">
					<h3>ラグドール</h3>
					<p>Long hair・White</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像8の記述-->
		<!--ここから画9の記述-->
		<div class="thumbnail project gray short_hair">
			<a href="http://www.nyanderful.biz/dictionary/russianblue.html" class="project-link project-link-big" title="ロシアンブルー">
				<img class="attachment-thumb-home" src="img/cat/09.png" title="ロシアンブルー">
			<div class="overlay">
				<div class="wrap">
					<h3>ロシアンブルー</h3>
					<p>Short hair・Gray</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像9の記述-->
		<!--ここから画10の記述-->
		<div class="thumbnail project gray short_hair">
			<a href="http://www.nyanderful.biz/dictionary/scottishfold.html" class="project-link project-link-big" title="スコティッシュフォールド">
				<img class="attachment-thumb-home" src="img/cat/10.png" title="スコティッシュフォールド">
			<div class="overlay">
				<div class="wrap">
					<h3>スコティッシュフォールド</h3>
					<p>Short hair・Gray</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像10の記述-->
		<!--ここから画11の記述-->
		<div class="thumbnail project white short_hair">
			<a href="http://www.nyanderful.biz/dictionary/siamese.html" class="project-link project-link-big" title="シャム">
				<img class="attachment-thumb-home" src="img/cat/11.png" title="シャム">
			<div class="overlay">
				<div class="wrap">
					<h3>シャム</h3>
					<p>Short hair・White</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像11の記述-->
		<!--ここから画12の記述-->
		<div class="thumbnail project white long_hair">
			<a href="http://www.nyanderful.biz/dictionary/turkishangora.html" class="project-link project-link-big" title="ターキッシュアンゴラ">
				<img class="attachment-thumb-home" src="img/cat/12.png" title="ターキッシュアンゴラ">
			<div class="overlay">
				<div class="wrap">
					<h3>ターキッシュアンゴラ</h3>
					<p>Long hair・White</p>
						<div class="view">VIEW</div>
				</div>
			</div>
			</a>
		</div>
		<!--ここまで画像12の記述-->
	</div><!--msnry-wrapper-->
</div><!--container-->
</body>
</html>
* {
	padding: 0;
	margin: 0;
}
  /*リセットCSSに追加*/
article, aside, dialog, figure, footer, header, menu, nav, section {
    display: block;
}
body{
	background:#FFE6F3;
}
img {
	vertical-align:center;
}
#container {
	width:1280px;
	margin: 0 auto;
}
.thumbnail {
	float:left;
}

a {
	color:#ffffff
}
img {
	width:300px;
	height:220px;
}
/*hover時に出現するエリア*/
.project{
	overflow:hidden;
	width:300px;
	height:220px;
	margin:10px;
	float:left;
}
/*画像エリア*/
.project .overlay{
	background:rgba(166, 77, 230,0.7);
    width:300px;
    height:220px;
    position:absolute;
    vertical-align:middle;
    text-align:center;
    display:table;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    z-index:18;
    left:0;
    top:0;
    -webkit-transform:translate3d(-100%, 0, 0);
    -webkit-animation-duration:0.15s;
    -webkit-animation-timing-function:ease-out;
    -webkit-animation-fill-mode:forwards;
    -moz-transform:translate3d(-100%, 0, 0);
    -moz-animation-duration:0.15s;
    -moz-animation-timing-function:ease-out;
    -moz-animation-fill-mode:forwards;
    transform:translate3d(-100%, 0, 0);
    animation-duration:0.15s;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
	}

.overlay .wrap{
	display:table-cell;
    vertical-align:middle;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:100%;
    height:100%
	}
.project.hover-enter-top .overlay{
	-webkit-animation-name:slide_in_top;
    -moz-animation-name:slide_in_top;
    animation-name:slide_in_top
}
.project.hover-leave-top .overlay{
	-webkit-animation-name:slide_out_top;
    -moz-animation-name:slide_out_top;
    animation-name:slide_out_top
}
.project.hover-enter-right .overlay{
	-webkit-animation-name:slide_in_right;
    -moz-animation-name:slide_in_right;
    animation-name:slide_in_right}
.project.hover-leave-right .overlay{
	-webkit-animation-name:slide_out_right;
    -moz-animation-name:slide_out_right;
    animation-name:slide_out_right
}
.project.hover-enter-bottom .overlay{
	-webkit-animation-name:slide_in_bottom;
    -moz-animation-name:slide_in_bottom;
    animation-name:slide_in_bottom}
.project.hover-leave-bottom
.overlay{-webkit-animation-name:slide_out_bottom;
    -moz-animation-name:slide_out_bottom;
    animation-name:slide_out_bottom
}
.project.hover-enter-left .overlay{
	-webkit-animation-name:slide_in_left;
    -moz-animation-name:slide_in_left;
    animation-name:slide_in_left
}
.project.hover-leave-left .overlay{
	-webkit-animation-name:slide_out_left;
    -moz-animation-name:slide_out_left;
	animation-name:slide_out_left;
}
@-webkit-keyframes slide_in_top{
	0%{-webkit-transform:translate3d(0,-100%,0)}
	100%{-webkit-transform:translate3d(0, 0, 0)}
}
@-webkit-keyframes slide_out_top{
0%{-webkit-transform:translate3d(0,0,0)}
100%{-webkit-transform:translate3d(0, -100%, 0)}
}
@-moz-keyframes slide_in_top{
0%{-moz-transform:translate3d(0,-100%,0)}
100%{-moz-transform:translate3d(0, 0, 0)}
}
@-moz-keyframes slide_out_top{
0%{-moz-transform:translate3d(0,0,0)}
100%{-moz-transform:translate3d(0, -100%, 0)}
}
@keyframes slide_in_top{
0%{transform:translate3d(0,-100%,0)}
100%{transform:translate3d(0, 0, 0)}
}
@keyframes slide_out_top{
0%{transform:translate3d(0,0,0)}
100%{transform:translate3d(0, -100%, 0)}
}
@-webkit-keyframes slide_in_right{
0%{-webkit-transform:translate3d(100%,0,0)}
100%{-webkit-transform:translate3d(0, 0, 0)}
}
@-webkit-keyframes slide_out_right{
0%{-webkit-transform:translate3d(0,0,0)}
100%{-webkit-transform:translate3d(100%, 0, 0)}
}
@-moz-keyframes slide_in_right{
0%{-moz-transform:translate3d(100%,0,0)}
100%{-moz-transform:translate3d(0, 0, 0)}
}
@-moz-keyframes slide_out_right{
0%{-moz-transform:translate3d(0,0,0)}
100%{-moz-transform:translate3d(100%, 0, 0)}
}
@keyframes slide_in_right{
0%{transform:translate3d(100%,0,0)}
100%{transform:translate3d(0, 0, 0)}
}
@keyframes slide_out_right{
0%{transform:translate3d(0,0,0)}
100%{transform:translate3d(100%, 0, 0)}
}
@-webkit-keyframes slide_in_bottom{
0%{-webkit-transform:translate3d(0,100%,0)}
100%{-webkit-transform:translate3d(0, 0, 0)}
}
@-webkit-keyframes slide_out_bottom{
0%{-webkit-transform:translate3d(0,0,0)}
100%{-webkit-transform:translate3d(0, 100%, 0)}
}
@-moz-keyframes slide_in_bottom{
0%{-moz-transform:translate3d(0,100%,0)}
100%{-moz-transform:translate3d(0, 0, 0)}
}
@-moz-keyframes slide_out_bottom{
0%{-moz-transform:translate3d(0,0,0)}
100%{-moz-transform:translate3d(0, 100%, 0)}
}
@keyframes slide_in_bottom{
0%{transform:translate3d(0,100%,0)}
100%{transform:translate3d(0, 0, 0)}
}
@keyframes slide_out_bottom{
0%{transform:translate3d(0,0,0)}
100%{transform:translate3d(0, 100%, 0)}
}
@-webkit-keyframes slide_in_left{
0%{-webkit-transform:translate3d(-100%,0,0)}
100%{-webkit-transform:translate3d(0, 0, 0)}
}
@-webkit-keyframes slide_out_left{
0%{-webkit-transform:translate3d(0,0,0)}
100%{-webkit-transform:translate3d(-100%, 0, 0)}
}
@-moz-keyframes slide_in_left{
0%{-moz-transform:translate3d(-100%,0,0)}
100%{-moz-transform:translate3d(0, 0, 0)}
}
@-moz-keyframes slide_out_left{
0%{-moz-transform:translate3d(0,0,0)}
100%{-moz-transform:translate3d(-100%, 0, 0)}
}
@keyframes slide_in_left{
0%{transform:translate3d(-100%,0,0)}
100%{transform:translate3d(0, 0, 0)}
}
@keyframes slide_out_left{
0%{transform:translate3d(0,0,0)}
100%{transform:translate3d(-100%, 0, 0)}
}
.overlay .wrap h3{
	text-transform:uppercase;
	font-size:22px;
	font-weight:normal
}
.view{
	border:1px solid white;
	padding:6px 0;
	width:70%;
	display:inline-block;
	margin-top:32px
}
.view:hover{
	background-color:white;
	color:#B15B99;
}
/*ソートメニュー*/
.sort_menu{
	margin-bottom:12px;
	margin-top:30px
}
.sort_menu a:hover,.sort_menu a.current-filter{
	color:#666;
	border:2px  solid #DDD;
	padding:6px 20px;
	opacity:0.5;
}
.sort_menu a{
	color:#333;
	text-decoration:none;
	font-size:20px;
	padding:8px 22px;
	margin-right:6px;
}
.sort_menu a:first-child{
	background-color:#EFFFD4;
	margin-left:10px
}
.sort_menu a:nth-child(2){
	background-color:#EFD1FF
}
.sort_menu a:nth-child(3){
	background-color:#FEECD2
}
.sort_menu a:nth-child(4){
	background-color:#BAE3F9
}
.sort_menu a:nth-child(5){
	background-color:#FFFCDB
}
.sort_menu a:nth-child(6){
	background-color:#D3DEF1
}

#msnry-wrapper{
	position:relative;z-index:10
}
/*hoverdirection*/
(function ($, window, document, undefined) {

  var _pluginName = 'hoverDirection',
      _defaults = {
        cssPrefix : 'hover'
      },
      _settings = {},
      _stylePrefixRegex;

  // -- Private ----------------------------------------------------
  function _convertFaceToDir (face) {
    switch (face) {
      case 0:
        return 'top';
      case 1:
        return 'right';
      case 2:
        return 'bottom';
      case 3:
        return 'left';
      default :
        break;
    }
  }

  function _constructStyleClass (event) {
    var $this       = $(this),
        h           = $this.height(),
        w           = $this.width(),
        x           = (event.pageX - $this.offset().left - (w/2)) * ( w > h ? (h/w) : 1 ),
        y           = (event.pageY - $this.offset().top  - (h/2)) * ( h > w ? (w/h) : 1 ),
        eventDir    = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4,
        prefixClass = _settings.cssPrefix,
        typeClass   = (event.type === 'mouseleave') ? 'leave' : 'enter',
        dirClass    = _convertFaceToDir(eventDir);

    return prefixClass + '-' + typeClass + '-' + dirClass;
  }

  function _addClass (event) {
    var className = _constructStyleClass.apply(this, [event]);
    $(this).addClass(className);
  }

  function _removeClass() {
    $(this).removeClass(function (index, styleClass) {
      return (styleClass.match(_stylePrefixRegex) || []).join(' ');
    });
  }

  function _handleMouse (event) {
    _removeClass.apply(this);
    _addClass.apply(this, [event]);
  }

  // -- Public ----------------------------------------------------
  var methods = {
    init : function (options) {
      _settings = $.extend(_defaults, options);
      _stylePrefixRegex = new RegExp('\\' + _settings.cssPrefix + '\\S+','g');

      // Main plugin code
      return this.each(function () {
        $(this).on('mouseenter mouseleave', _handleMouse);
      });

    },

    removeClass : function () {
      _removeClass.apply(this);
       return this;
    },

    destroy : function () {
      _removeClass.apply(this);
      return this.each(function () {
        $(this).off('mouseenter mouseleave', _handleMouse);
      });
    }
  };

  $.fn[_pluginName] = function (method) {
    if (methods[method]) { // Call Method
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) { // Initialize
      return methods.init.apply(this);
    } else {
      $.error('Method ' + method + ' does not exist on jQuery.' + _pluginName);
    }
  };
} (jQuery, window, document));


$(document).ready(function() {
if (Modernizr.touch) {
    $('#masthead,#page,#up-arrow,#main-menu,#awwwards').removeClass('active');
    $('#main-menu').addClass('not-active');
}

$('.menu-toggle').click(function(){
    if ($(this).hasClass('toggled-on' )){
        $(this).removeClass('toggled-on' );
    }else{
        $(this).addClass('toggled-on' );
    }
    $('#main-menu').slideToggle(200);
});
var $container = $('#msnry-wrapper');
        $container.isotope({
            filter: '*',
            animationEngine:'best-available',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
});

$('.sort_menu a').click(function(){
$('.sort_menu a').removeClass('current-filter');
$(this).addClass('current-filter');
            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationEngine:'best-available',
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });

          return false;
});

      $('.thumbnail').hoverDirection();

      // Example of calling removeClass method after a CSS animation
      $('.project-thumbnail .overlay').on('animationend', function (event) {
        var $box = $(this).parent();
        $box.filter('[class*="-leave-"]').hoverDirection('removeClass');
      });
          $(".fancybox").fancybox({
        openEffect    : 'elastic',
        closeEffect    : 'elastic'
    });
    $('.readdesc').click(function(){
    if ($(this).hasClass('opened')){
        $(this).removeClass('opened');

    }else{
        $(this).addClass('opened');


    }
    $(this).prev().slideToggle();

    });

});// doc ready
$(window).load(function() {

var tagline = $("#animated-text div"),
    footprint1 = $("#footprint-wrapper1 .footprint"),
    footprint2visible = true,
    footprint3visible = true,
    footprint5visible = true,
    footprint2 = $("#footprint-wrapper2 .footprint"),
    footprint3 = $(".footprint-wrappertl3 .footprint"),
    footprint5 = $("#footprint-wrapper5 .footprint");
    tl = new TimelineLite();
    tl.staggerFrom(tagline, 0.5, {top:"-=30px", rotation:"-40deg",rotationX:"360deg", transformOrigin:"50% 50% 10", alpha:0, scale:1.8, ease:Back.easeOut}, 0.2);
    tl.staggerFrom(footprint1, 0.5, {alpha:0, ease:Back.easeOut}, 0.2);
    tl2 = new TimelineLite();
    tl2.staggerFrom(footprint2, 0.5, {alpha:0, ease:Back.easeOut}, 0.2);
    tl2.stop();
    tl3 = new TimelineLite();
    tl3.staggerFrom(footprint3, 0.5, {alpha:0, ease:Back.easeOut}, 0.2);
    tl3.stop();
    tl5 = new TimelineLite();
    tl5.staggerFrom(footprint5, 0.5, {alpha:0, ease:Back.easeOut}, 0.2);
    tl5.stop();
    TweenLite.set($("#animated-text,.footprint-wrapper"), {css:{visibility:"visible"}});

    function scrollEvents(){
            var $windowHeight = $(window).height(),
            $fp2Position = $('#work .section-title').offset().top,
            $fp3Position = $('#team .section-title').offset().top,
            $fp5Position = $('#contact .section-title').offset().top,
            $toggleFP2 = ($fp2Position - $windowHeight) + 24,
            $toggleFP3 = ($fp3Position - $windowHeight) + 24,
            $toggleFP5 = ($fp5Position - $windowHeight) + 24,
            $positionscroll = $(window).scrollTop();
        if($positionscroll > $toggleFP2){
            if (footprint2visible = true){
                tl2.play();
                footprint2visible = false;
            }else{
                return false;
            }
        }
        if($positionscroll > $toggleFP3){
            if (footprint3visible = true){
                tl3.play();
                footprint3visible = false;
            }else{
                return false;
            }
        }
        if($positionscroll > $toggleFP5){
            if (footprint5visible = true){
                tl5.play();
                footprint5visible = false;
            }else{
                return false;
            }
        }
        if($positionscroll > 70){
            $('#masthead.active').addClass('small');

        }else{
            $('#masthead.active').removeClass('small');
        }
        if ($positionscroll > 200){
            $('#up-arrow.active').fadeIn();
        }else{
            $('#up-arrow.active').fadeOut();
        }
    }
$(document).scroll(function() {
    scrollEvents();

});
scrollEvents();
$('#up-arrow').click(function(){
     $('html, body').animate( {
    scrollTop: 0
    }, 700);
});
});
topへ戻る