Skip to content

Instantly share code, notes, and snippets.

@C-Rodg

C-Rodg/American Sports Leagues.markdown

Created May 26, 2016 19:35
Show Gist options
  • Save C-Rodg/747f332436034f18253f96cb2bc7abc6 to your computer and use it in GitHub Desktop.
Save C-Rodg/747f332436034f18253f96cb2bc7abc6 to your computer and use it in GitHub Desktop.
Download ZIP
American Sports Leagues
Raw
American Sports Leagues.markdown

American Sports Leagues

Animating an html list of cities based on radio inputs. Using advanced css selectors and data attributes to base animations off of.

A Pen by C-Rodg on CodePen.

License.

Raw
index.html
<div class="container">
<h1>American Sports Leagues</h1>
<input id="nba" type="radio" name="leagues">
<label for="nba">NBA</label>
<input id="mls" type="radio" name="leagues">
<label for="mls">MLS</label>
<input id="nfl" type="radio" name="leagues">
<label for="nfl">NFL</label>
<input id="nhl" type="radio" name="leagues">
<label for="nhl">NHL</label>
<input id="mlb" type="radio" name="leagues">
<label for="mlb">MLB</label>
<br/>
<ul class="city">
<li id="seattle" data-teams="mls mlb nfl">
<h2>Seattle</h2>
<img src="http://www.dansorensenphotography.com/wp-content/uploads/seattle-space-needle-kerry-park-night-256x256.jpg" alt="">
</li>
<li id="boston" data-teams="mls mlb nfl nhl nba">
<h2>Boston</h2>
<img src="http://www.massvacation.com/wp-content/uploads/2013/06/1_boston__0000_istock_000011012295large.jpg" alt="">
</li>
<li id="losangeles" data-teams="mls mlb nba nhl">
<h2>Los Angeles</h2>
<img src="http://www.dorchestercollection.com/uploads/images/Collection/FullLengthImages/Medium/city-los-angeles-luxury.jpg" alt="">
</li>
<li id="sanantonio" data-teams="nba">
<h2>San Antonio</h2>
<img src="http://foto.hrsstatic.com/fotos/3/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F1%2F3%2F3%2F1%2F133105%2F133105_u_5942618.jpg/Dy4p%2BghnKrUEWitTKO03Lg%3D%3D/197,141/1/BEST_WESTERN_ALAMO_SUITES-San_Antonio-Info-9-133105.jpg" alt="">
</li>
<li id="portland" data-teams="mls nba">
<h2>Portland</h2>
<img src="http://www.yourroadmaptohome.com/blog/wp-content/uploads/2010/09/A-MADE-IN-OREGON-B.gif" alt="">
</li>
<li id="sanfran" data-teams="mlb nfl nba">
<h2>San Francisco</h2>
<img src="https://s-media-cache-ak0.pinimg.com/236x/92/51/75/925175d9f70df42b68179fe38c76f603.jpg" alt="">
</li>
<li id="newyork" data-teams="mls mlb nfl nhl nba">
<h2>New York</h2>
<img src="http://images.wildtangent.com/monumentbuilderslibertyandroid/big_icon.jpg" alt="">
</li>
<li id="chicago" data-teams="mls mlb nfl nhl nba">
<h2>Chicago</h2>
<img src="http://foto.hrsstatic.com/fotos/3/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F1%2F3%2F9%2F0%2F139035%2F139035_u_2784013.jpg/D0sszCpwmkCYpm7Tts95UQ%3D%3D/128,128/1/Hampton_Inn_Chicago-Gurnee-Warren-Gurnee-Info-10-139035.jpg" alt="">
</li>
<li id="houston" data-teams="mlb nfl nba">
<h2>Houston</h2>
<img src="https://pbs.twimg.com/profile_images/3462541504/e251cbe377d8d873060165a38fb5d5ba.jpeg" alt="">
</li>
<li id="philly" data-teams="mls mlb nfl nhl nba">
<h2>Philadelphia</h2>
<img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F1%2F3%2F2%2F4%2F132430%2F132430_u_6063743.jpg/GoU04IQR%2B%2BW4qDvXOnjxkw%3D%3D/196,280/1/Holiday_Inn_Express_PHILADELPHIA_E_-_PENNS_LANDING-Philadelphia-Info-20-132430.jpg" alt="">
</li>
<li id="sandiego" data-teams="mlb nfl">
<h2>San Diego</h2>
<img src="http://www.orbitz.com/public/ANS/Dynaflex/Images/TravelGuide/SanDiego-California_Intro_345x225.jpg" alt="">
</li>
<li id="dallas" data-teams="mls nfl nba mlb nhl">
<h2>Dallas</h2>
<img src="https://media-cdn.tripadvisor.com/media/photo-s/01/70/fb/0c/dallas-skyline-texas.jpg" alt="">
</li>
<li id="detroit" data-teams="nhl mlb nfl nba">
<h2>Detroit</h2>
<img src="http://www.gannett-cdn.com/-mm-/e3609889c8ffd082e61a6d6eefc12014774fa3ec/c=331-0-3521-2398&r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2014/02/21//1392998353000-022114detroit-skyline.jpg" alt="">
</li>
<li id="sanjose" data-teams="mls nhl">
<h2>San Jose</h2>
<img src="https://geography2144gpriyapatel.files.wordpress.com/2012/03/san-jose1.jpg" alt="">
</li>
<li id="indy" data-teams="nfl nba">
<h2>Indianapolis</h2>
<img src="http://homewoodsuites3.hilton.com/resources/media/hw/INDHWHW/en_US/img/shared/full_page_image_gallery/main/hw_whiteriver_4_505x305_FitToBoxSmallDimension_Center.jpg" alt="">
</li>
<li id="jacksonville" data-teams="nfl">
<h2>Jacksonville</h2>
<img src="http://bungobox.com/images/uploads/jacksonville_skyline.jpg" alt="">
</li>
<li id="memphis" data-teams="nba">
<h2>Memphis</h2>
<img src="http://www.graceland.com/!userfiles/Plan%20Your%20Trip/Memphis_VerticalResponsive.jpg" alt="">
</li>
<li id="baltimore" data-teams="nfl mlb">
<h2>Baltimore</h2>
<img src="http://hopesprings.org/wp-content/uploads/2011/06/400px-Baltimore24.jpg" alt="">
</li>
<li id="dc" data-teams="nhl nba mls mlb nfl">
<h2>Washington D.C.</h2>
<img src="http://alumni.umich.edu/clubs/sites/default/files/uploads/washington_dc.jpg" alt="">
</li>
<li id="denver" data-teams="nba nhl mls mlb nfl">
<h2>Denver</h2>
<img src="https://synoptek.com/wp-content/uploads/2014/09/denvercity.jpg" alt="">
</li>
<li id="okc" data-teams="nba">
<h2>Oklahoma City</h2>
<img src="http://archrecord.construction.com/features/2012/American-City/Oklahoma/Oklahoma-City-essay-main.jpg" alt="">
</li>
</ul>
</div>
Raw
style.css
body, html {
background-color: rgb(26, 65, 74);
background: #2980b9;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 1024px;
margin: 0 auto;
text-align: center;
color: white;
}
h1 {
font-size: 35px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
color: #f9f9f9;
}
.city li {
display:inline-block;
position:relative;
margin: 10px;
padding: 0;
width: 100px;
height: 100px;
}
.city h2 {
display: none;
position: absolute;
z-index: 2;
top: 70px;
left: 0;
right: 0;
margin: 0;
padding: 4px;
border: 1px solid #ccc;
color: #fff;
background-color: #000;
font-size: 14px;
font-weight: normal;
}
input {
margin-left: -9999px;
position: absolute;
}
label {
border: 1px solid #fff;
padding: 10px 14px;
cursor: pointer;
background: transparent;
border-radius: 2px;
transition: background 0.25s;
letter-spacing: 0.5px;
}
label:hover {
background: #1B5479;
}
input:checked + label {
background: #1B5479;
}
.city img {
width: 100px;
height: 100px;
border: 4px solid #fff;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 20px #000;
opacity: .25;
transform: scale(.5);
}
#nba:checked ~ .city [data-teams~="nba"] h2,
#nfl:checked ~ .city [data-teams~="nfl"] h2,
#nhl:checked ~ .city [data-teams~="nhl"] h2,
#mls:checked ~ .city [data-teams~="mls"] h2,
#mlb:checked ~ .city [data-teams~="mlb"] h2 {
display: block;
}
#nba:checked ~ .city [data-teams~="nba"] img,
#nfl:checked ~ .city [data-teams~="nfl"] img,
#nhl:checked ~ .city [data-teams~="nhl"] img,
#mls:checked ~ .city [data-teams~="mls"] img,
#mlb:checked ~ .city [data-teams~="mlb"] img {
animation: addIn .3s forwards;
}
@-webkit-keyframes addIn {
70% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes addIn {
70% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment