bishoplee

package com.diamondium.samplewebview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.graphics.Bitmap;
import android.view.View;
import android.widget.ProgressBar;

bishoplee

CSS Grid: Excel Spreadsheet

Image sprite for icons and things are not clickable/functional because I want to maintain my sanity :D

A Pen by Olivia Ng on CodePen.

License.

bishoplee

CSS grid toggle (animates in Firefox Nightly only)

A new take on the CSS toggle, using CSS grid animations. See code for explanations :)

A Pen by Liam on CodePen.

License.

bishoplee

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 144" style="enable-background:new 0 0 576 144;" xml:space="preserve">
        <linearGradient id="logo-fill" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="100%" class="color" stop-opacity="1" stop-color="#ec008c">
            <animate attributeName="offset" values="0;1" repeatCount="indefinite" dur="2s" begin="0s" />
          </stop>
          <stop offset="100%" class="color" stop-opacity="0" stop-color="#ec008c">
            <animate attributeName="offset" values="0;1" repeatCount="indefinite" dur="2s"  begin="0s" onrepeat='newcolor()' />
          </stop>
      </linearGradient>  
<g>

bishoplee

<!-- header -->
<nav class="navbar is-link is-fixed-top">
  <div class="navbar-brand">
    <h1 class="navbar-item is-size-4">Scotchy Memes</h1>
  </div>
</nav>

<!-- scroll to top button -->
<a class="is-size-6 button is-warning scroll-top" href="#top">
  Scroll To Top

bishoplee

JavaScript String Manipulation Main

A Pen by Wiley on CodePen.

License.

bishoplee

Array Algo Challenge Main

A Pen by Wiley on CodePen.

License.

bishoplee

Grid Choreography | ✅ UX Animation Principles | @keyframers 1.23.2

Stephen Shaw, with some help from a disembodied David Khourshid, showcase more UX animation principles. Using Taras' wonderful guide as a reference, we turn the GIFs into code so you can see some practical implementations of these concepts. In this episode, we talk through the importance of acceleration/deceleration easing and choreography in animation across one and two axes.

• ⏰ Streamed live on October 1, 2018 at https://twitch.tv/keyframers
• 💡Inspiration: https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
• 📺 Video: https://youtu.be/QcJwKqYhxPc
• 💻 Acceleration/Deceleration Demo: https://cdpn.io/pen/ZqbWao/
• 💻 Choreography Demo: https://cdpn.io/pen/yRYJPr/
• 💻 Grid Choreography Demo: https://cdpn.io/pen/bmVejm/

bishoplee

CSS Animation: Time of Day

Damn, this is SVG overload x_x Bonus Molly looking out the window.

Icons: flaticon.com.

A Pen by bishoplee on CodePen.

License.

bishoplee

CSS Menu Icon Animation: Know Your Menu

A Pen by Olivia on CodePen.

License.