In our previous post, we discussed how useful learning html, php, javascript, and jQuery could be to your digital marketing career. In this post, we wanted to provide some examples showing just how true that can be.
Using jQuery’s library of code, we can create a shaking effect, pulsating effect, and typewriting effect that will draw the user’s attention to any element of our choosing. Let’s take a look…
Fundamentals of Our Code
Since it’s not as easy as it may seem, it’s important to know how to paste our code into our landing pages.
First, you’ll need to make sure that your landing page has a link to the latest version of jQuery which you can download and save for free. Just make sure to save it as a .js file.
Or you can create link to the url they provide at the bottom of their home page onto your landing page.
Next create and attach your external .css file. While you’re not required to use an external .css file, for the sake of keeping everything organized, I highly recommend it.
Lastly, make sure to wrap the functions I provide in a <script> tag and within your <head> tag. Without that, nothing will work.
If you’re not familiar with what I’m talking about, please watch the quick video above to make sure that you’re using these scripts properly.
Getting “Shaky” With jQuery
Maybe you have an important sense of urgency you’d like to convey to the user,but don’t want to risk drawing too much attention away from your headline or call to action. Perhaps you’d like to make your images move around a little when your users move their cursor across the page. The shake effect will help you do just that
Your Code
First, you’ll need to grab the shake code below. Once copied, you can just paste it in between your <script> tags as mentioned in the video. However, before you do that, take a second to look a the code and make sure you append the .shaking_text with whatever Class or ID you’d like the shake to affect.
$(document).ready(function(){
setInterval(function() {
$('.shaking_text').effect('shake',{
/*adjusts how many times the element will shake*/ times:4,
/*adjusts how far (in pixels) the element will shake*/ distance:10},
/*adjusts how fast the element will shake*/ 1000);
},
/*adjusts how frequently the element will shake*/ 5000);
});
Here is an example of what your element will look like when you’re finished editing everything.
Additional Modifications
We can also make the shaking element interactive by switching the setInterval() function with the .mouseover() function. This would cause your element to shake only when the user passed their mouse over the element. Add a .mouseout() function and you get an incredibly responsive effect for any element!
Bring Your Elements Alive With Pulse
Many people like to use the blink text decoration to draw attention to certain elements on their page. The only issue however, is that the incessant blinking can be less eye-catching and more annoying. A better alternative is to make your text pulsate with the .animate() effect.
function pulsate() {
var pulser = $(".pulsing_text");
if(!pulser.hasClass('stop pulsing')){
pulser.animate({opacity:
/*this adjustst how faded the element will get*/ 0.2},
/*this adjusts how quickly the element will fadeout*/1000, 'linear')
.animate({opacity: 1},
/*this adjusts how quickly the element will fade back in*/1000, 'linear', pulsate);
}else{
pulser.animate({opacity: 1},10)
.removeClass('stop pulsing');
}
}
$(document).ready(function() {
pulsate();
/*this will stop the text from pulsing when the user drags their cursor over the pulsing text/element */
$('a').mouseenter(function(){
$('.pulsing_text').addClass('stop pulsing');
});
});
Again, I’ve created some minor notes so that you can adjust the animation to your liking. Just like with the shaking code above, you’ll want to change the values of certain elements to reflect the elements you’d like to animate. So replace .pulsing_text with the class or id of your choosing. Here is an example of what your end result would look like.
Additional Modifications
Notice that with this code, once the user has moved their cursor over the pulsing element, the pulsing stops for that session. Although this is a great way for the user to inadvertently turn off the pulsing element (in the event that they find it annoying), if you’d like to allow the pulsing to continue even after the user has moved their cursor away, just delete everything between the pulsate(); and }); values.
Guide Your Users Across Your Text With Typewriter
This last effect is a great way to draw attention to certain text on your landing page and subtly engaging the users as they’re led across your copy. As the eye is attracted to movement, when certain events occur, you can make it so that your text appears as though it’s being typed in real time by someone.
var text = "";
var count = 0;
var maxspeed = 150;
$(document).ready(function(){
function type_what_you_want(your_text){
text = your_text;
type();
}
function character(start, end, text){
return text.substring(start, end);
}
function type() {
var random = Math.floor (Math.random() * maxspeed);
setTimeout (type, random);
$('.headline').append(character (count, count+1, text));
count++;
}
type_what_you_want (
"This Is A Headline That Grabs Attention!");
});
Once pasted in you’ll get something that looks like this. There really isn’t much modification with this one, since it’s pretty basic. You can adjust how quickly your text is written by adjusting the max speed variable (var: maxspeed=) at the top. Aside from that, you can replace the “This is A Headline[…]” text with whatever of your choosing.
Last Remarks
These are some pretty basic yet wonderfully effective jQuery effects you can use on your landing page. But keep in mind, these examples are just a tip of the iceberg. We wanted to provide these techniques to connect with our previous post on learning code to show people how useful it can be to brush up on your javascript, php, and html knowledge in relation to digital marketing. So explore and try out some of the other useful jQuery tools out there.
Nice writeup and some handy effects. Thanks for the share!
Thanks!