Roosted Quill

Welcome! This website is a work-in-progress, so things are a bit lacking so far. Thank you for your patience!

1.

TV turn off effect/animation

Html

<section class="screen"> <div class="content"> <!-- [FS] NOTE: This is can be treated also as normal web page and containg normal content --> </div> </section> <button id="switcher-tv">Turn on/off</button>

Css

body { font-family: sans-serif; background-color: #111111; } a { color: #ff5f2e; } a:hover { color: #fcbe32; } button { position: fixed; right: 20px; bottom: 20px; padding: 20px; font-weight: 700; font-size: 16px; } h1 { text-align: center; } .screen { background-color: #e1eef6; position: fixed; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); content: " "; overflow: hidden; background: #16222A; background: -webkit-linear-gradient(to left, #16222A, #3A6073); background: linear-gradient(to left, #16222A, #3A6073); background-size: cover; background-image: url(https://cldup.com/gn3s3Fg75t.gif); color: #e1eef6; }

Js

(function() { var SELECTOR_SCREEN_ELEMENT = '.screen'; var SELECTOR_SWITCHER_TV = '#switcher-tv'; var isTurnedOn = true; var timeline; function buildTimeline() { timeline = new TimelineMax({ paused: true }); timeline .to(SELECTOR_SCREEN_ELEMENT, .2, { width: '100vw', height: '2px', background: '#ffffff', ease: Power2.easeOut }) .to(SELECTOR_SCREEN_ELEMENT, .2, { width: '0', height: '0', background: '#ffffff' }); } function toggleSwitcherTV() { if (isTurnedOn) { timeline.restart(); } if (!isTurnedOn) { timeline.reverse(); } isTurnedOn = !isTurnedOn; } // Initialize $(document).ready(buildTimeline); // Bindings $(document).on('click', SELECTOR_SWITCHER_TV, function() { toggleSwitcherTV(); }); })();

Follow My Mouse

Html

<div class="circle"></div>

Css

html { background: #0E3741; } .circle { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; margin: -50px 0 0 -50px; background: #CB4B16; border-radius: 80%; backface-visibility: hidden; }

Js

// http://ahrengot.com/tutorials/greensock-javascript-animation var $circle = $('.circle'); function moveCircle(e) { TweenLite.to($circle, 0.3, { css: { left: e.pageX, top: e.pageY } }); } $(window).on('mousemove', moveCircle);

some related coding links:

fonts

goodmode

navbar

tinypng(so images take up less space

codebuilder

notepad++

youtube access thing (havent used it personally)

javascript effects, cursors and stuff

reddit thread

sound-on-hover

fidgetgrid (some of these i would want to try and recreate a bit if i had more skill)