Faire FlipClock.js Réactif

J'ai essayé de faire flipclock.js de répondre pleinement et en situation d'échec. Quelqu'un a accompli cela? Si oui, comment aurais-je obtenir que cela fonctionne? Je vous remercie pour votre temps. J'ai essayé de tout convertir en pourcentages, mais qui n'a pas fonctionné comme je l'espérais. Je suis en utilisant twitter bootstrap avec ce plugin.

Voici mon css pour flipclock.js:

 /* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.countdown {
postion:relative;
width: 39%;
}
.flip-clock-wrapper {
margin-left: 8% !important;
max-width: 100%;
font: normal .75em "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none;
}
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 300% !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 100%;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 0.7%;
width: 8%;
height: 1.1em;
font-size: 7.2em;
font-weight: bold;
line-height: 7.2em;
border-radius: 10%;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 1em;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 100%; /*200px*/
-moz-perspective: 100%;
perspective: 100%;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 1em;
overflow: hidden; 
outline: 1% solid transparent; } /*1px*/
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 1%;/*44px*/
left: 0;
z-index: 5;
width: 100%;
height: .02em;/*3px*/
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 1%;/*6px*/
border-bottom-right-radius: 1%;/*6px*/
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 20% 3% #000; /* 0 1px 2px #000*/
text-align: center;
background-color: #333;
border-radius: 9%; /* 0 1px 2px #000*/
font-size: 1em; } /* 70px*/
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip {   box-shadow: 0 2% 6% rgba(0, 0, 0, 0.7); } /* 0 2px 5px     rgba(0, 0, 0, 0.7);*/
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.5s 0.5s linear both;
-moz-animation: asd 0.5s 0.5s linear both;
animation: asd 0.5s 0.5s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 3%; /* 20px*/
height: 9em; } /* 100px*/
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 50%;/* 10px*/
height: 1em; /* 10px*/
position: absolute;
border-radius: 50%;
box-shadow: 0 0 3% rgba(0, 0, 0, 0.5);
left: 20%; } /* 5px*/
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -7.5em; /* 86px*/
color: black; 
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -7.6em; } /* 88px*/
.flip-clock-divider.seconds .flip-clock-label {
right: -7.9em; } /* 88px*/
.flip-clock-dot.top {
top: 2.4em; } /* 30px*/
.flip-clock-dot.bottom {
bottom: 2.4em; } /* 30px*/
@-webkit-keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
@-moz-keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
@-o-keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
@keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
@-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
@-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
@-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
@keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
@-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
@-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
@-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
@keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
@-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }

vous travaillez avec ce plugin : flipclockjs.com ?
Oui, j'ai essayé d'obtenir la chose à être réactif.

InformationsquelleAutor Thomas Myers | 2014-09-29

21

Essayer ce -
Vous pouvez contrôler la taille de l'horloge (reportez - https://github.com/objectivehtml/FlipClock/issues/13)
par la création d'une nouvelle classe dans votre css (mieux travailler avec sass tout de même):
```
.your-clock{
zoom: 0.5;
-moz-transform: scale(0.5)
}
```
Après sachant cela, en travaillant avec sass vous pouvez créer mixin pour contrôler le zoom et -moz-transform par la taille de l'écran

Par exemple, créer un mixin fichier sass que contient -
```
//Responsive mixins
=screen-xs
@media all and (max-width: 320px)
@content
=screen-sm
@media all and (max-width: 479px)
@content
=screen-md
@media all and (max-width: 768px)
@content
=screen-lg
@media all and (max-width: 900px)
@content
=screen-xl
@media all and (max-width: 1300px)
@content
```
Maintenant, il suffit de l'ajouter à votre flipclock classe pour contrôler le niveau de zoom par la taille de l'écran:
```
.myflipclock
zoom: 0.8
-moz-transform: scale(0.8)
+screen-md
zoom: 0.6
-moz-transform: scale(0.6)
+screen-sm
zoom: 0.45
-moz-transform: scale(0.45)
```
etc...

Espère que cela aide
- Il a aidé. Merci.
- Cela a d'horribles/résultats inattendus sur ios Safari. ios Chrome offre différents types de mauvais résultats. En bref-- zoom n'est pas prêt pour l'action à travers le conseil d'administration.
- Il provoque problème inattendu spécialement lorsque le conteneur est redimensionnée. navigateur considère toujours que la taille d'origine
InformationsquelleAutor uzb

Essayez d'ajouter le code suivant à la fin de votre flipclock.fichier css:

@media only screen and (max-width: 360px) {
.clock { margin: 0 auto; display: block; width: 100%; }
.flip-clock-wrapper ul { height: 35px; line-height: 35px; margin:2px; width: 24px !important;}
.flip-clock-wrapper ul li a div.up:after { top: 16px; }
.flip { width: 24px !important; }
.flip-clock-divider { height: 35px; width: 10px !important;}
.flip-clock-dot { height: 4px; width: 4px; left: 2px !important;}
.flip-clock-dot.top { top: 12px; }
.flip-clock-dot.bottom { bottom: 6px; }
.flip-clock-divider .flip-clock-label { font-size: 11px !important; }
.flip-clock-divider.days .flip-clock-label { right: -42px !important; }
.flip-clock-divider.hours .flip-clock-label { right: -42px !important; }
.flip-clock-divider.minutes .flip-clock-label { right: -48px !important; }
.flip-clock-divider.seconds .flip-clock-label { right: -50px !important; }
.flip-clock-wrapper ul li { line-height: 35px; }
.flip-clock-wrapper ul { width: 24px !important; }
.flip-clock-wrapper ul li a div div.inn { font-size: 21px; }
}
@media only screen and (min-width: 361px) and (max-width: 480px) {
.clock { margin: 0 auto; display: block; width: 100%; }
.flip-clock-wrapper ul { height: 35px; line-height: 35px; margin:2px; width: 30px !important;}
.flip-clock-wrapper ul li a div.up:after { top: 16px; }
.flip { width: 30px; }
.flip-clock-divider { height: 35px; width: 15px;}
.flip-clock-dot { height: 4px; width: 4px; left: 4px !important;}
.flip-clock-dot.top { top: 12px; }
.flip-clock-dot.bottom { bottom: 6px; }
.flip-clock-divider .flip-clock-label { font-size: 11px !important; }
.flip-clock-divider.days .flip-clock-label { right: -46px !important; }
.flip-clock-divider.hours .flip-clock-label { right: -46px !important; }
.flip-clock-divider.minutes .flip-clock-label { right: -55px !important; }
.flip-clock-divider.seconds .flip-clock-label { right: -55px !important; }
.flip-clock-wrapper ul li { line-height: 35px; }
.flip-clock-wrapper ul { width: 26px; }
.flip-clock-wrapper ul li a div div.inn { font-size: 21px; }
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.clock { margin: 0 auto; display: block; width: 100%; }
.flip-clock-wrapper ul { height: 50px; line-height: 50px; }
.flip-clock-wrapper ul li a div.up:after { top: 24px; }
.flip-clock-divider { height: 50px; }
.flip-clock-dot { height: 6px; width: 6px; left: 7px;}
.flip-clock-dot.top { top: 17px; }
.flip-clock-dot.bottom { bottom: 8px; }
.flip-clock-divider .flip-clock-label { font-size: 11px; }
.flip-clock-divider.days .flip-clock-label { right: -58px; }
.flip-clock-divider.hours .flip-clock-label { right: -58px; }
.flip-clock-divider.minutes .flip-clock-label { right: -64px; }
.flip-clock-divider.seconds .flip-clock-label { right: -64px; }
.flip-clock-wrapper ul li { line-height: 50px; }
.flip-clock-wrapper ul { width: 37px; }
.flip-clock-wrapper ul li a div div.inn { font-size: 30px; }
}

InformationsquelleAutor duttyman

essayer ce code et dis si c'est ok :

.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 15%;
height: 100%;
font-size: 82px;
font-weight: bold;
line-height: 110%;
border-radius: 6px;
background: #000;
}
.clock {
width: 100%;
height: 116px;
margin: 0 auto;
}
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 1%;
width: 14%;
height: 100%;
font-size: 82px;
font-weight: bold;
line-height: 110%;
border-radius: 6px;
background: #000;
}
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 1%;
height: 100px; 
}
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 94%;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); 
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
font-size: 100%; }
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 1%;
width: 14%;
height: 100%;
font-size: 82px;
font-weight: bold;
border-radius: 6px;
background: #000;
line-height: 110px;
}

ne manquez pas placer le fichier ci-dessus flipclock.css
il a travaillé, mais pas à 100% encore des pauses à environ 700 pixels de largeur.
cela dépend de votre mise en page et la position de votre horloge de la division , j'ai bretonne, selon le site flipclockjs.com.je ne peux pas vous aider sans voir votre page ,vous pouvez utiliser jsfiddle
dans le site que j'ai utilisé : .l'en-tête .horloge { width: 100%; height: 116px; margin: 0 auto; } et dans le code ci-dessus, j'utilise juste la classe .horloge sans classe parent

InformationsquelleAutor Bouraoui KACEM

1

