tuna

/tuna
­

About tuna

This author has not yet filled in any details.
So far tuna has created 3 blog entries.

slide in

Code Grid: {"settings":{"resources":[],"title":""},"code":{"html":"%3Csection%3E%20%20%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%3C%2Fsection%3E","js":"(function(%24)%20%7B%0A%0A%20%20%2F**%0A%20%20%20*%20Copyright%202012%2C%20Digital%20Fusion%0A%20%20%20*%20Licensed%20under%20the%20MIT%20license.%0A%20%20%20*%20http%3A%2F%2Fteamdf.com%2Fjquery-plugins%2Flicense%2F%0A%20%20%20*%0A%20%20%20*%20%40author%20Sam%20Sehnert%0A%20%20%20*%20%40desc%20A%20small%20plugin%20that%20checks%20whether%20elements%20are%20within%0A%20%20%20*%20%20%20%20%20the%20user%20visible%20viewport%20of%20a%20web%20browser.%0A%20%20%20*%20%20%20%20%20only%20accounts%20for%20vertical%20position%2C%20not%20horizontal.%0A%20%20%20*%2F%0A%0A%20%20%24.fn.visible%20%3D%20function(partial)%20%7B%0A%20%20%20%20%0A%20%20%20%20%20%20var%20%24t%20%20%20%20%20%20%20%20%20%20%20%20%3D%20%24(this)%2C%0A%20%20%20%20%20%20%20%20%20%20%24w%20%20%20%20%20%20%20%20%20%20%20%20%3D%20%24(window)%2C%0A%20%20%20%20%20%20%20%20%20%20viewTop%20%20%20%20%20%20%20%3D%20%24w.scrollTop()%2C%0A%20%20%20%20%20%20%20%20%20%20viewBottom%20%20%20%20%3D%20viewTop%20%2B%20%24w.height()%2C%0A%20%20%20%20%20%20%20%20%20%20_top%20%20%20%20%20%20%20%20%20%20%3D%20%24t.offset().top%2C%0A%20%20%20%20%20%20%20%20%20%20_bottom%20%20%20%20%20%20%20%3D%20_top%20%2B%20%24t.height()%2C%0A%20%20%20%20%20%20%20%20%20%20compareTop%20%20%20%20%3D%20partial%20%3D%3D%3D%20true%20%3F%20_bottom%20%3A%20_top%2C%0A%20%20%20%20%20%20%20%20%20%20compareBottom%20%3D%20partial%20%3D%3D%3D%20true%20%3F%20_top%20%3A%20_bottom%3B%0A%20%20%20%20%0A%20%20%20%20return%20((compareBottom%20%3C%3D%20viewBottom)%20%26%26%20(compareTop%20%3E%3D%20viewTop))%3B%0A%0A%20%20%7D%3B%0A%20%20%20%20%0A%7D)(jQuery)%3B%0A%0Avar%20win%20%3D%20%24(window)%3B%0A%0Avar%20allMods%20%3D%20%24(%22.module%22)%3B%0A%0AallMods.each(function(i%2C%20el)%20%7B%0A%20%20var%20el%20%3D%20%24(el)%3B%0A%20%20if%20(el.visible(true))%20%7B%0A%20%20%20%20el.addClass(%22already-visible%22)%3B%20%0A%20%20%7D%20%0A%7D)%3B%0A%0Awin.scroll(function(event)%20%7B%0A%20%20%0A%20%20allMods.each(function(i%2C%20el)%20%7B%0A%20%20%20%20var%20el%20%3D%20%24(el)%3B%0A%20%20%20%20if%20(el.visible(true))%20%7B%0A%20%20%20%20%20%20el.addClass(%22come-in%22)%3B%20%0A%20%20%20%20%7D%20%0A%20%20%7D)%3B%0A%20%20%0A%7D)%3B","css":"*%20%7B%0A%20%20-moz-box-sizing%3A%20border-box%3B%0A%20%20-webkit-box-sizing%3A%20border-box%3B%0A%20%20box-sizing%3A%20border-box%3B%0A%7D%0A%0Asection%20%7B%0A%20%20background%3A%20%23eee%3B%0A%20%20max-width%3A%20600px%3B%0A%20%20margin%3A%200%20auto%3B%0A%20%20padding%3A%2020px%3B%0A%20%20overflow%3A%20hidden%3B%0A%7D%0A%0A.module%20%7B%0A%20%20width%3A%2048%25%3B%0A%20%20min-height%3A%20200px%3B%0A%20%20background%3A%20white%3B%0A%20%20position%3A%20relative%3B%0A%20%20float%3A%20left%3B%0A%20%20padding%3A%2020px%3B%0A%20%20margin-right%3A%204%25%3B%0A%20%20margin-bottom%3A%204%25%3B%0A%20%20box-shadow%3A%200%201px%203px%20rgba(0%2C%200%2C%200%2C%200.2)%3B%0A%7D%0A.module%3Anth-child(even)%20%7B%0A%20%20margin-right%3A%200%3B%0A%7D%0A%0Abody%20%7B%0A%20%20background%3A%20url(https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fs.cdpn.io%2F3%2Fblurry-blue.jpg)%3B%0A%20%20background-size%3A%20cover%3B%0A%20%20padding%3A%2030px%3B%0A%7D%0A%0A.come-in%20%7B%0A%20%20transform%3A%20translateY(150px)%3B%0A%20%20animation%3A%20come-in%200.8s%20ease%20forwards%3B%0A%7D%0A%0A.come-in%3Anth-child(odd)%20%7B%0A%20%20animation-duration%3A%200.6s%3B%0A%7D%0A%0A.already-visible%20%7B%0A%20%20transform%3A%20translateY(0)%3B%0A%20%20animation%3A%20none%3B%0A%7D%0A%0A%40keyframes%20come-in%20%7B%0A%20%20to%20%7B%0A%20%20%20%20transform%3A%20translateY(0)%3B%0A%20%20%7D%0A%7D"}} <section> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div></section> (function($) { /** [...]

By |March 23rd, 2018|Uncategorized|Comments Off on slide in

Pulsate

Code Grid: {"settings":{"resources":[],"title":"Pulsate"},"code":{"html":"%3Cdiv%20class%3D%22shoppable-image-pin%20shoppable-image-pin-0%22%20style%3D%22left%3A100px%3B%22%3E%20%0A%20%20%3Cspan%20class%3D%22shoppable-image-pin-pulse%22%3E%3C%2Fspan%3E%20%0A%20%20%3Cspan%20class%3D%22shoppable-image-pin-icon%22%3E1%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22shoppable-image-pin%20shoppable-image-pin-0%22%20style%3D%22left%3A50px%3Btop%3A100px%3B%22%3E%20%0A%20%20%3Cspan%20class%3D%22shoppable-image-pin-pulse%22%3E%3C%2Fspan%3E%20%0A%20%20%3Cspan%20class%3D%22shoppable-image-pin-icon%22%3E2%3C%2Fspan%3E%0A%3C%2Fdiv%3E","js":"","css":"body%20%7B%0A%20%20background%3A%23999%3B%0A%7D%0A%0A.pins-visible%20.shoppable-image-pin%20%7B%0A%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20-webkit-transform%3A%20translate(0%2C0)%3B%0A%20%20%20%20-moz-transform%3A%20translate(0%2C0)%3B%0A%20%20%20%20-ms-transform%3A%20translate(0%2C0)%3B%0A%20%20%20%20-o-transform%3A%20translate(0%2C0)%3B%0A%20%20%20%20transform%3A%20translate(0%2C0)%3B%0A%7D%0A.shoppable-image-pin%3Anth-of-type(1)%20%7B%0A%20%20%20%20-webkit-transition-delay%3A%20375ms%3B%0A%20%20%20%20-moz-transition-delay%3A%20375ms%3B%0A%20%20%20%20-o-transition-delay%3A%20375ms%3B%0A%20%20%20%20transition-delay%3A%20375ms%3B%0A%7D%0A%0A.shoppable-image-pin%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20z-index%3A%205%3B%0A%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20-webkit-transition%3A%20375ms%3B%0A%20%20%20%20-moz-transition%3A%20375ms%3B%0A%20%20%20%20-o-transition%3A%20375ms%3B%0A%20%20%20%20transition%3A%20375ms%3B%0A%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20-webkit-transform%3A%20translate(0%2C100%25)%3B%0A%20%20%20%20-moz-transform%3A%20translate(0%2C100%25)%3B%0A%20%20%20%20-ms-transform%3A%20translate(0%2C100%25)%3B%0A%20%20%20%20-o-transform%3A%20translate(0%2C100%25)%3B%0A%20%20%20%20transform%3A%20translate(0%2C100%25)%3B%0A%7D%0A%0A.shoppable-image-pin-pulse%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20background%3A%20%23fff%3B%0A%20%20%20%20border-radius%3A%20100px%3B%0A%20%20%20%20height%3A%2060px%3B%0A%20%20%20%20width%3A%2060px%3B%0A%20%20%20%20-webkit-animation%3A%20adace_pulsate%202s%20ease-out%20infinite%3B%0A%20%20%20%20animation%3A%20adace_pulsate%202s%20ease-in-out%20infinite%3B%0A%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20top%3A%20-10px%3B%0A%20%20%20%20left%3A%20-10px%3B%0A%20%20%20%20z-index%3A%20-1%3B%0A%7D%0A%0A.shoppable-image-pin%3Anth-of-type(2)%20.shoppable-image-pin-pulse%20%7B%0A%20%20%20%20animation-delay%3A%20.25s%3B%0A%20%20%20%20-webkit-animation-delay%3A%20.25s%3B%0A%7D%0A.shoppable-image-pin%3Anth-of-type(3)%20.shoppable-image-pin-pulse%20%7B%0A%20%20%20%20animation-delay%3A%20.5s%3B%0A%20%20%20%20-webkit-animation-delay%3A%20.5s%3B%0A%7D%0A.shoppable-image-pin%3Anth-of-type(4)%20.shoppable-image-pin-pulse%20%7B%0A%20%20%20%20animation-delay%3A%20.75s%3B%0A%20%20%20%20-webkit-animation-delay%3A%20.75s%3B%0A%7D%0A%0A%0A%40keyframes%20adace_pulsate%7B%0A0%25%20%7B%0A%20%20%20%20transform%3A%20scale(.1)%3B%0A%20%20%20%20opacity%3A%200%3B%0A%7D%0A50%25%20%7B%0A%20%20%20%20opacity%3A%20.75%3B%0A%7D%0A100%25%20%7B%0A%20%20%20%20transform%3A%20scale(1.25)%3B%0A%20%20%20%20opacity%3A%200%3B%0A%7D%0A%7D%0A%0A%40-webkit-keyframes%20adace_pulsate%7B%0A0%25%20%7B%0A%20%20%20%20transform%3A%20scale(.1)%3B%0A%20%20%20%20opacity%3A%200%3B%0A%7D%0A50%25%20%7B%0A%20%20%20%20opacity%3A%20.75%3B%0A%7D%0A100%25%20%7B%0A%20%20%20%20transform%3A%20scale(1.25)%3B%0A%20%20%20%20opacity%3A%200%3B%0A%7D%0A%7D%0A%20%20%0A%40-moz-keyframes%20adace_pulsate%7B%0A0%25%20%7B%0A%20%20%20%20transform%3A%20scale(.1)%3B%0A%20%20%20%20opacity%3A%200%3B%0A%7D%0A50%25%20%7B%0A%20%20%20%20opacity%3A%20.75%3B%0A%7D%0A100%25%20%7B%0A%20%20%20%20transform%3A%20scale(1.25)%3B%0A%20%20%20%20opacity%3A%200%3B%0A%7D%0A%7D%0A%20%20%0A%40-o-keyframes%20adace_pulsate%7B%0A0%25%20%7B%0A%20%20%20%20transform%3A%20scale(.1)%3B%0A%20%20%20%20opacity%3A%200%3B%0A%7D%0A50%25%20%7B%0A%20%20%20%20opacity%3A%20.75%3B%0A%7D%0A100%25%20%7B%0A%20%20%20%20transform%3A%20scale(1.25)%3B%0A%20%20%20%20opacity%3A%200%3B%0A%7D%0A%7D%0A%0A.shoppable-image-pin-icon%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20width%3A%2040px%3B%0A%20%20%20%20height%3A%2040px%3B%0A%20%20%20%20padding%3A%208px%200%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20color%3A%20%23000%3B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20line-height%3A%2024px%3B%0A%20%20%20%20vertical-align%3A%20bottom%3B%0A%20%20%20%20background-color%3A%20%23fff%3B%0A%20%20%20%20z-index%3A%205%3B%0A%20%20%20%20font-weight%3A%20600%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%20%20-webkit-transition%3A%20375ms%3B%0A%20%20%20%20-moz-transition%3A%20375ms%3B%0A%20%20%20%20-o-transition%3A%20375ms%3B%0A%20%20%20%20transition%3A%20375ms%3B%0A%20%20%20%20-webkit-box-sizing%3A%20border-box%3B%0A%20%20%20%20-moz-box-sizing%3A%20border-box%3B%0A%20%20%20%20box-sizing%3A%20border-box%3B%0A%7D%0A%0A%0A.shoppable-image-pin-icon%20%7B%0A%20%20%20%20padding%3A%208px%200%3B%0A%20%20%20%20color%3A%20%23000%3B%0A%20%20%20%20background-color%3A%20%23fff%3B%0A%7D"}} <div class="shoppable-image-pin shoppable-image-pin-0" style="left:100px;"> <span class="shoppable-image-pin-pulse"></span> <span class="shoppable-image-pin-icon">1</span> </div> <div class="shoppable-image-pin shoppable-image-pin-0" style="left:50px;top:100px;"> <span class="shoppable-image-pin-pulse"></span> <span class="shoppable-image-pin-icon">2</span> </div> body { background:#999; } .pins-visible .shoppable-image-pin { opacity: 1; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } .shoppable-image-pin:nth-of-type(1) { -webkit-transition-delay: 375ms; -moz-transition-delay: 375ms; -o-transition-delay: 375ms; transition-delay: 375ms; } .shoppable-image-pin { position: [...]

By |March 23rd, 2018|Uncategorized|Comments Off on Pulsate

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

By |December 21st, 2015|Uncategorized|0 Comments