Animate Site Sections on Scroll Behavior

Want some motion in your ocean? In a sea of content, simple animations can make for a pleasant break from the humdrum. Use this setup to create sections of a webpage that will slide up and fade into view. Let’s get started.

See a demo of what we’ll create.

We’ll need to setup some CSS, add an associated selector to our page element. We’ll use jQuery and a custom snippet of javascript that allows for the animation to happen when the user scrolls to that area of the webpage.

First, the CSS…

/*animation element*/
.animation-element {
  opacity: 0;
}

.animation-element.slide-up {
  opacity: 0;
  transition: all 500ms linear;
  transform: translate3d(0, 100px, 0);
}

.animation-element.slide-up.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

Then comes the javascript, be sure to add this after you’ve included jQuery. Copying and pasting the below will do it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

<script>
var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);
 
  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);
 
    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
</script>

Ok, now ensure your css classes are added to the desired elements. You should be good to go! Animate.

/* things we want to animate - can be added to more than one items */ 

<section class="animation-element slide-up">
/* things go here */
</section>

<aside class="animation-element slide-up">
/* also slides into view */ 
</aside> 

Following the above, your items should now animate – sliding up and from transparent into full opacity. Should you want to slide items from the left or right, this pen on animations should compliment all of what you’ve already found here. Happy animating!

Let’s Do: CSS Gradients! FTW

Occasionally, you just need to g r a d i a t e (let’s consider that a word). For me, now is one of those times. Perhaps you too could stand to as well. Let’s.

Most often we’ll likely want to add a gradient to a container (div, section, button). For that, we can use something as simple as the below to initiate things.

General Setup

div {  
  background-image: linear-gradient(color1, color2);
}

top to bottom, directionally, by default

div {  
  background-image: linear-gradient(color1 80%, color2);
}

set the stop point

We can do a similar thing with a bit of additional instruction if we want to go left to right.

div {
  background-image: linear-gradient(to right, skyblue, navajowhite);
}

east to west

Angles & Multiple Hues

But, maybe we need something a little more unique. Well, we can do that too. Here’s a trio of colors with a bit of instruction.

