Posting Animation

Developer
Assaf Gelber
Size
4,524 Kb
Views
6,072
  1. Posting Animation Previews
  2. Posting Animation HTML Codes
  3. Posting Animation CSS Codes
  4. Posting Animation JS Codes

How do I make an posting animation?

Animation for putting a new post into a feed.. What is a posting animation? How do you make a posting animation? This script and codes were developed by Assaf Gelber on 03 January 2023, Tuesday.

Posting Animation Previews
IQ Test

Posting Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Posting Animation</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body { background-color: #f5f5f5; font-family: calibri;
}
#container { background-color: #fff; width: 600px; height: 800px; margin: 0 auto; border-radius: 0 0 20px 20px; box-shadow: 0 0 8px 0 #555;
}
#form-container { margin: 0 auto; text-align: center; width: 500px; margin-bottom: 30px;
}
#form-container textarea { width: 400px; height: 60px; margin-top: 50px; margin-bottom: 20px; resize: none; font-family: calibri; font-size: 16px;
}
#form-container textarea:focus { outline: none;
}
#form-container input[type=submit] { position: relative; right: 47px;
}
#feed-container { width: 500px; height: 500px; margin: 0 auto; overflow-y: scroll; border-top: 1px dotted #000;
}
#feed-container #feed { padding-left: 28px;
}
#feed-container #feed .post { list-style: none; width: 400px; margin-bottom: 30px; border-bottom: 1px dotted #555;
}
#feed-container #feed .post .post-content { padding-top: 3px; margin-bottom: 5px; height: 60px; word-wrap: break-word;
}
#feed-container #feed .post .post-timestamp { text-align: right; font-size: 12px; margin-top: 0px;
}
.hover { position: absolute; z-index: 100; border: 1px solid #aaa; background-color: #fff; padding: 2px; box-shadow: 1px 1px 5px 1px #ddd; word-wrap: break-word;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id='container'> <div id='form-container'> <form action='#' id='post-form'> <textarea placeholder="Try me! (Don't worry, nothing is saved)"></textarea> <input type='submit' value='Post'> </form> </div> <div id='feed-container'> <ul id='feed'> <li class='post'> <p class='post-content'> Morbi vel felis est, ac rutrum leo. Fusce convallis, purus sed vestibulum ultrices, lorem lacus eleifend dui, vitae sed. </p> <p class='post-timestamp'> Posted on: Thu, 28 Mar 2013 07:43:12 GMT </p> </li> <li class='post'> <p class='post-content'> Curabitur id diam sit amet lectus volutpat consectetur. Nunc sit amet laoreet urna. Nam sed erat urna, ac vehicula amet. </p> <p class='post-timestamp'> Posted on: Thu, 28 Mar 2013 07:31:57 GMT </p> </li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Posting Animation - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background-color: #f5f5f5; font-family: calibri;
}
#container { background-color: #fff; width: 600px; height: 800px; margin: 0 auto; border-radius: 0 0 20px 20px; box-shadow: 0 0 8px 0 #555;
}
#form-container { margin: 0 auto; text-align: center; width: 500px; margin-bottom: 30px;
}
#form-container textarea { width: 400px; height: 60px; margin-top: 50px; margin-bottom: 20px; resize: none; font-family: calibri; font-size: 16px;
}
#form-container textarea:focus { outline: none;
}
#form-container input[type=submit] { position: relative; right: 47px;
}
#feed-container { width: 500px; height: 500px; margin: 0 auto; overflow-y: scroll; border-top: 1px dotted #000;
}
#feed-container #feed { padding-left: 28px;
}
#feed-container #feed .post { list-style: none; width: 400px; margin-bottom: 30px; border-bottom: 1px dotted #555;
}
#feed-container #feed .post .post-content { padding-top: 3px; margin-bottom: 5px; height: 60px; word-wrap: break-word;
}
#feed-container #feed .post .post-timestamp { text-align: right; font-size: 12px; margin-top: 0px;
}
.hover { position: absolute; z-index: 100; border: 1px solid #aaa; background-color: #fff; padding: 2px; box-shadow: 1px 1px 5px 1px #ddd; word-wrap: break-word;
}

Posting Animation - Script Codes JS Codes

$(function() { $('#post-form').submit(function(e) { e.preventDefault(); var textarea = this.getElementsByTagName('textarea')[0], taHeight = textarea.offsetHeight, taWidth = textarea.offsetWidth, taTop = textarea.offsetTop, taLeft = textarea.offsetLeft, taText = textarea.value, postTop = document.getElementsByClassName('post')[0].offsetTop; var $hoverDiv = $('<div>') .addClass('hover') .text(taText) .css({ height: taHeight, width: taWidth, top: taTop, left: taLeft }); var $postContent = $('<p>') .addClass('post-content') .text(taText) .css('visibility', 'hidden'); var $postTimestamp = $('<p>') .addClass('post-timestamp') .text('Posted on: ' + new Date().toUTCString()) .css('visibility', 'hidden'); var $post = $('<li>') .addClass('post') .append($postContent) .append($postTimestamp) .hide(); textarea.value = ''; $post.prependTo('#feed'); $hoverDiv.appendTo('body') .delay(300) .animate({top: postTop}, 1000, 'swing') .queue(function() { $postContent.css('visibility' ,'visible'); $hoverDiv.delay(200).stop().fadeOut(); $postTimestamp.hide().css('visibility', 'visible').fadeIn(); }); $post.delay(300).slideDown(1000); });
});
Posting Animation - Script Codes
Posting Animation - Script Codes
Home Page Home
Developer Assaf Gelber
Username agelber
Uploaded January 03, 2023
Rating 3.5
Size 4,524 Kb
Views 6,072
Do you need developer help for Posting Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Assaf Gelber (agelber) Script Codes
Name
Rotate Demo
ScaleZ Demo
Perspective Demo
Carousel Tutorial Demo
Form Placeholder Labels
RotateX and Y Demo
Skew Demo
CSS Only Single-Element 3D Cuboid
Origin Demo
Transition Demo
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!