Active Screen Scrolling Mockup Effect for Websites

Active Screen Scrolling Mockup Effect for Websites

This is what I wanted to achieve for website portfolio pages like my last MONKEY Pictures item:

screenshot
*Scroll Me

And I wanted it to be responsive and to be super easily inserted into my WordPress editor. So, as we already did on the post on correct figure captioning on WordPress, we will be using again the function html5_insert_image to hook our own html5 code into WordPress.

MockUp image download

First, download the image from here and be sure to remember where your are uploading it.

functions.php

Then, copy & Paste the following code into your functions.php:

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
$url = wp_get_attachment_url($id);
$src = wp_get_attachment_image_src( $id, $size, false );

if ($caption) {
    if ($caption ="screenshot"){
        $html5 = "<div class='screendiv'><div class='dummy'></div><div class='screenpack'><figure class='screenshot' >";
        $html5 .= "<img src='$src[0]' alt='$alt' class='align$align'/>";
        $html5 .= "</figure><div class='screen-overlay'><span>*Scroll Me</span></div></div></div>";
    } else {
    $html5 = "<figure class='align$align withcaption' >";
    $html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' class='align$align'/></a>";
    $html5 .= "<figcaption>$caption</figcaption>";
    $html5 .= "</figure>";
    }
} else {
    $html5 = "<figure class='align$align nocaption' >";
    $html5 .= "<a href='$url'><img src='$src[0]' alt='$alt' class='align$align'/></a>";
    $html5 .= "</figure>";
}

return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

What this does is to insert a different code snippet depending on whether there is caption defined or not, and what this caption says. So now, whenever you upload a new image using the «Add Media» functionality and write «screenshot» as a caption, this is the html code that will be sent to the editor:

<div class='screendiv'><div class='dummy'></div><div class='screenpack'><figure class='screenshot' ><img src='$src[0]' alt='$alt' class='align$align'/></figure><div class='screen-overlay'><span>*Scroll Me</span></div></div></div>

css styling

Finally, for it to work nice you’ll need the following css rules on your style.css:

div.screendiv {
    display: inline-block;
    position: relative;
    width: 100%;
}
.dummy {
    margin-top: 100%;
}
.screenpack{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

figure.screenshot {
    position:absolute; 
    height:55%;
    z-index:100;
    top:3.5%;
    width:96.5%;
    overflow-y:scroll;
    margin-left:3.5%;
}
.screen-overlay {
    position:absolute; 
    z-index: 10000000;
    background: url('url-to-mockup.png') no-repeat; 
    background-size: contain;
    width:100%;
    height:100%;
    pointer-events:none;
}
figure.screenshot img {margin:0; padding:0;}
.screen-overlay span{color: #fff; font-size: 0.75em; float: right; margin-top:0.5%; margin-right: 3%; font-style: italic; text-transform: uppercase;}

Inline css (not usually a good idea)

Although it is not usually a good idea to inline you css, when it comes to sporadic use of a few snippets I do like to make use of this instead of cluttering my css files. So, to avoid the css avoid, the new code for the functions.php would be:

unction html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
$url = wp_get_attachment_url($id);
$src = wp_get_attachment_image_src( $id, $size, false );

if ($caption) {
    if ($caption ="screenshot"){
        $html5 = "<div class='screendiv' style='display: inline-block; position: relative; width: 100%;'><div class='dummy' style='margin-top: 100%;'></div><div class='screenpack' style='position: absolute; top: 0; bottom: 0; left: 0; right: 0;'><figure class='screenshot' style='position:absolute; height:55%; z-index:10; top:3.5%; width:96.5%; overflow-y:scroll; margin-left:3.5%;'><img src='$src[0]' alt='$alt' class='align$align' style='margin:0 !important; padding:0 !important;'/></figure><div class='screen-overlay' style='position:absolute;z-index: 100; background: url(http://obsessive-coffee-disorder.com/wp-content/themes/implicit-child/images/imac-transp.png) no-repeat; background-size: contain; width:100%; height:100%; pointer-events:none;'><span style='color: #fff; font-size: 0.75em; float: right; margin-top:0.5%; margin-right: 3%; font-style: italic; text-transform: uppercase;'>*Scroll Me</span></div></div></div>";
    } else {
    $html5 = "<figure class='align$align withcaption' >";
    $html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' class='align$align'/></a>";
    $html5 .= "<figcaption>$caption</figcaption>";
    $html5 .= "</figure>";
    }
} else {
    $html5 = "<figure class='align$align nocaption' >";
    $html5 .= "<a href='$url'><img src='$src[0]' alt='$alt' class='align$align'/></a>";
    $html5 .= "</figure>";
}

return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

How does it work?

Well, the structure is pretty simple. Two elements, figure and div with overlay picture wrapped by the same div. This is then wrapped inside another div together with a dummy content div that is need to help calculate the height of the figure and the overlay for any width and, thus, making the mockup totally responsive for any screen width! And without any javascript or media-queries!

Untitled-1

The problem

Setting the width to 100% (or whatever you want it to be) of both —figure and screen-overlay— is easy, but the height isn’t as it depends entirely on the ratio and proportions of your overlay image. Using the css3 “function” calc() for a ration calculation on the height wasn’t going to help because the percentage used is taken from the height of the parent div, not it’s width.

So can you have a div with a height that is always the same as (or proportional to) it’s width?

I found the answer here: JSFIDDLE, and by changing the dummy’s percentage you can actually decide on your own div’s ratio. Clever, right?

Ultimately

  1. Download the overlay mockup image or create one yourself.
  2. Copy & paste the functions.php code into your functions file
  3. Copy & paste the css into the style.css file
  4. Change as desired
  5. Add an image and write «screenshot» as it’s caption
  6. Repeat 5 as many times as desired
Almost Human

Next Article

Almost Human

3 Comments

Cancel

  1. Any chance you would create a wordpress plug-in for this?

  2. I second the WP plugin thing. Would make this more viral!

  3. Also, inserting that code into functions.php breaks my site :( 500 error
    Tried putting public before the function but same result.