jquery reveal image based on get second clock

Question

I'm struggling to find a solution to this and wonder if anyone can help.

I'd like to make a page where an image would disappear over time revealing another image. I'm hoping to achieve this by using the updatesecond/getseconds function. So essentially it would act as a clock, the more minutes/seconds have passed the more it disappears, and have it cycle. For example at the beginning of the day it would be a full image, at 12 it would be half, and at 24hours it would be gone, and repeat. I figure it would be an if else function about the percentage of the page that's left, I just can't figure out how to word it.

Is this possible at all? Any help would be greatly appreciated. Thanks!

Here is the code I'm working with so far. Thank you in advance.

body
{
    background-color: #FFF;
    padding: 2%;
    color: #ccc;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
}

a
{
    color: #FFF;
    text-decoration: none;
}

a:hover
{
    color: #DCE808;
    text-decoration: underline;
}

#mosaic
{
/*      background-color: yellow; 
    font-size: 500px;
    color: black;
    height: 1310px;
    width: 2000px;   */
background-image: url('tomorrow4.png');
}

#mosaic span.hover
{
    /*  background-color: blue;
    font-size: 500px;
    color: white;
    height: 1310px;
    width: 2000px;
    left: 100px;*/
    float: left;
   background-image: url('today4.png');  
}

and javascript

$(document).ready(function() {

var width = 1400;
var height = 724;

count = 0;
elements = new Array();

var el = $('#mosaic');

el.width(width).height(height);

var horizontal_pieces = 100;
var vertical_pieces = 100;
total_pieces = horizontal_pieces * vertical_pieces;

var box_width = width / horizontal_pieces;
var box_height = height / vertical_pieces;

var vertical_position = 0;

for (i=0; i<total_pieces; i++)
{
var tempEl = $('<span class="hover" id="hover-' + i + '">
</span>');

var horizontal_position = (i % horizontal_pieces) * box_width;

if(i > 0 && i % horizontal_pieces == 0)
{
    vertical_position += box_height;
}

tempEl.css('background-position', '-' + horizontal_position + 'px  
-' + vertical_position + 'px');

el.append(tempEl);
elements.push(tempEl);
}

elements = shuffleArray(elements);

$('#mosaic .hover').width(box_width).height(box_height);

setInterval(toggleDisplay, 100);
});

function toggleDisplay()
 {
 var tempEl = elements[count];
 var opacity = tempEl.css('opacity');

if(opacity == 0)
{
tempEl.animate({ opacity: 1 })
}
else
{
tempEl.animate({ opacity: 0 })
}

 count = (count + 1) % total_pieces;
 }



/* shuffleArray source:    
http://stackoverflow.com/questions/2450954/how-to-randomize-a-  
javascript-array#12646864 */
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor() * (i + 1);
var temp = array[i];
array[i] = array[j];
array[j] = temp;
 }
 return array;
 }

are you just looking for a slider http://jsfiddle.net/RachGal/n2ztwm3t/ — Rachel Gallen, Sep 03 '15 at 14:15

score 0 · Answer 1 · answered Sep 03 '15 at 15:58

Do you mean something like this? http://jsfiddle.net/1r5qer56/

I used 4 sectors (as skewY tends to screw up over 90 degrees) and had them set to a size relative to the amount of minutes that have passed since midnight.

If you want to test it, just put a custom number in for time.

My code is below:

HTML

<ul class='pie'>
    <li class='slice tr'><div class='slice-contents'></div></li>
    <li class='slice br'><div class='slice-contents'></div></li>
    <li class='slice bl'><div class='slice-contents'></div></li>
    <li class='slice tl'><div class='slice-contents'></div></li>
<ul>

CSS

.pie {
    position: relative;
    margin: 1em auto;
    border: dashed 1px;
    padding: 0;
    width: 32em; height: 32em;
    border-radius: 50%;
    list-style: none;
    background-image: url('http://lorempixel.com/output/animals-q-c-512-512-4.jpg');
}
.slice {
    overflow: hidden;
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 50%;
    transform-origin: 0% 100%; 
}
.slice.tr {
    transform: rotate(0deg) skewY(-0deg);
}
.slice.br {
    transform: rotate(90deg) skewY(0deg);
}
.slice.bl {
    transform: rotate(180deg) skewY(0deg);
}
.slice.tl {
    transform: rotate(270deg) skewY(0deg);
}
.slice-contents {
    position: absolute;
    left: -100%;
    width: 200%; height: 200%;
    border-radius: 50%;
        background: lightblue;
}
.slice.tr .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}
.slice.br .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}
.slice.bl .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}
.slice.tl .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}

JS+jQuery

updateClock();

setInterval(function(){updateClock();}, 60000);//check for updates once per minute

function updateClock(){
    var dt = new Date();
    var time = (dt.getHours() * 60) + dt.getMinutes();//number of minutes since 00.00
    var timeToDegrees = time / 4;//1440 minutes in 24hours, 360 degrees in a circle. 1440 / 4 = 360

    if(timeToDegrees < 90){//deal with top right sector
        $('.slice.tr').css('transform', 'rotate('+timeToDegrees+'deg) skewY(-'+timeToDegrees+'deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY('+timeToDegrees+'deg)');
    }
    else if(timeToDegrees < 180){//deal with bottom right sector
        var localDeg = timeToDegrees - 90;
        $('.slice.tr').eq(0).css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.br').css('transform', 'rotate('+(90+localDeg)+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.br .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
    }
    else if(timeToDegrees < 270){//deal with bottom left sector
        var localDeg = timeToDegrees - 180;
        $('.slice.tr').css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.br').css('transform', 'rotate(180deg) skewY(-90deg)');
        $('.slice.br .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.bl').css('transform', 'rotate('+(180+localDeg)+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.bl .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
    }
    else if(timeToDegrees <= 360){//deal with top left sector
        var localDeg = timeToDegrees - 270;
        $('.slice.tr').css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.br').css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.br .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.bl').css('transform', 'rotate(270deg) skewY(-90deg)');
        $('.slice.bl .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.tl').css('transform', 'rotate('+(270+localDeg)+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.tl .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
    }
}

score 0 · Answer 2 · answered Sep 03 '15 at 16:07

Taking a look at the code, from what I gather, you're looking for a picture that is covered with another picture, proportional to the length of the day in seconds. Like one picture sliding over another? Like this picture:

Take a look at the jsBin I've created here http://jsbin.com/xevinakihe/edit?html,css,js,output

The meat of the code is the timing and height adjustment:

  function setCoverHeight() {
    var d = new Date();
    var curSecs = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
    var coverHeight = curSecs * 100 / (24 * 3600);

    $('.cover').height(coverHeight + '%');

    if (curSecs < 24 * 3600) {
      setTimeout(setCoverHeight, 1000);
      console.log(coverHeight);
    } else {

      // reset the cover height to 0%
      $('.cover').height(0);

      // swap the cover image to the bottom
      $('.bottom').css('backround-image', $('.cover').css('background-image'));

      // set a new cover image
      // ... get from Ajax, array, etc

    }

  }

  setCoverHeight();

That is adjusting the HTML:

<div class="wrapper">
  <div class="cover"></div>
  <div class="bottom"></div>
</div>

Eventually the day will run out and the cover should be swapped with the bottom image, so that you can cycle through individual daily pictures (ex. 'today.jpg' and 'tomorrow.jpg')

Hope that helps!

Thank you @lintuxvi ! This works perfect. Do you know if there's a way to connect it to a mosaic reveal, maybe using something like this http://codepen.io/stathisg/pen/AeoLI ? Hoping to have the pixels disappear (in order, not random like this example) so it's not just a static sliding down image. Thank you so much for all the help. Best, Devin — Devin, Sep 18 '15 at 21:42
Any help would be extremely appreciated, thanks again for all your help. — Devin, Oct 25 '15 at 23:56

jquery reveal image based on get second clock

2 Answers2

HTML

CSS

JS+jQuery