Décorations pour Carnaval

par cri53 Sam 27 Jan 2018 - 9:15

Bonjour tout le monde,
Voila ma question
Noel et fini on a eu des super et jolies gifs de noël pour le forum
je voudrais la mm chose pour le carnaval j'ai pas trouve

le thème du mois de Février c'est le carnaval
le sujet sur le forum
Svp pouvez vous m'aidée
sa doit être mis dans java et un joli curseur
Merci c53

par Kallindra Dim 28 Jan 2018 - 8:46

Bonjour,

C'est normal. Il n'y-a des gif spéciaux qu'à 3 moments de l'année : Pâques, Halloween et Noël.

Bonne journée.

par Neptunia Dim 28 Jan 2018 - 9:07

Bonjour ^^

Et à la Saint-Valentin pour compléter la liste de Kallindra. D'ailleurs j'imagine que les décos ne devraient plus trop tarder.

Rien pour le nouvel an chinois, ni pour le carnaval, ni pour les JO d'hiver...

par cri53 Dim 28 Jan 2018 - 9:31

je ne cherche pas la st valentin c'est que une journée que le carnaval sa dure plus longtemps

par RomainG Dim 28 Jan 2018 - 11:52

Neptunia a écrit:Et à la Saint-Valentin pour compléter la liste de Kallindra. D'ailleurs j'imagine que les décos ne devraient plus trop tarder.

Rien pour le nouvel an chinois, ni pour le carnaval, ni pour les JO d'hiver...

Bonjour,

C'est vrai que ça serait chouette si on pouvais avoir des déco pour tous ces événements.

Pour que l'ensemble des administrateurs puissent en profiter.

Cordialement

par cri53 Dim 28 Jan 2018 - 18:10

oui j’espère qu'il vont nous rependre et donne se que je demande

par RomainG Dim 28 Jan 2018 - 19:25

Bonsoir,

Tu peux peut être faire une demande en cliquant ici

Cordialement
Romain

par **Walt** Dim 28 Jan 2018 - 19:37

Bonsoir,

Il n'est pas prévu de créer de décorations pour d'autres événements que ceux faisant déjà l'objet de ce genre d'annonces, pour la simple et bonne raison que cela nous prend un temps considérable.

Cordialement,
Walt

par cri53 Dim 28 Jan 2018 - 19:58

Donne moi les explications je le ferrais moi mm

il faut quoi ?

par Adam_sfp Lun 29 Jan 2018 - 9:27

Bonjour

Voila quelques effets "Carnaval" si cela peut vous dépanner...
http://fiddle.jshell.net/adam_sfp/fsm15x9d/2/embedded/result/

BALLONS
A coller dans gestion des codes javascript

