From 19cb49239ef13377242cd7f9d5c4a0f8b5f8280d Mon Sep 17 00:00:00 2001
From: 8cy <50817549+8cy@users.noreply.github.com>
Date: Thu, 11 Jun 2020 06:59:25 -0700
Subject: add signature fade + twitter-chan
- added the fade-in effect which i use on all of my projects cx
- added twitter-chan in the top left corner of the screen, click for an easter egg ..
- added meta description
---
public/main.css | 13 +++++++++++++
public/main.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
views/index.ejs | 18 +++++++++++++++---
3 files changed, 81 insertions(+), 3 deletions(-)
create mode 100644 public/main.css
create mode 100644 public/main.js
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..cdc056f
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,13 @@
+.hideme {
+ opacity: 0;
+}
+
+/* https://stackoverflow.com/questions/14396614/rotate-image-with-onclick */
+.rotated {
+ transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+}
+.rotateme { transition: all 0.5s ease; }
\ No newline at end of file
diff --git a/public/main.js b/public/main.js
new file mode 100644
index 0000000..30608a4
--- /dev/null
+++ b/public/main.js
@@ -0,0 +1,53 @@
+$(document).ready(function () {
+ $(window).scroll(function () {
+ $('.hideme').each(function (i) {
+ var bottom_of_object = $(this).position().top + $(this).outerHeight();
+ var bottom_of_window = $(window).scrollTop() + $(window).height();
+
+ if (bottom_of_window > bottom_of_object) {
+ $(this).animate({
+ 'opacity': '1'
+ }, 500);
+ }
+ });
+ });
+ $('.hideme').each(function (i) {
+ var bottom_of_object = $(this).position().top + $(this).outerHeight();
+ var bottom_of_window = $(window).scrollTop() + $(window).height();
+
+ if (bottom_of_window > bottom_of_object) {
+ $(this).animate({
+ 'opacity': '1'
+ }, 500);
+ }
+ if (document.getElementById("heading")) {
+ $(document.getElementById("heading")).animate({
+ 'opacity': '1'
+ }, 500);
+ }
+ if (document.getElementById("title-quotes")) {
+ $(document.getElementById("title-quotes")).animate({
+ 'opacity': '1'
+ }, 1500);
+ }
+ // document.getElementById("heading").animate({
+ // 'opacity': '1'
+ // }, 500);
+ });
+});
+
+$(document).ready(function () {
+ var degrees = 0;
+ $('.rotateme').click(function rotateMe(e) {
+ degrees += 720;
+ //$('.rotateme').addClass('rotated'); // for one time rotation
+
+ $('.rotateme').css({
+ 'transform': 'rotate(' + degrees + 'deg)',
+ '-ms-transform': 'rotate(' + degrees + 'deg)',
+ '-moz-transform': 'rotate(' + degrees + 'deg)',
+ '-webkit-transform': 'rotate(' + degrees + 'deg)',
+ '-o-transform': 'rotate(' + degrees + 'deg)'
+ });
+ });
+});
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index e08d8e5..9662316 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -3,12 +3,17 @@
Twittlet
-
+
+
-
+
+
+
-
+
+
+
+ 
+
+
Twittlet <%= tAddon %>
+
<%- modeRef %>
<%= error %>