Skip to content

Instantly share code, notes, and snippets.

View leemark's full-sized avatar
:atom:
building

Mark Lee leemark

:atom:
building
55 followers · 55 following
View GitHub Profile
@leemark
leemark / gist:83571d9f8f0e3ad853a8
Last active March 11, 2022 02:19
Markup example for https://github.com/leemark/better-simple-slideshow
<div class="slideshow-class-goes-here">
<figure>
<img src="path/to/img" width="100%" />
<figcaption>Caption goes here</figcaption>
</figure>
<!-- more figures here as needed -->
</div>
@leemark
leemark / gist:c6e0f5c47acb7bf9be16
Last active August 29, 2015 14:05
options for https://github.com/leemark/better-simple-slideshow
var opts = {
//auto-advancing slides? accepts boolean (true/false) or object
auto : {
// speed to advance slides at. accepts number of milliseconds
speed : 2500,
// pause advancing on mouseover? accepts boolean
pauseOnHover : true
},
// show fullscreen toggle? accepts boolean
fullScreen : true,
@leemark
leemark / gist:11237860
Last active November 21, 2016 17:24
prefixed CSS for slideshow example
/* http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/ */
.css-slideshow {
position: relative;
max-width: 495px;
height: 370px;
margin: 1em auto .5em auto;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.css-slideshow figure {
@leemark
leemark / change-color-on-scroll.markdown
Created January 12, 2014 16:38
A Pen by Mark Lee.
@leemark
leemark / Fibonacci-circles.markdown
Created December 19, 2013 06:42
A Pen by Mark Lee.
@leemark
leemark / jsbin.UmUSAJa.html
Created November 26, 2013 02:01
JavaScript convert string to number: parseInt vs. parseFloat vs. unary operator
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="JavaScript convert string to number: parseInt vs. parseFloat vs. unary op" /><meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
@leemark
leemark / style.css
Created October 31, 2013 06:06
A Pen by Mark Lee.
body{
min-height: 100vh;
min-width: 100vw;
background-color: #000;
background-image:url('http://imgur.com/Mcj5wR3.jpg');
background-size: cover;
background-repeat: no-repeat;
animation: slides 120s infinite;
}
@keyframes slides{
@leemark
leemark / A-super-simple-geolocation-example.markdown
Created October 28, 2013 01:22
A Pen by Mark Lee.
@leemark
leemark / index.html
Last active December 21, 2015 05:09
A CodePen by leemark. Simple image crossfade slideshow - CSS animation - A simple CSS animation, with a staggered start time for each image. A nice little algorithm for calculating the animation timing percentages can be found at: http://css3.bradshawenterprises.com/cfimg/
<ul>
<li><img width="495" height="370" title="" alt="css3" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAARgAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABAMDAwMDBAMDBAYEAwQGBwUEBAUHCAYGBwYGCAoICQkJCQgKCgwMDAwMCgwMDQ0MDBERERERFBQUFBQUFBQUFAEEBQUIBwgPCgoPFA4ODhQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgBcgHvAwERAAIRAQMRAf/EALQAAAMBAQADAQAAAAAAAAAAAAIDBAEABQYHCAEBAQEBAQEBAQAAAAAAAAAAAAECAwQFBgcQAAICAQIEBAEHCAYEDAYDAAABAgMRIQQxQRMFUWESBnGBkdHSkxQHoSIyklQVVRax8WKCoiPB4VKU8EJywjNzo8O0NUUIQ4MkRCVlJkYXEQEBAQACAQIFAgUCBgMAAAAAARECEgMhBFGRUhMFMRRBYbHRFSIy8HGh4fFCgSMG/9oADAMBAAIRAxEAPwD8xYMvotwRW4A7AV2AmO9I0xvpCtSyRWuIMd6AO9AGqBFx3oKmO6b8CpjPR5AEoEUXoIrukFY6is4HpGowx1cjbmzpLkgY7pFTHdIg7pBWdLyBjHSVMd0AmO6L5lMd0QY7okMd0GFx3QGrjegExvQBjuh5Ax3QBjeh5BMd93BjntyauB6Go0xnSCYzpeRV6s6WoMZ0sAxnTBgXWEwPTKmMdZUwPoCM9BRnoAz0hHekDseAGYAzBUdgDmkBmAjgMA8nhnme7G4IY3AaxvpBjvSDG+gGN9HAhglDHIauO9A1cF6BpjlAJglEK30Ab6BpjvRyCY3pgaqgrVAo70II7pmmLGOo1rGO6XkDHKoGN6XkVMZ0vIqY7o+QGqkLjuiExzoKY7oAd0CDeh5
@leemark
leemark / mediaqueries.css
Created April 12, 2013 03:29
super-simple media query example stylesheet
@media screen and (max-width: 599px) {
body {
background: #BADA55;
}
}