A Pen by Luca Demian

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Luca Demian</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<section id="content">
  <div id="title">
    <h1>This is my title.</h1>
    <input class="code" type="button"/>
  </div>
  <section id="story">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae dignissim ipsum, sit amet feugiat libero. Nunc nulla tellus, ultricies a eros in, finibus scelerisque augue. Suspendisse quis magna vel orci viverra tempor ut eget lacus. Fusce feugiat odio vel justo efficitur eleifend. Vestibulum feugiat, ante at pharetra dignissim, erat est efficitur lacus, sit amet egestas leo turpis vel lorem. Sed ullamcorper a nisl ut finibus. Duis dignissim quam libero, ac rhoncus dui bibendum ac. Sed eleifend maximus nisl, in aliquet ante pellentesque ut. Quisque malesuada in dolor eu vulputate. Cras dictum rutrum ex vitae congue. Donec ullamcorper efficitur neque eu aliquet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sapien sapien, gravida ac tortor at, aliquam vestibulum diam. Nunc suscipit at sapien id bibendum. Etiam elementum justo id massa venenatis facilisis.</p>
    <p id="current" contenteditable="true"></p>
  </section>
</section>
<div id="bottom-bar">
  <div id="bottom-bar-inner">
    <div id="viewers"><img id="viewer-icon" src="https://rawgit.com/Kirpal/skribe/master/src/images/ic_group_black_24dp_2x.png"/>
      <div id="viewer-number">325</div>
    </div>
    <div id="reactions"></div>
    <div id="emojis">
      <div class="vote heart" data-emoji="heart"><img class="emojiIcons" src="https://twemoji.maxcdn.com/2/72x72/2665.png"/>
        <div class="emoji-num">23</div>
      </div>
      <div class="vote laugh" data-emoji="laugh"><img class="emojiIcons" src="https://twemoji.maxcdn.com/2/72x72/1f602.png"/>
        <div class="emoji-num">23</div>
      </div>
      <div class="vote thumbs-up" data-emoji="thumbs-up"><img class="emojiIcons" src="https://twemoji.maxcdn.com/2/72x72/1f44d.png"/>
        <div class="emoji-num">23</div>
      </div>
      <div class="vote thumbs-down" data-emoji="thumbs-down">   <img class="emojiIcons" src="https://twemoji.maxcdn.com/2/72x72/1f44e.png"/>
        <div class="emoji-num">23</div>
      </div>
      <div class="vote thumbs-down" data-emoji="love">   <img class="emojiIcons" src="https://twemoji.maxcdn.com/2/72x72/1f60d.png"/>
        <div class="emoji-num">23</div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/lucademian_/a-pen-by-luca-demian-aYgEYK */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Fira+Sans|PT+Serif:700|Lora");
body, html {
  width: 100%;
}

#content {
  position: fixed;
  width: 100%;
  bottom: 60px;
}

#title {
  font: 30px "Fira Sans", "sans-serif";
  display: block;
  text-align: center;
}
#title h1 {
  font: 40px "Fira Sans", "sans-serif";
  display: inline-block;
}
#title .code {
  background: #ddd;
  display: inline-block;
  padding: 4px;
  border-radius: 2px;
  font-size: 12px;
  color: #555;
  border: none;
  cursor: pointer;
}

#story {
  font: 18px "Lora", "serif";
  line-height: 1.6em;
  text-align: center;
  width: 80%;
  margin-left: 10%;
}
#story p {
  border-left: 4px transparent solid;
  padding: 0;
  padding-left: 8px;
  width: 100%;
  max-width: 800px;
  text-align: left;
  display: inline-block;
  box-sizing: border-box;
}
#story p#current {
  border-left-color: #ff4a4a;
}
#story p::before {
  content: "      ";
}

#bottom-bar {
  position: fixed;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
}
#bottom-bar #bottom-bar-inner {
  width: 100%;
  max-width: 900px;
  position: relative;
  margin: 0 auto;
}
#bottom-bar #viewers {
  position: absolute;
  right: 20px;
  top: 0px;
}
#bottom-bar #viewers #viewer-icon {
  width: 25px;
  display: inline-block;
  vertical-align: middle;
}
#bottom-bar #viewers #viewer-number {
  font: 15px "Fira Sans", "sans-serif";
  display: inline-block;
  vertical-align: middle;
}
#bottom-bar #emojis {
  display: inline-block;
}
#bottom-bar #emojis .vote {
  display: inline-block;
  margin: 0px 10px;
}
#bottom-bar #emojis .vote img {
  width: 25px;
  display: inline-block;
  vertical-align: middle;
}
#bottom-bar #emojis .vote .emoji-num {
  display: inline-block;
  font: 15px "Fira Sans", "sans-serif";
  vertical-align: middle;
  margin-left: 5px;
}

#reactions {
  width: 100px;
  height: 100%;
  position: absolute;
  bottom: 30px;
  left: 7px;
}
#reactions .icon {
  background-color: transparent;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 100%;
  background-size: cover;
}
#reactions .icon.heart {
  background-image: url("https://twemoji.maxcdn.com/2/72x72/2665.png");
}
#reactions .icon.laugh {
  background-image: url("https://twemoji.maxcdn.com/2/72x72/1f602.png");
}
#reactions .icon.thumbs-up {
  background-image: url("https://twemoji.maxcdn.com/2/72x72/1f44d.png");
}
#reactions .icon.thumbs-down {
  background-image: url("https://twemoji.maxcdn.com/2/72x72/1f44e.png");
}
#reactions .icon.love {
  background-image: url("https://twemoji.maxcdn.com/2/72x72/1f60d.png");
}


/*Downloaded from https://www.codeseek.co/lucademian_/a-pen-by-luca-demian-aYgEYK */
reactions = ["heart", "laugh", "thumbs-up", "thumbs-down", "love"];
$("#reactions").css("width", $("#emojis").width() + "px");
var lastReact = 0;

$(".vote").click(function(){
	if((new Date).getTime() > lastReact + 1000)
	{
		leftPos = ($(this).offset().left - $("#emojis").offset().left);
		emojiType = "heart";
		element = $("<div class='icon "+emojiType+"' data-original='"+leftPos+"'></div>");
		$("#reactions").append(element);
		element.css("left", leftPos + "px");
		lastReact = (new Date).getTime();
	}
});


setInterval(function(){
	$("#reactions .icon").each(function(){
		element = $(this);
		original = element.attr("data-original");
		parentHeight = $("#reactions").height();
		vertical = element.position().top;
		horizontal = element.position().left;
		size = element.width();
		leftChange = Math.random() * 1 * (Math.round(Math.random()) == 1 ? -1 : 1 );
		opacity = parseFloat(element.css("opacity"));
		if(leftChange + horizontal < original - 16 && leftChange < 0)
		{
			leftChange = -leftChange;
		}
		if(leftChange + horizontal > original + 16 && leftChange > 0)
		{
			leftChange = -leftChange;
		}
		
		if(opacity <= 0)
		{
			element.remove();
		}
		
		element.css({
			"top": (vertical - 1) + "px",
			"left": (horizontal + leftChange) + "px",
			"opacity": opacity - 0.005
		});
	});
}, 10);


$("#current").on("keydown", function(){
	$(this).css("color", "#" + Math.floor(Math.random()*999999));
});

Comments