Photo (c) Iker Urteaga

Slide Div as You Scroll Down

Have you seen parts of the website slide in from the right, left or bottom? And do you also like to have one in your website?

Well, if you’re gonna ask me, I’d really love that. It feels interactive. My website will not be boring.

Just as I was browsing through Google, I found this article in CSS-tricks that does what I really want to happen in my website. Click here to see the original article.

So how does it work?

Are you ready? Are your divs ready?

Let’s start!

1. Markup your div or your section.

I’ll make a div with a class of container. And another div with a class of module inside this container div. I’m not going to put anything.






<div class="container">

<div class="module">

</div

</div>





2. Style it using CSS.

I’ll give it a width and height of 200px. I’ll make its background color black.


div.module {

width: 200px;

height: 200px;

background-color: black;

}

Let’s just make the parent container as it is.

3. Get jQuery CDN or download it.

This is a jQuery CDN from Google Hosted Libraries.


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.1.0%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Copy and paste this just before your script.

Or you can download jQuery here. Make sure to reference this before your script.

4. Let’s add our script.

So, basically, I used a jQuery plugin that returns a boolean value (true or false) if that particular div is visible in the view port. If you don’t want to use this, you can make your own that does the same thing.


(function($) {

/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
* @desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/

$.fn.visible = function(partial) {

var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;

return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

};

})(jQuery);

Then add this one.


$(window).scroll(function(event) {

$(".module").each(function(e, module) {
var module = $(module);
if (module.visible(true)) {
module.addClass("slideUp");
}
});
});

This scroll event happens when you scroll down the page. The code $(“.module”) gets all the elements with the class of module. And then, each element with this particular class will perform the function.

Each div with a class of module will be placed inside a variable named module. And if this module is visible to the view port, then we’re going to add the class, slideUp.

So let’s go back to our CSS!

5. Style our animation.

This class will transform the particular element from 150px to its destined position. More on animations and transitions in my future blog posts.

For awhile, just copy this and paste it. Or you can search about it in Google.


.slideUp {
transform: translateY(150px);
animation: slideUp 2s ease forwards;
}

@keyframes slideUp {
to { transform: translateY(0); }
}

So, there you go! You’ve just made your div slide up.

Still, I recommend customizing and experimenting it to achieve your desired result.

Good luck!

 

Love,
Eirin

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s