Result
jQuery
$(document).ready(function() { var $menu = $('#menu'), $container = $('#container'), $content = $container.find('.content'); //コンテンツからp要素やh要素を探してclassを与える $content.find('p').addClass('effect e-fade').end().find('h1, h2, h3').addClass('effect e-fade e-color'); //classを与えられた要素を探す var $elems = $(document).find('.effect'), OverlayEffect = (function() { //オーバーレイのスピードとカラー var speed = 1000, eventOff = 'mouseenter', eventOn = 'mouseleave', colorOff = '#AAAAAA', init = function() { //本デモには無いけど見出しの処理 $elems.each(function() { var $el = $(this); if ($el.hasClass('e-color')) $el.data('original-color', $el.css('color')); }); initEventsHandler(); }, initEventsHandler = function() { //a要素からidを探して処理を施す $menu.delegate('a', eventOff, function(e) { var relation = $(this).attr('id'); animateElems('off', relation); return false; }).delegate('a', eventOn, function(e) { var relation = $(this).attr('id'); animateElems('on', relation); return false; }); }, animateElems = function(dir, relation) { var $e = $elems; switch (dir) { case 'on': if (relation) $e = $elems.not('.' + relation); $e.each(function() { var $el = $(this), color = $el.data('original-color'), param = {}; if ($el.hasClass('e-color')) param.color = color; if ($el.hasClass('e-fade')) param.opacity = 1; $el.stop().animate(param, speed); }); break; case 'off': if (relation) $e = $elems.not('.' + relation); $e.each(function() { var $el = $(this), param = {}; if ($el.hasClass('e-color')) param.color = colorOff; if ($el.hasClass('e-fade')) param.opacity = 0.1; $el.stop().animate(param, speed); }); break; } }; return { init: init }; })(); OverlayEffect.init();}); |
css
#menu li{float:left;margin:5px;}#menu {padding:0 0 25px 25px;}.content{clear:both;margin:50px;}.content p{margin-bottom: 25px ;} |
html
<div id="container" class="container"> <ul id="menu" class="menu"> <li><a href="#" id="effect-a">effect-a</a></li> <li><a href="#" id="effect-n">effect-n</a></li> <li><a href="#" id="effect-b">effect-b</a></li> <li><a href="#" id="effect-c">effect-c</a></li> <li><a href="#">All</a></li> </ul> <div class="content"> <p class="effect-a">effect-aのテキスト</p> <p class="effect-n">effect-nのテキスト</p> <p class="effect-b">effect-bのテキスト</p> <p class="effect-c">effect-cのテキスト</p> </div> </div> |
via
Overlay-like Effect with jQuery | Codrops
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
