رفتن به مطلب

هدر متحرک ریسپانسیو فقط با جی کوئری ( تنها آموزش فارسی spritely )


پست های پیشنهاد شده

سلام دوستان . امروز می خوام آموزش ساخت هدر متحرک رو واستون آموزش بدم . این هدر متجرک بدون هیچگونه فایل فلشی بوده و فقط از جی کوئری بهره می بره که هم سرعتش زیاده و هم در تمام دستگاه ها حتی گوشی ها نمایش داده میشه . از اون بهتر ریسپانسیو هم هست . نمونه آنلاین رو می تونین تو لینک زیر ببینین : ( هدر سایت ما هم همونه )

نمونه آنلاین

مراحل کار :

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 plugin
animate: 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 depricated
var 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, above
var 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 w
var 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, // milliseconds
do_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 ui
isDraggable: 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 continuously
try {
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 کپی کنین !

تمام . آموزش بالا در قالب یک فایل فشرده از لینک زیر دانلود کنید !

دانلود

لینک به ارسال

ممنون بابت آموزشتون

اگر داخل بخش آموزش می نوشتین بهتر بودش : http://forum.wp-parsi.com/tutorials/

در ضمن قسمت های دریافتی رو لطفا در خود انجمن هم پیوست کنین که بعدا دچار مشکل نشه ;)

لینک به ارسال

ممنون بابت آموزشتون

اگر داخل بخش آموزش می نوشتین بهتر بودش : http://forum.wp-parsi.com/tutorials/

در ضمن قسمت های دریافتی رو لطفا در خود انجمن هم پیوست کنین که بعدا دچار مشکل نشه ;)

یادم نبود . دفعات بعد پیوست می کنم ایشالا

لینک به ارسال
  • 1 ماه بعد...

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...