div {
  background: linear-gradient(0.95turn, #3f87a6, #ebf8e1, #f69d3c);
}

angle bangle

OR

div {
  background: linear-gradient(-17deg, #3f87a6, #ebf8e1, #f69d3c);
}

angle bangle

But, maybe we still want something to wow ’em… there is this number here.

div {
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

triple set

Text Gradients

Why should box-level elements be the only ones to have fun? Text – with some trickery – can too.

h1 {
background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);    
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Why Hello Goregeous

Fancy Meeting You Here

Additional Resources for Learning

Don’t just take my word for it though. These folks know gradients too.

3 Nifty Tools for Web Design & Development Aficionados

Part of what makes the web so wonderful is the continuous space there is to explore. Pixel-pushers know as well as anyone that inventive tools, processes, and techniques help make things pleasantly colorful. Here are a few tools I’ve come across of recent to put in your quiver.

Colorable

colorable - color accessibility tester

This site helps you figure out whether your colors are prime-time or up to par per accessibly standards. https://colorable.jxnblk.com/

Blobmaker

blob maker - svg shape maker

This site helps you make unique SVG shapes to use in your projects. The builder has a color, complexity and contrast controls to allow for a range of fun. https://www.blobmaker.app/

Fancy Border Radius

fancy border radius - unique size border-radius generator

This site gives you an easy way to visualize and to generate a unique border radius shape. https://9elements.github.io/fancy-border-radius/

Callout Ad Extensions: Beef-Up Your Google Search Ads with this Free Add-On Option

Google Ads, formerly Google AdWords, continues to generate website traffic creating bottom-line value for businesses across the globe. In fact, Google estimates that for every $1 spent, advertisers – on average – earn $2 (some as high as $8).

Moreover, Google continues to loom large in the digital ad space, even as Facebook increases its share. As eMarketer reported in 2018, Google captured 37.2% of the share of digital ad spend.

Google remains a +37% owner of the space, while Facebook earns just +19%.

One way Google continues to deliver results on digital advertising for businesses is through search network ads.

In addition to the standard features offered to advertisers using Google’s search network, Google Ads provides a free add-on, aka ad extensions.

Ad extensions are – just as they might sound – an extension of the standard ad features.

The complete list of extension types include: Site Link, Callout, Call, Location, Associated Location, Price, Structured Snippet.


How Do Callout Ad Extensions Work?

As you can see below, the callout extension adds another line of text to the search network ad. With this extension you can potentially add 2 to 6 callouts to your ads.

Google Ads Callout Extension Example Ad
An example Search Network Ad with Callout Extension
The extension is the final line, “Free Shipping… etc.”

These extensions are often used to highlight various aspects of your service or product offering, and they can be scheduled to appear only during certain time ranges.

Like all ad extensions utilized properly, callout extensions create benefit by:

  • Increasing the size – and noticeability – of your ads
  • Creating additional value to you the advertiser
  • Making ads more dynamic and appealing to your audience

How Can I Setup Callout Ad Extensions?

To create callout extensions visit the extensions area of the Google Ads campaign interface. You will be guided through setup, and will even have the opportunity to see what the callout extensions look like as they’re added to your ads.

Google Ads ~
Callout Extensions

It’s worth noting that ad extensions won’t always show just because they’ve been setup in your campaign. There are some prerequisites, along with recommendations on campaign setup to help ensure your ads show with extensions.

Be sure to read and familiarize yourself with the instructions and best practices provided by Google, if you’re going to be setting up the extensions yourself. An ounce of prevention is worth a pound of cure, they say!
😉

Well, there you have it. A brief guide and introduction to the benefits and the how-to of using callout extensions to beef-up your next ad campaign.

Search network denotes a direct connection with search engine results (though it can include websites in Google’s Content Network, too). Google also offers display, shopping, and app advertising options that are somewhat separate from the search network.

Creating Excerpts in WordPress – Tags, Functions, & Notes

WordPress is a beautiful rig. It’s the world’s most popular and relied-upon CMS. Here’s how you can activate, modify, and place excerpts in WordPress.

By default WordPress sets excerpts (short previews of a blog or custom post type) to 55 characters. The character limit is a good one that works in most situations. However, it is possible to modify the character count. Here’s how.

How To Change Default Excerpt Character Count

To modify the character count, you’ll need to access the functions.php file of your particular theme. The best way to do that is to access it through the server files, likely through cPanel.

Once you’ve access the functions.php file and have opened it up to be edited, you can use the snippet below to set the character count you desire.

/**
 * Filter the except length to 20 words.
 *
 * @param int $length Excerpt length.
 * @return int (Maybe) modified excerpt length.
 */
function wpdocs_custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

By default, WordPress does not insert a hyperlink (or permalink) into the excerpt. Without modification, excerpts display […].

That delivery of content is often customized, however, to often include a call-to-action (i.e. Read more) and link to the article in question.

How Can I Add a Read More Link to My WordPress Excerpts?

Again, you’ll need to access your functions.php file to make this modification. Once you’ve done that, you can use the script below to create an excerpt that has a link.

/**
 * Filter the "read more" excerpt string link to the post.
 *
 * @param string $more "Read more" excerpt string.
 * @return string (Maybe) modified "read more" excerpt string.
 */
function wpdocs_excerpt_more( $more ) {
    if ( ! is_single() ) {
        $more = sprintf( '<a class="read-more" href="%1$s">%2$s</a>',
            get_permalink( get_the_ID() ),
            __( 'Read More', 'textdomain' )
        );
    }
 
    return $more;
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );

I’ll add more to this post soon. 😉

Here are a few resources for additional context and information on this topic.