Juste pour info, nous travaillons à faire FlipClock.js intrinsèquement sensible et personnalisable avec des thèmes sans hacks. Vous pouvez payer les détails ici. Le travail est toujours en cours et que vous pouvez toujours vérifier ici: https://github.com/objectivehtml/FlipClock/issues/161.
- Justin vous avez une version adaptable pour cela?
InformationsquelleAutor Justin Kimbrell

Une bonne solution pourrait être de mix @uzb réponse et ce. Il a été posté ici: le redimensionnement flipclock.js pas de redimensionnement comme prévu

Utiliser ces requêtes de média comme suggéré par @uzb mais uniquement régler ces variables

$clock-flip-font-size: 120px
$clock-flip-border-radius: 8px
$clock-digit-gap: 20px
$clock-dot-size: 20px
$clock-height: ($clock-flip-font-size * 1.2)
$clock-flip-width: ($clock-flip-font-size * 0.8)
$clock-flip-margin: ($clock-digit-gap / 2)
$clock-flip-section-width: (2 * ($clock-flip-width + 2 * $clock-flip-margin))
$clock-flip-bg: #607D8B
$clock-flip-shadow: 0 2px 5px rgba(0, 0, 0, 0.7)
$clock-flip-font-color: #F44336
$clock-flip-font-shadow: 0 1px 2px #000

C'est une solution adaptée à partir de l'un des pensions du fermé le problème (non résolu). Il semble que le dev a promis une nouvelle API, mais c'était plus qu'il y a 1 an.

Il n'est pas parfait car il y a certains problèmes lors de la configuration de $clock-flip-font-size: 120px. Aussi, lorsque les minutes sont affichées sous forme de 3 chiffres, les "Minutes" du texte n'est pas centered.

Ici est la codepen: https://codepen.io/jimasun/pen/PzAqVw/

//
//------------------------- FlipClock
//
$clock-flip-font-size: 120px
$clock-flip-border-radius: 8px
$clock-digit-gap: 20px
$clock-dot-size: 20px
$clock-height: ($clock-flip-font-size * 1.2)
$clock-flip-width: ($clock-flip-font-size * 0.8)
$clock-flip-margin: ($clock-digit-gap / 2)
$clock-flip-section-width: (2 * ($clock-flip-width + 2 * $clock-flip-margin))
$clock-flip-bg: #607D8B
$clock-flip-shadow: 0 2px 5px rgba(0, 0, 0, 0.7)
$clock-flip-font-color: #F44336
$clock-flip-font-shadow: 0 1px 2px #000
.countdown-wrapper
left: 50%
position: absolute
top: 50%
transform: translate(-50%, -50%)
.countdown.flip-clock-wrapper ul
height: $clock-height
margin: 0 $clock-flip-margin
width: $clock-flip-width
box-shadow: $clock-flip-shadow
.countdown.flip-clock-wrapper ul li
line-height: $clock-height
.countdown.flip-clock-wrapper ul li a div div.inn
background-color: $clock-flip-bg
color: $clock-flip-font-color
font-size: $clock-flip-font-size
text-shadow: $clock-flip-font-shadow
.countdown.flip-clock-wrapper ul,
.countdown.flip-clock-wrapper ul li a div div.inn
border-radius: $clock-flip-border-radius
.countdown.flip-clock-wrapper ul li a div.down
border-bottom-left-radius: $clock-flip-border-radius
border-bottom-right-radius: $clock-flip-border-radius
.countdown.flip-clock-wrapper ul li a div.up:after
top: (($clock-height / 2) - 1px)
.countdown .flip-clock-dot.top
top: ($clock-height / 2 - $clock-flip-font-size * 0.2 - $clock-dot-size / 2)
.countdown .flip-clock-dot.bottom
top: ($clock-height / 2 + $clock-flip-font-size * 0.2 - $clock-dot-size / 2)
.countdown .flip-clock-dot
height: $clock-dot-size
left: $clock-dot-size
width: $clock-dot-size
background: $clock-flip-bg
.countdown .flip-clock-divider
height: $clock-height
width: ($clock-dot-size * 3)
&:first-child
width: 0
.countdown .flip-clock-divider.seconds .flip-clock-label,
.countdown .flip-clock-divider.minutes .flip-clock-label
right: -1 * $clock-flip-section-width
.countdown .flip-clock-divider .flip-clock-label
color: $clock-flip-font-color
font-size: $clock-flip-font-size / 4
width: 2 * $clock-flip-width + 4 * $clock-flip-margin
//
//------------------------- FlipClock
//

InformationsquelleAutor jimasun

Vous devez vous connecter pour publier un commentaire.