• 4 Part Animation Setup

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="first"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
  • proverbs #2 is the latest revision

    upon hover

        <div class="columnContainer">
            <section>It is an honor for a man to keep aloof from strife, but every fool will be quarreling.</section>
  • fade in upon scroll #1 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 800) {
        } else {
  • Slick slider demo #1 is the latest revision


        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
        infinite: true,
        cssEase: 'linear'
  • Long Page Initial Setup

    No-Library (pure JS), HTML, CSS, JavaScript

        <li>Menu Item</li>
    <!-- Welcome Section -->
    <section class="welcome"><p>
      <span id="hi">Hi</span> I'm</p> 
      <h1>Chris Drinkut</h1>
      <p>A digital marketer and web developer living in York, PA.</p>
      <p>Allow me ...</p></section></!--></main>
  • Style Guide Starter

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Style Guide</h1>
    <article class="col"><p><strong>Full Column</strong> of text.</article></section>
    <article class="col-half"><p><strong>Half Column</strong> of text.</p></article><article class="col-half"><p>
    <strong>Half Column</strong> of text.</article>
    <article class="col-third"><p><strong>Third Column</strong> of text.</article><article class="col-third"><p><strong>Third ...</strong></p></article></section></main>
  • AA Hover Setup Reveresed


    <section class="featured-details">
    <div class="featured-details-link">
      <a href="''">here ya go</a>
    <div class="featured-item">
      <a href="''" class="learn-more">here ya go</a>
  • Scroll To Stick

    No-Library (pure JS), HTML, CSS, JavaScript

    $( document ).ready(function() {   
        // Resize hero image to size of viewport minus header and subnav
        $(window).bind("resize", function() {
          var windowHeight ...
  • Stick div at top after scrolling example #2 is the latest revision

    An example for fiddling.

    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#sticky-anchor').offset().top;
        if (window_top > div_top) {
            $('#sticky-anchor').height($('#sticky ...
  • test fiddle

    html text embed

    <p>I will display &#9824;</p>