CODEWITHSUNDEEP
cssflipclock
Simen Eilevstjønn
Simen Eilevstjønn

Reputation: 41

Is there a way to use transform: scale() dynamically

I'm making a website with a FlipClock countdown. By default it is too small. It has to be scaled using transform: scale() or zoom, changing the width and height property only increases the amount of white around the countdown. On a screen not 1920*1080 the clock is not correctly sized.

I've tried some JS scalers, however these use pixel size to scale, so it doesn't work. I've also tried a simple viewport. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="clock" style="margin:2em; transform: scale(2.5);"></div>
<script type="text/javascript">
    var clock;
    $(document).ready(function() {
        var currentDate = new Date();
        var futureDate  = new Date("Dec 24, 2019 00:00:00");
        var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
        // Instantiate a coutdown FlipClock
        clock = $('.clock').FlipClock(diff, {
            clockFace: 'DailyCounter',
            countdown: true,
        });
    });
</script>

Upvotes: 0

Views: 3348

Answers (1)

Simen Eilevstj&#248;nn
Simen Eilevstj&#248;nn

Reputation: 41

I found a way to do what I wanted using JS.

let perpx = 2.5/1920;
let ratio = perpx * window.screen.width;
document.getElementById('clock').style.transform = "scale(" + ratio + ")";

Upvotes: 1

Related Questions