[VOTES] Anniversaire - Décoration de fête - Nihil gagnante !

(imaginez une musique et une voix épiques) : Le 10 juin, pour l'anniversaire du forum, une quête a été lancée. Tels en étaient les termes : "Quelle est votre solution en tant que Valérie Damidot du codage (je sais, Valérie casse un peu le côté épique) pour créer une petite touche festive sur le design de votre forum et marquer son anniversaire ? L'idée est de ne pas obliger un forum à changer son design mais d'ajouter quelque chose par-dessus.

Quatre vaillants Architectes ont relevé le défi, s'armant de HTML, CSS, javascript et autres joyeusetés pour combattre la structure - en tableaux (sacrilège !) - de Forumactif  pour vous proposer des habits de fête. Je viens aujourd'hui vous présenter les résultats et vous demande d'élire votre champion !
Je laisse les votes ouverts pendant 15 jours pour cela. N'oubliez pas de poster pour expliquer votre choix :)

(roulements de tambours épiques)



Démonstration : http://forum-test-5.forum-canada.com/
Explications : Jeu spécial anniversaire où il y a un nombre X d'images à trouver pendant la semaine ou la journée de l'anniversaire. On peut augmenter la difficulté en augmentant le nombre d'images et le nombre de "calculimg" qui est un générateur aléatoire. Plus on augmente le chiffre du générateur, moins il y a de chances que les images apparaîssent. Semblable à la chasse au trésor de NU, sauf qu'il faut prendre des screens des images qu'on trouve si on y arrive (infos complémentaires dans le code)

Code :

Code:

$(function(){
  
/*Jeu spécial anniversaire où il y a un nombre X d'images à trouver pendant la semaine ou la journée de l'anniversaire. On peut augmenter la difficulté en augmentant le nombre d'images et le nombre de "calculimg" qui est un générateur aléatoire. Plus on augmente le chiffre du générateur, moins il y a de chances que les images apparaîssent. Semblable à la chasse au trésor de NU, sauf qu'il faut prendre des screens des images qu'on trouve si on y arrive.*/

  /*Liste images du jeu, incluant des images vides*/
  var imganniv = [
  'http://img11.hostingpics.net/pics/797735031.png',
  'http://img11.hostingpics.net/pics/327159Ballons.png',
  'http://img11.hostingpics.net/pics/442256Ballons2.png',
  'http://img11.hostingpics.net/pics/208151bf517637.png',
  'http://img11.hostingpics.net/pics/218774Elsword03.png',
  'http://img11.hostingpics.net/pics/538514Gateau.png'
  ];

  /*Un chiffre random pour savoir quellle image mettre et les chances d'avoir un cadeau*/
  /*On a 6 images alors 6 va permettre de avoir une image à chaque tout*/
  /*Plus on met un chiffre plus grand que le nombre d'images, moins les images apparaîssent souvent*/
  var calculimg = Math.floor(Math.random() * 6);

  if (calculimg <= imganniv.length) {

    /*Image random*/
    var imgrandom = imganniv[calculimg];

    /*Un chiffre random entre 0 et 1 pour savoir la position sur le côté*/
    var calculcote = Math.floor(Math.random() * 2);
    /*On décide à droite ou à gauche*/
    if (calculcote < 1) {
      var coteimg = "left";
      var coteimg2 = "right";
    }
    else {
      var coteimg = "right";
      var coteimg2 = "left";
    }

    /*Un chiffre random entre 0 et 1 pour savoir la position en haut ou en bas*/
    var calculhautbas = Math.floor(Math.random() * 2);
    /*On décide en haut ou en bas*/
    if (calculhautbas < 1) {
      var hautbasimg = "bottom";
      var hautbasimg2 = "top";
    }
    else {
      var hautbasimg = "top";
      var hautbasimg2 = "bottom";
    }

    /*On crée le bloc surprise*/
    var imagesurprise = "<div class='annivsuprisebloc'><img class='imgannivsurprise' src='" + imgrandom + "' alt='Image anniversaire' /></div>";

    /*On ajoute le bloc surprise*/
    $('body').prepend(imagesurprise);

    /*On met du CSS a notre bloc suprise*/
    $('.annivsuprisebloc').css('width', '200px').css('height', '200px').css('position', 'fixed').css(coteimg, '-50px').css(hautbasimg, '-50px').css('background', '#FFF143').css('border-radius', '100px').css('text-align', 'right').css('box-shadow', '2px 2px 2px #FFD100, -2px -2px 2px #FFD100, 2px -2px 2px #FFD100, -2px 2px 2px #FFD100');

    /*On met du CSS a notre image suprise*/
    $('.imgannivsurprise').css('display', 'inline-block').css('position', 'absolute').css(coteimg2, '25px').css(hautbasimg2, '25px').css('width', '123px').css('height', '123px');

  }
});

Démonstration : http://testblake.forumactif.com/
Explications : Une "bulle" pouvant contenir des gifs et textes s'alternant (des gifs trop cools puis le lien indispensable vers le topic d'anniversaire puis des statistiques/souvenir puis... puis ça recommence )

Code :

A mettre dans la PA du forum :

Code:

<div class="bulle-anniv">
  <div class="bulle-cercle" style="background-image: url('http://media.tumblr.com/tumblr_m7mw7iyHXq1qetjq3.gif');" ></div>
  <div class="bulle-cercle" style="background-image: url('https://media.giphy.com/media/IQF90tVlBIByw/giphy.gif');" ></div>
  <div class="bulle-cercle" style="background: #69D2E7">
    <div class="text-center"><span class="bulle-chiffre">3</span> ans</div>
  </div>
  <div class="bulle-cercle" style="background: #BD1550" >
    <div class="text-center"><span class="bulle-chiffre">271</span> membres qui déchirent tout !</div>
  </div>
  <div class="bulle-cercle" style="background: #A0E8B7">
    <div class="text-center"><span class="bulle-chiffre">2972</span> fous rires (précisément)</div>
  </div>
  <div class="bulle-hover" style="background: #FA6900">
    <div class="text-center"><a href="http://www.never-utopia.com/t60430-10-juin-2016-9-ans#918725" target="_blank">Never Utopia fête son anniversaire ! <br>Lire le sujet !</a></div>
  </div>
</div>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC" rel="stylesheet">


A mettre dans le CSS du forum :

Code:

.bulle-anniv {
  width: 150px;
  height: 150px;
  background-image: url("http://i.imgur.com/F6CD8aM.png");
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  font-family: 'Playfair Display SC', serif;
  color: white;
  font-size: 12px;
  position: fixed;
  /*top: 50%;
  transform: translateY(-50%);*/
  bottom: 50px; /* version en bas */
  left: 40px;
  z-index: 999;
}

.bulle-chiffre {
  font-size: 4em;
  display: block;
  white-space: nowrap;
  line-height: 1.2;
  margin-top: -15px;
}

.bulle-hover,
.bulle-cercle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  height: 80%;
  margin: auto;
  border-radius: 50%;
  background: #FA6900;
  background-size: cover;
  background-position: center;
  transform: scale(0.3); opacity: 0;
  transition: all 300ms cubic-bezier(1, -0.29, .64, 1.43);
}

.bulle-cercle.bulle-show {
  transform: scale(1);
  opacity: 1;
  transition: all 300ms cubic-bezier(.25, .1, .43, 1.39);
}
.bulle-anniv:hover .bulle-hover {
  transform: scale(1.05);
  opacity: 1;
  transition: all 300ms cubic-bezier(.25, .1, .43, 1.39);
}

.text-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 80%;
}

.bulle-anniv a {
  color: white;
  text-decoration: none;
}


A mettre dans le JS du forum, seulement sur l'index :

Code:

$(function(){
  var fullHeight = $(document).height();
  var nbBulles = $(".bulle-cercle").length + 1;
  var $body = $("body");
  var partiesHeight = fullHeight / nbBulles;
  var classeBulle = "bulle-show";
  var $bulles = $(".bulle-cercle");
  $bulles.first().addClass(classeBulle);
  var activeBulle = 1;
  $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      for (var i = 1; i <= nbBulles; i++) {
        if (scroll < i * partiesHeight) {
          if (i != activeBulle) {
            $(".bulle-cercle").removeClass(classeBulle).eq(i-1).addClass(classeBulle);
            activeBulle = i;
          }
          return
        }
      }
  });
})

Démonstration : http://testsconcours.forumgratuit.fr/
Explications : Un encart sur fond d'une image criant "ANNIVERSAIRE EN COURS" permettant de faire défiler un message spécial anniversaire

Code :

CSS :

Code:

/* Bloc anniversaire */

.bloc_onglet{
  
  width:195px;
  position: fixed;
  top: 120px;
  left: 85px;
  transform:rotate(-10deg);
}



/* Bandeau texte déroulante */

.bandeau_der{
  background-color: #fbdb8e;
  height: 35px;
}

.bandeau_der p{
  color:#726715;
  position:relative;
  bottom: 7px;
}

.bandeau_der img{
  width:73px;
  position: absolute;
  left: -46px;
  bottom: -52px;
  transform: rotate(-23deg);
}
  
/* Onglets animés */

.bloc_icone{
  background-color:#fbd25c;
    width:65px;
    height:20px;
    display: inline-block;
    border-radius: 15px 15px 0px 0px;
}

.bloc_icone:hover{
  height:100px;
  transition: 500ms;
}

.bloc_icone img{
  position:absolute;
  transform:rotate(-12deg);
  width:50px;
  height:50px;
  margin-top:-18px;
  margin-left:7px;
}

.bloc_icone p{
  
  height:0;
  overflow: hidden;
  position: relative;
  margin-top: 30px;
  font-size: 10px;
  text-align: center;
  color: #5d3f0c;
  
}

.bloc_icone p a{
  color:#4b412f;
}

.bloc_icone:hover p.texte_annif, .bloc_icone:hover p.texte_fete, .bloc_icone:hover p.texte_gateau{
  height:80px;
}

Modification Template Overall Header

Code:

<!- Bloc anniversaire ->
  
   <div class="bloc_onglet">
    <div class="bloc_icone">
      <img src="http://i35.servimg.com/u/f35/19/45/46/99/cadeau10.png" alt="icone_cadeau" />
      <p class="texte_annif">Viens demander ton <a href="#">cadeau</a></p>
    </div>
     <div class="bloc_icone">
       <img src="http://i35.servimg.com/u/f35/19/45/46/99/chapea11.png" alt="icone_chapeau" />
       <p class="texte_fete">Profite des petits <a href="#">jeux</a> pour l'occasion</p>
    </div>
     <div class="bloc_icone">
       <img src="http://i35.servimg.com/u/f35/19/45/46/99/gateau10.png" alt="icone_gateau" />
       <p class="texte_gateau">Réalise le plus beau <a href="#">gâteau</a> pour le forum</p>
    </div>
    
     <div class="bandeau_der">
       <marquee><p>Bon anniversaire "Nom du forum"</p></marquee>
       <img src="http://i35.servimg.com/u/f35/19/45/46/99/ballon10.png" alt="icone_ballons" />
     </div>
  
  </div>
  
  <!- Fin Bloc anniversaire ->

Démonstration : http://utrw.forumactif.com/
Explications : Les catégories sont tellement heureuses qu'elles passent par toutes les couleurs de l'arc-en-ciel (ou presque), regardez-les attentivement !

Code :

Code:

   /*Défi Never Utopia ; ne fonctionne pas avec les versions de IE antérieures à la 10*/
    /*Firefox 5.0*/
    -moz-@keyframes definu {
      0% {background: #B1000D;}
      25% {background: #ED6623;}
      75% {background: #9858D1;}
      100% {background: #E9018C;}
    }
    /*Safari 4.0, Opera 15.0, Chrome 4.0*/
    -webkit-@keyframes definu {
      0% {background: #B1000D;}
      25% {background: #ED6623;}
      75% {background: #9858D1;}
      100% {background: #E9018C;}
    }
    /*Opera 12.0*/
    -o-@keyframes definu {
      0% {background: #B1000D;}
      25% {background: #ED6623;}
      75% {background: #9858D1;}
      100% {background: #E9018C;}
    }
    /*Standard*/
    @keyframes definu {
      0% {background: #B1000D;}
      25% {background: #ED6623;}
      75% {background: #9858D1;}
      100% {background: #E9018C;}
    }
    div.forabg {
      /*Syntaxe avec super-propriété "animation"*/
      -moz-animation: definu 3s linear 1s infinite alternate;
      -webkit-animation: definu 3s linear 1s infinite alternate;
      -o-animation: definu 3s linear 1s infinite alternate;
      animation: definu 3s linear 1s infinite alternate;
    }

C'est marrant, c'est l'une des épreuves qui montre bien que les 3 domaines code / écriture / graph peuvent totalement se réunir ! :)
Ca donne envie de pouvoir faire des épreuves à plusieurs à un moment ! Ou bien faire des concours d'events dans la section RPG. Enfin bon, je m'égare ! C'est le premier rendu qui me fait penser à ça, car c'est à la fois du code et de la mise en place d'un mini-event de chasse sympa

J'adore les GIF de la seconde, sont trop meugnons. *w*

Pour la dernière proposition, j'avoue que ça hypnotise si on regarde trop longtemps ! Je pense que je ne l'aurais pas mis sur quelque chose d'aussi "présent" que les catégories, mais c'est peut-être une technique pour nous laver le cerveau et nous faire voter pour toi ?
En tout cas, ça attire l'oeil et ça donne un côté fête xD

J'avais pas remarqué au début, mais pour "Le bandeau festif" on peut survoler les petites icones et avoir ainsi 3 "liens rapides" vers des animations !

J'aime toutes les idées ! Et surtout tout le monde a fait un truc différent. Pour l'instant je ne sais vraiment pas pour quoi je vais voter

Félicitation aux participants. Les trois codes répondent au sujet et sont aboutis graphiquement. Du coup, je vais particulièrement me concentrer sur le code.

Le jeu des images aléatoires

Le code est simple mais fonctionne. Il n'y quasiment aucune mauvaise pratique. La seule est après le commentaire /*On met du CSS a notre bloc suprise*/. Le bloc est un peu long et ça diminue lègerement la maintenabilité du code.

Par contre niveau algo, il y déjà plus de faute. Génération de deux nombres aléatoire à la place d'un (la génération d'un nombre aléatoire est assez lourde en info), floor inutile en l'état, approche hybride pour la création de l'élément entre l'utilisation de string, et recherche et utilisation d'élément. Puissance des class non utilisées (oui tu mets du css dessus, pour un élément).

Mais pour un code amateur, c'est déjà un beau et bon code.


La bulle à gifs & infos

Il y a des erreurs de sémantique HTML : des div avec des gif en background à la place d'une balise image.

Les animations sont bien gérées.

Une petite erreur d'algo. ta boucle for (var i = 1; i <= nbBulles; i++) {} n'est pas très utile, tu a déjà l'index dans activeBulle de la précédent et tu peux peut caculer facilement la suivante. La seule différence, c'est qu'en info on compte à partir de 0. donc ta première bulle active serrait 0 et non pas 1. Tu le sais toi même car tu fais un eq(i-1). Même si le for aurait pu être justifié tu aurais pu le le simplifier en commençant à 0. dans ce cas la condition serait i< nbBulles.



Le bandeau festif

Dommage pour le petit bug graphique qui fait baisser la bannière. Une solution aurait été d'enrober les trois bloc_icone d'un bloc ayant déjà la hauteur maximal et d'une animation. Une autre de juste utilisé les animations. Une autre passer ces blocs en dessous.


Les catégories aux couleurs de fête

Niveau code rien à dire. Mais ça fatigue très vite les yeux je trouve.


Avec tout ça, j'hésite entre la première et la deuxième création qui sont pour moi sur un pied d'égalité. Je vais voter pour la première, qui peut avoir une utilisation de jeu ou de simple déco et qui est donc plus polyvalente.

J'encourage ceux qui souhaitent poster leurs code en ls à passer au laboratoire après le concours pour améliorer les algo

Bravo à tout le monde pour avoir relever ce défi Toutes les créas sont super chouettes, originales et intéressantes, un vrai plaisir de voir ce qui est capable d'être fait et les idées sont toutes différentes ^^

Création 1 : Je connaissais un peu le principe de ce jeu qui se fait sur certains forums (chercher les images cachées dans les pages) mais le fait d'avoir mis en Javascript est vraiment intéressant pour corser le jeu (et éviter d'avoir des images statiques). J'ai apprécié aussi avoir la description de comment le code fonctionne, ça permet de le "comprendre" un peu et voir ce qui a été fait. Un petit jeu très sympa pour s'occuper sur le forum tout en naviguant de page en page.

Création 2 : J'ai beaucoup aimé ce code aussi. Il reste discret tout en apportant un effet super sympa avec des gifs et des petits messages. Ca apporte une petite touche festive avec quelques infos. Et quand on passe la souris c'est sympa de voir le lien qui s'affiche pour avoir accès au forum même si je n'y avais pas fait attention au départ. Le code semble bien également, et c'est bien trouvé cet effet qui change d'image quand ça descend avec du Javascript.

Création 3 : Un code qui est pratique pour les membres. Les onglets qui s'ouvrent pour laisser apparaître un petit texte menant à une animation c'est plutôt sympa. Mais je rejoins Val, l'ouverture de l'onglet bug, ce qui donne un manque de fluidité <<

Création 4 : J'ai trouvé ça très original ^^ Franchement je m'y attendais pas et c'est plutôt fun, j'ignorais qu'on pouvait changer comme ça la couleur des catégories. C'est chouette et ça me fait penser à une guirlande de couleurs qui s'illumine Ce qui est bien aussi c'est que le code est adapté pour chaque navigateur et le code est agréable à regarder.

J'ai voté pour la Créa 2. L'effet de l'image qui change au déroulement de la page m'a charmé.

Bravo à tout le monde

Plus que 2 jours pour voter

N'ayez pas peur, même sans savoir coder on peut donner son avis, dire si on prendrait ou pas l'élément pour le mettre sur son forum ou bien si ça nous plairait de le voir sur un fow'. Oui oui, même toi qui ne code pas, tu peux donner un conseil "tiens j'aurai bien vu ça comme ça", ou un exemple d'utilisation ♥︎

J'ai fini par me décider et j'ai voté pour la 1ère création, le petit jeu ! J'ai failli voter pour le bandeau festif, que je trouve très sympa et demande moins de "préparation" pour les flemmards mais le bug sur l'animation a fait pencher la balance ><

Bonjour,

le choix a été difficile mais j'ai opté pour le bandeau festif. Il est discret mais attire l'oeil malgré tout en arrivant sur le forum.

J'ai voté pour la deuxième, mon choix à été accentué par la présence des gifs mignons XD. Mais j'aime bien l'idée, simple, graphique, festive.

Essayez de ne pas voter pour des choses comme les gifs ou le texte. Ils sont là en exemple mais destinés à être personnalisés. On est plutôt sur le potentiel du code, sa pertinence (est-ce que vous l'utiliseriez dans cette situation ?), sa facilité d'utilisation... :)

Et c'est @Nihil Scar Winspeare qui remporte ce concours avec La bulle à gifs & infos :)
Félicitations à tous pour ces participations ! Je vous encourage à proposer vos codes en libre-service pour que tout le monde puisse profiter de votre travail pour ce concours

GG Nihil Je me doutais presque que ça venait de toi le rond à gif ^^

Bravo à tout le monde sinon.

Moi j'ai fait le bandeau à onglet festif =) Merci Val pour tes solutions, je m'en vais de ce pas les tester et si je n'y arrive pas je viendrais demander un coup de main. Merci pour ceux qui ont voté pour moi quand même

Ha, j'avais eu un doute après le post de Nihil, mais je me doutais bien que le 2 était d'elle moi aussi XD Félicitation Nihil !

Moi j'avais le jeu, totalement inspiré par la chasse au trésor parce que le jeu de dés m'a frustré (en 18 pages, j'ai jamais eu la boîte de Whiskas T_T), j'avoue u_u

Et je trouve dommage que le dernier n'ait eu aucun vote, il était génial pourtant é_è J'ai comme l'impression que les animations qui ne sont pas super petites ne sont pas populaire parce que ça fait peur aux gens u_u

Merci et bravo à tout le monde

J'avais un peu changé mon idée de base, qui au début devait aller chercher des messages des membres dans un topic pour les afficher dans les ronds mais j'avais un soucis de place et surtout de temps . Merci Valt pour les remarques, on en a parlé sur la CB et au final je trouve ça plus pratique avec la boucle et le départ à 1 (car sinon j'avais un -1 ailleurs :p)

Onyx et la chasse au trésor haha, t'as vraiment pas eu de chance pour cette dernière boite qui manquait. éè GG pour ton idée, qui sert tout autant de décoration que de jeu :)

Pour la dernière, j'aurais peut-être préféré sur un plus petit élément par ce que là je trouve ça un poil "trop" ou agressif :s
Par contre je trouve vraiment cool de faire une animation, surtout qu'on final on en voit peu ! >-<

Pour l'onglet festif Elenthil, hâte de voir (ou même que tu proposes en LS) la version avec l'animation, c'est vraiment cool et facile à mettre en place !

C'était vraiment sympa comme format de défi, tout le monde est venu avec une idée un peu différente *w*

Oh Nihil je vois ce que tu veux dire ^^ un topic style "livre d'or" où on met quelques mots pour l'anniversaire et en fait ta bulle les affiche aléatoirement ? Ca aurait été cool aussi =)

Pauvre Onyx et sa boîte de Whiskas dis toi que j'ai mis 21 pages je crois avant d'avoir le dernier objet ^^ L'encrier de Fyra m'a donné du fil à retordre

Pour l'onglet festif Elenthil, hâte de voir (ou même que tu proposes en LS) la version avec l'animation, c'est vraiment cool et facile à mettre en place !

Vi c'est prévu pour le proposer en LS, en tout cas, contente que l'idée t'ait plu Faut juste que je trouve un moment pour bidouiller le petit truc qui va pas et hop, emballé, expédié dans les LS

Bravo à tous ... Après je n'ai pas voté uniquement sur le graphisme j'avais un léger soucis de temps vu mon départ en vacances qui approchait, alors j'ai voté entre deux short que je mettais dans ma valise, excusé moi donc pour le manque de réflexion que pouvais prendre mon commentaire .

Donc j'ai aussi comparé au niveau de mes connaissances en codages, et c'est l'un de ceux que j'ai eu le plus de simplicité à comprendre et j'ai trouvé l'idée intéressante, après le gif a aussi son effet je doit dire, mais je ne me suis pas arrêté seulement dessus XD, j'ai bien aimé le côté assez discret et "enlevable" à tout moment aussi, ça fait évent C'est également un code que je pourrais sûrement réutiliser sur mon forum un jour, s'il se trouve en LS .

Voilà pour un commentaire plus construit. Encore bravo à tous toutes les créations étaient intéressante et j'ai pu apprendre pas mal de truc grâce à chacune

Encore bravo Nihil