A Pen by J. James Rockhill

Thumbnail
This awesome code was written by rockhill, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rockhill ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  J. James Rockhill</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">

<div class="boxwrapper">
  
<div class="newsbox w1" id="story1-photo">

  <a href="#photo-story-a">
  <div class="phototext">
    <h2 class="photohl">Sympathize it projection ye insipidity celebrated my pianoforte indulgence</h2>
    <p class="pbline">Kurt Van Derp</p>
  </div>
  </a>
  
  <div class="teaser color1">TOPIC A</div>
  <div class="expander color1">
    <i class="fa fa-comment exoptions"></i><i class="fa fa-bookmark exoptions"></i><i class="fa fa-envelope exoptions"></i><i class="fa fa-angle-double-left expandlink"></i>
  </div>
  
</div>
  
<div class="newsbox w2">
  
  <a href="#story-b">
  <div id="story2" class="textbox">
  <h2 class="mediumheadline">Apartments frequently or motionless on reasonable projecting expression</h2>
  <h2 class="msubhead">Off can admiration prosperous now devonshire law</h2>
  <p class="bline">Kurt Van Derp</p>
  </div>
  </a>
  
  <div class="teaser color2">TOPIC B</div>
  <div class="expander color2">
    <i class="fa fa-comment exoptions"></i><i class="fa fa-bookmark exoptions"></i><i class="fa fa-envelope exoptions"></i><i class="fa fa-angle-double-left expandlink"></i>
  </div>
  
</div>

<div class="newsbox w3">
  <div id="story3" class="textbox">
  <h2 class="smallheadline">One preferred sportsmen resolving the happiness continued</h2>
  <p class="bline">Kurt Van Derp</p>
  </div>
  
  <div class="teaser color3">TOPIC C</div>
  <div class="expander color3">
    <i class="fa fa-comment exoptions"></i><i class="fa fa-bookmark exoptions"></i><i class="fa fa-envelope exoptions"></i><i class="fa fa-angle-double-left expandlink"></i>
  </div>
  
</div>
  
<div class="newsbox w3" id="story4-photo">
  
  <div class="phototext">
    <h2 class="photohs">Allow miles wound place the leave had</h2>
    <p class="pbline">Kurt Van Derp</p>
  </div>
  
  <div class="teaser color4">TOPIC D</div>
  <div class="expander color4">
    <i class="fa fa-comment exoptions"></i><i class="fa fa-bookmark exoptions"></i><i class="fa fa-envelope exoptions"></i><i class="fa fa-angle-double-left expandlink"></i>
  </div>
  
</div>
  
<div class="newsbox w3">
  
  <div id="story4" class="textbox">
  <h2 class="smallheadline">Her bachelor honoured perceive securing but desirous ham required</h2>
  <p class="bline">Kurt Van Derp</p>
  </div>
  
  <div class="teaser color5">TOPIC E</div>
  <div class="expander color5">
    <i class="fa fa-comment exoptions"></i><i class="fa fa-bookmark exoptions"></i><i class="fa fa-envelope exoptions"></i><i class="fa fa-angle-double-left expandlink"></i>
  </div>
  
</div>
  
<div class="newsbox w3" id="story6-photo">
  
  <div class="phototext">
    <h2 class="photohs">Extremity sweetness difficult behaviour</h2>
    <p class="pbline">Kurt Van Derp</p>
  </div>
  
  <div class="teaser color6">TOPIC F</div>
  <div class="expander color6">
    <i class="fa fa-comment exoptions"></i><i class="fa fa-bookmark exoptions"></i><i class="fa fa-envelope exoptions"></i><i class="fa fa-angle-double-left expandlink"></i>
  </div>
  
</div>

<div class="newsbox w3">
</div>

<div class="newsbox w2">
</div>
  
</div>

