Décorations de Nouvel An
+3
Adam_sfp
laroute
Annie.R
7 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Décorations de Nouvel An
Bonjour et joyeuses fêtes à tous.
Il nous a été proposé quelques décorations de Noël mais elle font très Noël et... le Père Noël est passé !
Naguère, au temps béni ou flash régnait encore, nous avions un magnifique compteur à remonter le temps jusqu'au 1er janvier et quelques autres animations festives.
Désormais, seule la 1ère guirlande, avec ses lampions multicolores, fait un peu plus Nouvel An.
Est-il possible de trouver quelque part d'autres petites décorations moins ciblées Noël et plus Nouvel An ?
Merci
Il nous a été proposé quelques décorations de Noël mais elle font très Noël et... le Père Noël est passé !
Naguère, au temps béni ou flash régnait encore, nous avions un magnifique compteur à remonter le temps jusqu'au 1er janvier et quelques autres animations festives.
Désormais, seule la 1ère guirlande, avec ses lampions multicolores, fait un peu plus Nouvel An.
Est-il possible de trouver quelque part d'autres petites décorations moins ciblées Noël et plus Nouvel An ?
Merci
Re: Décorations de Nouvel An
apres des recherches sur le forum je n'ai rien trouvé c'est une bonne idée a voir aussi pour paques , les vacances etc
Re: Décorations de Nouvel An
Bonsoir
J'ai pas trop fait de cadeaux cette année ;-)
Un code qui utilise le même principe que les animations parcourant l'écran d' Halloween.
Bougies 2019 ' toutes versions sauf awesomeBB '
*Vous pouvez changer les valeurs dans la partie annotée pour placer les bougies selon vos envies...
Partie à mettre dans gestion des codes javascript
Partie à mettre dans le CSS
*Je dois avoir un code de compte à rebours qui traîne quelque part, si je remet la main dessus je le rajouterai..
et bonne année
J'ai pas trop fait de cadeaux cette année ;-)
Un code qui utilise le même principe que les animations parcourant l'écran d' Halloween.
Bougies 2019 ' toutes versions sauf awesomeBB '
*Vous pouvez changer les valeurs dans la partie annotée pour placer les bougies selon vos envies...
Partie à mettre dans gestion des codes javascript
- Code:
/*
* Utilisation de Spritely pour des éléments de décoration Nouvel an
* Using Spritely for New years Decorating Elements
* Adam Winter 2018
*/
(function($) {
$(document).ready(function() {
$("body").after('<div id="candle"></div><div id="candle1"></div><div id="candle2"></div><div id="candle3"></div>');
$("#candle").sprite({fps:10, no_of_frames:14}) //Ne Pas Changer
.animate({opacity:'0.9'}, 5000) // ici vous pouvez changer l'opacité
.spRandom({
top:50, // Ici La distance de déplacement par rapport au Haut
bottom:370, // Ici La distance de déplacement par rapport au Bas
left:40, // Ici La distance de déplacement par rapport au coté gauche
right:80, // Ici La distance de déplacement par rapport au coté droit
speed:6000, // Ici la vitesse diminuez la valeur pour augmenter la vitesse
pause:1000 // le temps de pause
}).isDraggable().activeOnClick().active();
$("#candle1").sprite({fps:14, no_of_frames:14}) //Ne Pas Changer
.animate({opacity:'0.9'}, 5000) // ici vous pouvez changer l'opacité
.spRandom({
top:240, // Ici La distance de déplacement par rapport au Haut
bottom:450, // Ici La distance de déplacement par rapport au Bas
left:10, // Ici La distance de déplacement par rapport au coté gauche
right:80, // Ici La distance de déplacement par rapport au coté droit
speed:5000, // Ici la vitesse diminuez la valeur pour augmenter la vitesse
pause:3000 // le temps de pause
}).isDraggable().activeOnClick().active();
$("#candle2").sprite({fps:10, no_of_frames:14}) //Ne Pas Changer
.animate({opacity:'0.9'}, 5000) // ici vous pouvez changer l'opacité
.spRandom({
top:350, // Ici La distance de déplacement par rapport au Haut
bottom:590, // Ici La distance de déplacement par rapport au Bas
left:20, // Ici La distance de déplacement par rapport au coté gauche
right:80, // Ici La distance de déplacement par rapport au coté droit
speed:3000, // Ici la vitesse diminuez la valeur pour augmenter la vitesse
pause:2000 // le temps de pause
}).isDraggable().activeOnClick().active();
$("#candle3").sprite({fps:16, no_of_frames:14}) //Ne Pas Changer
.animate({opacity:'0.9'}, 5000) // ici vous pouvez changer l'opacité
.spRandom({
top:50, // Ici La distance de déplacement par rapport au Haut
bottom:790, // Ici La distance de déplacement par rapport au Bas
left:10, // Ici La distance de déplacement par rapport au coté gauche
right:80, // Ici La distance de déplacement par rapport au coté droit
speed:6000, // Ici la vitesse diminuez la valeur pour augmenter la vitesse
pause:5000 // le temps de pause
}).isDraggable().activeOnClick().active();
$('body').flyToTap();
});
})(jQuery);
/*
* 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) {
}
;
Partie à mettre dans le CSS
- Code:
/*START CANDLE BOUGIE */
#candle {
background: transparent url(https://i.servimg.com/u/f45/11/62/08/54/1110.png) 0 0 no-repeat;
position: absolute;
top: 20px;
left: 15px;
width: 60px;
height: 170px;
z-index: 18;
cursor: pointer;
}
#candle1 {
background: transparent url(https://i.servimg.com/u/f45/11/62/08/54/2210.png) 0 0 no-repeat;
position: absolute;
top: 20px;
right: 15px;
width: 60px;
height: 160px;
z-index: 19;
cursor: pointer;
}
#candle2 {
background: transparent url(https://i.servimg.com/u/f45/11/62/08/54/3310.png) 0 0 no-repeat;
position: absolute;
top: 10px;
left: 250px;
width: 45px;
height: 120px;
z-index: 28;
cursor: pointer;
}
#candle3 {
background: transparent url(https://i.servimg.com/u/f45/11/62/08/54/44410.png) 0 0 no-repeat;
position: absolute;
top: 10px;
left: 750px;
width: 45px;
height: 120px;
z-index: 38;
cursor: pointer;
}
/*END CANDLE BOUGIE */
*Je dois avoir un code de compte à rebours qui traîne quelque part, si je remet la main dessus je le rajouterai..
et bonne année
Re: Décorations de Nouvel An
Hi Adam,
Cool mais il manque le 2 dans cette animation
Cool mais il manque le 2 dans cette animation
Re: Décorations de Nouvel An
Merci Adam, mais je ne m'y connais pas assez pour mettre les variables comme il faut dans les mentions " Ici La distance de ..."
Mais cela servira à ceux qui savent
Et si tu retrouves ton compteur... (j'avais bien aimé celui sous flash)
Mais cela servira à ceux qui savent
Et si tu retrouves ton compteur... (j'avais bien aimé celui sous flash)
Re: Décorations de Nouvel An
Annie, l'astuce est opérationnelle sans besoin d'y faire des modifs, c'est un plus
Re: Décorations de Nouvel An
Oops j'ai rien dit... en actualisant la page tout est OK !*Splash* a écrit:Hi Adam,
Cool mais il manque le 2 dans cette animation
Re: Décorations de Nouvel An
Ah ok, merci Splash*Splash* a écrit:Annie, l'astuce est opérationnelle sans besoin d'y faire des modifs, c'est un plus
Re: Décorations de Nouvel An
C'est sympa comme tout, ces petites bougies en mouvement.
Que dois-je modifier pour les placer à droite du forum et non à gauche ?
Que dois-je modifier pour les placer à droite du forum et non à gauche ?
Re: Décorations de Nouvel An
Annie.R a écrit:C'est sympa comme tout, ces petites bougies en mouvement.
Que dois-je modifier pour les placer à droite du forum et non à gauche ?
Bonsoir Annie
Il faut modifier cette partie
- Code:
.spRandom({
top:50, // Ici La distance de déplacement par rapport au Haut
bottom:370, // Ici La distance de déplacement par rapport au Bas
left:40, // Ici La distance de déplacement par rapport au coté gauche
right:80, // Ici La distance de déplacement par rapport au coté droit
si par exemple je met
- Code:
top:50, // Ici La distance de déplacement par rapport au Haut
bottom:55, // Ici La distance de déplacement par rapport au Bas
left:5, // Ici La distance de déplacement par rapport au coté gauche
right:50,
Pour mieux comprendre regarder ce Fiddle
*vous pouvez d'ailleurs faire des modifs sur ce fiddle et cliquer sur run pour voir le résultat.
Sinon voici une autre petite animation ( A droite par défaut ;-) )
Vous pouvez bien sur modifier le texte pour mettre le votre la taille etc...
A mettre en page d'accueil
- Code:
<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet" />
<div class="container">
<div class="ny">
<div class="txt">
HAPPY
<div>
NEW YEAR
</div>
2019
</div>
</div>
</div>
<style type="text/css">
.container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.ny {
text-align: center;
color: #000;
position: fixed;
top: 150px;
right:40px;
transform: translateY(-50%);
}
.ny .txt {
font-family: 'Monoton', cursive;
perspective: 100px;
font-size: 3rem;
color: #fffbdd;
line-height: 1;
animation: animate 3s linear infinite;
}
@keyframes animate {
0%,100% {
transform: rotate(15deg);
text-shadow: 1px 1px 0 #f10c72, 2px 2px 0 #f10c72, 3px 3px 0 #f10c72, 4px 4px 0 #f10c72, 5px 5px 0 #f10c72, 6px 6px 0 #f10c72, 7px 7px 0 #f10c72, 8px 8px 0 #f10c72, 9px 9px 0 #f10c72, 10px 10px 0 #f10c72;
}
25% {
text-shadow: 1px -1px 0 #f10c72, 2px -2px 0 #f10c72, 3px -3px 0 #f10c72, 4px -4px 0 #f10c72, 5px -5px 0 #f10c72, 6px -6px 0 #f10c72, 7px -7px 0 #f10c72, 8px -8px 0 #f10c72, 9px -9px 0 #f10c72, 10px -10px 0 #f10c72;
}
50% {
text-shadow: -1px -1px 0 #f10c72, -2px -2px 0 #f10c72, -3px -3px 0 #f10c72, -4px -4px 0 #f10c72, -5px -5px 0 #f10c72, -6px -6px 0 #f10c72, -7px -7px 0 #f10c72, -8px -8px 0 #f10c72, -9px -9px 0 #f10c72, -10px -10px 0 #f10c72;
}
75% {
transform: rotate(-15deg);
text-shadow: -1px 1px 0 #f10c72, -2px 2px 0 #f10c72, -3px 3px 0 #f10c72, -4px 4px 0 #f10c72, -5px 5px 0 #f10c72, -6px 6px 0 #f10c72, -7px 7px 0 #f10c72, -8px 8px 0 #f10c72, -9px 9px 0 #f10c72, -10px 10px 0 #f10c72;
}
}
</style>
fiddle
Cdt.
Re: Décorations de Nouvel An
Merci pour ces explications Adam, je crois que j'ai compris
En revanche, j'ai essayé l'anim happy new year à mettre en page d'accueil et je ne vois rien.
En revanche, j'ai essayé l'anim happy new year à mettre en page d'accueil et je ne vois rien.
Re: Décorations de Nouvel An
Bonjour,Annie.R a écrit:Merci pour ces explications Adam, je crois que j'ai compris
En revanche, j'ai essayé l'anim happy new year à mettre en page d'accueil et je ne vois rien.
je l'ai placé dans affichage >> généralités
ça fonctionne super mais je n'ai plus aucun lien qui fonctionne pour naviguer sur le forum
(sauf la toolbar) donc je l'ai retiré
j'en profite pour dire merci à @Adam_sfp qui a de supers codes d'animation
Bonne Année !
Re: Décorations de Nouvel An
Coucou ^^
Je viens de le mettre sur mon fofo !
J'ai juste remplacé le bloc de css suivant :
par :
dm61 a écrit:je l'ai placé dans affichage >> généralités
ça fonctionne super mais je n'ai plus aucun lien qui fonctionne pour naviguer sur le forum
(sauf la toolbar) donc je l'ai retiré
Je viens de le mettre sur mon fofo !
J'ai juste remplacé le bloc de css suivant :
- Code:
.container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
par :
- Code:
.container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
}
Re: Décorations de Nouvel An
Bonjour Neptunia,
je viens d'essayer mais ça se place derrière le forum et on voit rien sauf en diminuant la largeur du forum,
c'est pas terrible
merci quand même
je viens d'essayer mais ça se place derrière le forum et on voit rien sauf en diminuant la largeur du forum,
c'est pas terrible
merci quand même
Re: Décorations de Nouvel An
dm61 a écrit:je viens d'essayer mais ça se place derrière le forum et on voit rien sauf en diminuant la largeur du forum,
Essaies dans le bloc de css suivant :
- Code:
.ny .txt {
font-family: 'Monoton', cursive;
perspective: 100px;
font-size: 3rem;
color: #fffbdd;
line-height: 1;
animation: animate 3s linear infinite;
}
de passer le font-size à 1.5rem ou à 25px
Re: Décorations de Nouvel An
re-bonsoir,
j'ai mis 18px et du coup c'est moins caché même si c'est écrit petit
je me demandais si c'était possible de rendre l'encadré blanc transparent ? (à coté du logo)
je suppose que c'est le header mais même sans couleur c'est blanc, si on pouvait voir à travers, l'illustration serait plus visible
édit : c'est quand même pas mal, merci de votre aide et de votre temps
j'ai mis 18px et du coup c'est moins caché même si c'est écrit petit
je me demandais si c'était possible de rendre l'encadré blanc transparent ? (à coté du logo)
je suppose que c'est le header mais même sans couleur c'est blanc, si on pouvait voir à travers, l'illustration serait plus visible
édit : c'est quand même pas mal, merci de votre aide et de votre temps
Re: Décorations de Nouvel An
Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées. |
Sujets similaires
» Faire des décorations été ?
» Décorations de Noël
» Décorations de Noël
» Halloween Décorations.
» Décorations Halloween
» Décorations de Noël
» Décorations de Noël
» Halloween Décorations.
» Décorations Halloween
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum