Forum : annimé mon horloge css

Réponse acceptée

tu n'as en aucun cas besoin d'actualiser des images, javascript nativement comprent un fonction date qui te permet de recupéré comme sont nom l'indique la date, mais elle dispose de plusieurs methode qui s'appel respectivemetn getHours et hetMinutes il suffit de definir un interval en javascript pour automatiser ton changement d'heure et de minute avec un setTimeOut par exemple qui toute les 60000 ms, soit 1 minute, change les minute et les heures. C'est plus simple que ton changement d'image.

shinix

Javascript.

Kaporal

Auteur

http://dmouronval.developpez.com/tutoriels/css/animation-css3-horloge/
Alors arrêté d'essayez de simplifié la chose, javascript je ne sais pas le côdé, le css un plus
mais pour une horloge boff.

shinix

T'essaies de communiquer ?
De 1: ici on est sur un forum, tu demandes de l'aide, commence par être poli et courtois !

De 2 : tu veux animer ton horloge mais tu sais pas coder en js, alors arrête la création de ton horloge maintenant...

Kaporal

Auteur

Mais en faite faut savoir que je cherche une solution à mes problème.

shinix, il y a 17 minutes - Il a répondu à ma question !
Javascript.

Tu la voie ou la comunication?

Je maintient qu'on peut le faire en CSS (Lire un peux mes poste) j'ai déjà la mise en page de l'horloge il ne reste plus qu'a animé le tout (via CSS) ou en (Javascript) mais alors il faudrait m'accompagné (ou me donné un lien tuto claire)

Defy

question debile mais ou tu n'auras surment pas la reponse, comment tu defini l'heure en css?

shinix

Regarde mes autres messages, la "communication" je la fais quand l'auteur du poste prend la peine de dire bonjour, merci, etc. Là, j'ai simplement répondu dans le même sens que ton premier message.

Donc t'es mignon, tu veux de l'aide on va te faire un tutoriel :

commencer par dire bonjour
Si html/js/css mettre son code sur jsfiddle ou autre pour qu'on aie pas besoin de "deviner" le html qui va avec ton css
salutations

A partir de là on pourra éventuellement t'aider et te dire quoi faire.

ou sinon depuis http://google.com on peut trouver facilement : http://jsfiddle.net/mplungjan/mQrJn/

@Defy: je me demande aussi et je pense également qu'il n'a pas la réponse ^^

Defy

Je maintient qu'on peut le faire en CSS (Lire un peux mes poste)

Ouai en css tu fait le design et en js tu l'anim. je pense que l'on as beaucoup plus d'experience que toi dans le dev et vouloir a tous pris avoir raison c'est pas le bon choix. Si on te dit sans hesiter le javascript c'est qu'il y as une raison.

mais alors il faudrait m'accompagné

t'es serieux la? moi quand j'ai commencé le dev j'ai demandé de l'aide a persone, j'ai chercher j'ai poser des question et avec la reponse j'ai chercher a faire les choses. On est pas une ecole, on est la pour aider, mais on as pas que ca a faire non plus, on a d'autre chose a coté et notament un travail pour certain.

Kaporal

Auteur

Ok @Shinix, je veux bien comuniquer avec toi ...
Désoler pour le faux dépard.

Bonjours j'aurais un problème je cherche à animé mon horloge à LED

#horlogeled {
    width: 180px;
    height: 180px;
    padding: 4px;
    background-color: #000;
    position: relative;
    -webkit-box-shadow: 0 0 20px rgba(128,128,128,.6);
    -moz-box-shadow: 0 0 20px rgba(128,128,128,.6);
    box-shadow: 0 0 20px rgba(128,128,128,.6);
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
#horlogeled.index{
    margin: 0 auto;
}
.seconds{
    width: 172px;
    height: 172px;
    margin: 4px;
    background-repeat: no-repeat;

}
.hour, .minute{
    position: absolute;
    top: 72px;
    width: 34px;
    height: 45px;
    background-repeat: no-repeat;
}
.hour.one{
    left: 34px;
}
.hour.two{
    left: 60px;
}
.minute.one{
    right: 34px;
}
.minute.two{
    right: 60px;
}
.marker {
    display: none;
    position: absolute;
    top: 83px;
    left: 86px;
    width: 15px;
    height: 24px;
    background-repeat: no-repeat;
}

Voici le côde HTLM

<div id="horlogeled" class="index">
            <div class="seconds" style="background-position: 0px -8256px;">
            <div class="hour one" style="background-position: 0px -90px;"></div>
            <div class="hour two" style="background-position: 0px -135px;"></div>
            <div class="marker" style="display: none;"></div>
            <div class="minute one" style="background-position: 0px -315px;"></div>
            <div class="minute two" style="background-position: 0px -135px;"></div></div></div>

Merci beaucoup pour l'aide que vous pourriez m'apporté, ou le tuto afin de m'expliquer comment crée le côde pour animé mon horloge

Defy

oui, ca concerne les videos mon coco pas le forum, parceque la graf parle pour lui pas pour nous tous. Avant de vouloir ramener sa science on essaie un minimum de reflechir.

Enssuite, si t'es pas capable de reflechir 2 seconde, de regarde la masse de tutoriel qu'il y as sur grafikart concernant le js jquery et toute le tralala et de l'adapter a tes besoin stop dessuite le dev, t'es pas fait pour ca et tu ne le seras jamais.

et pour finir concrètement, la tache, elle t'enmerde ;-) et je suis quand meme gentil un tuto sur les horloges js parceque aparament t'as oublié de passer par la case cerveau pour réfléchir par toi meme.

Kaporal

Auteur

@Defy on vas ce calmé tout desuite ... je ne suis pas ton "pote" depuis que je suis sur la comunauté à pars polué les topic avec ta sois disant science je n'ai pas vue beaucoup d'aide apporté de ta part....
Tu polue ma questions par tes réponses imature ...

Defy

ha? ben c'est cool, au moins je perd pas de temps avec toi ;-) salut et debrouille toi bien, avec ton fadeIn et fadeOut aussi ;-) aller tcho.

Gaspard

Bonjour,

Tiens :

developpez.com
tdct.org
cssanimation.rocks

Et oui, il faut bien utiliser Javascript, pour gérer le temps.

Et puis, calme toi un peu, on est là pour aider, pas pour se faire traiter comme des chiens.
Bonne journée,
Gasp.

Kaporal

Auteur

Bonsoir,
Je comprend Gasp mais bon à part me faire dénigré sans arrêt par certain membres de la comunauté qui de plus ne cherche pas à apporté de réponse mais juste à te démotiver, c'est peusant du coup à chaque petit pic je m'enporte
@Dafy fraudrait déjà que tu es les solutions à mes problème.

Bon cela dit le problème de ces script

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

C'est qu'ils font tourné mon horloge et pas uniquement tournée mes secondes (mon horloge est à 100% fait en images)
Du coup il faut en faite que je trouve un script qui automatise l'actualisation des images et leurs position toute les 1seconde, toute les 60 secondes pour les minutes toute les 3600s pour les heures

Kaporal

Auteur

Bon, dans un premier temps, merci beaucoup pour les réponse, dans un deuxième temps, j'ai trouvé la solution par un script que je me suis tapé à la main, (et à l'aide de vos tuto/réponse)
Du coup, bonne soirée à vous je clos

Petit hs, Defy, si un jours tu trouves la solution de mon Fadin fait toi plaisir (de mon côté rien ne marche)

annimé mon horloge css

15 réponses