Code:: (function(a){a(document).ready(function(){a("body").after('<div id="stage" class="stage"><div id="balloon" class="stage"></div></div>');a("#balloon").pan({fps:28,speed:2,dir:"up",depth:70})})})(jQuery); (function(a){try{var k="string"==typeof a("body").css("background-position-x")}catch(b){k=!1}a._spritely={instances:{},animate:function(b){var d=a(b.el),c=d.attr("id");if(!a._spritely.instances[c])return this;b=a.extend(b,a._spritely.instances[c]||{});if("sprite"==b.type&&b.fps){b.play_frames&&!a._spritely.instances[c].remaining_frames?a._spritely.instances[c].remaining_frames=b.play_frames+1:b.do_once&&!a._spritely.instances[c].remaining_frames&&(a._spritely.instances[c].remaining_frames=b.no_of_frames); var g,e=function(d){var e=b.width;if(!g){g=[];for(var f=total=0;f<b.no_of_frames;f++)g[g.length]=0-total,total+=e}if(0==a._spritely.instances[c].current_frame){if(b.on_first_frame)b.on_first_frame(d)}else if(a._spritely.instances[c].current_frame==g.length-1&&b.on_last_frame)b.on_last_frame(d);if(b.on_frame&&b.on_frame[a._spritely.instances[c].current_frame])b.on_frame[a._spritely.instances[c].current_frame](d);a._spritely.instances[c].current_frame=1==b.rewind?0>=a._spritely.instances[c].current_frame? g.length-1:a._spritely.instances[c].current_frame-1:a._spritely.instances[c].current_frame>=g.length-1?0:a._spritely.instances[c].current_frame+1;e=a._spritely.getBgY(d);d.css("background-position",g[a._spritely.instances[c].current_frame]+"px "+e);if(b.bounce&&0<b.bounce[0]&&0<b.bounce[1]){e=b.bounce[0];f=b.bounce[1];var h=b.bounce[2];d.animate({top:"+="+e+"px",left:"-="+f+"px"},h).animate({top:"-="+e+"px",left:"+="+f+"px"},h)}};if(a._spritely.instances[c].remaining_frames&&0<a._spritely.instances[c].remaining_frames){a._spritely.instances[c].remaining_frames--; if(0==a._spritely.instances[c].remaining_frames)return a._spritely.instances[c].remaining_frames=-1,delete a._spritely.instances[c].remaining_frames,this;e(d)}else-1!=a._spritely.instances[c].remaining_frames&&e(d)}else if("pan"==b.type&&!a._spritely.instances[c]._stopped){e=b.speed||1;var f=a._spritely.instances[c].l||parseInt(a._spritely.getBgX(d).replace("px",""),10)||0,h=a._spritely.instances[c].t||parseInt(a._spritely.getBgY(d).replace("px",""),10)||0;if(b.do_once&&!a._spritely.instances[c].remaining_frames|| 0>=a._spritely.instances[c].remaining_frames){switch(b.dir){case "up":case "down":a._spritely.instances[c].remaining_frames=Math.floor((b.img_height||0)/e);break;case "left":case "right":a._spritely.instances[c].remaining_frames=Math.floor((b.img_width||0)/e)}a._spritely.instances[c].remaining_frames++}else b.do_once&&a._spritely.instances[c].remaining_frames--;switch(b.dir){case "up":e*=-1;case "down":a._spritely.instances[c].l||(a._spritely.instances[c].l=f);a._spritely.instances[c].t=h+e;b.img_height&& (a._spritely.instances[c].t%=b.img_height);break;case "left":e*=-1;case "right":a._spritely.instances[c].t||(a._spritely.instances[c].t=h),a._spritely.instances[c].l=f+e,b.img_width&&(a._spritely.instances[c].l%=b.img_width)}e=a._spritely.instances[c].l.toString();e=-1==e.indexOf("%")?e+"px ":e+" ";f=a._spritely.instances[c].t.toString();f=-1==f.indexOf("%")?f+"px ":f+" ";a(d).css("background-position",e+f);if(b.do_once&&!a._spritely.instances[c].remaining_frames)return this}a._spritely.instances[c].options= b;a._spritely.instances[c].timeout=window.setTimeout(function(){a._spritely.animate(b)},parseInt(1E3/b.fps))},randomIntBetween:function(a,d){return parseInt(rand_no=Math.floor((d-(a-1))*Math.random())+a)},getBgUseXY:k,getBgY:function(b){return a._spritely.getBgUseXY?a(b).css("background-position-y")||"0":(a(b).css("background-position")||" ").split(" ")[1]},getBgX:function(b){return a._spritely.getBgUseXY?a(b).css("background-position-x")||"0":(a(b).css("background-position")||" ").split(" ")[0]}, get_rel_pos:function(a,d){var b=a;if(0>a)for(;0>b;)b+=d;else for(;b>d;)b-=d;return b},_spStrip:function(a,d){for(;a.length;){var b,g=!1,e=!1;for(b=0;b<d.length;b++){var f=a.slice(0,1);var h=a.slice(1);-1<d.indexOf(f)?a=h:g=!0}for(b=0;b<d.length;b++)f=a.slice(-1),h=a.slice(0,-1),-1<d.indexOf(f)?a=h:e=!0;if(g&&e)return a}return""}};a.fn.extend({spritely:function(b){var d=a(this),c=d.attr("id");b=a.extend({type:"sprite",do_once:!1,width:null,height:null,img_width:0,img_height:0,fps:12,no_of_frames:2, play_frames:0},b||{});var g=new Image,e=a._spritely._spStrip(d.css("background-image")||"",'url("); ');a._spritely.instances[c]||(a._spritely.instances[c]=b.start_at_frame?{current_frame:b.start_at_frame-1}:{current_frame:-1});a._spritely.instances[c].type=b.type;a._spritely.instances[c].depth=b.depth;b.el=d;b.width=b.width||d.width()||100;b.height=b.height||d.height()||100;g.onload=function(){b.img_width=g.width;b.img_height=g.height;b.img=g;b.do_once?setTimeout(function(){a._spritely.animate(b)}, 0):setTimeout(function(){a._spritely.animate(b)},parseInt(1E3/b.fps))};g.src=e;return this},sprite:function(b){b=a.extend({type:"sprite",bounce:[0,0,1E3]},b||{});return a(this).spritely(b)},pan:function(b){b=a.extend({type:"pan",dir:"left",continuous:!0,speed:1},b||{});return a(this).spritely(b)},flyToTap:function(b){b=a.extend({el_to_move:null,type:"moveToTap",ms:1E3,do_once:!0},b||{});b.el_to_move&&a(b.el_to_move).active();a._spritely.activeSprite&&(window.Touch?a(this)[0].ontouchstart=function(b){var c= a._spritely.activeSprite,d=b.touches[0];b=d.pageY-c.height()/2;d=d.pageX-c.width()/2;c.animate({top:b+"px",left:d+"px"},1E3)}:a(this).click(function(b){var c=a._spritely.activeSprite;a(c).stop(!0);var d=c.width(),e=c.height();c.animate({top:b.pageY-e/2+"px",left:b.pageX-d/2+"px"},1E3)}));return this},isDraggable:function(b){if(!a(this).draggable)return this;b=a.extend({type:"isDraggable",start:null,stop:null,drag:null},b||{});var d=a(this).attr("id");if(!a._spritely.instances[d])return this;a._spritely.instances[d].isDraggableOptions= b;a(this).draggable({start:function(){var b=a(this).attr("id");a._spritely.instances[b].stop_random=!0;a(this).stop(!0);a._spritely.instances[b].isDraggableOptions.start&&a._spritely.instances[b].isDraggableOptions.start(this)},drag:b.drag,stop:function(){var b=a(this).attr("id");a._spritely.instances[b].stop_random=!1;a._spritely.instances[b].isDraggableOptions.stop&&a._spritely.instances[b].isDraggableOptions.stop(this)}});return this},active:function(){a._spritely.activeSprite=this;return this}, activeOnClick:function(){var b=a(this);window.Touch?b[0].ontouchstart=function(d){a._spritely.activeSprite=b}:b.click(function(d){a._spritely.activeSprite=b});return this},spRandom:function(b){b=a.extend({top:50,left:50,right:290,bottom:320,speed:4E3,pause:0},b||{});var d=a(this).attr("id");if(!a._spritely.instances[d])return this;if(!a._spritely.instances[d].stop_random){var c=a._spritely.randomIntBetween,g=c(b.top,b.bottom);c=c(b.left,b.right);a("#"+d).animate({top:g+"px",left:c+"px"},b.speed)}window.setTimeout(function(){a("#"+ d).spRandom(b)},b.speed+b.pause);return this},makeAbsolute:function(){return this.each(function(){var b=a(this),d=b.position();b.css({position:"absolute",marginLeft:0,marginTop:0,top:d.top,left:d.left}).remove().appendTo("body")})},spSet:function(b,d){var c=a(this).attr("id");a._spritely.instances[c][b]=d;return this},spGet:function(b,d){var c=a(this).attr("id");return a._spritely.instances[c][b]},spStop:function(b){this.each(function(){var d=a(this),c=d.attr("id");a._spritely.instances[c].options.fps&& (a._spritely.instances[c]._last_fps=a._spritely.instances[c].options.fps);"sprite"==a._spritely.instances[c].type&&d.spSet("fps",0);a._spritely.instances[c]._stopped=!0;if(a._spritely.instances[c]._stopped_f1=b)c=a._spritely.getBgY(a(this)),d.css("background-position","0 "+c)});return this},spStart:function(){a(this).each(function(){var b=a(this).attr("id"),d=a._spritely.instances[b]._last_fps||12;"sprite"==a._spritely.instances[b].type&&a(this).spSet("fps",d);a._spritely.instances[b]._stopped=!1}); return this},spToggle:function(){var b=a(this).attr("id"),d=a._spritely.instances[b]._stopped_f1||!1;a._spritely.instances[b]._stopped?a(this).spStart():a(this).spStop(d);return this},fps:function(b){a(this).each(function(){a(this).spSet("fps",b)});return this},goToFrame:function(b){var d=a(this).attr("id");a._spritely.instances&&a._spritely.instances[d]&&(a._spritely.instances[d].current_frame=b-1);return this},spSpeed:function(b){a(this).each(function(){a(this).spSet("speed",b)});return this},spRelSpeed:function(b){a(this).each(function(){var d= a(this).spGet("depth")/100;a(this).spSet("speed",b*d)});return this},spChangeDir:function(b){a(this).each(function(){a(this).spSet("dir",b)});return this},spState:function(b){a(this).each(function(){var d=(b-1)*a(this).height()+"px";d=a._spritely.getBgX(a(this))+" -"+d;a(this).css("background-position",d)});return this},lockTo:function(b,d){a(this).each(function(){var c=a(this).attr("id");if(!a._spritely.instances[c])return this;a._spritely.instances[c].locked_el=a(this);a._spritely.instances[c].lock_to= a(b);a._spritely.instances[c].lock_to_options=d;a._spritely.instances[c].interval=window.setInterval(function(){if(a._spritely.instances[c].lock_to){var b=a._spritely.instances[c].locked_el,d=a._spritely.instances[c].lock_to,f=a._spritely.instances[c].lock_to_options,h=f.bg_img_width;d.height();var k=a._spritely.getBgY(d);d=a._spritely.getBgX(d);d=parseInt(d)+parseInt(f.left);f=parseInt(k)+parseInt(f.top);d=a._spritely.get_rel_pos(d,h);a(b).css({top:f+"px",left:d+"px"})}},d.interval||20)});return this}, destroy:function(){a(this);var b=a(this).attr("id");a._spritely.instances[b]&&a._spritely.instances[b].timeout&&window.clearTimeout(a._spritely.instances[b].timeout);a._spritely.instances[b]&&a._spritely.instances[b].interval&&window.clearInterval(a._spritely.instances[b].interval);delete a._spritely.instances[b];return this}})})(jQuery);try{document.execCommand("BackgroundImageCache",!1,!0)}catch(a){};

