ijquery

افکت سه بعدی تصاویر

screenshot

ایجاد افکت سه بعدی بر روی تصاویر هنگام بردن ماوس بر روی عکس

آموزش استفاده

  1. قبل از تگ <head/>
            <link rel="stylesheet" type="text/css" href="css/demo.css" />
            <link rel="stylesheet" type="text/css" href="css/style_common.css" />
            <link rel="stylesheet" type="text/css" href="css/style1.css" />
            <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css' />
    		<script type="text/javascript" src="js/modernizr.custom.69142.js"></script>

     

  2. بعد از تگ <body>
    <div class="container">
    			<!-- Codrops top bar -->
                <div class="codrops-top">
                    <a href="http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/">
                        <strong>&laquo; Previous Demo: </strong>Responsive Layout with Smooth Transitions
                    </a>
                    <span class="right">
    					<a href="http://www.flickr.com/photos/ag2r/">Images by Ángelo González</a>
                        <a href="http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/">
                            <strong>Back to the Codrops Article</strong>
                        </a>
                    </span>
                    <div class="clr"></div>
                </div><!--/ Codrops top bar -->
    
    			<header>
    
    				<h1><span>3D Thumbnail</span> Hover Effects</h1>
    				<h2>Adding some perspective with CSS3 and jQuery &mdash; <strong>best viewed in WebKit browsers</strong></h2>
    
    				<nav class="codrops-demos">
    					<a class="current-demo" href="index.html">Demo 1</a>
    					<a href="index2.html">Demo 2</a>
    					<a href="index3.html">Demo 3</a>
    					<a href="index4.html">Demo 4</a>
    					<a href="index5.html">Demo 5</a>
    				</nav>
    
    				<div class="support-note"><!-- let's check browser support with modernizr -->
    					<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
    					<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
    					<span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
    					<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
    					<span class="note-ie">Sorry, only modern browsers.</span>
    				</div>
    
    			</header>
    
                <div id="grid" class="main">
    				<div class="view">
    					<div class="view-back">
    						<span data-icon="A">566</span>
    						<span data-icon="B">124</span>
    						<a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">&rarr;</a>
    					</div>
    					<img src="images/1.jpg" />
    				</div>
    				<div class="view">
    					<div class="view-back">
    						<span data-icon="A">210</span>
    						<span data-icon="B">102</span>
    						<a href="http://www.flickr.com/photos/ag2r/5629018757/in/photostream">&rarr;</a>
    					</div>
    					<img src="images/2.jpg" />
    				</div>
    				<div class="view">
    					<div class="view-back">
    						<span data-icon="A">690</span>
    						<span data-icon="B">361</span>
    						<a href="http://www.flickr.com/photos/ag2r/6271521984/in/photostream">&rarr;</a>
    					</div>
    					<img src="images/3.jpg" />
    				</div>
    				<div class="view">
    					<div class="view-back">
    						<span data-icon="A">987</span>
    						<span data-icon="B">130</span>
    						<a href="http://www.flickr.com/photos/ag2r/6131126901/in/photostream">&rarr;</a>
    					</div>
    					<img src="images/4.jpg" />
    				</div>
    			</div>
            </div>
    		<script type="text/javascript">	
    
    			Modernizr.load({
    				test: Modernizr.csstransforms3d && Modernizr.csstransitions,
    				yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'],
    				nope: 'css/fallback.css',
    				callback : function( url, result, key ) {
    
    					if( url === 'js/jquery.hoverfold.js' ) {
    				$( '#grid' ).hoverfold();
    					}
    
    				}
    			});
    
    		</script>

     


پیش نمایش دانلود فایل پلاگین

1 دیدگاه دربارهٔ «افکت سه بعدی تصاویر»

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *