Categories
learning

Scroll Sequence Introduction – Basic Tutorial

This is a detailed example of what can be achieved with on scroll animated sequence of images. Idea is simple – animation play and reverse on scroll or touch. All is done within the WordPress UI using Scrollsequence plugin. There is no need for extensive coding. Anyone with moderate PC skills and HTML basics should be able to follow this article and achieve the same effect. Time required to complete is 20-50 minutes, longest is the image preparation phase. If you prefer watching to reading check out the video tutorial below.

Why to add Scroll Image Animation on your website?

User engagement, increased conversions, brand recognition. If users will like what they see, they are much more likely to share your website.

What are you going to learn today?

Today you will learn the easiest and most effective way how to create interactive cinematic web experience. We are going to take a video, chop it up, and convert it to a fresh and new experience that your audience will love. Have a look on the result Beauty Example.

Video Source(s)

The animation is made up of two videos (1, 2) from envato elements library, or you can find the first one on Vimeo (source: https://vimeo.com/433679875). Warning: For commercial use, you need to subscribe to envato elements and you get a license to use it along with full access to their vast database of stock videos. Here is a big list of some other free and paid stock video sources. My personal favorites are envato elements and pexels.

When selecting a video, it is important to pick one, where the motion is smooth, has a good frame rate and we want to avoid motion blur because it simply does not look good when looking at a static image.

Video to image conversion

Converting video to image sequence is a crucial step! There are many tools out there, but not all are the same. Have a read on how to convert video to image sequence. Most important is to convert all frames from the video in desired image quality and resolution. You may not use all images at the end, but select your conversion tool carefully, as some will give you only 30% of the original video frames. Not having enough frames will result in choppy behavior and we like things smooth as silk!

Recommended tools to use are VLC media player and FFmpeg. VLC is a simple, yet powerful and relatively effective way of conversion. Downside of VLC is that it depends on your computer’s performance. You may end up with 70-95% of frames depending on your computer’s performance. FFmpeg is a bit more sophisticated tool. For you to work with it, you need to input into a command line. In return, it will give you all frames in the full resolution. For production, FFmpeg is recommended with Scrollsequence.

Video (1)Images
Resolution: 1920 x 1080 pixelsResolution: 1920 x 1080 pixels
Duration: 17 secondsImage Count: 511
Framerate: 29.97 frames / second
Frame count: 17 x 29.97 ~ 510 framesFile Size (each): ~120 kB
File Size: 291 MB (uncompressed)File Size (total): ~15MB
Details of the first video to image conversion. Second video is not included in the table above.

Due to the nature of the video, where the movement is very slow, and there is not a lot of movement, it is not effective to use every frame. We want to achieve a smooth movement, but at the same time we don’t want to have the animation to be extremely large in size. Therefore, we are going to use only every fourth image, so instead of 511 images we are going to use only about 130. And there is another trick up in our sleeve to reduce the animation size even more. Read on and find out!

File naming is important

You want to name your files in such manner, so they get sorted correctly on your machine and in WordPress media gallery. Especially you want to include leading zeros when numbering the images. See below for example of good and bad file naming structure.

  • Bad file naming – image1.jpg , image2.jpg . . . image11.jpg
  • Good file naming – image001.jpg, image002.jpg . . . image011.jpg

Image optimization

As this is a basic course, we won’t get into the details of image optimization. Simply you want the images to have the smallest possible size so the page loading speed is fast, while not compromising quality.

For details on how to keep file size to a minimum, read our article about Bulk Image Optimisation. You will learn what tools to use to have the fastest loading speeds, without affecting quality.

It is common to use optimized images that have 40-70kb each in size.

Once you have your images ready, upload them to your WordPress media gallery and let’s roll!

Starting your first Scrollsequence

Click on “Add New Scrollsequence“, then click on “Add page”, page is something like a scene.

Add images

Add images to the first Page and voila, if you click on view, the animation is already working!

Earlier in the article, I have promised to learn you a neat little trick. If you look at what happens in the video, model opens up her eyes and smiles. It looks the same if you reverse the video. So why not display each image twice, to make the animation longer while using half the amount of images.

Content

Next step is to add content, style it with CSS and animate it. The styling depends on your theme. For the example we have used the TwentyTwenty Theme, so if you are using a different one, it may look different.

Page 0

HTML Content on Page 0

<div id="container1" class="bottom-left">

  <h1 style="display: inline-block; margin-right: 0.5em;">
      Tell your story
  </h1>

  <h1 id="text1" style="display: inline-block;">
      like never before
  </h1>

</div>

Animating Page 0

First let’s talk about CSS selectors. They are building stones of CSS. For use in Scrollsequence they allow you to select any element by either id, or class. When selector starts with “#” it means that it’s an id selector. If a selector starts with a dot ” . “ it means it’s class selector.

1) Id selector #container1

Enter starting frame 0 and ending frame 60.

From Animation – Select “Move From Vertical Offset” of 40% and duration of 40. This means that at frame 0 the elements start from 40% vertical offset and its going to be moving up to its position for the first 40 frames.

To Animation – duration is 19 frames consists and of two separate animations, “Fade To” and “Move To Vertical Offset”. Fade to opacity 0, meaning once the animation finishes, element will not be visible. And move to vertical offset means that once animation finishes, the element will be moved up by -127%.

2) Id selector #text1

#text1 is visible between frames 15 and 60. There is fade from opacity applied so it nicely fades into view over the last 10 frames.

3) Class selector .scrollsequence-canvas

This selector is used to control the properties of the animated background image that is painted on canvas where the images are painted. Canvas is high performance animation API, and it’s used by scroll sequence to provide a smooth animation experience.

We are fading the canvas out, making a seamless experience by gradually fading the canvas out over the last 10 frames.

Page 1

Click on the plus sign on the top of the page to Add Page, repeat the same process and add the exported images from the second video. This time, because the model moves her hands quite quickly, and there is a bit more movement, we are going to use every second frame from the video resulting in 167 frames.

HTML Content on Page 1

Code below is very simple. There is a div, which ensures alignment of the text, see styling section below for reference. The second is a h1 element with id=”night” that we are going to select and animate.

<div class="bottom-left" style="color: white;">
    <h1 id="night">
      Another night on Earth.
    </h1>
</div>

Animating Page 1

1) Class selector .scrollsequence-canvas

First lets animate the fade in and fade out of the background image sequence. We have faded out the canvas in the last page, so we need to fade it back in. This is done by “From animation” and “Fade From Opacity” where we are going to fade from 0 to default (1) over the first 10 frames. At the end of this page we want the canvas to fade out, so there is a seamless transition to the content after animation is finished.

2) Id selector #night

#night id element is shown between frames 0 to 140 and we want it to Fade From 0 opacity and Move Up, and animate it to fade out to zero again and move up.

Image Responsivity

To ensure image size and scale look the way we want across all devices, there are few settings. We can scale and align the images for both screen aspect ratios – portrait (mobile) and panorama (desktop). Experiment and adjust the horizontal and vertical alignment to understand its principles. For this course, the best results are if we “Scale to fill” and leave the alignments on center.

Styling

Styling is done via Custom CSS field.

.bottom-left{
position:absolute;
left:4vw;
bottom:13vh;
opacity:0.8;
}


#site-header{
background-color:rgba(255, 255, 255, 0.5)
}


Settings

Scroll Delay

Zero delay means that once you scroll, the animation arrives instantly to its end point. If you scroll using a mouse it may seem a bit choppy. As a compromise to achieve a smooth animated effect on all devices, a delay between 0.5-1 seconds is recommended.

Image Width

Depending on your theme, you may want to force full width if your template is in a narrow container.

Image Opacity

With this simple setting you can change the opacity of the animated images, particularly useful if you have a colored background and want some tones of the background to be visible through the image.

Content Editor

At the very end there is another content editor. You may ask yourself – what is this editor doing here? Answer is simple. This is the WordPress native content, that is associated with the Custom Post Type. Whatever you write into it, it will act, as you would be writing a normal post or page.

It also acts as a way to precisely control the position and margins of the scroll sequence that we have just created.

<h1 style="text-align: center;">This is any content displayed before the animated sequence </h1>

[scrollsequence margintop="-155px" marginbottom="-200px"]

<h1 style="text-align: center;">This is any content displayed after the animated sequence </h1>

In the code above, notice that there is a heading before and after the shortcode. This positions the scroll animation between the two headings, simple as that! You can also position it at the beginning or the end of the page.

If you are going to be using the shortcode anywhere else on your blog, don’t forget to add the id option to identify which sequence to display.

Result

Even though this is quite a lengthy tutorial, it gives the full picture and touches all of the main subjects of creating a full page, immersive experience without much coding. If you have any questions or anything to say, comment in the section below!

Categories
learning

How to Convert Video to Images. Big Test of Free Tools

We are going to talk about how to get static images (.jpg, .bmp or .png) from video content on PC or Mac using free tools. There are many different software products out there, to make it easy for you we have picked the few of the most common, so you don’t have to try them all. If you are interested on how to optimize images, read Bulk Image Optimisation article instead.

With Scrollsequence, it is important to capture as many frames from the source video as possible without any duplicates. That’s why we have put the converters to a test to see if it captures really EVERY frame for you.

Video used for testing

Test setup is simple. In blender I have created a 5second .mkv FullHD video at 60 frames per second. That equates to 300 frames. Perfect result for an export tool would be to have 300 unique images at the end of the test.

Video details: 1920 x 1080 pixels, 60fps FFmpeg video with H.264 video codec at high quality.

Let’s start exporting!

Online Converters

1. Ezgif.com

Ezgif features a range of different online conversion tools. You can find here a lot of tools to manipulate video, gifs and images, watermark and all is done for free with a reasonable quality. So, lets put Ezgif to the test!

We have tested both video-to-jpg converter and video-to-png converter with following results.

ezgif.com/video-to-jpg

Only 1200px size and 20fps limits are allowed. After uploading the video and hitting export with the maximum settings we have received 101 frames from total 300 included in the video.

ezgif.com/video-to-png

Same 1200px size and 20fps limit applies here. We were able to get 101 frames back out of 300 and unable to download them all as zip. Website returned a 404 error.

ezgif Test Result

101 of 300 frames at lower resolution

2. Online-convert.com

Online convert tool has a bit more options, and it does some basic quality optimizations for you as it exports them from the video. Nevertheless, from our test, we have been able to export only 51 frames from the total 300.

Online-convert

51 of 300 frames

Desktop Software

Here we are going to talk about stuff that you can download from the net and install on your device, working with videos and images locally. We have tested for you the options that are out there, and listed the ones most useful when working with Scrollsequence.

3.VLC Media Player

A lot of you have already this player installed on your system, and maybe you don’t know that it can be used for exporting static images from the videos that you watch.

VLC media player is a powerful tool at your hand as it can not only export the images, but also apply filters, color correction and whole arsenal of visual tweaks.

  1. Run VLC media player and navigate to Tools and Preferences.
  2. Bottom left click on Show settings -> All and navigate to Video -> Filters and tick Scene Filter
  3. In Scene Filter settings select the output format, image width and height. Take care to match the video source width and height! Choose filename prefix and directory path. Important: Recording ratio defines the ratio of images being saved. 1 being every image, 2 being every second image and so on.
  4. Press play and the images are automatically saved in the desired folder as you view the video.

Test result: Even if you set a recording ratio of 1, which means it should record every frame, it does not. Results vary on the performance of your machine. Sometime is captures nearly all frames, sometimes it captures less. There is a way around it, and it is to reduce the playback speed of the video, which in turn produces duplicate image frames.

vlc media player

280 of 300 frames

4. FFMPEG

FFMPEG is a very powerful tool. It can be quite tricky to use at first, because you have to use simple command line input, but it allows you to do almost anything. A lot of the desktop and online video processing tools out they are using FFMPEG under the hood. You can install FFMPEG on your server and do the work on server, or do it locally.

Download (gyan dev), Windows Install instructions, Convert Video to Images Instructions

FFMPEG returned all 300 image frames that were used to create the video. no more, no less

FFmpeg Test Result

300 of 300 frames

5. VCLIP

VCLIP is built on FFMPEG, it is a bare bones simple screen grabber. Due to the fact that it grabs the screen directly, you don’t need to store the video locally. You can also very simply grab just a part of the video, or capture simply anything happening on the screen.

VClip let’s you export stuff only to video, so how do we get the images? Before you save the output as video, the .bmp images are stored in Frames subfolder of the installation path.

Downside is that VClip provides only .bmp output.

VClip has only 15,25 and 30fps options. If you have a 60fps video, you better look elsewhere. VClip rendered about 150 frames depending on how soon you press play/stop and record buttons. Achieving Full HD native resolution was impossible. VClip is only able to capture a cut-out portion of the available screen.

VCLIP Test Result

150 of 300 frames at lower resolution

Test Results and Closing Word

  1. FFmpeg (300/300)
  2. VLC media player (280/300)
  3. VClip (150/300)
  4. Ezgif (101/300)
  5. Online-convert (51/300)

Overall winner is FFmpeg with exporting 100% of the frames in their full resolution. It may be quite difficult to setup and learn, but provides the best results of all the free options that we have tested.

VLC media player is also a good option, if you want an easy way to get started, plus you may have it installed already., so why not to use it?

Online converters can bring fast results with minimal effort, but you cannot expect a good quality for images that you want to use for full screen.

Read next: Bulk Image Optimisation

Categories
learning

Bulk Image Optimization Options

In this article we discuss the most common options of image optimization for web and WordPress. Free and paid services are compared for use in optimizing large quantities of images for use with scroll sequence.

It is key to have your images optimized. Below we discussed the ways on how to reduce size while maintaining the image quality.

1.Offline Image Optimization

Free and simple tool for image optimization and resizing. Install and use within minutes. Nice and simple.

Setup example
Caesium settings that were used for optimizing all images on Scrollsequence website. Quality around 70 will give you nice results while having a small file size.

2.Online Image Optimization

Allows simple upload and image optimization with basic settings. There are limits for Free account. You get only few options (aggressive and ultra). You can optimize your images directly in WordPress, or on their website.

PROSCONS
WordPress Integration
Limited free use, quite expensive on the long term
Very effective optimizationNot so many options

Similar to Imagify.io. Allows simple upload and image optimization with basic settings. You can optimize your images directly in WordPress, or on their website.

Another WordPress and online solution to speed up your page loading times.

×

Expired!
00 Days
00 Hrs
00 Mins
00 Secs
Get 50% off with "MAY24" coupon! Save 50%