et dans votre CSS

Code:: * { margin: auto; padding: auto; } #stage { top: 0px; left: 0px; z-index: 999; } .stage { position: absolute; top: 0; left: 0; width: 100; min-width: 100px; height: 100%; overflow: hidden; } #balloon { position: absolute; left: 20px; background: transparent url(https://i62.servimg.com/u/f62/11/62/08/54/balloo10.png) 0 0 repeat-y; z-index: 999; }

---------------------------------------------------------------------------------------------------------------------

http://fiddle.jshell.net/adam_sfp/8uy302bd/2/embedded/result/

MASQUES
A coller dans gestion des codes javascript

Code:: $(document).ready(function() { $("body").after('<div id="stage" class="stage"><div id="mask" class="stage"><\/div><\/div>'); /* * Utilisation de Spritely pour des éléments de décoration Carnaval * Using Spritely for Carnival Decorating Elements * Adam Winter 2017 */ $("#mask").pan({fps:20, speed:4.2, dir:"right", depth:40}); }); /* * jQuery spritely 0.6.7 * http://spritely.net/ * * Documentation: * http://spritely.net/documentation/ * * Copyright 2010-2011, Peter Chater, Artlogic Media Ltd, http://www.artlogic.net/ * Dual licensed under the MIT or GPL Version 2 licenses. * */ (function($) { $._spritely = {instances:{}, animate:function(options) { var el = $(options.el); var el_id = el.attr("id"); if (!$._spritely.instances[el_id]) { return this; } options = $.extend(options, $._spritely.instances[el_id] || {}); if (options.type == "sprite" && options.fps) { if (options.play_frames && !$._spritely.instances[el_id]["remaining_frames"]) { $._spritely.instances[el_id]["remaining_frames"] = options.play_frames + 1; } else { if (options.do_once && !$._spritely.instances[el_id]["remaining_frames"]) { $._spritely.instances[el_id]["remaining_frames"] = options.no_of_frames; } } 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 ($._spritely.instances[el_id]["current_frame"] == 0) { if (options.on_first_frame) { options.on_first_frame(el); } } else { if ($._spritely.instances[el_id]["current_frame"] == frames.length - 1) { if (options.on_last_frame) { options.on_last_frame(el); } } } if (options.on_frame && options.on_frame[$._spritely.instances[el_id]["current_frame"]]) { options.on_frame[$._spritely.instances[el_id]["current_frame"]](el); } 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]; var lr = options.bounce[1]; var ms = options.bounce[2]; 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 this; } 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"]) { var speed = options.speed || 1, start_x = $._spritely.instances[el_id]["l"] || parseInt($._spritely.getBgX(el).replace("px", ""), 10) || 0, start_y = $._spritely.instances[el_id]["t"] || parseInt($._spritely.getBgY(el).replace("px", ""), 10) || 0; if (options.do_once && !$._spritely.instances[el_id].remaining_frames || $._spritely.instances[el_id].remaining_frames <= 0) { switch(options.dir) { case "up": case "down": $._spritely.instances[el_id].remaining_frames = Math.floor((options.img_height || 0) / speed); break; case "left": case "right": $._spritely.instances[el_id].remaining_frames = Math.floor((options.img_width || 0) / speed); break; } $._spritely.instances[el_id].remaining_frames++; } else { if (options.do_once) { $._spritely.instances[el_id].remaining_frames--; } } switch(options.dir) { case "up": speed *= -1; case "down": if (!$._spritely.instances[el_id]["l"]) { $._spritely.instances[el_id]["l"] = start_x; } $._spritely.instances[el_id]["t"] = start_y + speed; if (options.img_height) { $._spritely.instances[el_id]["t"] %= options.img_height; } break; case "left": speed *= -1; case "right": if (!$._spritely.instances[el_id]["t"]) { $._spritely.instances[el_id]["t"] = start_y; } $._spritely.instances[el_id]["l"] = start_x + speed; if (options.img_width) { $._spritely.instances[el_id]["l"] %= options.img_width; } break; } 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); if (options.do_once && !$._spritely.instances[el_id].remaining_frames) { return this; } } } } $._spritely.instances[el_id]["options"] = options; $._spritely.instances[el_id]["timeout"] = 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); }, getBgUseXY:function() { try { return typeof $("body").css("background-position-x") == "string"; } catch (e) { return false; } }(), getBgY:function(el) { if ($._spritely.getBgUseXY) { return $(el).css("background-position-y") || "0"; } else { return ($(el).css("background-position") || " ").split(" ")[1]; } }, getBgX:function(el) { if ($._spritely.getBgUseXY) { return $(el).css("background-position-x") || "0"; } else { return ($(el).css("background-position") || " ").split(" ")[0]; } }, get_rel_pos:function(pos, w) { var r = pos; if (pos < 0) { while (r < 0) { r += w; } } else { while (r > w) { r -= w; } } return r; }, _spStrip:function(s, chars) { while (s.length) { var i, sr, nos = false, noe = false; for (i = 0; i < chars.length; i++) { var ss = s.slice(0, 1); sr = s.slice(1); if (chars.indexOf(ss) > -1) { s = sr; } else { nos = true; } } for (i = 0; i < chars.length; i++) { var se = s.slice(-1); sr = s.slice(0, -1); if (chars.indexOf(se) > -1) { s = sr; } else { noe = true; } } if (nos && noe) { return s; } } return ""; }}; $.fn.extend({spritely:function(options) { var $this = $(this), el_id = $this.attr("id"), options = $.extend({type:"sprite", do_once:false, width:null, height:null, img_width:0, img_height:0, fps:12, no_of_frames:2, play_frames:0}, options || {}), background_image = new Image, background_image_src = $._spritely._spStrip($this.css("background-image") || "", 'url("); '); if (!$._spritely.instances[el_id]) { if (options.start_at_frame) { $._spritely.instances[el_id] = {current_frame:options.start_at_frame - 1}; } else { $._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; background_image.onload = function() { options.img_width = background_image.width; options.img_height = background_image.height; options.img = background_image; var get_rate = function() { return parseInt(1000 / options.fps); }; if (!options.do_once) { setTimeout(function() { $._spritely.animate(options); }, get_rate(options.fps)); } else { setTimeout(function() { $._spritely.animate(options); }, 0); } }; background_image.src = background_image_src; return this; }, sprite:function(options) { var options = $.extend({type:"sprite", bounce:[0, 0, 1000]}, options || {}); return $(this).spritely(options); }, pan:function(options) { var options = $.extend({type:"pan", dir:"left", continuous:true, speed:1}, options || {}); return $(this).spritely(options); }, flyToTap:function(options) { var options = $.extend({el_to_move:null, type:"moveToTap", ms:1000, do_once:true}, options || {}); if (options.el_to_move) { $(options.el_to_move).active(); } if ($._spritely.activeSprite) { if (window.Touch) { $(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:function(options) { if (!$(this).draggable) { return this; } var options = $.extend({type:"isDraggable", start:null, stop:null, drag:null}, options || {}); var el_id = $(this).attr("id"); if (!$._spritely.instances[el_id]) { return this; } $._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() { $._spritely.activeSprite = this; return this; }, activeOnClick:function() { var el = $(this); if (window.Touch) { 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]) { return this; } 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() { 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 $this = $(this), el_id = $this.attr("id"); if ($._spritely.instances[el_id]["options"]["fps"]) { $._spritely.instances[el_id]["_last_fps"] = $._spritely.instances[el_id]["options"]["fps"]; } if ($._spritely.instances[el_id]["type"] == "sprite") { $this.spSet("fps", 0); } $._spritely.instances[el_id]["_stopped"] = true; $._spritely.instances[el_id]["_stopped_f1"] = bool; if (bool) { 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; if ($._spritely.instances[el_id]["type"] == "sprite") { $(this).spSet("fps", fps); } $._spritely.instances[el_id]["_stopped"] = false; }); 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; }, goToFrame:function(n) { var el_id = $(this).attr("id"); if ($._spritely.instances && $._spritely.instances[el_id]) { $._spritely.instances[el_id]["current_frame"] = n - 1; } 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() { 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"); if (!$._spritely.instances[el_id]) { return this; } $._spritely.instances[el_id]["locked_el"] = $(this); $._spritely.instances[el_id]["lock_to"] = $(el); $._spritely.instances[el_id]["lock_to_options"] = options; $._spritely.instances[el_id]["interval"] = 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; }, destroy:function() { var el = $(this); var el_id = $(this).attr("id"); if ($._spritely.instances[el_id] && $._spritely.instances[el_id]["timeout"]) { window.clearTimeout($._spritely.instances[el_id]["timeout"]); } if ($._spritely.instances[el_id] && $._spritely.instances[el_id]["interval"]) { window.clearInterval($._spritely.instances[el_id]["interval"]); } delete $._spritely.instances[el_id]; return this; }}); })(jQuery); try { document.execCommand("BackgroundImageCache", false, true); } catch (err) { } ;

et dans le CSS

Code:: /*************************** Start Garland ***************************/ .stage { position: absolute; top: 0; left: 0; width: 100%; min-width: 900px; height: 200px; overflow: hidden; } #mask { background: transparent url(https://i62.servimg.com/u/f62/11/62/08/54/garlan10.png) 0 0px repeat-x; z-index: 48; } /*************************** End Garland ***************************/

*Vous pouvez facilement remplacer les images par les vôtres dans le css
-----------------------------------------------------------------------------------------------------------------

par Adam_sfp Lun 29 Jan 2018 - 9:27

Confettis ( peut être des bugs d'affichages selon le navigateur)
http://fiddle.jshell.net/adam_sfp/48dywm3r/embedded/result/

A coller dans gestion des codes javascript

Code:: $(document).ready(function() { //by Markus Tran var onlyOnKonami = false; $(function() { var $window = $(window), random = Math.random, cos = Math.cos, sin = Math.sin, PI = Math.PI, PI2 = PI * 2, timer = undefined, frame = undefined, confetti = []; var konami = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65], pointer = 0; var particles = 150, spread = 40, sizeMin = 3, sizeMax = 12 - sizeMin, eccentricity = 10, deviation = 100, dxThetaMin = -.1, dxThetaMax = -dxThetaMin - dxThetaMin, dyMin = .13, dyMax = .18, dThetaMin = .4, dThetaMax = .7 - dThetaMin; var colorThemes = [function() { return color(200 * random() | 0, 200 * random() | 0, 200 * random() | 0); }, function() { var black = 200 * random() | 0; return color(200, black, black); }, function() { var black = 200 * random() | 0; return color(black, 200, black); }, function() { var black = 200 * random() | 0; return color(black, black, 200); }, function() { return color(200, 100, 200 * random() | 0); }, function() { return color(200 * random() | 0, 200, 200); }, function() { var black = 256 * random() | 0; return color(black, black, black); }, function() { return colorThemes[random() < .5 ? 1 : 2](); }, function() { return colorThemes[random() < .5 ? 3 : 5](); }, function() { return colorThemes[random() < .5 ? 2 : 4](); }]; function color(r, g, b) { return "rgb(" + r + "," + g + "," + b + ")"; } function interpolation(a, b, t) { return (1 - cos(PI * t)) / 2 * (b - a) + a; } var radius = 1 / eccentricity, radius2 = radius + radius; function createPoisson() { var domain = [radius, 1 - radius], measure = 1 - radius2, spline = [0, 1]; while (measure) { var dart = measure * random(), i, l, interval, a, b, c, d; for (i = 0, l = domain.length, measure = 0; i < l; i += 2) { a = domain[i], b = domain[i + 1], interval = b - a; if (dart < measure + interval) { spline.push(dart += a - measure); break; } measure += interval; } c = dart - radius, d = dart + radius; for (i = domain.length - 1; i > 0; i -= 2) { l = i - 1, a = domain[l], b = domain[i]; if (a >= c && a < d) { if (b > d) { domain[l] = d; } else { domain.splice(l, 2); } } else { if (a < c && b > c) { if (b <= d) { domain[i] = c; } else { domain.splice(i, 0, c, d); } } } } for (i = 0, l = domain.length, measure = 0; i < l; i += 2) { measure += domain[i + 1] - domain[i]; } } return spline.sort(); } var container = document.createElement("div"); container.style.position = "fixed"; container.style.top = "0"; container.style.left = "0"; container.style.width = "100%"; container.style.height = "0"; container.style.overflow = "visible"; container.style.zIndex = "9999"; function Confetto(theme) { this.frame = 0; this.outer = document.createElement("div"); this.inner = document.createElement("div"); this.outer.appendChild(this.inner); var outerStyle = this.outer.style, innerStyle = this.inner.style; outerStyle.position = "absolute"; outerStyle.width = sizeMin + sizeMax * random() + "px"; outerStyle.height = sizeMin + sizeMax * random() + "px"; innerStyle.width = "100%"; innerStyle.height = "100%"; innerStyle.backgroundColor = theme(); outerStyle.perspective = "50px"; outerStyle.transform = "rotate(" + 360 * random() + "deg)"; this.axis = "rotate3D(" + cos(360 * random()) + "," + cos(360 * random()) + ",0,"; this.theta = 360 * random(); this.dTheta = dThetaMin + dThetaMax * random(); innerStyle.transform = this.axis + this.theta + "deg)"; this.x = $window.width() * random(); this.y = -deviation; this.dx = sin(dxThetaMin + dxThetaMax * random()); this.dy = dyMin + dyMax * random(); outerStyle.left = this.x + "px"; outerStyle.top = this.y + "px"; this.splineX = createPoisson(); this.splineY = []; for (var i = 1, l = this.splineX.length - 1; i < l; ++i) { this.splineY[i] = deviation * random(); } this.splineY[0] = this.splineY[l] = deviation * random(); this.update = function(height, delta) { this.frame += delta; this.x += this.dx * delta; this.y += this.dy * delta; this.theta += this.dTheta * delta; var phi = this.frame % 7777 / 7777, i = 0, j = 1; while (phi >= this.splineX[j]) { i = j++; } var rho = interpolation(this.splineY[i], this.splineY[j], (phi - this.splineX[i]) / (this.splineX[j] - this.splineX[i])); phi *= PI2; outerStyle.left = this.x + rho * cos(phi) + "px"; outerStyle.top = this.y + rho * sin(phi) + "px"; innerStyle.transform = this.axis + this.theta + "deg)"; return this.y > height + deviation; }; } function poof() { if (!frame) { document.body.appendChild(container); var theme = colorThemes[onlyOnKonami ? colorThemes.length * random() | 0 : 0], count = 0; (function addConfetto() { if (onlyOnKonami && ++count > particles) { return timer = undefined; } var confetto = new Confetto(theme); confetti.push(confetto); container.appendChild(confetto.outer); timer = setTimeout(addConfetto, spread * random()); })(0); var prev = undefined; requestAnimationFrame(function loop(timestamp) { var delta = prev ? timestamp - prev : 0; prev = timestamp; var height = $window.height(); for (var i = confetti.length - 1; i >= 0; --i) { if (confetti[i].update(height, delta)) { container.removeChild(confetti[i].outer); confetti.splice(i, 1); } } if (timer || confetti.length) { return frame = requestAnimationFrame(loop); } document.body.removeChild(container); frame = undefined; }); } } $window.keydown(function(event) { pointer = konami[pointer] === event.which ? pointer + 1 : +(event.which === konami[0]); if (pointer === konami.length) { pointer = 0; poof(); } }); if (!onlyOnKonami) { poof(); } }); });

Cdt

par cri53 Lun 29 Jan 2018 - 10:40

Bonjour , un grand merci pour les confettis il fonctionne super bien
par conte les ballons ne fonctionne pas n'y les masques
pour les code CSS se trouve ou dans les couleurs ?
je n'es pas regarde de se cote la

par Neptunia Lun 29 Jan 2018 - 10:45

Pour accompagner les scripts d'Adam_sfp, voici quelques curseurs tirés du site Gifs et compagnie

Curseurs personnalisés

Panneau d'administration  Affichage  Images et couleurs  Couleurs  Onglet Feuille de style CSS

	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday01.cur"), default; }`
	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday02.cur"), default; }`
	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday03.cur"), default; }`
	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday04.cur"), default; }`
	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday05.cur"), default; }`
	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday06.cur"), default; }`
	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday07.cur"), default; }`
	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday08.cur"), default; }`
	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday09.cur"), default; }`
	Code: `body { cursor:url("https://www.badwholf.uk/rsc/cur/pancakeday10.cur"), default; }`