Project File

HD

If you didn’t watch “3DS Max : Vray Studio Setup Video Tutorial”. I recommend watching that first Here

DownloadDemo

If you haven’t seen the first movie on DSlider I recommend viewing that first: http://dimics.com/text/jquery-content-slider.

For more info on the javascript timer functions used in this video visit: http://w3schools.com/js/js_timing.asp.

DownloadDemo

Greetz,

Durgé

Download

HD

The other parts of this tutorial will be online soon, when they are there will be a link on this page.

Hope you like the tutorial and check out the other parts when they are online.

Greetz,

Durgé

Download Demo

Photoshop: 00:00
HTML: 06:00
CSS: 11:30
Javascript/jQuery: 20:00

You can make as much slides as you want since we’ve used variables to animate our slider. You can also change the width.

If you don’t want to dive into the code you can just include the javascript file into your html file and use the id and classes: #buttonPrev, #buttonNext, #slides, and .slide. Be sure to have the #slides positioned relative and the overflow of it’s parent to hidden.

Javascript/jQuery

I will give a short explanation of the javascript:
First we check if the document is ready with loading else it the javascript would slow down the loading time.

$(document).ready(function(){
});

Then we make our variables, we will get the number of slides, the width of one slide, make a variable to see on wich slide we are, and calculate the maximum we have to animate to:

var slides = $(".slide").length;
var slideWidth = $(".slide").outerWidth();
var currentSlide = 1;
var leftMax = slideWidth * -1 * slides + slideWidth;

Then we calclate and set the width of #slides so you can have more and less the 3 slides:

$("#slides").css({"width" : slides * slideWidth});

Then we make our fuctions that will animate the slider. We want to run them on a button click, we start with the previous button. When the button is clicked we”re going to check if the current slide is the first, if thats true we animate to te maximum (last slide). If the the current slide is not the first we wanna animate one back, so we will animate +800px since we animate negative. In both cases we want to update our currentSlide variable so we now on wich slide we are:

$("#buttonPrev").click(function(){
if (currentSlide == 1)
{
$("#slides").animate({left : + leftMax + "px"}, 600);
currentSlide = slides;
}
else
{
$("#slides").animate({left : "+=" + slideWidth + "px"}, 600);
currentSlide = currentSlide - 1;
};
});

For the next button we need to check if the current slide is the last one, in that case we want to animate to te first, to 0px. If the currentslide is not the last one we want to animate one forward so we substract 800px. And again in both cases update the currentSlide variable.

$("#buttonNext").click(function(){
 if (currentSlide == slides)
 {
 $("#slides").animate({left : "0px"}, 600);
 currentSlide = 1;
 }
 else
 {
 $("#slides").animate({left : "-=" + slideWidth + "px"}, 600);
 currentSlide = currentSlide + 1;
 };
 });

I have commented the files, so download the source files and take a look at them.

Download Demo

I hope you like the tutorial, and if you have questions just post a comment.

Greetz,

Durgé

We wil be looking at some features of the plugin “Form” and how to create that nice dust transition in After Effects. The Dimics intro looks more like dust. That’s is because I worked with a project of 1280×720 (720p). That  why it’s looks nicer than I showed  in the tutorial.

Ofcourse motion blur increases the render time.

On the Dimics intro I render 15 minutes with mostion blur and 2 minutes without motion blur. But motion blur let’s it look so much beter so I highly recommend using that. So I hoped you enjoyed this tutorial and learnt something that you can use on you’r own projects.

*In de “Build Wipe” I made the last  transition keyframe(the 0% one) on the 6 sec that must be the 4 sec.*

Greetz,

Max

Click for HD

You can of course change the color of the skylight en the intensity of the target direct light. Or maybe at a vray sky to the environment. So i hope enjoyed andl earned somthing from this tutorial. And use it on you’r own personal projects.

Greetz,

Max

Click for HD