How to make the content of the DIV on the page that I'm going to fade out?

I'm trying to figure out how to make the content of a DIV on the page I'm clicking away from fade. I know how to do the Next page load with a fade in. So I'm half there (I guess).  WiX has many designs which use for this purpose. Here is a link to an example:

http://www.wix.com/website-template/view/HTML/633?originUrl=http%3A%2f%2Fwww.wix.com & numbe r page = 1 & = 1 position-in-page

This is the code I use to make a DIV load with a melted in:

I have add this CSS code in the div I want to apply the fade in effect to:

Animation: fadein 2s;

-moz-animation: fadein 2s; / * Firefox * /.

-webkit-animation: fadein 2s; / * Safari and Chrome * /.

-o - animation: fadein 2s; / * Opera * /.

And I add this additional code to the CSS stylesheet:

}

fadein {} @keyframes

of {}

opacity: 0;

}

to {}

opacity: 1;

}

}

@-moz - keyframes fadein {/ * Firefox * /}

of {}

opacity: 0;

}

to {}

opacity: 1;

}

}

@-webkit - keyframes fadein {/ * Safari and Chrome * /}

of {}

opacity: 0;

}

to {}

opacity: 1;

}

}

@-o - keyframes fadein {/ * opera * /}

of {}

opacity: 0;

}

to {}

opacity: 1;

}

}

Tutorial with demo & downloadable files here: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

Tags: Dreamweaver