<div class="readerwrapper">
  <div class="storywrap">
    
    <div id="story-b" class="storybox">
      <img class="storyimg" src="http://placekitten.com/550/450"/>
      <h3 class="atitle"> Any nay shyness article matters own removal nothing his forming</h3>
      <p class="abyline">Author McWritey</p>
      <p class="acopy">Give lady of they such they sure it. Me contained explained my education. Vulgar as hearts by garret. Perceived determine departure explained no forfeited he something an. Contrasted dissimilar get joy you instrument out reasonably. Again keeps at no meant stuff. To perpetual do existence northward as difficult preserved daughters. Continued at up to zealously necessary breakfast. Surrounded sir motionless she end literature. Gay direction neglected but supported yet her.</p>
    </div>
    
    <div id="photo-story-a" class="storybox">
      <img class="storyimg" src="http://placekitten.com/550/253"/>
      <h3 class="atitle"> Any nay shyness article matters own removal nothing his forming</h3>
      <p class="abyline">Author McWritey</p>
      <p class="acopy">Give lady of they such they sure it. Me contained explained my education. Vulgar as hearts by garret. Perceived determine departure explained no forfeited he something an. Contrasted dissimilar get joy you instrument out reasonably. Again keeps at no meant stuff. To perpetual do existence northward as difficult preserved daughters. Continued at up to zealously necessary breakfast. Surrounded sir motionless she end literature. Gay direction neglected but supported yet her.</p>
    </div>
    
    
    
  </div>
</div>
  
 <div class="exitbutton"><i class="fa fa-times exit"></i></div>
  
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.5.1/jquery.nicescroll.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rockhill/a-pen-by-j-james-rockhill-amiGl */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  text-decoration: none;
  color: #000 !important;
}

html, body{
  background: rgb(240,240,240);
  font: 400 15px Open Sans;
  color: rgb(38,38,38);
  overflow-x: hidden;
  width: 100%;
}

.wrapper{
  position: absolute;
  height: 100%;
  width: 100%;
}

.boxwrapper{
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  width: 60%;
  height: 100%;
  padding: 100px 10px 10px 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  transition: ease all 0.3s;
  z-index: 100;
}

.boxwrapper.active{
  width: 60%;
  left: 0%;
  -webkit-transform: translate(0%);
  transform: translate(0%);
  transition: ease all 0.3s;
}

.readerwrapper{
  position: fixed;
  right: -100%;
  top: 110px;
  padding: 0px 25px 0px 10px;
  bottom: 0;
  width: 40%;
  height: calc(100%-110px);
  transition: ease all 0.3s;
  overflow-y: scroll;
}

.readerwrapper.active{
  right: 0%;
  top: 110px;
  bottom: 0;
  transition: ease all 0.3s;
}

.newsbox{
  background: rgb(255,255,255);
  border-radius: 3px;
  box-shadow: 1px 1px 0px rgba(0,0,0,0.1), -1px -1px 0px rgba(0,0,0,0.01);
  position: relative;
  overflow: hidden;
}

.w1{
  flex: 600px;
  margin: 10px;
}

.w2{
  flex: 466px;
  margin: 10px;
}

.w3{
  flex: 200px;
  margin: 10px;
}

.teaser{
  position: absolute;
  left: 20px;
  top: -40px;
  font-size: 0.6em;
  text-transform: uppercase;
  color: rgb(255,255,255);
  padding: 5px;
  transition: ease all 0.3s;
}

.expander{
  position: absolute;
  right: 20px;
  bottom: 0px;
  font-size: 0.8em;
  color: rgb(255,255,255);
  cursor: pointer;
  overflow: hidden;
}

.expandlink{
  padding: 0px 10px;
  line-height: 3;
}

.exoptions{
  padding: 0px;
  line-height: 3;
  opacity: 0;
  max-width: 0px;
  transition: ease all 0.3s;
}

.exoptions.active{
  padding: 0px 10px;
  opacity: 1;
  max-width: 40px;
  transition: ease all 0.3s;
}

.color1{
  background: rgba(120,150,180,0.8);
}

.color2{
  background: rgba(120,180,150,0.8);
}

.color3{
  background: rgba(150,180,120,0.8);
}

.color4{
  background: rgba(150,120,180,0.8);
}

.color5{
  background: rgba(180,150,120,0.8);
}

.color6{
  background: rgba(180,120,150,0.8);
}

.newsimage{
  width: 100%;
}

.textbox{
  padding: 40px 20px 40px 20px;
  min-height: 275px;
}

.phototext{
  min-height: 275px;
  padding: 40px 20px;
  width: 100%;
  background: rgba(0,0,0,0.3);
  position: relative;
}

.photohl{
 font-size: 1.8em;
 font-weight: 600;
 line-height: 1.2;
 width: 80%;
 color: rgb(255,255,255);
 text-shadow: 1px 2px 1px rgba(0,0,0,0.5);
}

