<!--
Based on dribbble shot and principle repo:
https://dribbble.com/shots/2337668-Day-10-Social-Share
http://principlerepo.com/social-share/
-->
<div class="container">
<article class="story">
<header class="story__header">
<a href="" class="btn btn--share">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<path d="M13.5 11c-0.706 0-1.342 0.293-1.797 0.763l-6.734-3.367c0.021-0.129 0.032-0.261 0.032-0.396s-0.011-0.267-0.032-0.396l6.734-3.367c0.455 0.47 1.091 0.763 1.797 0.763 1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5-2.5 1.119-2.5 2.5c0 0.135 0.011 0.267 0.031 0.396l-6.734 3.367c-0.455-0.47-1.091-0.763-1.797-0.763-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5c0.706 0 1.343-0.293 1.797-0.763l6.734 3.367c-0.021 0.129-0.031 0.261-0.031 0.396 0 1.381 1.119 2.5 2.5 2.5s2.5-1.119 2.5-2.5c0-1.381-1.119-2.5-2.5-2.5z"></path>
</svg>
</a>
<div class="story__image" style="background-image: url('https://static01.nyt.com/images/2015/11/03/science/03NAVIGATESUB/03NAVIGATESUB-superJumbo.jpg')"></div>
</header>
<div class="story__body">
<h1>
A Hawaiian Canoe Crosses the Oceans, Guided by Sun and Stars
</h1>
<p>
It’s likely to cause a few double takes, even among seen-it-all New Yorkers.
<br />
<br />
Next June, a working replica of a traditional Hawaiian voyaging canoe — 62 feet long, double-hulled, with two powerful crab-claw sails — will make its way down the Hudson River, one small leg in a three-year journey.
</p>
</div>
</article>
<div class="overlay">
<article class="share">
<div class="share__image" style="background-image: url('https://static01.nyt.com/images/2015/11/03/science/03NAVIGATESUB/03NAVIGATESUB-superJumbo.jpg')"></div>
<h3 class="share__title">
A Hawaiian Canoe Crosses the Oceans, Guided by Sun and Stars
</h3>
<a href="https://codepen.io/zzavrski/pen/GZXoMg" class="btn btn--fb">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<path d="M9.5 3h2.5v-3h-2.5c-1.93 0-3.5 1.57-3.5 3.5v1.5h-2v3h2v8h3v-8h2.5l0.5-3h-3v-1.5c0-0.271 0.229-0.5 0.5-0.5z"></path>
</svg>
</a>
<a href="https://codepen.io/zzavrski/pen/GZXoMg" class="btn btn--tw">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<path d="M16 3.538c-0.588 0.263-1.222 0.438-1.884 0.516 0.678-0.406 1.197-1.050 1.444-1.816-0.634 0.375-1.338 0.65-2.084 0.797-0.6-0.638-1.453-1.034-2.397-1.034-1.813 0-3.281 1.469-3.281 3.281 0 0.256 0.028 0.506 0.084 0.747-2.728-0.138-5.147-1.444-6.766-3.431-0.281 0.484-0.444 1.050-0.444 1.65 0 1.138 0.578 2.144 1.459 2.731-0.538-0.016-1.044-0.166-1.488-0.409 0 0.013 0 0.028 0 0.041 0 1.591 1.131 2.919 2.634 3.219-0.275 0.075-0.566 0.116-0.866 0.116-0.212 0-0.416-0.022-0.619-0.059 0.419 1.303 1.631 2.253 3.066 2.281-1.125 0.881-2.538 1.406-4.078 1.406-0.266 0-0.525-0.016-0.784-0.047 1.456 0.934 3.181 1.475 5.034 1.475 6.037 0 9.341-5.003 9.341-9.341 0-0.144-0.003-0.284-0.009-0.425 0.641-0.459 1.197-1.038 1.637-1.697z"></path>
</svg>
</a>
</article>
</div>
</div>//VARIABLES
//Black
$black-100: rgba(0,0,0,1);
$black-90: rgba(0,0,0,0.9);
$black-80: rgba(0,0,0,0.8);
$black-70: rgba(0,0,0,0.7);
$black-60: rgba(0,0,0,0.6);
$black-50: rgba(0,0,0,0.5);
$black-40: rgba(0,0,0,0.4);
$black-30: rgba(0,0,0,0.3);
$black-20: rgba(0,0,0,0.2);
$black-10: rgba(0,0,0,0.1);
//White
$white-100: rgba(255,255,255,1);
$white-90: rgba(255,255,255,0.9);
$white-80: rgba(255,255,255,0.8);
$white-70: rgba(255,255,255,0.7);
$white-60: rgba(255,255,255,0.6);
$white-50: rgba(255,255,255,0.5);
$white-40: rgba(255,255,255,0.4);
$white-30: rgba(255,255,255,0.3);
$white-20: rgba(255,255,255,0.2);
$white-10: rgba(255,255,255,0.1);
// CUSTOM CODE
html {
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 100%;
}
body {
background-color: lighten($black-100, 10%);
padding: 50px 0;
font-family: 'Noto Sans', sans-serif;
text-align: center;
}
.container {
background-color: $white-100;
margin: 0 auto;
width: 100%;
max-width: 320px;
min-height: 568px;
margin: 0 auto;
position: relative;
overflow: hidden;
-webkit-box-shadow: 0px 9px 13px 0px $black-30;
-moz-box-shadow: 0px 9px 13px 0px $black-30;
box-shadow: 0px 9px 13px 0px $black-30;
-webkit-transform: scale(1);
}
.story {
// header image
&__image {
width: 100%;
padding-bottom: 56.25%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
&__body {
text-align: left;
padding: 0 20px;
h1 {
font-size: 34px;
font-size: 2.125rem;
line-height: 38px;
line-height: 2.375rem;
font-weight: 700;
font-style: normal;
font-family: "nyt-cheltenham",georgia,"times new roman",times,serif;
font-style: italic;
}
p {
font-size: 17px;
font-size: 1.0625rem;
line-height: 26px;
line-height: 1.625rem;
font-weight: 400;
font-style: normal;
font-family: georgia,"times new roman",times,serif;
}
}
}
// btns
.btn {
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
transition: background .25s ease-in-out;
svg {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
margin-top: -2px;
path {
fill: $white-100;
}
}
&--share {
top: 10px;
left: 10px;
background: $black-100;
&:hover {
background: $black-70;
}
}
&--fb, &--tw {
top: auto;
right: auto;
bottom: -500%;
//top: 50%;
//left: 50%;
}
&--fb {
left: calc(50% - 50px);
background: rgba(#3B5998, 1);
}
&--tw {
left: calc(50% + 10px);
background: rgba(#4099FF, 1);
}
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $black-80;
opacity: 0;
visibility: hidden;
&.showed {
opacity: 1;
visibility: visible;
}
}
// share popup
.share {
position: absolute;
top: 10%;
width: 80%;
left: 10%;
padding-bottom: 60px;
&__image {
width: 100%;
padding-bottom: 56.25%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transform: translatey(-100px);
}
&__title {
padding: 0 5px;
text-align: left;
color: $white-100;
height: 0;
overflow: hidden;
opacity: 0;
transform: translatey(-50px);
}
}// variables
var $fb = $('.btn--fb'),
$tw = $('.btn--tw'),
$share = $('.btn--share'),
$shareImg = $('.share__image'),
$shareTitle = $('.share__title'),
$overlay = $('.overlay'),
$ogTitle = $("meta[property='og:title']").attr('content'),
$ogImage = $("meta[property='og:image']").attr('content'),
$ogDesc = $("meta[property='og:description']").attr('content');
// TweenMax TL
var tlTW = new TimelineMax({paused: true});
var tlFB = new TimelineMax({paused: true});
var tlShare = new TimelineMax({paused: true});
var tlClose = new TimelineMax({paused: true});
tlTW.add('openTW')
.to($fb, 0.1, {autoAlpha: 0}, 'openTW')
.to($overlay, 0.3, {autoAlph: 1}, 'openTW')
.to($shareImg, 0.7, { paddingBottom: '56.25%', y: 0, autoAlpha: 1, delay: 0.6, ease: Power4.easeOut}, 'openTW')
.to($shareTitle, 0.6, {height: 'auto', autoAlpha: 1, y: 0, delay: 0.7, ease: Power4.easeOut}, 'openTW')
.to($tw, 0.6, {left: 0, width: '100%', borderRadius: 0, ease: Power4.easeInOut, onComplete: function() { $tw.addClass('can-share') }}, 'openTW')
tlFB.add('openFB')
.to($tw, 0.1, {autoAlpha: 0}, 'openFB')
.to($overlay, 0.3, {autoAlpha: 1}, 'openFB')
.to($shareImg, 0.7, { paddingBottom: '56.25%', y: 0, autoAlpha: 1, delay: 0.6, ease: Power4.easeOut }, 'openFB')
.to($shareTitle, 0.6, {height: 'auto', autoAlpha: 1, y: 0, delay: 0.7, ease: Power4.easeOut}, 'openFB')
.to($fb, 0.6, {left: 0, width: '100%', borderRadius: 0, ease: Power4.easeInOut, onComplete: function() { $fb.addClass('can-share') }}, 'openFB')
tlShare.add('openShare')
.to($overlay, 0.3, {autoAlpha: 1}, 'openShare')
.to($fb, 0.6, {bottom: '10px', ease: Back.easeOut.config(1.5)}, 'openShare')
.to($tw, 0.8, {bottom: '10px', ease: Back.easeOut.config(1.5)}, 'openShare')
// Share
function openShare(e) {
e.preventDefault();
if(tlShare.progress() < 1){
tlShare.play();
} else {
tlShare.restart();
}
}
// Facebook share
var doFB = function (e) {
e.preventDefault();
if(!$(this).hasClass('can-share')) {
if(tlFB.progress() < 1){
tlFB.play();
} else {
tlFB.restart();
}
} else {
// share it
$url = $(this).attr('href');
$link = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent($url);
window.open($link);
}
}
// Twitter share
var doTW = function (e) {
e.preventDefault();
if(!$(this).hasClass('can-share')) {
if(tlTW.progress() < 1){
tlTW.play();
} else {
tlTW.restart();
}
} else {
// share it
$url = $(this).attr('href');
$link = 'https://twitter.com/share?url=' + encodeURIComponent($url) + '&text=' + escape($ogTitle);
window.open($link);
}
}
// set to default
var setDefault = function ($el){
TweenMax.set($fb, { clearProps: 'all'});
TweenMax.set($tw, { clearProps: 'all'});
TweenMax.set($shareTitle, { clearProps: 'all'});
TweenMax.set($shareImg, { clearProps: 'paddingBottom', y: '0'});
TweenMax.set($overlay, { clearProps: 'all'});
$tw.removeClass('can-share');
$fb.removeClass('can-share');
}
// actions
$share.on('click', openShare);
$fb.on('click', doFB);
$tw.on('click', doTW);
// outside click
$(document).mouseup(function (e)
{
var container = $(".overlay article");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
setDefault();
}
});
External CSS
This Pen doesn't use any external CSS resources.