Skip to content

Instantly share code, notes, and snippets.

Avatar

Mark Lee leemark

View GitHub Profile
View gist:c6e0f5c47acb7bf9be16
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 Nov 21, 2016
prefixed CSS for slideshow example
View gist:11237860
/* 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 / jsbin.UmUSAJa.html
Created Nov 26, 2013
JavaScript convert string to number: parseInt vs. parseFloat vs. unary operator
View jsbin.UmUSAJa.html
<!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 Oct 31, 2013
A Pen by Mark Lee.
View style.css
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 / index.html
Last active Dec 21, 2015
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/
View index.html
<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 Apr 12, 2013
super-simple media query example stylesheet
View mediaqueries.css
@media screen and (max-width: 599px) {
body {
background: #BADA55;
}
}
@leemark
leemark / index.html
Created Mar 28, 2013
x-webkit-speech example
View index.html
<input type="text" x-webkit-speech />