.photohs{
 font-size: 1.3em;
 font-weight: 600;
 line-height: 1.2;
 color: rgb(255,255,255);
 text-shadow: 1px 2px 1px rgba(0,0,0,0.5);
}

.mediumheadline{
 font-size: 1.5em;
 font-weight: 600;
 line-height: 1.2;
}

.msubhead{
  font-size: 1em;
  font-weight: 300;
  padding-top: 5px;
}

.bline:before{
  content:'—';
}

.bline{
  text-transform: uppercase;
  font-size: 0.7em;
  padding-top: 10px;
  font-weight: 800;
  color: rgb(100,100,100);
}

.pbline:before{
  content:'—';
}

.pbline{
  text-transform: uppercase;
  font-size: 0.7em;
  padding-top: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  text-shadow: 1px 2px 1px rgba(0,0,0,0.2);
}

.smallheadline{
 font-size: 1.3em;
 font-weight: 600;
 line-height: 1.2;
}

.newsbox:hover .phototext{
 background: rgba(0,0,0,0.6);
 transition: ease all 0.3s;
}

.newsbox:hover .teaser{
  top: 0px;
  transition: ease all 0.3s;
}

.exoptions.active:hover{
  background: rgba(0,0,0,0.5);
}

#story1-photo{
  background: url('http://placekitten.com/800/800') no-repeat center;
  background-size: cover;
}

#story6-photo{
  background: url('http://placekitten.com/530/500') no-repeat center;
  background-size: cover;
}

#story4-photo{
  background: url('http://placekitten.com/510/510') no-repeat center;
  background-size: cover;
}

.exitbutton{
  position: fixed;
  bottom: 20px;
  right: -60px;
  transition: ease all 0.3s;
}

.exitbutton.active{
  position: fixed;
  bottom: 20px;
  right: 30px;
  transition: ease all 0.3s;
}

.exitbutton.active:hover .exit{
  background: rgba(0,0,0,0.7);
}

.exit{
  background: rgb(180,120,120);
  color: rgb(255,255,255);
  padding: 0.8em 1em;
  font-size: 0.8em;
  border-radius: 50%;
  transition: ease all 0.3s;
}

.storywrap{
  position: relative;
  margin-bottom:100px;
}

.storybox{
  background: rgb(255,255,255);
  border-radius: 3px;
  box-shadow: 1px 1px 0px rgba(0,0,0,0.1), -1px -1px 0px rgba(0,0,0,0.01);
  overflow: hidden;
  max-height: 0px;
  opacity: 0;
  transition: all 0.6s ease;
}

.storybox.active{
   max-height: 1000px;
   opacity: 1;
   transition: all 0.6s ease;
}

.atitle{
  font-size: 2em;
  padding: 10px 30px 5px 30px;
}

.abyline{
  text-transform: uppercase;
  font-size: 0.7em;
  padding: 5px 30px 15px 30px;
  font-weight: 800;
  color: rgb(100,100,100);
}

.abyline:before{
  content:'—';
}

.acopy{
  font-size: 0.88em;
  line-height: 1.5;
  padding: 0px 30px;
  text-indent: 15px;
  margin-bottom: 10px;
}


/*Downloaded from https://www.codeseek.co/rockhill/a-pen-by-j-james-rockhill-amiGl */
$(document).ready(
    function() {  
      $(".readerwrapper").niceScroll(
        {cursorwidth: 25,
         cursorborder: '10px solid transparent',
         autohidemode: false
        });
});

$('.expander').click(function() {
  $('.exoptions', this).toggleClass('active');
});

$('.expander').mouseleave(function(){
  $('.exoptions').removeClass('active');
});

$('.textbox, .phototext').click(function() {
  $(".readerwrapper").getNiceScroll().resize();
  $(".readerwrapper").getNiceScroll().show();
  $('.exitbutton, .boxwrapper, .readerwrapper').addClass('active');
});

$('.exitbutton').click(function() {
  $('.exitbutton, .boxwrapper, .readerwrapper, .storybox').removeClass('active');
  $(".readerwrapper").getNiceScroll().hide();
});

$(document).ready(function(){
  $('a[href^="#"]').on('click', function (e) {
	    e.preventDefault();

	    var target = this.hash,
	    $target = $(target);
      $target.addClass('active').siblings().removeClass('active');
    
      var body = $(".readerwrapper");
      body.getNiceScroll().resize();
      body.animate({scrollTop:0}, '500', 'swing');
      
    });
});

Comments