Do you like stickers? Well why not!? BECAUSE EW!?


STICKERS!

As you may have noticed, there are stickers on the site now! Forever stuck to your screen when you visit. They might never peel off! Maybe if you use soap but don't count on it.

Come on, don't get mad, it's not like they'll be here forever or anything. One day the universe will come crashing to an end in the great heat death of the universe -- so for now, just enjoy them.

Oh, you're not mad? Then I'm just overexaggerating. More than likely, you were brought here by one of these goblins and actually want stickers.

sticker friends

Please download them for your pleasure! ( see code implementation below)

Also, the three of us really want to print these for anyone interested. There would be about 150 prints per sticker, so if enough of you are interested and we run out, we might have to start like an actual sticker club... *heavy breathing* ...

Share with friends! Or don't! I'm not data mining your stuff, but I am using google forms to get your pesky address, so DM me if you're looking to avoid google.

Get on this mailing list if you want any of them~


GITHUB!

You also may have noticed a few other changes to the site since last I updated, can you tell?

I got github set up too! So now you can copy my ENTIRE WEBSTIE. Please use it, feel free to credit me or not. I'll be adding more comments to everything as I go. This website was orignially based on Zonelets, a cool as hell blogging setup, and since then I have expanded on that code, so if anything, keep the Zonelets credit if you are interested in copy pasta'ing everything.

If you want something a little less cluttered, I also stripped everything down to a template for an art blog also on my github

DM me on tweeter if you have any questions or get confused, because it is a mess to look at at first. Zonelets is certainly easier to get into if it's your first time diving into JavaScript, I would recommend it to anyone if you can't already tell.

But if you're extra lazy grabbing that sticker code, I've kindly stripped and added it below.

STICKER CODE!



let stickers = [
  {
    location:   "../images/stickers/",
    file:       "buttercupsndaisies-blue",
    ext:        ".png",
    transform:  "rotate(12deg) scale(1.3)",
    href:       "../images/stickers/buttercupsndaisies-blue.png",
    id:         "sticker-gorge",
    parentid:   "content",
    alignH:     "left",
    alignV:     "top",
    offsetX:    -55,
    offsetY:    44,
  },
]

// If there are stickers, for each sticker, add it to the parent


if(stickers !== undefined) {
  for(let i=0; i<stickers.length; i++) {
    let sticker = stickers[i];
    let parent = document.getElementById(sticker.parentid);
    let stickerHref = (!(sticker.href===""))?"<a href='"+sticker.href+"' target='_blank'></a>":"";
    let stickerHTML =       
      "<div id='"+sticker.id+"' class='sticker'>"+stickerHref+"</div>"
      +"<style>#"+sticker.id+" {"
      +"background-image: url('"+ sticker.location+sticker.file+sticker.ext +"');"
      +"transform: "+sticker.transform+"; }</style>";
    
    if(parent) {
      if(!(document.getElementById(stickers[i].id)))
      {
        parent.innerHTML += stickerHTML;
      }  
    }          
  }
}

// requestAnimationFrame animate loop so we can "anchor" the sticker for every frame


let last = 0; // timestamp of the last update() call
let deltaTime = 0;
function animate(now) {
  if(!last || now - last >= 10) {
    last = now;
    for(let i=0; i<stickers.length;i++){
      anchor(stickers[i].id, stickers[i].parentid, stickers[i].alignH, stickers[i].alignV, stickers[i].offsetX, stickers[i].offsetY);        
    }

    // step in deltaTime
    deltaTime++;
  }

  requestAnimationFrame(animate);
}
animate(0);

// anchor function that handles the different types of anchoring and styles the sticker accordingly


function anchor(elementID, anchorToID, alignHori="center", alignVert="top", offsetX=0, offsetY=0) {

  if(document.getElementById(elementID) && document.getElementById(anchorToID))
  {
    elementID   = document.getElementById(elementID);
    anchorToID  = document.getElementById(anchorToID);
    let left    = anchorToID.getBoundingClientRect().left;
    let center  = anchorToID.getBoundingClientRect().width/2 + left;
    let right   = anchorToID.getBoundingClientRect().right;
    let top     = anchorToID.getBoundingClientRect().top +window.scrollY
    let middle  = anchorToID.getBoundingClientRect().height/2 + top;
    let bottom  = anchorToID.getBoundingClientRect().bottom +window.scrollY;
    offsetX     = offsetX - elementID.offsetWidth/2;
    offsetY     = offsetY - elementID.offsetHeight/2;

    alignHori = (alignHori==="left")?left:(alignHori==="center")?center:(alignHori==="right")?right:"no align selected";
    alignVert = (alignVert==="top")?top:(alignVert==="middle")?middle:(alignVert==="bottom")?bottom:"no align selected";

    elementID.style.top  = (alignVert+offsetY)+ "px";
    elementID.style.left = (alignHori+offsetX) + "px";

  }
}

With love,

April Jane