Last active
August 29, 2015 13:57
-
-
Save ph3nx/9548122 to your computer and use it in GitHub Desktop.
CardFan for TSS website.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #fff; | |
| font-size: 16px; | |
| font-family: helvetica; | |
| } | |
| .jwlogo { | |
| display: none; | |
| } | |
| img { | |
| border: none; | |
| } | |
| .cardfan { | |
| height: 300px; | |
| width: 400px; | |
| margin: 30px auto; | |
| position: relative; | |
| background-color: #fff; | |
| text-align: center; | |
| } | |
| .cardfan img { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .cardfan .card { | |
| position: absolute; | |
| left: 40px; | |
| top: 30px; | |
| width: 300px; | |
| height: 200px; | |
| box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2); | |
| transform-origin: 300px 400px; | |
| transition: all .2s linear; | |
| padding: 5px; | |
| background-color: #fff; | |
| } | |
| .cardfan .card:hover { | |
| z-index: 1; | |
| box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.5); | |
| opacity: 1 !important; | |
| border: none; | |
| } | |
| .cardfan .card:hover .over { | |
| display: block; | |
| } | |
| .cardfan .flag { | |
| width: 80px; | |
| height: 80px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 2; | |
| } | |
| .cardfan .over { | |
| background-color: rgba(0, 0, 0, 0.8); | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| display: none; | |
| } | |
| .cardfan .over span { | |
| margin: 10px 10px 10px 100px; | |
| display: block; | |
| font-size: 20px; | |
| color: #fff; | |
| } | |
| .cardfan:hover .card { | |
| opacity: .9; | |
| } | |
| .shadow { | |
| background: rgba(17, 17, 17, 0.7); | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| position: absolute; | |
| z-index: 10; | |
| display: none; | |
| } | |
| .lightbox { | |
| position: absolute; | |
| display: none; | |
| z-index: 11; | |
| top: 10%; | |
| left: 33%; | |
| width: 33%; | |
| } | |
| .lightbox .playerbox { | |
| background-color: #eee; | |
| padding: 5px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div class="lightbox" id="lightbox"> | |
| <div class="playerbox"></div> | |
| </div> | |
| <div class="shadow" id="shadow"></div> | |
| <div class="cardfan"> | |
| <div class="card"> | |
| <img src="http://imageshack.com/a/img837/4325/tgk0.png"><img class= | |
| "flag" src="//imageshack.com/a/img811/6171/smjg.png"> | |
| <div class="over"> | |
| <span>Esta película cuenta con los sellos para FPSO, aceite y | |
| las plataformas de perforación de petróleo y gas y los equipos | |
| submarinos.</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="http://imageshack.com/a/img837/4325/tgk0.png"><img class= | |
| "flag" src="//imageshack.com/a/img138/909/q9bo.png"> | |
| <div class="over"> | |
| <span>這個電影講述密封件的FPSO，石油鑽機，石油和天然氣海底設備</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="http://imageshack.com/a/img837/4325/tgk0.png"><img class= | |
| "flag" src="//imageshack.com/a/img822/2629/z8vg.png"> | |
| <div class="over"> | |
| <span>This film features seals for FPSOs, oil & drilling | |
| rigs and oil & gas subsea equipment.</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="http://imageshack.com/a/img837/4325/tgk0.png"><img class= | |
| "flag" src="//imageshack.com/a/img822/2629/z8vg.png"> | |
| <div class="over"> | |
| <span>This film features seals for FPSOs, oil & drilling | |
| rigs and oil & gas subsea equipment.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| $('.card').click(function() { | |
| $('#lightbox, #shadow').show(); | |
| $('.playerbox').append($('<div>', { | |
| id: 'jwp' | |
| })); | |
| return jwplayer('jwp').setup({ | |
| playlist: 'https://jwpsrv.com/feed/DkKfN3Wf.rss', | |
| width: '100%', | |
| aspectratio: '16:9' | |
| }); | |
| }); | |
| $('#shadow').click(function() { | |
| $('#lightbox, #shadow').hide(); | |
| return $('#jwp').remove(); | |
| }); | |
| $(function() { | |
| return $('.cardfan').each(function() { | |
| var f, i, n, x; | |
| n = $(this).children('.card').length; | |
| if (n > 1) { | |
| x = 20 / n; | |
| i = 0; | |
| f = -8; | |
| return $(this).children('.card').each(function() { | |
| $(this).css('transform', 'rotate(' + (f + i * x) + 'deg)'); | |
| return i++; | |
| }); | |
| } | |
| }); | |
| }); | |
| $('.cardfan').hover(function() { | |
| var f, i, n, x; | |
| n = $(this).children('.card').length; | |
| if (n > 1) { | |
| x = 45 / n; | |
| i = 0; | |
| f = -20; | |
| return $(this).children('.card').each(function() { | |
| $(this).css('transform', 'rotate(' + (f + i * x) + 'deg)'); | |
| return i++; | |
| }); | |
| } | |
| }, function() { | |
| var f, i, n, x; | |
| n = $(this).children('.card').length; | |
| if (n > 1) { | |
| x = 20 / n; | |
| i = 0; | |
| f = -8; | |
| return $(this).children('.card').each(function() { | |
| $(this).css('transform', 'rotate(' + (f + i * x) + 'deg)'); | |
| return i++; | |
| }); | |
| } | |
| }); | |
| }).call(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment