بویکا 124 ارسال شده در بهمن 93 گزارش بازنشر ارسال شده در بهمن 93 سلام دوستان . امروز می خوام آموزش ساخت هدر متحرک رو واستون آموزش بدم . این هدر متجرک بدون هیچگونه فایل فلشی بوده و فقط از جی کوئری بهره می بره که هم سرعتش زیاده و هم در تمام دستگاه ها حتی گوشی ها نمایش داده میشه . از اون بهتر ریسپانسیو هم هست . نمونه آنلاین رو می تونین تو لینک زیر ببینین : ( هدر سایت ما هم همونه )نمونه آنلاینمراحل کار :1 – فایل به نام jquery.spritely-0.4.js ایجاد کنین و کدهای زیر رو عینا داخلش کپی کنین ! ( یا از اینجا دانلود کنید )/** jQuery spritely 0.4* http://spritely.net/** Documentation:* http://spritely.net/documentation/** Copyright 2010, Peter Chater, Artlogic Media Ltd, http://www.artlogic.net/* Dual licensed under the MIT or GPL Version 2 licenses.** Change history:* Version 0.4* - add up/down for 'pan' method. <ricky.hewitt@artlogic.net>* - added 'dir' option for Sprites. This means a Sprite can be played in reverse.* - removed alert message regarding jQuery.draggable (now uses console.log, if available) <ricky.hewitt@artlogic.net>* Version 0.3b* - added lockTo method for locking sprites to background images. $('#sprite').lockTo('#background, {'left': 380, 'top': -60, 'bg_img_width': 1110});* Version 0.2.1* - animate function will stop cycling after play_frames has completed* Version 0.2 beta* - added isDraggable method (requires jquery-ui) $('#sprite').sprite().isDraggable({start: null, stop: function() {alert('Ouch! You dropped me!')});* - sprites may be set to play a limited number of frames when instantiated, e.g. $('#sprite').sprite({fps: 9, no_of_frames: 3, play_frames: 30})* - sprite speed may be controlled at any point by setting the frames-per-second $('#sprite').fps(20);* - sprites with multiple rows of frames may have there 'state' changed, e.g. to make the second row of frames* active, use: $('#sprite').spState(2); - to return to the first row, use $('#sprite').spState(1);* - background element speed may be controlled at any point with .spSpeed(), e.g. $('#bg1').spSpeed(10)* - background elements may be set to a depth where 100 is the viewer (up close) and 0 is the horizon, e.g.:* $('#bg1').pan({fps: 30, speed: 2, dir: 'left', depth: 30});* $('#bg2').pan({fps: 30, speed: 3, dir: 'left', depth: 70});* relative speed of backgrounds may now be set in a single action with $('#bg1, #bg2').spRelSpeed(20);* which will make elements closer to the horizon (lower depths) move slower than closer elements (higher depths)*/(function($) {$._spritely = {// shared methods and variables used by spritely pluginanimate: function(options) {var el = $(options.el);var el_id = el.attr('id');options = $.extend(options, $._spritely.instances[el_id] || {});if (options.play_frames && !$._spritely.instances[el_id]['remaining_frames']) {$._spritely.instances[el_id]['remaining_frames'] = options.play_frames + 1;}if (options.type == 'sprite' && options.fps) {var frames;var animate = function(el) { var w = options.width, h = options.height; if (!frames) { frames = []; total = 0 for (var i = 0; i < options.no_of_frames; i ++) { frames[frames.length] = (0 - total); total += w; } } if (options.rewind == true) { if ($._spritely.instances[el_id]['current_frame'] <= 0) { $._spritely.instances[el_id]['current_frame'] = frames.length - 1; } else { $._spritely.instances[el_id]['current_frame'] = $._spritely.instances[el_id]['current_frame'] - 1; }; } else { if ($._spritely.instances[el_id]['current_frame'] >= frames.length - 1) { $._spritely.instances[el_id]['current_frame'] = 0; } else { $._spritely.instances[el_id]['current_frame'] = $._spritely.instances[el_id]['current_frame'] + 1; } } var yPos = $._spritely.getBgY(el); el.css('background-position', frames[$._spritely.instances[el_id]['current_frame']] + 'px ' + yPos); if (options.bounce && options.bounce[0] > 0 && options.bounce[1] > 0) { var ud = options.bounce[0]; // up-down var lr = options.bounce[1]; // left-right var ms = options.bounce[2]; // milliseconds el .animate({top: '+=' + ud + 'px', left: '-=' + lr + 'px'}, ms) .animate({top: '-=' + ud + 'px', left: '+=' + lr + 'px'}, ms); }}if ($._spritely.instances[el_id]['remaining_frames'] && $._spritely.instances[el_id]['remaining_frames'] > 0) { $._spritely.instances[el_id]['remaining_frames'] --; if ($._spritely.instances[el_id]['remaining_frames'] == 0) { $._spritely.instances[el_id]['remaining_frames'] = -1; delete $._spritely.instances[el_id]['remaining_frames']; return; } else { animate(el); }} else if ($._spritely.instances[el_id]['remaining_frames'] != -1) { animate(el);}} else if (options.type == 'pan') {if (!$._spritely.instances[el_id]['_stopped']) { if (options.dir == 'up') { $._spritely.instances[el_id]['l'] = $._spritely.getBgX(el).replace('px', ''); $._spritely.instances[el_id]['t'] = ($._spritely.instances[el_id]['t'] - (options.speed || 1)) || 0; } else if (options.dir == 'down') { $._spritely.instances[el_id]['l'] = $._spritely.getBgX(el).replace('px', ''); $._spritely.instances[el_id]['t'] = ($._spritely.instances[el_id]['t'] + (options.speed || 1)) || 0; } else if (options.dir == 'left') { $._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] - (options.speed || 1)) || 0; $._spritely.instances[el_id]['t'] = $._spritely.getBgY(el).replace('px', ''); } else { $._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] + (options.speed || 1)) || 0; $._spritely.instances[el_id]['t'] = $._spritely.getBgY(el).replace('px', ''); } // When assembling the background-position string, care must be taken // to ensure correct formatting.. <ricky.hewitt@artlogic.net> var bg_left = $._spritely.instances[el_id]['l'].toString(); if (bg_left.indexOf('%') == -1) { bg_left += 'px '; } else { bg_left += ' '; } var bg_top = $._spritely.instances[el_id]['t'].toString(); if (bg_top.indexOf('%') == -1) { bg_top += 'px '; } else { bg_top += ' '; } $(el).css('background-position', bg_left + bg_top);}}$._spritely.instances[el_id]['options'] = options;window.setTimeout(function() {$._spritely.animate(options);}, parseInt(1000 / options.fps));},randomIntBetween: function(lower, higher) {return parseInt(rand_no = Math.floor((higher - (lower - 1)) * Math.random()) + lower);},getBgY: function(el) {if ($.browser.msie) {// fixme - the background-position property does not work// correctly in IE so we have to hack it here... Not ideal// especially as $.browser is depricatedvar bgY = $(el).css('background-position-y') || '0';} else {var bgY = ($(el).css('background-position') || ' ').split(' ')[1];}return bgY;},getBgX: function(el) {if ($.browser.msie) {// see note, abovevar bgX = $(el).css('background-position-x') || '0';} else {var bgX = ($(el).css('background-position') || ' ').split(' ')[0];}return bgX;},get_rel_pos: function(pos, w) {// return the position of an item relative to a background// image of width given by wvar r = pos;if (pos < 0) {while (r < 0) { r += w;}} else {while (r > w) { r -= w;}}return r;}};$.fn.extend({spritely: function(options) {var options = $.extend({type: 'sprite',do_once: false,width: null,height: null,fps: 12,no_of_frames: 2,stop_after: null}, options || {});var el_id = $(this).attr('id');if (!$._spritely.instances) {$._spritely.instances = {};}if (!$._spritely.instances[el_id]) {$._spritely.instances[el_id] = {current_frame: -1};}$._spritely.instances[el_id]['type'] = options.type;$._spritely.instances[el_id]['depth'] = options.depth;options.el = this;options.width = options.width || $(this).width() || 100;options.height = options.height || $(this).height() || 100;var get_rate = function() { return parseInt(1000 / options.fps); } if (!options.do_once) {window.setTimeout(function() { $._spritely.animate(options);}, get_rate(options.fps));} else {$._spritely.animate(options);}return this; // so we can chain events},sprite: function(options) {var options = $.extend({type: 'sprite',bounce: [0, 0, 1000] // up-down, left-right, milliseconds}, options || {});return $(this).spritely(options);},pan: function(options) {var options = $.extend({type: 'pan',dir: 'left',continuous: true,speed: 1 // 1 pixel per frame}, options || {});return $(this).spritely(options);},flyToTap: function(options) {var options = $.extend({el_to_move: null,type: 'moveToTap',ms: 1000, // millisecondsdo_once: true}, options || {});if (options.el_to_move) {$(options.el_to_move).active();}if ($._spritely.activeSprite) {if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues... $(this)[0].ontouchstart = function(e) { var el_to_move = $._spritely.activeSprite; var touch = e.touches[0]; var t = touch.pageY - (el_to_move.height() / 2); var l = touch.pageX - (el_to_move.width() / 2); el_to_move.animate({ top: t + 'px', left: l + 'px' }, 1000); };} else { $(this).click(function(e) { var el_to_move = $._spritely.activeSprite; $(el_to_move).stop(true); var w = el_to_move.width(); var h = el_to_move.height(); var l = e.pageX - (w / 2); var t = e.pageY - (h / 2); el_to_move.animate({ top: t + 'px', left: l + 'px' }, 1000); });}}return this;}, // isDraggable requires jQuery uiisDraggable: function(options) {if ((!$(this).draggable)) {//console.log('To use the isDraggable method you need to load jquery-ui.js');return this;}var options = $.extend({type: 'isDraggable',start: null,stop: null,drag: null}, options || {});var el_id = $(this).attr('id');$._spritely.instances[el_id].isDraggableOptions = options;$(this).draggable({start: function() { var el_id = $(this).attr('id'); $._spritely.instances[el_id].stop_random = true; $(this).stop(true); if ($._spritely.instances[el_id].isDraggableOptions.start) { $._spritely.instances[el_id].isDraggableOptions.start(this); }},drag: options.drag,stop: function() { var el_id = $(this).attr('id'); $._spritely.instances[el_id].stop_random = false; if ($._spritely.instances[el_id].isDraggableOptions.stop) { $._spritely.instances[el_id].isDraggableOptions.stop(this); }}});return this;},active: function() {// the active sprite$._spritely.activeSprite = this;return this;},activeonclick: function() {// make this the active script if clicked...var el = $(this);if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...el[0].ontouchstart = function(e) { $._spritely.activeSprite = el;};} else {el.click(function(e) { $._spritely.activeSprite = el;});}return this;},spRandom: function(options) {var options = $.extend({top: 50,left: 50,right: 290,bottom: 320,speed: 4000,pause: 0}, options || {});var el_id = $(this).attr('id');if (!$._spritely.instances[el_id].stop_random) {var r = $._spritely.randomIntBetween;var t = r(options.top, options.bottom);var l = r(options.left, options.right);$('#' + el_id).animate({ top: t + 'px', left: l + 'px'}, options.speed)}window.setTimeout(function() {$('#' + el_id).spRandom(options);}, options.speed + options.pause)return this;},makeAbsolute: function() {// remove an element from its current position in the DOM and// position it absolutely, appended to the body tag.return this.each(function() {var el = $(this);var pos = el.position();el.css({position: "absolute", marginLeft: 0, marginTop: 0, top: pos.top, left: pos.left }) .remove() .appendTo("body");});},spSet: function(prop_name, prop_value) {var el_id = $(this).attr('id');$._spritely.instances[el_id][prop_name] = prop_value;return this;},spGet: function(prop_name, prop_value) {var el_id = $(this).attr('id');return $._spritely.instances[el_id][prop_name];},spStop: function(bool) {$(this).each(function() {var el_id = $(this).attr('id');$._spritely.instances[el_id]['_last_fps'] = $(this).spGet('fps');$._spritely.instances[el_id]['_stopped'] = true;$._spritely.instances[el_id]['_stopped_f1'] = bool;if ($._spritely.instances[el_id]['type'] == 'sprite') { $(this).spSet('fps', 0);}if (bool) { // set background image position to 0 var bp_top = $._spritely.getBgY($(this)); $(this).css('background-position', '0 ' + bp_top);}});return this;},spStart: function() {$(this).each(function() {var el_id = $(this).attr('id');var fps = $._spritely.instances[el_id]['_last_fps'] || 12;$._spritely.instances[el_id]['_stopped'] = false;if ($._spritely.instances[el_id]['type'] == 'sprite') { $(this).spSet('fps', fps);}});return this;},spToggle: function() {var el_id = $(this).attr('id');var stopped = $._spritely.instances[el_id]['_stopped'] || false;var stopped_f1 = $._spritely.instances[el_id]['_stopped_f1'] || false;if (stopped) {$(this).spStart();} else {$(this).spStop(stopped_f1);}return this;},fps: function(fps) {$(this).each(function() {$(this).spSet('fps', fps);});return this;},spSpeed: function(speed) {$(this).each(function() {$(this).spSet('speed', speed);});return this;},spRelSpeed: function(speed) {$(this).each(function() {var rel_depth = $(this).spGet('depth') / 100;$(this).spSet('speed', speed * rel_depth);});return this;},spChangeDir: function(dir) {$(this).each(function() {$(this).spSet('dir', dir);});return this;},spState: function(n) {$(this).each(function() {// change state of a sprite, where state is the vertical// position of the background image (e.g. frames row)var yPos = ((n - 1) * $(this).height()) + 'px';var xPos = $._spritely.getBgX($(this));var bp = xPos + ' -' + yPos;$(this).css('background-position', bp);});return this;},lockTo: function(el, options) {$(this).each(function() {var el_id = $(this).attr('id');$._spritely.instances[el_id]['locked_el'] = $(this);$._spritely.instances[el_id]['lock_to'] = $(el);$._spritely.instances[el_id]['lock_to_options'] = options;window.setInterval(function() { if ($._spritely.instances[el_id]['lock_to']) { var locked_el = $._spritely.instances[el_id]['locked_el']; var locked_to_el = $._spritely.instances[el_id]['lock_to']; var locked_to_options = $._spritely.instances[el_id]['lock_to_options']; var locked_to_el_w = locked_to_options.bg_img_width; var locked_to_el_h = locked_to_el.height(); var locked_to_el_y = $._spritely.getBgY(locked_to_el); var locked_to_el_x = $._spritely.getBgX(locked_to_el); var el_l = (parseInt(locked_to_el_x) + parseInt(locked_to_options['left'])); var el_t = (parseInt(locked_to_el_y) + parseInt(locked_to_options['top'])); el_l = $._spritely.get_rel_pos(el_l, locked_to_el_w); $(locked_el).css({ 'top': el_t + 'px', 'left': el_l + 'px' }); }}, options.interval || 20);});return this;}})})(jQuery);// Stop IE6 re-loading background images continuouslytry {document.execCommand("BackgroundImageCache", false, true);} catch(err) {}2 – فایلی jquery-1.3.2.min.js رو از این لینک دانلودکنید ! ( دقت داشته باشین که این نسخه رو حتما دانلود کنین )3 – فولدری به نام scripts ایجاد کرده و دو فایل بالا رو داخلش کپی کنین .4 – فولدری به نام images ایجاد کنید !5 – فایلی به نام index.htm ایجاد کنید .حالا رسیدیم به فراخوانی و کدهااستایل مورد نیاز رو پایین می نویسم بعد توضیحش می دم :<style type="text/css"> #stage { top: 0px; left: 0px; z-index: 100; } .stage { position: absolute; top: 0; left: 0; width: 100%; height: 259px; overflow: hidden; } #bg { background: #aedfe5 url(images/sky1.png) 0 0 repeat-x; } #clouds { background: transparent url(images/cloud.png) 205px 12px repeat-x; } #clouds2 { background: transparent url(images/cloud2.png) 325px 122px repeat-x; } .toppt{ color:#303030 !important; position:absolute; margin-left:43%; z-index: 101; text-align:center !important; font-size:25px; color:red !important; }</style>توضیحات :تگ #bg همون پس زمینمون هست . می تونین پس زمینه دلخواه خودتون رو داخل فولدر images که ساختین کپی کنین و از استایل زیر آدرس دهیش کنینbackground: #aedfe5 url(images/sky1.png) 0 0 repeat-x; 1 background: #aedfe5 url(images/sky1.png) 0 0 repeat-x; #clouds : با این تگ شما اولین المان رو که در تصویر حرکت می کنه رو استایل و آدرس دهی می کنین . باز هم از استایل زیر عکس خودتون رو دوباره آدرس دهی کنینbackground: transparent url(images/cloud.png) 205px 12px repeat-x; 1 background: transparent url(images/cloud.png) 205px 12px repeat-x; #clouds2 : با این تگ شما دومین المان رو که در تصویر حرکت می کنه رو استایل و آدرس دهی می کنین . باز هم از استایل زیر عکس خودتون رو دوباره آدرس دهی کنینbackground: transparent url(images/cloud2.png) 325px 122px repeat-x; 1 background: transparent url(images/cloud2.png) 325px 122px repeat-x; شما می تونین هر تعداد که خواستین المان اضافه کرده و آدرس دهی کنین ..toppt : استایلی که باهاش متنتون رو روی عناصر بالا به عنوان لوگو تنظیم می کنین !حالا دستور زیر رو بعد تگ </style> اضافه کنین . کدهای زیر دو فایل جی کوئری ساخته شده رو فراخوانی می کنه<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script><script src="scripts/jquery.spritely-0.4.js" type="text/javascript"></script> 1 2 <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery.spritely-0.4.js" type="text/javascript"></script> سپس کد زیر رو پایین دو دستور بالا بنویسین<script type="text/javascript"> (function($) { $(document).ready(function() { $('#logo').click(function() { document.location.href = 'http://www.spritely.net/'; }); $('#clouds').pan({fps: 30, speed: 0.5, dir: 'right', depth: 10}); $('#clouds2').pan({fps: 30, speed: 0.5, dir: 'left', depth: 10}); window.page = { hide_panels: function() { $('.panel').hide(300); }, show_panel: function(el_id) { this.hide_panels(); $(el_id).show(300); } } }); })(jQuery);</script>خب تقریبا تموم شده . حالا کمی کد بالا رو توضیح می دم :CSS$('#clouds').pan({fps: 30, speed: 0.5, dir: 'right', depth: 10}); $('#clouds').pan({fps: 30, speed: 0.5, dir: 'right', depth: 10}); در کد بالا fps سرعت فریم انیمیشن .speed : سرعت انجام انیمیشنdir : حرکت از چپ به راست یا از راست به چپ با مقدار دهی right یا left. خب تموم شد حالا با دستورات زیر فراخوانیش کنین : <div id="stage" class="stage"> <div id="tap" class="stage"></div> <div id="bg" class="stage"></div> <div id="clouds" class="stage"></div> <div id="clouds2" class="stage"></div> </div> <div class="toppt"><h2> آسمان وردپرس</h2></div> <div id="stage" class="stage"> <div id="tap" class="stage"></div> <div id="bg" class="stage"></div> <div id="clouds" class="stage"></div> <div id="clouds2" class="stage"></div> </div> <div class="toppt"><h2> آسمان وردپرس</h2></div> تمام ! حالا اگه بخواین به وردپرس اضافش کنین تمام مراحل بالا رو تکرار کنین فقط کدهای جی کوئری رو داخل فایل header.php کپی کنین !تمام . آموزش بالا در قالب یک فایل فشرده از لینک زیر دانلود کنید !دانلود 3 نقل قول لینک به ارسال
فرهاد-سئو 905 ارسال شده در بهمن 93 گزارش بازنشر ارسال شده در بهمن 93 ممنون بابت آموزشتوناگر داخل بخش آموزش می نوشتین بهتر بودش : http://forum.wp-parsi.com/tutorials/در ضمن قسمت های دریافتی رو لطفا در خود انجمن هم پیوست کنین که بعدا دچار مشکل نشه نقل قول لینک به ارسال
بویکا 124 ارسال شده در بهمن 93 مالک گزارش بازنشر ارسال شده در بهمن 93 ممنون بابت آموزشتوناگر داخل بخش آموزش می نوشتین بهتر بودش : http://forum.wp-parsi.com/tutorials/در ضمن قسمت های دریافتی رو لطفا در خود انجمن هم پیوست کنین که بعدا دچار مشکل نشه یادم نبود . دفعات بعد پیوست می کنم ایشالا نقل قول لینک به ارسال
mohamad.psp80 5 ارسال شده در اسفند 93 گزارش بازنشر ارسال شده در اسفند 93 ممنون جالب بود نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .