Skip to content

Instantly share code, notes, and snippets.

@aasmith

aasmith/Big Tiles.markdown

Last active August 29, 2015 14:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aasmith/ba428a0df0ffacfa35bb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aasmith/ba428a0df0ffacfa35bb to your computer and use it in GitHub Desktop.
Download ZIP
Big Tiles
Raw
index.html
- def acolor; %w(http://i.imgur.com/YO5gXkD.jpg http://i.imgur.com/W1LcvGn.jpg http://i.imgur.com/pxUg1iC.jpg http://i.imgur.com/Js5M1UU.jpg http://i.imgur.com/gfEUZbk.jpg http://i.imgur.com/sIMxNdt.jpg http://i.imgur.com/uJ3mgmZ.jpg http://i.imgur.com/CaJbELE.jpg http://i.imgur.com/rsAnQOm.jpg http://i.imgur.com/Elz2uR6.jpg http://i.imgur.com/K0L6KPM.jpg).sample; end
- def acaption; (%w(Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam eos repellendus aspernatur consequuntur perferendis tempore, necessitatibus voluptatum, sint sit velit, ducimus unde magni dolorem dignissimos. Officia, voluptatem? Temporibus, quasi doloribus.)*2).first(10 + rand*20).join(" ") ;end
-def urlncaption; [["http://i.imgur.com/YO5gXkD.jpg","Singer-songwriter Donovan performs live on stage during a concert at Schwuz on July 20, 2015 in Berlin, Germany."]] end
- @entries_per_row = 7
.base.focus
h1 Strip Title #1
.row.lean-right.squish-left
.entry
img src="http://i.imgur.com/CaJbELE.jpg"
.caption
a href="x" #hipsum
a href="x" #lorem
a href="x" #ipsum
- @entries_per_row.times do
.entry
img src=acolor
.caption =acaption
- 3.times do
h1 Strip Title #2
.row.lean-left.squish-right
.entry
img src=acolor
.caption
a href="x" #hipsum
a href="x" #lorem
a href="x" #ipsum
.entry.small
.entrywrapper
.title So This Totally Happened
.direction.right
.foo THIS ISN'T A REAL STYLE LOL Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perferendis temporibus reiciendis? Vel earum quos iste ad quaerat blanditiis asperiores incidunt
- @entries_per_row.times do
.entry
img src=acolor
.caption
a href="x" #hipsum
a href="x" #lorem
a href="x" #ipsum
h1 Strip Title #3
.row.lean-right.squish-left
- @entries_per_row.times do
.entry
img src=acolor
.caption =acaption
menu
ul
li.logo
img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Getty_Images_Logo.svg/320px-Getty_Images_Logo.svg.png"
hr DEMO
li
| Sport
.notify 3
li Celebrities
li News
li On This Day
li About
/li[onclick="window.defocus()"] De/Refocus
footer
img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Getty_Images_Logo.svg/320px-Getty_Images_Logo.svg.png"
img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-48.png"
/ Hello. This is the end of the file.
Tracking bugs/todo:
- [feature/bug] ios safari has a limit of ~8MB of images (lol).
Will need some fancy management. See http://www.fngtps.com/2010/mobile-safari-image-resource-limit-workaround/
and https://github.com/madrobby/zepto/blob/master/src/assets.js.
and some of this http://stackoverflow.com/questions/3971218/techniques-for-profiling-memory-in-safari-desktop-and-ios
- [feature] consider limiting 80vh/vw once the screen is either
huge and should just show multiple rows, or should not try and
contain a single row when the view is too short. do this with
a media query.
- [feature] play with different row heights?
- [feature] firefox skew. *might* work, but may need inline svgs.
might be painful if calc-like functions are needed. also, see
the FF roadmap for potential clip path changes.
- [bug] get some real pixel measuring in place to calculate
scroll offsets for hero image on initial page load.
- [feature/bug] paddles per row for normal mouse people to side scroll
with. this should scroll the containing row by some amount
- [feature] hjkl/arrow key support. up/down should move to next row,
possibly with visual highlight. left/right should move to next
image. no need for highlight in that direction.
== FIXED ============
- [bugish] the caption/hashtag overlay is the same size as the image
in order to skew at the same angle. it'd be nice if this didnt
overlay the whole thing as it smells like a perf hit. might need a
redesign in order to fix this problem.
Raw
script.js
# within viewport with optional multiplier padding on Y axis
#
# ..................
# | | } extra Y
# | | } top
# ..................
# |////////////////| }
# |////////////////| } viewport
# |////////////////| }
# ''''''''''''''''''
# | | } extra Y
# | | } bottom
# ''''''''''''''''''
#
window.inv = (el, extraY = 0) ->
wTop = 0 - (window.innerHeight * extraY)
wBot = window.innerHeight + (window.innerHeight * extraY)
wLeft = 0
wRight = window.innerWidth
coords = el.getBoundingClientRect()
inTop = coords.top >= wTop && coords.top <= wBot
inBottom = coords.bottom <= wBot && coords.bottom >= wTop
inLeft = coords.left >= wLeft && coords.left <= wRight
inRight = coords.right <= wRight && coords.right >= wLeft
# any coord is in viewport
return true if (inTop || inBottom) && (inLeft || inRight)
# stretches accross viewport L <-> R
return true if (inTop || inBottom) && (!inLeft && !inRight)
window.scrolled = false
window.addEventListener("scroll", -> window.scrolled = true)
window.setInterval( ->
return unless window.scrolled
for el in document.querySelectorAll(".row")
if inv(el, 0.2) # in viewport, w/ extra 20% north-south
el.classList.add("in-viewport")
else
el.classList.remove("in-viewport")
window.scrolled = false
,50)
$().ready ->
r = $(".row")[1]
r.scrollLeft = window.innerWidth * 0.65
window.scrollBy(0,window.innerHeight*0.7)
# dynamically set image width to narrow if the image is portrait
# this probably needs to check if the image is over a certain
# aspect ratio, rather than h > w
$(".entry img").each (i,e) ->
i = new Image
i.onload = ->
if i.height > i.width
e.style.width = "40vw"
i.src = e.src
$("footer img").click (e) ->
$("menu").addClass("visible")
$("menu").click (e) ->
$("menu").removeClass("visible")
# omg ios
# this makes :active styling work on tap
document.addEventListener("touchstart", ->)
window.defocus = ->
document.querySelector(".base").classList.toggle("defocus")
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
$bgcolor: black;
$squish: 12px;
$lean: 8px;
body {
margin: 0px;
background-color: $bgcolor;
font-size: 16px;
}
.row {
margin-left: -40px;
padding: 0;
margin-bottom: 4px;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
position: relative;
// scroll snapping... firefox and safari9/ios9 only
// ie supports it with more changes needed...
// http://blog.gospodarets.com/css-scroll-snap/
scroll-snap-type: mandatory;
scroll-snap-destination: 50% 50%;
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-destination: 50% 50%;
& > * {
scroll-snap-coordinate: 50% 50%;
-webkit-scroll-snap-coordinate: 50% 50%;
}
// force ios to use inertia scrolling
// for side-scrolling divs
// ... this is where the pain begins ...
-webkit-overflow-scrolling: touch;
// force ios to prevent breaking on side scroll
// forces hw accel and loading of images into GPU memory;
// too many loaded in, and we create too many layers and
// eat lots of RAM
// see http://calendar.perfplanet.com/2014/hardware-accelerated-css-the-nice-vs-the-naughty/
//
// check layers in safari inspector
//
// scroll-snap may help here -- prevents fast scrolling into
// lots of new regions that have to be loaded into gpu
&.in-viewport {
.entry {
-webkit-transform: translateZ(0);
// filter: invert(100%); // for testing!
}
}
// uncomment to overlap rows
//position: relative;
//@for $i from 2 through 60 {
// &:nth-of-type(#{$i}) {top: -#{($i - 1) * 22}px;}
//}
&.lean-right {
.entry {
-webkit-clip-path: polygon(0% 100%, calc(100% - #{$lean}) 100%, 100% 0%, $lean 0%);
}
.entry .caption {
text-align: right;
}
}
&.lean-left {
.entry {
-webkit-clip-path: polygon($lean 100%, 100% 100%, calc(100% - #{$lean}) 0%, 0% 0%);
}
.entry .caption {
text-align: left;
}
}
&.squish-right {
-webkit-clip-path: polygon(0% 100%, 100% calc(100% - #{$squish}), 100% 0%, 0% 0%);
}
&.squish-left {
-webkit-clip-path: polygon(0% calc(100% - #{$squish}), 100% 100%, 100% 0%, 0% 0%);
}
.entry {
position: relative;
margin:0;
padding:0;
display: inline-block;
vertical-align: middle;
&.small {
white-space: normal;
height: 80vh;
max-width: 40vw;
overflow: hidden;
color: white;
padding: 0 6px;
}
// don't put background-colors directly on the
// entry tile. bad clipping happens in chrome when
// accel is on (which we need for ios)
// use an .entrywrapper for applying bg color.
xbackground-color: cornflowerblue;
.entrywrapper {
border: 10px solid gold;
background-color: gold;
padding: 0;
margin: 0;
}
.title {
font-size: 4rem;
font-weight: bold;
letter-spacing: -2px;
margin: 0;
padding: 10px 5px;
background-color: seagreen;
}
.foo {
padding: 15px;
background-color: skyblue;
}
.direction {
background-color: gold;
margin: 0; padding: 0;
text-align: center;
font-size: 4rem;
&.right:before {
content: "\2192";
}
&.left:before {
content: "\2190";
}
}
// uncomment to overlap
//@for $i from 2 through 60 {
// &:nth-child(#{$i}) {left: -#{($i - 1) * 10}px;}
//}
img {
height: 80vh;
width: 80vw;
object-fit: cover;
}
.caption {
font-size: 0.8rem;
position: absolute;
bottom: 3px; // safari bug
left: 0;
right: 0;
padding: 6vmin;
color: #eee;
white-space: normal;
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
xbackground: pink;
a {
padding: 4px;
color: #ccc;
text-decoration: none;
&:hover {
color: #eee;
}
}
}
}
}
// probably get rid of these headers?
.base {
h1 {
position: absolute;
z-index: 1;
font-size: 1.2rem;
margin:0;
margin-left: 8px;
margin-top: 4px;
color: #333;
display: none;
}
h2 {
position: absolute;
right: 0;
padding: 10px;
margin: 0 20px;
}
}
footer {
position: fixed;
bottom: 0;
right: -14px;
height: 24px;
width: 100%;
text-align: right;
z-index: 350;
padding-top: 10px;
padding-bottom: 4px;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) calc(100% - 250px),rgba(255,255,255,0.85) 100%);
img {
height: 100%;
padding: 0 4px;
}
filter: invert(100%);
opacity: 0.8;
}
// test dimming concept
// won't work yet
// https://code.google.com/p/chromium/issues/detail?id=408460
.entry {
webkit-transition: filter 0.6s;
&.dim {
filter: brightness(0.2);
}
}
// application of blur
body {
xoverflow: hidden;
.base {
-webkit-transition: filter ease-in-out 2s;
-moz-transition: filter 0.6s;
&.defocus {
filter: blur(80px) saturate(250%) hue-rotate(90deg);
}
}
}
// media queries
@media screen and (orientation: portrait) {
body {
.row {
.entry {
&.small {
height: 40vh !important;
}
img {
height: 40vh !important;
}
.caption {
bottom: 0px; // even more safari bug
}
}
}
}
}
// wow such menu
menu {
position: fixed;
top:0;
bottom:0;
left: 100vw;
width: 300px;
background: white;
margin: 0;
padding:0;
z-index: 2000;
color: #333;
border-left: 2px solid #666;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
-webkit-transition: left 0.3s; // go away fast plz
&.visible {
left: calc(100vw - 300px);
-webkit-box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.52);
border-radius:1px; // shadow wont appear on ios safari without this #lol
-webkit-transition: left 0.6s; // come in fast
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
font-size: 1.4rem;
font-weight: light;
border-bottom: 1px groove #eee;
padding: 12px 22px;
position: relative;
cursor: pointer;
&:active {
background: #ddd;
}
.notify {
color: white;
background: cornflowerblue;
padding: 10px;
font-size: 1rem;
font-weight: normal;
border-radius: 20px;
margin: 0 10px;
line-height: 0.8rem;
height: 0.8rem;
min-width: 30px;
text-align: center;
display: inline-block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
&.logo {
padding: 16px 0;
padding-top: 22px;
text-align: center;
background: #222;
font-size: 1.1rem;
color: #555;
hr {
margin: 8px 16px;
height: 0;
border: none;
border-bottom: 1px solid #555;
}
img {
max-width: 80%;
filter: invert(100%);
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment