Images going through my head…

Namaste!

SO, you want a full-width header, but want it to populate with a new image each time the user visits? This tutorial will show you how to do that, plus how to use javascript to create a slider effect in your header. I chose to put together a demo of the later that you can see here, but the selection of the random image would look almost the same. As an example of using this to style a tab module, take a look here. This tutorial, as typical, is based on a request in one of the Facebook groups. The reason I’m showing how to create a slider effect is so you can alter this tutorial to put a shifting background onto most any element – even ones where you can’t place a slider. Let’s get started!

First up, make your normal Divi page with full-width header and other content. I recommend giving the full-width header a color neutral background because it will take a short time for your image to load. Next, go into your full-width header module settings (the three lines in the grey section). Navigate to the Custom CSS tab and give the module an ID of ‘headerSection’. This will allow us to target it with our javascript. Since we are not pre-loading an image into the background, you should give your header a defined height either in the main element styling box, or in your separate style sheet. I also give my header a class of ‘full-image’ while I’m here. Then to my style sheet I add:

Next, add in a code module on the page. You could also elect to use this script as a separate file and enqueue it, or put it into the Divi theme options. One thing I like about adding javascript by the code module is that it loads on just this page. So, if you don’t use this script on any other page, there is no sense in enqueuing it onto every post/page. We will start first with the simple task of selecting a random image using javascript and then assigning it to the header. In the code module, add the following:

Okay, let’s walk through the code. First up on line 1, we wait to start the function until the DOM is loaded. This is important because if we fire the script too early, the header won’t exist, yet. Next, I define a variable called ‘imageArray’ that has a list of the images that I want to choose from, in this case, a list of seven different images. You will have to look in your media library and adjust image names accordingly. I also create a counter and set the value to 0. 

Immediately following the creation of this counter I set it equal to a random number between 0 and 6. Wait, what — why 0 to 6? Remember, that arrays in javascript always start at 0, not 1. I accomplish this through using the ‘Math.random()’ function, which generates a number between 0 and 1, exclusive of 1. So to generate a random number between a min value and a max value (as long as they are zero or positive) use ‘Math.floor(Math.random()* (max – min +1)) + min’.

On the following line of code (line 14-15), I use jQuery to target the ‘headerSection’ ID that I added into my module settings. Then I change the background image for that section using ‘css()’. This function allows for you to change any CSS elements of your target. In this case I pass in the style element I want to change, ‘background-image’, followed by the path to the image. This would normally be passed in as, ‘url(pathToImage)’. In this case, I am concatenating a string that consists of three parts. First ‘url(‘, followed by a plus sign – which tells javascript to add the next part onto the existing string. Then I pull a value from the array based on the random number generated, and finally add on the closing parentheses. 

Okay, great. Now we have a function that will change the background image every time the user loads the page. What about if we want the image to change at a regular interval? Well, for the header we could simply use the slider module, but what if we were in some other module where we wanted the image to change? JS to the rescue!

We are going to make two changes to the JS above. First, we are going to preload out images so that they smoothly change, and second, we will add in a timer to fire regularly and change the image.

You can see that this code resembles that last very closely. We make our list of images, but then we have a ‘foreach()’ loop (lines 14-17). Basically what this bit of code is saying is that the browser should step through the array of images and “for each” load them into a new array. This has the effect of entering all of the images into the browser cache so we don’t have to wait for them to load when we ask to display them.

Now we use ‘setInterval()’ to change the background image. We do it the same way as above, using css(), but we add in a counter that increments until it is equal to 7, at which point it resets to 0. With setInterval(), the number after the comma is a time in milliseconds. So ‘5000’ means 5 seconds (1000ms = 1s). The great thing here is that we can change the jQuery selector to any element on our HTML page. Sliders everywhere!

The only other change I would make is to add in a background-image to the element you are targeting rather than a colored background, or nothing. That is because the script as written won’t fire immediately. So, if you set a background image for initial load, you won’t see a colored background followed by a series of images. There are ways around this, but I elected to keep the script as simple as possible.

As usual, if you have any problems getting this to work send me an e-mail or leave a comment. If you want a more in-depth explanation of anything I would be happy to oblige.  I hope this helps someone out with understanding the power of javascript a little more!

Metta!! 

 

Using Animista

Namaste!

I have seen a couple of questions in the various Divi groups about using the animations that are shown on the animista web site. For those of you who don’t know, this site gives you an easy way to generate the styling for a variety of different animations. Basically, you give an animation type (like scale-up), a duration, a timing function, along with several other options. The site will then give you several pieces of CSS that you need to put into Divi.

Once you navigate to the site you can pick one or several animations, along with options. These can then be saved to a clipboard. For this tutorial, I just grabbed the scale-up animation with the base options. Once you finish picking, there is an icon on the right side of the screen you click – looks like the image on the left. Once you click that you will get some CSS. In this case:

Go ahead and copy this code to the clipboard and then paste it into your favorite text editor. I like Sublime Text – donateware and a great product! If you want to be able to use additional animations, go through the process with each you want to employ on your site.

Once you are done with this, you still need to grab the necessary keyframes. I go into more detail about animation and keyframes in this past tutorial, which you can read if interested. After you copy your last animation to the clipboard, you should see a small notice at the bottom with a link to “grab” the keyframes. When you click this you will get another bolus of code for you to copy to your text editor. In this simple case:

Make sure, that the keyframes names (in this case, scale-up-center), match the other styling you copied – one set of keyframes per animation. It may look like the keyframes are repeated twice, but notice that one has a ‘-webkit’ prefix. This is so that all browsers can display your animation. Okay, now head over to Divi. Normally, I strongly advocate that people use a child theme, but in this tutorial I will show you how to do this without one. (You really should use one!) On your dashboard navigate to Divi >> Theme Options >> General. Sorry to those using Divi in another language! At the bottom of this tab, there is a box labeled “Custom CSS”. Paste all of the code you got from the Animista site into this box. Save your changes and then add a new post or page.

To apply the animation, you need to add the class to the object that you want to animate. The main difficulty here is that by just adding the class to an element means that it will animate as soon as it loads. So, if the element is out of the viewport, your user will never see the animation. So, let’s use a little jQuery -I know it is a little scary, but this isn’t that advanced!

So, add a code module onto your page. You can also elect to go to Divi>>Theme Options>>Integration>>Add code to the head of your blog, on the dashboard.  Add in either place:

I can’t easily add it into my code formattingo on this blog, but make sure to put <script> in front of the code and </script> after the code to tell the browser that this is javascript. I’m not going to explain this code in detail, but basically, the code is saying to add the animation to the element with an ID of ‘animateMe’ when it reaches the mid-point of the viewport. I have explained this code in detail in a previous post, so you can take a look to learn more.  In order to make sure that the code module doesn’t show up on your page, click the custom CSS tab and in the box labeled “Main Element” add in ‘display: none;’. 

Lastly, we need to add our object and give it the right ID to be targeted. I added in a 1/4 column button module. 

Within the module, once again click on the “Custom CSS” tab. Then, give it an ID of ‘animateMe’ in the box at the top. If you look at the code above, you can see that it is our target on the third line. Make sure there is something above the button module to push it out of the viewport so that it will trigger at the midpoint. 

That is it! Pretty simple overall. The only thing I would do differently on my own site is to put the jQuery code into a separate file, which I explain how to do here. As usual, an email or comment will get you help with any problems you may have.

Metta!!

 

UPDATE: Vana asked about being able to show the animation on hover. This is actually a little more simple that what I’ve described. You will not need the javascript at all. Basically, give the element(s) you want to animate a specific class name. For example, ‘animateThis’. Then, change the first set of CSS from this example by removing the current class identifier, ‘.scale-up-center’, and replacing it with ‘.animateThis:hover’. All of the other styling should remain the same. Any class name can be used, just replace the ‘.animateThis’ portion. Good Luck!!

Where’s Waldo?

Namaste!

Your client just asked you to make a map of their store, where the user can click to find out more information about each department. Can you do it? That is the subject of today’s tutorial!I’m electing to accomplish this using SVG graphics. There are several other ways to do this (using <map> for example). Fair warning, I’m using the Adobe suite of products for this tutorial. There are plenty of other products out there that can accomplish the same thing, but you may have a little frustration following along. The first part of this tutorial is generating the SVG with paths. If you can do this, feel free to skip ahead.

There are numerous approaches to this problem. The one I’ve elected to use is called image mapping. It has been around for a number of years and utilizes SVG (scalable vector graphics). The great advantage of SVG is that they are highly scalable. This means they are naturally responsive and look good at any resolution. Image-mapping is a technique where we can define areas on the image that the user can interact with. Because it is part of an SVG, we can style it using CSS (for example :hover) just like any other element. Let’s get started!

In my pretend scenario, my client is a travel agency that is selling tours of Japan and wants a tourist map of Tokyo, along with the sites that can be seen. Here is the demo. First off, select your image. While it can be any image, it is best to pick one that is relatively simple since we will be converting it to an SVG and the way we will be displaying it in Divi can get fussy with huge images. I wanted to push the edge, so I picked a somewhat complicated map of the major areas of Tokyo. It starts this project as a  340kb PNG. First up, bring it into your favorite editor, like Photoshop (PS), but GIMP and Inkscape will both work nicely with outputting SVG. I’ll be talking about PS, but I might go back and give updates for other software later.

First, give your image a reasonable scale and resolution. I chose 800px x 800px with a resolution of 72dpi. Whatever the dimensions, remember them for the next step.  Now we have to define our regions of interest. Simple image-mapping can use squares, rectangles, or circles. These are defined by SVG paths that can be as simple as 3 points for a circle (center X, center Y, and radius), or four points for a rectangle (start X, start Y, width, and height).  I want the more complicated shapes of the complicated wards of Tokyo. In order to do this, I will select the polygonal lasso tool and carefully outline the first region of interest. Now, I’ll convert that selection to a path (button located at the bottom of the paths panel ). After naming that new path, I’ll continue doing this for all the desired areas.

With my regions selected I now have to export my paths to Illustrator. Under the export menu, there is a selection called “Paths to Illustrator”. Elect to export all of the paths.

Moving over to Illustrator, you want to create a new artboard that is a little larger than your image. Given my dimensions, I choose 840px x 840px. This is because different browsers choose how to display SVG a little different. If you have your image pressed up to the edge it will get cut-off occasionally. First, bring your image into the artboard and center it. Next, place your previously saved paths file over the top of the image. If needed, stretch the edges of the paths to fit your image. Now, export the whole thing as an SVG.

This next part is where we need some forethought. What do we want to do with each of the regions? In my case, I want to link out to a Wikipedia page about that ward, and I want a pop-up tooltip identifying the region. I will be using the javascript library, Tooltipster.   So, I’ll wrap my SVG Path elements in <a> tags with a class=”tooltip” and for now, a simple title that will pop-up when people mouse-over, using title=””. This library lets you have any HTML as tooltip and I will be going into having tooltips with pictures in a future tutorial.

Open up the saved SVG file with your favorite editor. I use Sublime Text a lot. It is donateware and if you end up using it a lot I encourage you to give back to the developer. First up, check out the header of this file.

There is a lot of info, but you want to make sure that your program set the origin to x=”0px” y=”0px” and that there is an xlink set (note that the xlink starts with “xmlns:xlink”). This will allow you to wrap your path elements in clickable links.Next, either scroll down or do a find for “path”.  Like a standard HTML document, there should be an opening <path> tag and a closing </path> tag. Wrap these in <a></a> tags like you would any other link. Since I am adding in a tooltip and a link to Wikipedia, my opening tag is ‘<a href=”wikipedia article link” class=”tooltip” title=”the ward of tokyo outlide by this path”>’. For sake of completeness, I should point out that I am using SVG version 1.1 – this type of link was deprecated as of SVG version 2, but it isn’t something you have to really worry about. Additionally, if you path element has any inline styling, delete it. We will be handling the styling in our child theme styling sheet.

Okay, once all of our paths are wrapped in our link tags we’ll save the file and move over to Divi. Open up a new post or page and elect to use the Divi page builder (back-end). Add in a new section with a code module (If you use the code module ofte, I recommend getting and using my free plugin).  Copy and paste the entire code from the editor into the Divi code module and save. If you look by preview, your new image should show up, but most likely each of the path areas will be filled in with black. Also, at this point, there is likely nothing in your style sheet to add hover effects, so let’s fix this.

I am going to assume that you are using a child theme, if not, you really should and there are some wonderful resources out in the Divi world for automatically building them (here and here). Open up your child style sheet and add in the styling you would like. For my purpose I’m going to style each path element with a transparent overlay (instead of the black that is there now) that turns slightly opaque on hover.

So note that our CSS is a little different for paths than it would be for a <div>, for example. These paths are defining shapes, so we want to “fill” them. Okay, now if we preview our image it should be looking good. When we click it should take us to our wikipedia page and when we hover, the area should change color.

Last up, incorporating a simple tooltip. There are a number of ways to do this, but I’m going to use the Tooltipster library. Head over to the site and download the main library and the CSS for the library. Enqueue these scripts by modifying your functions.php file, or by adding the links in through the Divi Theme options panel. I won’t be covering this here, but I have covered enqueuing scripts before here, and I will be going through it once more in my next tutorial. To make our tooltips appear we need to add one last piece of code. You can choose to either make it a separate file or use a code module. I’m going to use a code module. Add one onto your page and open it up. Put the following code inside.

As usual, when using the code module, make sure to wrap the whole thing in <script></script> tags. I’m not going to go into too much detail in this tutorial, but I’ll give you enough knowledge to get into trouble until the next tutorial! First, on line 1 we tell the browser not to run the code until the DOM is ready and pass in a “$” so that we don’t have to type out jQuery each time. Next, we invoke our library and tell it to target all DOM elements with a class of ‘tooltip’. Next we pass in several options, which I’ve commented on in the code. I’ll be covering these in detail in the next tutorial.

That is it! Your tourist map should be working. Image-mapping can be used for any type of interactive graphics, only limited by your imagination. As usual, shoot me an e-mail or leave a comment if you want something further explained.

Metta!!

Come On Spring!

Namaste!

This time of the year is the toughest for me. All of the preparation for the upcoming growing year is going on, but it all takes place inside. Starting seeds, waiting for them to germinate, transplanting. The ground is still too frozen to work here. A mid-March snowstorm dumped two feet of snow on us. After a winter of unusually mild temperatures, March has turned into a lion.

Our garlic and shallots were peeking out in February, so we partially uncovered them, only to have to cover them once again. We are hoping they make it through this cold snap. Overall, I’m just antsy for the new season to start in full swing. I can’t wait for it to be warm enough to work the soil, start delivering compost to the beds, and start getting new early plants into the cold frame and hoop tunnels!

This year, I need to raise and extend the wall of the garlic bed that allows us to have a level patch on the hillside to our house. I also have to finish up the project of re-painting all of the garden fences that I started last year. I wish I had one more outbuilding that I could heat slightly in the winter to complete these types of staining chores. We had big plans to put wire panels in around the upper three-sister’s garden, but the horse trailer isn’t on the road so I don’t have an easy way to get the home.

Come on Spring, I have cabin fever bad!!!

Metta!

jQuery to the Rescue!

Namaste!

An issue that has been of some contention in the Divi world is the lack of a privacy/terms-of-service checkbox in the ET Bloom plugin. This is essential users in many countries where it is the law that this is present. Today, I’m going to give you a quick tutorial on how you can accomplish this with some jQuery and custom styling. I’ve only tested this on a select number of possible Bloom templates, so fair warning, it might take more styling for it to work on the one you select. I will be releasing a plugin (free) to accomplish this for people shy about adding in code to their Divi pages. But in the meantime, let’s get to it!

To accomplish this quickly, I’m going to be using two code modules. The drawback to this method is that it will only be active on the pages where the code module is present. If you don’t already know how I encourage you to:

  1.  learn about enqueuing javascript in your functions.php
  2. learn about using a child theme style sheet.

Both of these topics are beyond this tutorial, but they will ensure that your script and styles will show up on all pages/posts. I’m assuming that you already have the Bloom plugin installed and an optin of your choice set-up. For this example we will set up a new post using Divi. Note: you don’t have to use the Divi theme/builder if you enqueue the jQuery I will be showing. Add whatever content you want to the post and then add a new section with two code modules.

In the first code module we will add our jQuery. Here is the full script (downloadable text file at the end, sorry!):

Okay, let’s walk through the most important parts in detail. First off, to use any kind of javascript in the code modules you have to wrap it in script tags as we see on lines 1 and 16. We are going to further wrap our code in some jQuery that tells the browser not to run our instructions until the DOM is ready and to allow us to use a ‘$’ instead of writing out jQuery (line 2 and closed out on line 15). Now to the meat. On line 3, we check to see if there is actually a Bloom subscribe form on this page by testing for a class name that exists in all the forms, ‘et_bloom_subscribe_email’. Remember, proceed classes with a ‘.’ and ID’s with a ‘#’ when selecting in either CSS or jQuery. 

Now to the meat. On line 3, we check to see if there is actually a Bloom subscribe form on this page by testing for a class name that exists in all the forms, ‘et_bloom_subscribe_email’. Remember, proceed classes with a ‘.’ and ID’s with a ‘#’ when selecting in either CSS or jQuery. The way we do this is simply to ask if that element has a length. If it returns a length, rather than “null” than we run the next set of instructions.

First up, we are assuming that the checkbox is required. So, we hide the submit button so that it can’t be clicked by adding the class “hidden” (line 4). I’ll show you the styling we will add which will actually hide the button later in the tutorial. Next, we set a variable (var) called “myCheckbox” to a long string of HTML code (lines 5-8). Please note, you can assign big blocks of HTML to a variable and format it nicely on multiple lines by surrounding the code with backticks(`), not single quotes (‘). This code simply adds a checkbox plus a label. You can modify this to be as simple or complex as you would like. I have elected to assign the label an ID for simplicity of styling. 

On the next line we actually inject the code into our Bloom form using ‘append()’. In this case, I use jQuery to target the email field and add our code directly afterwards. Finally, I am adding in a ‘click listener’ on our checkbox (lines 10-12). This basically says if the checkbox is clicked, check if there is a class “hidden” and if there is remove it. However, if the class doesn’t exist, add it. This allows us to reveal or hide our submit button depending on whether the user has checked that they read our privacy policy (for example).

Okay, lastly we need our styling. Here I have added a minimum of styling as an example and you will likely need to modify this for your purposes.

This will be added into your second code module. Make sure to flank it with <style> </style>tags. I’m not going to go through this in detail except to point out the first bit of styling. The “.hidden” gives styling to the subscribe button once we add the class. It turns the visibility off, but preserves the space it would take up in the DOM. That way, when you turn the visibility back on you don’t get a re-flowing of elements.

That is all there is to it! As always, if you need something explained further, or need help with implementation, give me a shout-out in the comments or by email.

Metta!!

jQuery text file

All the pretty colors…

Namaste!

Just a quick post today to show you all my latest free plugin. I use the code module to put additional HTML into my Divi pages. I use it less often, but occasionally to put in a block of inline style or a script. Overall, using the code module is not a generally pleasant experience after coming out of a full-fledged IDE, like Sublime Text (donateware) or Brackets (freeware). But, having to do some coding in one of these programs and then cut-and-paste over into Divi can break your flow. I’ll let you in on a secret, both of these great products are built around a great library called CodeMirror. So I said to myself, “Bo, why can’t us Divi lovers have that?” The answer is that now we can.

Before I show you a quick demo, the caveats. This is a beta release. I’ve tested it on several development sites, both clean installs and in the presence of other plugins. No problems, but your mileage might vary. One problem it was having that I hopefully have solved is a timeout problem on first install. If your codebox still looks the same, back out of the post and try again. Also, not all of the features I would like are incorporated, yet. I want to add additional settings for custom key bindings, as well as some improvements to linting. One Divi quirk is the fact we are doing everything inline, so you have to add script and style tags. How I have linting set up right now chokes on this. So, I recommend you leave these off until you are done and have error checked your code. A pain I know! With that, onto the quick demo.

I’m going to use one of Andy Tran’s recent blog postings to show you the new module. In this case, he is using his really cool codepen generator to make a pop-up modal in codepen and integrate it into Divi. I will be freely stealing his code just to show you how the module works. I encourage you to read through his tutorial. 

First up, install my free new plugin you have downloaded from here, it is at the bottom of the page. There are an instruction file and the plugin file in the archive you download, so save it someplace and unpack it. Then go to your plugin manager on the Admin dashboard and install the zipped plugin file. Once it is successfully activated, I recommend you go to the “Settings” menu and select a theme. In a future version I will have examples of each theme to make selection easy.

So, after you have the new modules installed, open up a fresh Divi page and add three extended code modules (blue background compared to normal grey of Divi). They can be standard or full-width,
 doesn’t matter. In the first, we will copy and paste Andy’s HTML (see picture at the top of the post). Make sure to have HTML selected for the language.

In the next module, we will select CSS and paste in the styling from his article (Note: I wasn’t able to directly copy from the article. I had to go to his modal codepen, use the pulldown next to CSS and select “View Compiled CSS”, select all of the code, and paste it in. We see something interesting here! On the left side, there is a yellow triangle. If we hover over that triangle, we will see it says, “Rule doesn’t have all of its properties in alphabetical order.” This is a warning, not an error – feel free to ignore! Further down there is another triangle with a plus inside. This means that there are several warnings about this line. Additional linting indicators are a red octagon with an “X” and the same symbol with a plus added. These indicator single or multiple errors, respectively. Finally, before saving this you need to put a <style> at the beginning and </style> at the end. Sometimes these tags confuse the linting, so I leave them off until the end.

Last module, Javascript! The picture to the right contains some code from the CodeMirror linting demo, not Andy’s code, to demonstrate what code with errors looks like. Open it up, select javascript as the language and post in Andy’s code. In this case, we have to wrap the code with both <script></script> tags, but also come code to tell the code when to fire. After the opening script tag add,  “jQuery(document).ready(function(){“. You can choose to place a “$” in the function parentheses if you get tired of typing out jQuery in the subsequent code, but since we are copying from Andy, we don’t have to bother. Before the closing script tag put “})” to close out your function. 

That should be it. When you preview the page you should get a button that on click opens a modal window. If the modal is already open, it is a problem with the CSS. That is what happened to me when I copied the CSS directly from the blog post instead of the codepen. Anyway, this module is about options. We can debate whether it is good practice to put in a large amount of inline styling or a script into a page, rather than in seperate sheets, but we have a slightly better code module now. Going forward, I want to see the response I get to this module. If enough people want me to, I will try to expand it, more as a coding exercise than anything else. I hope this benefits at least a few of you out there in the Divi Community!

Metta!!

Div transitions

Namaste!

Well, luckily with animation, fantasy is your friend. Steven Spielberg This tutorial was once again inspired by a question from Facebook. Not on my prefered page (Divi Theme Tutorials), but I won’t hold it against them! The person was looking at Elegant Themes newly designed page and noticed that there was a CTA just above the footer that changed size when it scrolled into view. They wanted to know how that was accomplished, and that is the goal of this tut! We will be using a little javascript plus CSS3 transitions and transformations. Note: I altered this after the original posting to incorporate an alternative method that Divi permits by taking advantage of the waypoint.js library that is already loaded! Scroll to the end for this update. The original method outlined by this post will work on any site that has vanilla jQuery running. I’ve posted a demo of what we are building here. This will be a really basic page with a header element and section inserted as spacers to keep the element we are going to transform out of view until we scroll. Next is a section with the module we want to transform. At the very bottom, I’m adding in a code module to hold the javascript I’ll be writing. I would probably put the script into its own file and enqueue it for a production site. First, let’s focus on the module we want to transform.  Within our script we need to be able to identify what we want to transform, so click on the row settings button for the third section (the three lines in the teal colored box on the left). Next, go into the “Custom CSS” tab and give the row a “CSS ID:” of expanding-divYou can choose to cause a whole section or one module within a row to transform in this same way. Next up, let’s add our javascript. In this case, we want to monitor where on the page the viewer is located and apply a new class when the element moves into view.

Let’s step through the code.

first I’m wrapping everything in a jQuery statement that, not surprissingly, says not to fire the script until the DOM is all loaded. Otherwise, we would end up trying to target elements that aren’t there yet. The other thing this does is allow us to use the “$” with jQuery for the rest of the enclosed script. WordPress is normally in no-conflict mode, so we would have to write out jQuery each time.

This next set of lines identifies our two targets. The first sets the variable “$body” to be the entire body of the page. This might look a little confusing to you, but I often like to track my global variables that are available to multiple functions, by adding a “$” in front of them. So the first “$” says body is a global variable (and is optional), while the second is saying that we are using jQuery. The next line sets the variable “$theDiv” to be equal to the CSS ID we added earlier. As when writing styling rules, we prepend a “#” to the ID we defined to let jQuery know it is an ID, not a class.

We next set up our scroll listener. Basically, anything wrapped within the “{}” of this will be executed anytime the user scrolls.

As soon as the user scrolls, we want to set the “scroll” variable to where the top of the windo is located. Note, here we aren’t pre-pending the variable with a “$” because it is only used within this function. The next variable to set is the current position of our target. I chose to subtract 500px from its location as the place I wanted the animation to start. Basically, if you don’t subtact anything, the changes will trigger at the top of the screen. In this case, it will trigger 500px down from the top.

Lastly, we add in some conditional logic to add our new class if the item we want to change is at the right place in the viewport. Note, within the code module you need to wrap this whole thing in script tags – my code embedder doesn’t allow that here. Lastly, we need to add in our styling. I advocate always using a child theme and separate style sheet. 

The first set of styling sets up what we want the target to look like at the beginning. And then it sets the “transition” property. In this case, I’m saying that when there is a change in styling applied to this element it should change “all” the properties over a period of “.8” seconds and use the “ease” speed curve. If you only wanted one property to change with this duration you could specify it instead of all, for example “opacity” to make something appear. These animations can become quite complex when you specify a set of “keyframes”, but that is a topic for another tut! The “speed curve” portion of transitions takes several potential values:

ease specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear specifies a transition effect with the same speed from start to end
ease-in specifies a transition effect with a slow start
ease-out specifies a transition effect with a slow end
ease-in-out specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n)  lets you define your own values in a cubic-bezier function

You can play with this option to see what you like best. The last bit of styling specifies how we want that same element to look at the end of the transition. In this case we are increasing the scale using “transform”. When this class is added by javascript the element will grow from its initial 100% size to 110% over 0.8 seconds. So that is it for this tutorial. As usual, reach out in the comments or by e-mail if there is something you don’t understand or want expanded.

Metta!!

UPDATE! ****** Namaste!

So the wondrous SJ James who posts amazing tutorials and sells the ever popular Divi Switch plugin at his site, Divi Space (not an affiliate link) posted on the original inspiration for this tutorial. He proposed an alternative method that takes advantage of a library that Divi is already using to power its own animations. The waypoints.js library is compact and really easy to use. To use SJ’s method, as we did above, assign an idetifier to the section that you want to change scale on scroll. SJ is choosing to use a Class of “grow-section” instead of an ID as we did above. This allows you to tag multiple sections that this waypoint will impact. The styling that SJ uses is very similiar to what was discussed above, so we will delve into the javascript first.The jQuery of SJ’s original solution was as follows:

Starting at the top, we are telling jQuery not to run anything until the page is loaded up and enabling the use of a “$”.

Next, we set a waypoint function by identifying the section using the assigned class name (remember to prepend the period!). The offset specified at the end indicates where on the page we want our trigger. In this case, 50% of the way down the viewport. Note, you can assign negative values (will trigger above the viewport) and values over 100% (will trigger before section comes into viewport). We will go into why we would want to do this later.

This, hopefully obvious, line of code tells jQuery to add a new class of “grow-now” to the section with class “grow-section”. Note that we could target any element, not just the one that triggered the waypoint. When that class gets added there will be new styling added to the section that changes the scale, as above.

I didn’t discuss it out in the original tut, but as SJ pointed out on Facebook, this can all be added to Divi > Theme Options > Integrations > Add to head. Make sure your javascript is wrapped in <script></script> tags and your CSS in <style></style> tags.

Okay, to wrap up I just want to leave you with a slight modification to SJ’s original. I like it when certain animations reset. With the original code you would only get the animation one time as you scroll down the page. Waypoints.js gives us another additional variable we can pass into our function, “direction”. That way you can tell if the user is scrolling down or back up and trigger things accordingly.

I’m not going to go through the code except to say that the console.log statements are just for instruction so that you can see where the trigger is happening. Remove them if you use this on a live site.

Overall, using this basic pattern or the one described in the original post, you can make animations that are pretty complex and responsive to your user. Good Luck and please reach out if you need more explanation.

Metta!!

ScrollMagic Fun

Namaste!

Today I’m going to try and introduce you to a great javascript library called ScrollMagic.js. I say try because this library lets you do so many things based on the users scrolling that I’ll just be scratching the surface. For example, this library nicely incorporates the extensive Greensock animation library, which I won’t touch on at all today. 

This tutorial comes from a question on Facebook (as usual). In this case, somebody wanted to know if you could replicate one of Google’s sites advertising Inbox using Divi. On this site, as the user scrolls down the various sections have a header that pins into place when it gets to the top of the screen. As the user continues to scroll, the bottom portion of the section changes. After three-four changes, the header unpins and scrolls up until the next header is pinned. (If this was confusing, take a second to visit the site and you should understand.) There are two components that the person wanted to replicate. 

The first was scrolljacking. This is the practice of allowing the user to scroll just a little while the site automatically advances a whole section. I don’t really like this effect. As a user, it makes me feel like I’m out of control. So, for now, I’m not going to show how this is done.

The second is how to pin the headers and allow the rest of the site to continue scrolling. That is what I will actually show today. I’ve set up a demo for you to try out the end product of what we will be building today. It comes with the usual warning that I have the design sense of a color-blind parakeet on acid, plus I used images already loaded on the site instead of adding new ones to my media library.

First things first, you need to enqueue the ScrollMagic library. There are multiple ways to do this with Divi. However, that isn’t what this tutorial is about. You can use the CDN or add the libraries directly to your site. In my case, I decided to add them directly to my site so I downloaded the package located here. Once you get the library downloaded you need to unzip it and move the necessary files to your child theme folder. For my purposes, I moved the non-minified ScrollMagic.js and plugins folder to a folder named js on my site. (Most easily done with FTP.) Next, I modified my functions.php file in my child theme to enqueue each of the desired js files. 

Again, I’m not going to go through this in detail, but on a live production site I wouldn’t add in the debugging indicators and I would use the minified versions. Additionally, I would probably only load them on certain pages rather than on every non-admin page. If you need help on this step or a more detailed explanation, just reach out by e-mail or leave a comment.

Okay, now we have our scripts ready for use, let’s build our page. In the demo, I have two sections. I left the first section understyled to make it easier to see what is going on in the second section. My overall page layout is simple. A top full-width header followed by two sections, each with a text header and then four images. At the bottom is the all important code module. Let’s start with the first:

In the demo, the full-width header is blue with white text and the first header to pin is red. The actual fields don’t really matter. What is important are the CSS ID we give to the sections. Open the settings for the first section (three lines at the upper left in the dark blue area). Navigate to the Custom CSS tab and give the section an ID of “triggerOne” – the capitalization isn’t important, but it has to match what you use in the code we write later. I have the habit of writing descriptive IDs with each word after the first capitalized. If you pay attention to developing a consistent habit you have less coding problems! Next, open the settings for the header row that will be pinned. In this case the teal colored row at the top of the section. Give it a CSS ID of “pinOne”. Anything you put in this row will now be targeted for pinning. In this case I have a single text module, but it could be any number of modules. 

Okay, let’s jump to the Code module at the very bottom.  Here is where the next bit of ScrollMagic happens. I could just as easily put this in a separate enqueued script, but for ease of the tutorial I’m adding it on page. 

So, let’s start at the top. First, we need to wrap everything in a <script></script> set of tags if we are putting it in the code module – this can be left out if you are putting it in a separate file. Next, we have a piece of jQuery that tells the browser not to execute any code until everything is loaded. Finally, we get into the ScrollMagic specific code. First up is to establish a new controller. 

I’ve chosen to name mine “controller”, very imaginative. Typically, we only have to do this once per page. Next, we will add various scenes to this controller. For our first scene we want the header to move up to the top of the page and then pin in place until the last of the images have scrolled past.

So, the first thing we call is a new scene named “sceneOne” – you can call it anything you want. Next, we identify where on the page we want our controller to yell “action” ! In this case, at the top of the section that contains our header and images that we gave the CSS ID “triggerOne”. The next variable we pass to ScrollMagic is duration. This can be a whole number like 500, which would mean we want the scene to last until the user scrolled 500px. In this case, I’m using ‘320%’ – this means the scene will last for 3.2 screens of scrolling. Note, if setting the duration in pixels, you use a number without quotes, if you set a percentage it has to be in quotes. You will have to adjust this for every single scene depending on the amount of content. I really, really, really wish that you could specify an end point on the page with another ID, but I haven’t been able to find anything in the documentation. Next, we have the “triggerHook” variable. This marks where in the viewport you want the scene to happen. This is a number from 0 to 1 that represents a percentage down the viewport. So the very top is 0, the very bottom is 1, and the middle is 0.5.

Next, I’m chaining two additional actions onto this base scene. The first is a debuging variable causing the triggers to be labeled. On a production site you won’t want this to be turned on. It is a little hard to see here, but this is the scene trigger (in green) at the top of the red header of the first section about to hit the trigger. My labels are a little off, sorry – I took the screen shots when I had the site put together differently.  The next variable is ‘setPin’, this is the command that tells ScrollMagic that we want to pin the DOM element to the trigger for the duration of the scene. In this case we are pinning the row with the CSS ID of ‘pinOne’.  We are also passing another option to setPin telling ScrollMagic that we don’t want it to push everything else down on the page (you can play with this to see what it does). Finally (!!!) we add the scene to our controller with the ‘.addto’. 

If we now load up our demo, we can see that this causes the first header to pin at the top trigger and the pictures to keep scrolling. (note: I gave the header a high z-index to keep it on top.) When we hit the end of our duration the header becomes unpinned and moves with the scroll. The second section gets pinned in the same way as the first. For demonstration purposes, I moved the triggerHook down slightly so you can see it pin in a slightly different place.

Okay, on the Google page, things didn’t look much like this. The items appeared magically below the pinned headers. Let’s do that! To accomplish this we need a new command called ‘setClassToggle’. The header for the second section pins exactly like the first. We set up a second scene targeting our second section and header. Like the last, in our Divi layout, we give the section (dark blue) a CSS ID of ‘triggerTwo’ and the header row an ID or ‘pinTwo’. The code above shouldn’t need extra explanation. Because I’m styling each image separately, I broke them out into individual rows and I’m giving them CSS IDs of imageOne through imageFour in the module settings (the grey boxes). I’m also giving them a class of ‘hidden’. This allows for the images not to be visible until we want them to appear.

Now we write a scene for each image that pins it in place and adds on a class called appear, that will make it suddenly appear.

Overall, it should look familiar. We set up the scene with a trigger, a duration, a location within the viewport for the action to happen, and our pin. To add the class we use our new command, ‘setClassToggle’. For each of the subsequent images we add another, almost identical, scene making sure to change our IDs to be unique.

Last thing is our CSS. I’ve kept it simple, but you can fool around with adding in animation to fade the image in and out.

And that is it! Here is a link to the json file for the basic layout without images.From this, you have a good start on understanding ScrollMagic. The documentation is okay – not exactly beginner friendly. In future tutorials I’ll go through horizontal scrolling and starting with greensock. As usual, if you have any additional question, reach out to me through the comments or by e-mail. I’m glad to help.

Metta!!!