CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
user3275104
user3275104

Reputation:

Fading images / Smooth website use

Just a quick question, as much as asking for the possibilities when working with HTML as asking for a specific code.

I've seen websites with sliders where clickable images fade in as you enter the website. I tried and search for an answer but wasn't sure about what to search for, so I hope you understand what I mean.

I'm creating a "enter"-page for my website, which I want to contain 3 clickable images, with the text "Welcome blabla on top with Logo below. Below the logo I want my 3 images, but instead of just getting the images smashed in the face I would like to make a smooth transition where they fade in when entering the website, aswell as I want the possibility to click on arrows in the sides later on if I choose to expand and get more images on the enter page.

I hope you get the idea, else ask, then I'll try to explain a little better.

Thank you :)

Code for fade:

CSS:

img{
    opacity:0;
    font-size:2em;
    font-weight:bolder;
    text-align:center;
    -webkit-transition: all 2s ease;
}
.animate{
    color:red;
    opacity:1;
    -webkit-transform:scale(1.2);
}

HTML:

<img src="welcome.png" />

JavaScript:

 <script>
$(document).ready(function(){
    $('img').addClass('animate');
});
</script>

Upvotes: 1

Views: 642

Answers (4)

rockStar
rockStar

Reputation: 1296

Using transition and JQuery to animate things when page loads.

Simple example FIDDLE

<script type="text/javascript">
    $(document).ready(function(){
        $('div').addClass('animate');
    });
</script>

CSS

.animate{
    color:red;
    opacity:1;
    -webkit-transform:scale(1.2);
}

Update:

Fiddle with image example

Upvotes: 0

Mohaideen
Mohaideen

Reputation: 1

When you entering your website make fadein effect or apply transition effect(Easing functions) to particular images that is applied in specific class.

Upvotes: 0

LJSilver
LJSilver

Reputation: 603

I think you'll need some javascript!

first I think it is better if you pre-load such images by using javascript or css or wathever. This is because some delay in loading images can ruin you fade effect.

then you must set up an animation.

You can define a motion low for your alpha property (trasparency) for example, imagine the variable alpha to be the trasparency level of your image (alpha is between 0 and 100 in this example)

then you want alpha as a function of time, lets say alpha = alpha(t)
for instance if you want a cubic evolution that goes from 0 to 100 in T seconds you can define 

alpha(t) = 100*(t/T)^3

Once you defined such motion low you need to define the time.
Javascript let you set some periodic callback by using setInterval function (or equivalent ones).
Such functions call a custom method every X milliseconds, where X is arbitrary!

so you can discretize your alpha motion low and use those callback to update the alpha value.

so you can update alpha every X milliseconds, so you have alpha = alpha(X).
in pratice you can define a function "update_alpha()" that is called by the setInterval every X milliseconds.
Let N be a global variable initializated to zero (that will count the number of periods) the in cubic example, in pseudo-code "update_alpha" can have the following form: 

function update_alpha(){
    N++;
    alpha = 100*(N*X*1000/T)^3;
    if(alpha>=100) alpha=100 and remove_callback;
}

(where there is a *1000 multiplication because X is in milliseconds)

In general if you have alpha = f(t) you can simply assume t=N*X and so f(t) -> f(N) and you can simply use use this example.

another way is to use an incremental system. In this case you can express alpha(t) as the system: 

alpha(N) = alpha(N-1) + u(N)

This is useful when u is not a function of N. For example if you want the alpha to evolve in a linear way (alpha(t) = a*t or alpha(N) = a*N) (proportional to time) then you can simply write

alpha(N) = a*(N-1) + a

and in this case you can forget bout N by defining the update_alpha function as:

function update_alpha(){
    alpha += a;
    if(alpha>=100) alpha=100 and remove_callback;
}

So recapitulating:

  • preload images
  • set up time by javascript setInterval
  • define the update function

Upvotes: 0

Albzi
Albzi

Reputation: 15609

Use 

$(document).ready(function(){
    //code here
});

To get something to run as soon as the page loads. For example:

$(document).ready(function(){
    $('#image-one').fadeIn();
});

Upvotes: 1

Related Questions