Goodbye 2016
How do I make an goodbye 2016?
Inspired my my man Abe Garcia's dribbble shot https://dribbble.com/shots/3170308-Worst-Year-Ever. What is a goodbye 2016? How do you make a goodbye 2016? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.
Goodbye 2016 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Goodbye 2016</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="screen"> <div class="screen__overlay"></div> <div class="start"> <div class="start__button"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/windows.png" alt="" class="start__icon"/> <span class="start__text">Start</span> </div> </div> <div class="js-drag js-trash icon icon--right icon--trash icon--trash--empty"> <span class="icon__text">Trash</span> </div> <div class="js-drag js-calendar icon icon--left icon--calendar"> <span class="icon__text">2016</span> </div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/calendar-48.png" alt="" class="hide" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-empty-48.png" alt="" class="hide" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-full-48.png" alt="" class="hide" /> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/plugins/CSSPlugin.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/utils/Draggable.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Goodbye 2016 - Script Codes CSS Codes
@font-face { font-family: 'Aansa'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/aansa.eot?") format("eot"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/aansa.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/aansa.ttf") format("truetype");
}
* { box-sizing: border-box; cursor: url("data:image/x-icon;base64,AAACAAEAICACAAIABAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAHAAAABwAAAA4AAAAOAAAAHAAAABwAAAQ4AAAGOAAAB3AAAAfwAAAH/4AAB/8AAAf+AAAH/AAAB/gAAAfwAAAH4AAAB8AAAAeAAAAHAAAABgAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////+P////B////wf///4P///+D///fB///zwf//8YP///CD///wB///8AAf//AAP//wAH//8AD///AB///wA///8Af///AP///wH///8D////B////w////8f////P////3/////////////////////////8="), auto !important;
}
body, html { overflow: hidden; font-family: 'Aansa', monospace; background-color: #000;
}
.screen { height: 100vh; width: 100vw; background-color: teal; position: relative;
}
.screen__overlay { position: absolute; height: 100%; width: 100%; background-color: white; z-index: 2; opacity: 0; pointer-events: none;
}
.start { background-color: #b6bbb7; height: 50px; width: 100%; position: fixed; bottom: 0; z-index: 1; box-shadow: 0px 0px 0px 2px #f7f9f6, 0px 0px 0px 4px #d5dad6; padding: 0 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.start__button { font-size: 34px; height: 34px; display: inline-block; line-height: 1.25em; padding: 4px; box-shadow: 1px 1px 0px 1px #808080, 2px 2px 0px 2px #000, -1px -1px 0px 1px #fff; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default;
}
.start__button:active { box-shadow: 1px 1px 0px 1px #808080, 2px 2px 0px 2px #fff, -1px -1px 0px 1px #000;
}
.start__icon { -webkit-transform: translateY(-20%); transform: translateY(-20%);
}
.box { height: 25px; width: 25px; background-color: red; cursor: url("data:image/x-icon;base64,AAACAAEAICACAAIABAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAHAAAABwAAAA4AAAAOAAAAHAAAABwAAAQ4AAAGOAAAB3AAAAfwAAAH/4AAB/8AAAf+AAAH/AAAB/gAAAfwAAAH4AAAB8AAAAeAAAAHAAAABgAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////+P////B////wf///4P///+D///fB///zwf//8YP///CD///wB///8AAf//AAP//wAH//8AD///AB///wA///8Af///AP///wH///8D////B////w////8f////P////3/////////////////////////8="), auto !important;
}
.icon { height: 52px; width: 52px; background-size: cover, calc(100% - 4px); background-position: 50%, 2px 2px; position: relative; background-repeat: no-repeat;
}
.icon__text { position: absolute; bottom: -1em; padding: 0.2em; padding-top: 0.8em; line-height: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.icon--left { top: 30%; left: 30%;
}
.icon--right { top: 40%; left: 70%;
}
.icon--highlight .icon__text { background-color: rgba(0, 0, 255, 0.2);
}
.icon--calendar { background-image: -webkit-linear-gradient(right, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/calendar-48.png"); background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/calendar-48.png");
}
.icon--calendar .icon__text { left: 55%;
}
.icon--calendar.icon--highlight { background-image: -webkit-linear-gradient(right, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.2)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/calendar-48.png"); background-image: linear-gradient(to left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.2)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/calendar-48.png");
}
.icon--trash--empty { background-image: -webkit-linear-gradient(right, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-empty-48.png"); background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-empty-48.png");
}
.icon--trash--empty.icon--highlight { background-image: -webkit-linear-gradient(right, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.2)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-empty-48.png"); background-image: linear-gradient(to left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.2)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-empty-48.png");
}
.icon--trash--full { background-image: -webkit-linear-gradient(right, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-full-48.png"); background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-full-48.png");
}
.icon--trash--full.icon--highlight { background-image: -webkit-linear-gradient(right, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.2)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-full-48.png"); background-image: linear-gradient(to left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.2)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/recycle-full-48.png");
}
.hide { pointer-events: none; opacity: 0;
}
Goodbye 2016 - Script Codes JS Codes
"use strict";
var icon = document.getElementsByClassName('icon');
var droppable = false;
var rumbleTween = undefined;
Draggable.create(".js-drag", { type: "x,y", edgeResistance: 0.65, bounds: ".screen", onPress: function onPress() { $(this.target).addClass('icon--highlight'); }, onRelease: function onRelease() { if (droppable) { killThisYearAlready(); } else { $(this.target).removeClass('icon--highlight'); } }, onDrag: dropTest
});
function dropTest(e) { console.log(e); console.log(this); if ($(e.target).hasClass('js-calendar')) { if (this.hitTest('.icon--trash', "50%")) { canDrop(true); } else { canDrop(false); } }
}
function canDrop(isOverTrash) { if (isOverTrash) { droppable = true; $('.icon--trash').addClass('icon--highlight'); } else { droppable = false; $('.icon--trash').removeClass('icon--highlight'); }
}
function killThisYearAlready() { $('.icon--calendar').css('display', 'none'); $('.icon--trash').addClass('icon--trash--full'); $('.icon--trash').removeClass('icon--highlight'); $('.start__text').text('End'); setTimeout(function () { var rumbleFactor = 3; rumbleTween = TweenMax.to('.screen', 0.1, { y: "+=" + rumbleFactor, x: "+=" + rumbleFactor, onUpdate: function onUpdate() { rumbleFactor = 1 + Math.random() * 5; }, ease: Expo.easeInOut, repeat: -1 }); }, 500); setTimeout(function () { rumbleTween.pause(); TweenMax.to('.screen', 0.4, { scaleY: 0.01, ease: Power4.easeIn }); TweenMax.to('.screen', 0.1, { scaleX: 0.01, delay: 0.4, ease: Linear.easeNone }); TweenMax.to('.screen__overlay', 0.4, { opacity: 1, delay: 0.1, ease: Power4.easeIn }); TweenMax.to('.screen', 0.4, { opacity: 0, delay: 0.5, ease: Power4.easeIn }); }, 1500);
}
Developer | Eli Fitch |
Username | elifitch |
Uploaded | October 28, 2022 |
Rating | 4.5 |
Size | 5,786 Kb |
Views | 18,216 |
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!
Name | Size |
Slanty Button Mixin | 4,109 Kb |
Smiley guy | 3,845 Kb |
Neon slicey cube | 5,020 Kb |
SVG hamburger menu button | 2,602 Kb |
Goodbye 2016 | 5,786 Kb |
Vanilla JS sticky header | 1,944 Kb |
Node DC Animated SVG Logo | 4,055 Kb |
Flexslider thumbnail modification | 13,431 Kb |
Animated multi-line underline | 3,247 Kb |
Canvas Hero Prototype | 3,070 Kb |
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!
Name | Username | Size |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Fading gradient button | Insprd | 1,713 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Popover Example | Seanboom | 2,429 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!