Similar Questions

  • How to make the plugin that works in the background?

    Hi, I need to make the plugin working in parallel in the background thread. It should start when Photoshop starts and stops when closing Photoshop. I think that the plugin type should I choose is "Automation" but these plugins are executed only when the user calls the plugin in the menu. How to make the plugin that runs when photoshop works without the need to invoke it manually? I don't want this plugin to be visible in any menu. This plugin is designed to work with the extension of the CEP.

    I ended up making invisible CEP extension that performs background tasks in the timer event handler:
    CEP 5 Extension HTML Cookbook for CC 2014 · Adobe-CEP/CEP-resources Wiki · GitHub

  • How to count the page that is provided on page element

    How to count the page that is provided on page element

    Hi durgeshj41842015,

    the kDocBoss has an IPageList interface with GetPageCount() function.

    Markus

  • How to make the icon that indicates the caps caps disappear from windows 7?

    Hello world
    I am new to windows 7 but I am very happy with it, is great. However... There is something that I find very annoying and would like to settle as soon as possible a solution would be very welcome.
    I'm a trigger easy person when it comes to using earplugs I love and does not hesitate to she and I certainly don't want to turn them off, but I want really is to make the icon that pops up saying on the Caps hats disappear; It stops typing you for a second or two, but it is not that I don't want this crap appearing all the time, I find it very boring and does not prevent my goal when studying... HOW CAN I RESOLVE THIS ISSUE?

    HEY... Thank you.
    Someone told me Quickset but could not find it in my pc, guess there is a chance, I don't know where to look, but start certainly did not show it. or maybe it is not yet in the system.
    I contacted Samsung support by electronic mail and gave them as much detail of the pc as possible, except the number of pc, because I didn't have the box again but all similarly subsequently found in tiny and the same silver color on bottom of laptop PC. I was not thinking straight at the time to think and look at the bottom of the pc.
    What they did was to send me a link to a forum and say that it wasn't anything to do with them or others... not very helpful at all, but will contact them again with all the details.
    I'll deal with them and see if they like this for me.
    Thanks :)

  • How to find the page that contains the downloads?

    I am connected to my account valid creative cloud. All I want to do is go to the page that allows me to make downloads of Acrobat, Photoshop, etc..  For the life of me I can't find the page!  Help, please.

    Log on to https://creative.adobe.com/apps

  • How to make the page numbers see the v.5.6.2 Pages automatically through the document?

    MacOs 10.11.4, v5.6.2 Pages.

    How can I make Pages automatically page numbers?  I want to be able to scroll through a multipage created from a blank template document & print specific pages.  Have sought and found answers on paging, but no address my question.  JV

    Pages v5.6.2 dislike doing anything automatically. Page numbers are shown to you when you scroll through a document:

    1. Associated with each thumbnail in this display mode
    2. By inserting the page number in the header or the footer

    That's all for v5.6.2 Pages. Whenever you want to print a specific page, you will need to check the Pages: of the _____ to the _____ in the OS X Print Panel and specify the same value for each entry field to print the page in question. There is no automatic printing of selected pages in the selection of this Panel paper handling.

    Pages ' 09 v4.3 would show the current page number on a lower status bar, with or without page numbers inserted in the header of document/footers. This view could be clicked, and it would change to a text entry where we could fix the jump to page number.

  • How to make the Page smaller to see the toolbar on bottom

    The display of each page is if full that I can't see the 'Start' and the toolbar at the bottom of the page. Also I am not able to use the cursor to move.  Also, when I download an attachment, it does not entirely down on the page but to sit upstairs and I have to press the middle button to download.

    HOW CAN I FIX THIS?

    srabb

    The display of each page is if full that I can't see the 'Start' and the toolbar at the bottom of the page. Also I am not able to use the cursor to move.  Also, when I download an attachment, it does not entirely down on the page but to sit upstairs and I have to press the middle button to download.

    HOW CAN I FIX THIS?

    srabb

    To correct the full page, press F11 to toggle. This can have an impact on your other question.

  • My monitor is 17 '' amd now my pages are bigger than my screen and I don't know how to make the page smaller to fit on my screen. Help, please.

    my monitor 17 "is smaller than all my pages. The TPO and low headers are not visible. Once I put the pointer over the edge of the image, and then down the toolbar. Help, please. Also. I get that thin lettering and drop thick as you can see. As if they were a beat on the page re: the ink.

    Hi the Minister m annettegraham fast,

    What version of Windows you have installed? Follow the steps in this document to set the resolution of the screen.

    Let is know if this helps.

  • How to change the page that appears when I open the page new tab using the sign + on the tab bar?

    every time I open a new tab using + sign on the tabs bar, a Web site appears, which I was not aware. I want just the old rear setting. It must be my fault of friends. Help, please.

    You can do this on the topic: config page by resetting the pref browser.newtab.url via the context menu.

    See this article on the page tab (topic: newtab):

  • How to identify the page that is the master page

    I'm having object page, should be identified if its master page or not?

    If the parent of the page is masterSread, then this is a template.

  • How to make the paths that will be white paper?

    I need to make a few trails - straight lines, really - a file in Illustrator which will be 'white paper' when printed. Work in CMYK mode. In other words, during printing, there will be no points at all in these spaces. I can do this by setting the padding to zero and the white line? Or should I do something else to signify "this space is empty?

    Mary,

    I can do this by setting the padding to zero and the white line?

    You can do this, and it would be an obvious way. White, in connection with printing (normal), means no ink.

  • How to make the page less than 26mm format?

    Trying to create labels for a printer of labels with 14 mm wide labels. Creating labels using Corel Draw X 5. Printing with Acrobat XI and the creation of the custom page size, e.g. 14mm width and 80mm in height. The added size is not listed in the drop-down list. Any format below 26 mm in all directions is not displayed. Also tried Microsoft Word.

    So instead I tried Foxit and the Foxit printer does not have this problem. It shows even formats I've already added (but can not see) using Acrobat XI printer.

    I reported this as a bug to Adobe.

    I installed the XI version since I was actually using Acrobat version 9. Thought years of development would have fixed this, but not... or is it just my computer that has this problem?

    You cannot export to PDF directly from Corel Draw? I suppose that you have set up a page size of 14 mm x 80 mm.

  • How to save the pages that I open in a single window as a tab group?

    In Internet Explorer, I am able to "Add current tabs to Favorites" for all my pages are saved as a tab group. How do I do this in Firefox?

    Hello

    You can try to right click on a tab and a bookmark all tabs.

  • How to make the bottom of the page shorter?

    Ok...

    The homepage on my website is too long, and I'm doing shorter.

    How to make the page shorter and cut some of this big empty space that I don't need?

    I went to the master page to move the footer, but it did not work...

    Any suggestions?   site: www.oilgear.us

    Hello

    I suggest you delete "sticky footer" page master and that should fix the problem for you. "

    You must follow the steps below.

    1. make sure that areas of text 'Fluid Power Solution for today' and 'www.oilgear.us' still 'Footer'.

    2. go to the Page Master > Page > Page Properties > Layout > uncheck "Sticky footer".

    2. once fact preview the site and you would observe that the page height is less.

    Concerning

    Vivek

  • How to make the metadata field existing in the form page to customize

    Hi all

    I want to add some fields in my form. I managed to create the new field, and then make a settlement and put it in the profiles of school boards. My form has display fields, I just created. My questions are:

    1. how I want to add the existing field such as title, author and security group (the box highlighted in red according to the attachment) in my form?

    2. I noticed that when I create the new field, it will be added in standard integration page. There are fields to check standard on the page become more. How can ensure me that the fields that I created was not display in standard integration?

    I noticed the global and non-global rules but not enough on this clear. Could someone help me or provide some steps for me with regard to my two questions?

    Here, I have attached my form page and standard check in the page that I want to put in my form page.

    content check in red box.PNG

    arbs page.PNG

    Thank you.

    If you ask about control in the profile of Content Server native interface user then: -.

    If you want to add the title, author, group security (system default metadata) as well as your metadata created in your check-in form.

    then add these fields in your rule. The rule is the same that you have created for your profile (ARA).

    For your second question: -.

    Whatever profiles, all metadata added in the content server, are displayed in the Standard profile balance.

    You can hide the standard profile, if it's not necessary.

Maybe you are looking for