Skip to content

Instantly share code, notes, and snippets.

@luqui

luqui/baseball.html

Last active February 27, 2017 02:54
Show Gist options
  • Save luqui/16158291f6fb6c4d16bd64ebcc99730f to your computer and use it in GitHub Desktop.
Save luqui/16158291f6fb6c4d16bd64ebcc99730f to your computer and use it in GitHub Desktop.
Download ZIP
HTML help for Luke J
Raw
baseball.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
font-family:"Impact";
font-size: 48pt;
text-align: left;
text-indent: 48px;
color: #000;
}
h2 {
font-family:"Tahoma";
font-size: 48pt;
text-align: left;
text-indent: 48px;
color: #000;
}
#backface { width: 485px }
.flip3D{ width:485px; height:475px; margin:10px; float:left; }
.flip3D > .front{
position: absolute;
-webkit-transform: perspective( 600px ) rotateY( 0deg );
background: #Fc0; width:475px; height:475px; border-radius: 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}
.flip3D > .back{
position: absolute;
-webkit-transform: perspective( 600px ) rotateY( 180deg );
transform: perspective( 600px ) rotateY( 180deg );
background: #80bfff; width:485px; height:475px; border-radius: 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
-webkit-transform: perspective( 600px ) rotateY( -180deg );
transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
-webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg );
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
// Standard jQuery stuff -- do the following right as the page is loaded.
$(function() {
// Array of URLs to images of players. Just add to the end of this (don't forget the comma!) to add more players.
var players = [
"https://i.ytimg.com/vi/hmv6DendI48/maxresdefault.jpg",
"http://www.cheatsheet.com/wp-content/uploads/2015/08/James-Harden-Scott-Halleran-Getty-Images.jpg"
];
// Add a hover event handler (see jQuery documentation: https://api.jquery.com/hover/ ),
// i.e. the function I'm giving this is what to do when the mouse hovers over the element
// with id card_flip. Notice that I've given the div below id="card_flip" so that I can
// refer to it here.
$('#card_flip').hover(function() {
// Generate a random index in the range 0 to the length of the players array.
var image_index = Math.floor(Math.random() * players.length);
var image_url = players[image_index];
// Set the <img id="backface"> element (see below)'s url to the url we have selected.
$('#backface').attr('src', image_url);
},
function() {
// This empty function just means don't do anything special when the mouse leaves
// the card_flip element.
});
});
</script>
</head>
<body>
<!-- I have added a few id="..." names so I can refer to the elements from javascript. -->
<div class="flip3D" id="card_flip">
<div class="back"> <img id="backface"> </div>
<div class="front"> <img src="http://www.logodesignlove.com/images/classic/nba-logo.jpg"> </div>
</div>
<h1 style="position: absolute; top: 10px; left: 520px;"> <strong> NBA </strong> </h1> <h2 style="position: absolute; top: 1px; left: 623px;">-Flip </h2>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment